Notification

Overview

Notification is a notification component mounted globally on the basis of NotificationLegacy, and accompanied by animation effects.

Note: this component is added 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 } from "react-native";
 import { Button, Notification } from "tuya-panel-kit";
 
export default class NotificationScene extends Component {
  state = {
    visible: false,
  };
 
 componentWillUpdate(nextProps, nextState) {
    if (nextState.visible) {
      Notification.show({
        message: "Warning notification",
        onClose: this._handleClose,
        theme: {
          successIcon: "red",
          errorIcon: "yellow",
          warningIcon: "black",
        },
      });
    } else {
      Notification.hide();
    }
  }
 
 _handleClose = () => {
    this.setState({ visible: false });
  };
 
 render() {
    return (
      <View style={{ flex: 1 }}>
        {! this.state.visible && (
          <Button
            style={{ marginTop: 12 }}
            text="Show Notification"
            textStyle={{ marginTop: 12, fontSize: 24, color: "#000" }}
            onPress={() => this.setState({ visible: true })}
          />
        )}
      </View>
    );
  }
 }

API

style

Container style.

Type	Required	Default value
ViewPropTypes.style	No	null

icon

Custom IconPath.

Type	Required	Default value
string	No	null

variant

Notification bar type.

Type	Required	Default value
'success' | 'warning' | 'error'	No	warning

enableClose

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

Type	Required	Default value
boolean	No	true

autoCloseTime

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

Type	Required	Default value
number	No	1500

message

Notification text.

Type	Required	Default value
string	No	None

onClose

Callback when the close button is clicked.

Type	Required	Default value
() => void	No	null

onPress

Callback of clicking all areas.

Type	Required	Default value
() => void	No	null

imageSource

Image resources.

Type	Required	Default value
number	No	null

imageStyle

Image style.

Type	Required	Default value
ViewPropTypes.style	No	null

backIconSize

Background icon size of the text.

Type	Required	Default value
number	No	24

backIconCenter

Whether the background icon of the text is vertically centered.

Type	Required	Default value
bool	No	false

children

Child element.

Type	Required	Default value
any	No	null

theme

The theme configuration of the notification bar.

Type	Required	Default value
INotificationTheme	No	{}

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