NotificationLegacy

Overview

NotificationLegacy shows you three types of notifications, including success, warning and error.

Notice: the original name of the component was Notification, and it was renamed NotificationLegacy in the @2.0.0-rc.2 version.

Code demo

Note: for more information, see Demo.

Warning notification

import React, { Component } from "react";
 import { View, StyleSheet } from "react-native";
 import { Button, TopBar, NotificationLegacy } from "tuya-panel-kit";
 
export default class NotificationScene extends Component {
  state = {
    visible: true,
  };
 
 _handleClose = () => {
    this.setState({ visible: false });
  };
 
 render() {
    return (
      <View style={styles.container}>
        {this.state.visible && (
          <NotificationLegacy
            style={styles.notification}
            message="I am Notification"
            onClose={this._handleClose}
          />
        )}
        {! this.state.visible && (
          <Button
            text="Show Notification"
            textStyle={{ marginTop: 12, fontSize: 24, color: "#000" }}
            onPress={() => this.setState({ visible: true })}
          />
        )}
      </View>
    );
  }
 }
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
 
 notification: {
    position: "absolute",
    top: -TopBar.height,
    left: 0,
    right: 0,
  },
 });

API

style

Container style.

icon

Custom IconPath.

variant

Notification bar type.

enableClose

Whether to show the close button. If it is false, the close button will be hidden and the onClose callback will be triggered automatically after autoCloseTime.

autoCloseTime

The time when the notification bar is automatically closed. It only takes effect when enableClose is false.

message

Notification text.

onClose

Callback when the close button is clicked.

onPress

Note: this property is added in the @2.0.0-rc.2 version.

Callback of clicking all areas.

children

Child element.

theme

The theme configuration of the notification bar.

interface INotificationTheme {
  background: ColorPropType;
  text: ColorPropType;
  successIcon: ColorPropType;
  noticeIcon: ColorPropType;
  errorIcon: ColorPropType;
  closeIcon: ColorPropType;
  radius: number;
 }