English
English
简体中文
Contact Us
Register
Log In
layoutIndex

NotificationLegacy

Last Updated on : 2022-03-01 07:55:03download

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.

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 and 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 null

onClose

Callback when the close button is clicked.

Type Required Default value
() => void No null

onPress

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

Callback of clicking all areas.

Type Required Default value
() => void No null

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; }