ToastView

Overview

ToastView is used to notify the user without interrupting the current operation.

Code demo

Note: for more information, see Demo.

Basic ToastView

import React from "react";
 import { View, TouchableOpacity } from "react-native";
 import { Toast } from "tuya-panel-kit";
 
export default class DatePickerDemo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }
  render() {
    return (
      <View style={styles.wrApper}>
        <View style={{ flex: 1, justifyContent: "center" }}>
          <Toast
            show={this.state.show}
            text="I'm Iron Man! ! !" 
           onFinish={() => this.setState({ show: false })}
          />
          <TouchableOpacity
            style={styles.wrApperStyle}
            onPress={() => this.setState({ show: true })}
          >
            <Text style={{ textAlign: "center" }}>Click Me! </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
 }

ToastView - Success

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

import React from "react";
 import { TouchableOpacity, View, StyleSheet } from "react-native";
 import { Toast, TYText } from "tuya-panel-kit";
 
class ToastSuccessScene extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "flex-start" }}>
        <Toast.Success
          show={this.state.show}
          onFinish={() => this.setState({ show: false })}
        />
        <TouchableOpacity
          style={styles.wrapperStyle}
          onPress={() => this.setState({ show: true })}
        >
          <TYText style={{ textAlign: "center" }}>Click Me! </TYText>
        </TouchableOpacity>
      </View>
    );
  }
 }
 
const styles = StyleSheet.create({
  wrapperStyle: {
    height: 44,
    backgroundColor: "red",
    justifyContent: "center",
    marginTop: 88,
  },
 });
 
export default ToastSuccessScene;

Interaction demo

ToastView - Error

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

import React from "react";
 import { TouchableOpacity, View, StyleSheet } from "react-native";
 import { Toast, TYText } from "tuya-panel-kit";
 
class ToastErrorScene extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "flex-start" }}>
        <Toast.Error
          show={this.state.show}
          onFinish={() => this.setState({ show: false })}
        />
        <TouchableOpacity
          style={styles.wrapperStyle}
          onPress={() => this.setState({ show: true })}
        >
          <TYText style={{ textAlign: "center" }}>Click Me! </TYText>
        </TouchableOpacity>
      </View>
    );
  }
 }
 
const styles = StyleSheet.create({
  wrapperStyle: {
    height: 44,
    backgroundColor: "red",
    justifyContent: "center",
    marginTop: 88,
  },
 });
 
export default ToastErrorScene;

ToastView - Warning

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

import React from "react";
 import { TouchableOpacity, View, StyleSheet } from "react-native";
 import { Toast, TYText } from "tuya-panel-kit";
 
class ToastWarningScene extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "flex-start" }}>
        <Toast.Warning
          show={this.state.show}
          onFinish={() => this.setState({ show: false })}
        />
        <TouchableOpacity
          style={styles.wrapperStyle}
          onPress={() => this.setState({ show: true })}
        >
          <TYText style={{ textAlign: "center" }}>Click Me! </TYText>
        </TouchableOpacity>
      </View>
    );
  }
 }
 
const styles = StyleSheet.create({
  wrapperStyle: {
    height: 44,
    backgroundColor: "red",
    justifyContent: "center",
    marginTop: 88,
  },
 });
 
export default ToastWarningScene;

ToastView - Loading

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

import React from "react";
 import { TouchableOpacity, View, StyleSheet } from "react-native";
 import { Toast, TYText } from "tuya-panel-kit";
 
class ToastLoadingScene extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "flex-start" }}>
        <Toast.Loading
          show={this.state.show}
          onFinish={() => this.setState({ show: false })}
        />
        <TouchableOpacity
          style={styles.wrapperStyle}
          onPress={() => this.setState({ show: true })}
        >
          <TYText style={{ textAlign: "center" }}>Click Me! </TYText>
        </TouchableOpacity>
      </View>
    );
  }
 }
 
const styles = StyleSheet.create({
  wrapperStyle: {
    height: 44,
    backgroundColor: "red",
    justifyContent: "center",
    marginTop: 88,
  },
 });
 
export default ToastLoadingScene;

API – basic

text

The text of the prompt.

Type	Required
string	No

show

Whether it is visible or not.

Type	Required
bool	Yes

onFinish

Callbacks that are about to disappear.

Type	Required
() => void	Yes

showPosition

The display position of the prompt:

• top: the prompt is displayed at the top.
• bottom: the prompt is displayed at the bottom.
• center: the prompt is displayed in the center.

Type	Required	Default value
enum: top, bottom, center	No	bottom

style

The style of the prompt.

Type	Required	Default value
ViewPropTypes.style	No	null

contentStyle

The style of the prompt content.

Type	Required	Default value
ViewPropTypes.style	No	null

textStyle

The style of the prompt text.

Type	Required	Default value
Text.propTypes.style	No	null

image

The image of the prompt.

Type	Required	Default value
number	No	null

imageStyle

The style of the prompt image.

Type	Required	Default value
Image.propTypes.style	No	null

children

The content of the custom prompt.

Type	Required	Default value
any	No	null

API - Success, Error, and Warning

contentStyle

The style of the prompt content.

Type	Required	Default value
ViewPropTypes.style	No	null

showPosition

The display position of the prompt:

• top: the prompt is displayed at the top.
• bottom: the prompt is displayed at the bottom.
• center: the prompt is displayed in the center.

Type	Required	Default value
enum: top, bottom, center	No	bottom

color

The color of the prompt image.

Type	Required	Default value
string	No	#fff

text

The text of the prompt.

Type	Required	Default value
string	No	The text of success.

size

The size of the image.

Type	Required	Default value
number	No	cx(40)

d

The path of the image.

Type	Required	Default value
string	No	iconfont.correct

iconfontStyle

The style of the prompt image.

Type	Required	Default value
Image.propTypes.style	No	{ width: cx(120), height: cx(120), backgroundColor: 'rgba(0,0,0,.7)', borderRadius: cx(8), }

API – Loading

contentStyle

The style of the prompt content.

Type	Required	Default value
ViewPropTypes.style	No	null

showPosition

The display position of the prompt:

• top: the prompt is displayed at the top.
• bottom: the prompt is displayed at the bottom.
• center: the prompt is displayed in the center.

Type	Required	Default value
enum: top, bottom, center	No	bottom

size

The size of the prompt image.

Type	Required	Default value
number	No	cx(40)

color

The color of the image.

Type	Required	Default value
string	No	#fff

loading

Whether the image rotates during loading.

Type	Required	Default value
boolean	No	true

strokeWidth

The stroke width of the image.

Type	Required	Default value
number	No	4

loadingStyle

The style of the loading image.

Type	Required	Default value
ViewPropTypes.style	No	null

loadingBackgroundColor

The background color of the loading page.

Type	Required	Default value
ColorPropType	No	rgba(255,255,255,.1)