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

Notification

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

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