Modal

Last Updated on : 2024-06-05 03:14:33download

Overview

Modal is a mask layer.

Code demo

Note: for more information, see Demo.

Basic use

import React from "react"; import { View, Text, TouchableOpacity, StyleSheet } from "react-native"; import { Modal } from "tuya-panel-kit"; import ManyModal from "./manyModal"; export default class CustomModalScene extends React.Component { constructor(props) { super(props); this.state = { modalVisible: false, modalText: "I am a Portal111! ! !" , }; } changeText = (string) => { this.setState({ modalText: string || "Ho~Ho~Ho!" , }); }; render() { return ( <View style={{ flex: 1 }}> <TouchableOpacity onPress={() => this.setState({ modalVisible: true })} style={styles.buttonStyle} > <Text style={styles.textStyle}>Click Me! </Text> </TouchableOpacity> <Modal visible={this.state.modalVisible} onMaskPress={() => this.setState({ modalVisible: false })} > <Text style={styles.textStyle}>{this.state.modalText}</Text> <TouchableOpacity onPress={() => this.setState({ modalText: "Ho~Ho~Ho!" })} style={styles.buttonStyle} > <Text style={styles.textStyle}>Change Text! </Text> </TouchableOpacity> </Modal> <ManyModal text={this.state.modalText} changeText={this.changeText} /> </View> ); } } const styles = StyleSheet.create({ buttonStyle: { height: 44, backgroundColor: "#fff", justifyContent: "center", marginTop: 20, }, textStyle: { color: "#333", textAlign: "center", backgroundColor: "#fff", }, });

Modal.List

import React from "react"; import { View, Text, TouchableOpacity, StyleSheet } from "react-native"; import { Modal } from "tuya-panel-kit"; export default class ListModalScene extends React.Component { constructor(props) { super(props); this.state = { value: ["1"], visible: false, }; } closeModal = () => { this.setState({ visible: false }); }; handleConfirm = (value) => { this.setState({ visible: false, value }); }; render() { const dataSource = [ { key: "1", title: "1", value: "1", }, { key: "2", title: "2", value: "2", }, ]; return ( <View style={{ flex: 1 }}> <TouchableOpacity onPress={() => this.setState({ visible: true })} style={styles.buttonStyle} > <Text style={styles.textStyle}>Click Me</Text> </TouchableOpacity> <Modal.List visible={this.state.visible} dataSource={dataSource} type="switch" value={this.state.value} onMaskPress={this.closeModal} onCancel={this.closeModal} // onSelect={this.onConfirm} onConfirm={this.handleConfirm} /> </View> ); } } const styles = StyleSheet.create({ buttonStyle: { height: 44, backgroundColor: "#fff", justifyContent: "center", marginTop: 20, }, textStyle: { color: "#333", textAlign: "center", backgroundColor: "#fff", }, });

Modal.Picker

import React from "react"; import { View, Text, TouchableOpacity, StyleSheet } from "react-native"; import { Modal } from "tuya-panel-kit"; export default class PickerModalScene extends React.Component { constructor(props) { super(props); this.state = { value: "1", visible: false, }; } closeModal = () => { this.setState({ visible: false }); }; handleConfirm = (value) => { this.setState({ visible: false, value }); }; render() { const dataSource = [ { label: "1", value: "1", }, { label: "2", value: "2", }, ]; return ( <View style={{ flex: 1 }}> <TouchableOpacity onPress={() => this.setState({ visible: true })} style={styles.buttonStyle} > <Text style={styles.textStyle}>Click Me</Text> </TouchableOpacity> <Modal.Picker visible={this.state.visible} dataSource={dataSource} value={this.state.value} label="haha" onMaskPress={this.closeModal} onCancel={this.closeModal} onConfirm={this.handleConfirm} onValueChange={(value) => console.log("onValueChange", value)} /> </View> ); } } const styles = StyleSheet.create({ buttonStyle: { height: 44, backgroundColor: "#fff", justifyContent: "center", marginTop: 20, }, textStyle: { color: "#333", textAlign: "center", backgroundColor: "#fff", }, });

Modal.Countdown

import React from "react"; import { View, Text, TouchableOpacity, StyleSheet } from "react-native"; import { Modal } from "tuya-panel-kit"; export default class CountdownModalScene extends React.Component { constructor(props) { super(props); this.state = { countdown: 0, visible: false, }; } closeModal = () => { this.setState({ visible: false }); }; handleConfirm = (data) => { this.setState({ countdown: data.hour * 60 + data.minute }); this.setState({ visible: false }); }; render() { return ( <View style={{ flex: 1 }}> <TouchableOpacity onPress={() => this.setState({ visible: true })} style={styles.buttonStyle} > <Text style={styles.textStyle}>Click Me</Text> </TouchableOpacity> <Modal.Countdown visible={this.state.visible} value={this.state.countdown} onMaskPress={this.closeModal} onValueChange={this.handleValueChange} onCancel={this.closeModal} onConfirm={this.handleConfirm} title="Countdown" cancelText="Cancel" confirmText="Confirm" hourText="Hour" minuteText="Minute" /> </View> ); } } const styles = StyleSheet.create({ buttonStyle: { height: 44, backgroundColor: "#fff", justifyContent: "center", marginTop: 20, }, textStyle: { color: "#333", textAlign: "center", backgroundColor: "#fff", }, });

Modal.DatePicker

import React from "react"; import { View, Text, TouchableOpacity, StyleSheet } from "react-native"; import { Modal } from "tuya-panel-kit"; export default class DatePickerModalScene extends React.Component { constructor(props) { super(props); this.state = { date: new Date(), visible: false, }; } closeModal = () => { this.setState({ visible: false }); }; handleConfirm = (date) => { this.setState({ date }); this.setState({ visible: false }); }; render() { return ( <View style={{ flex: 1 }}> <TouchableOpacity onPress={() => this.setState({ visible: true })} style={styles.buttonStyle} > <Text style={styles.textStyle}>Click Me</Text> </TouchableOpacity> <Modal.DatePicker visible={this.state.visible} onMaskPress={this.closeModal} onCancel={this.closeModal} onConfirm={this.handleConfirm} title="Birthday" cancelText="Cancel" confirmText="Confirm" hourText="Hour" minuteText="Minute" date={this.state.date} mode="datetime" minDate={new Date(1918, 0, 1, 0, 0, 0)} maxDate={new Date(2018, 11, 31, 23, 59, 59)} /> </View> ); } } const styles = StyleSheet.create({ buttonStyle: { height: 44, backgroundColor: "#fff", justifyContent: "center", marginTop: 20, }, textStyle: { color: "#333", textAlign: "center", backgroundColor: "#fff", }, });

API general

visible

Whether the mask is visible or not.

Type Required
bool Yes

animationType

The animation effect of the mask:

  • fade: fade in and fade out.
  • none: no animation.
Type Required Default value
string No fade

alignContainer

The default position of the mask:

  • top: the mask is at the top.
  • center: the mask is in the center.
  • bottom: the mask is at the bottom.
Type Required Default value
string No bottom

onMaskPress

Callback of clicking mask

Type Required
() => void No

mask

Whether there is a mask layer.

Type Required Default value
bool No true

maskStyle

Style of the mask layer.

Type Required Default value
ViewPropTypes.style No None

API-Modal advanced general application

titleTextStyle

The text style of the mask header.

Type Required Default value
Text.propTypes.style No None

titleWrapperStyle

The style of the mask header.

Type Required Default value
ViewPropTypes.style No None

title

Title of the mask.

Type Required Default value
string/React.element No Modal

onCancel

Callback of cancel button in the bottom layout of the mask.

Type Required Default value
() => void No None

onConfirm

Callback of confirm button in the bottom layout of the mask.

Type Required Default value
value => void No None

cancelText

Text of the cancel button in the bottom layout of the mask.

Type Required Default value
string No Cancel

confirmText

Text of the confirm button in the bottom layout of the mask.

Type Required Default value
string No Confirm

cancelTextStyle

Text style of the cancel button in the bottom layout of the mask.

Type Required Default value
Text.propTypes.style No None

confirmTextStyle

Text style of the confirm button in the bottom layout of the mask.

Type Required Default value
Text.propTypes.style No None

footerWrapperStyle

The bottom layout style of the mask.

Type Required Default value
ViewPropTypes.style No None

footer

Custom bottom layout of the mask.

Type Required Default value
React.element No None

API-Modal.List

Modal.List props inherits from FlatList. For more information, see FlatList documentation.

dataSource

List data source.

type

Modal.List type:

  • radio: radio button.

  • switch: checkbox.

    Type Required Default value
    string No radio

selectedIcon

The icon selected when type is set to radio.

Type Required
React.element No

iconTintColor

Color of the icon selected when type is set to radio.

Type Required Default value
Color No #44DB5E

contentCenter

Whether the content is centered.

Type Required Default value
bool No true

value

The selected value:

  • The multiple selection type is array.
  • The single selection type is string or number.
Type Required Default value
string/number/array No None

listItemStyle

Set the style of each listItem.

Type Required Default value
ViewPropTypes.style No None

onSelect

Callback of clicking each row.

Type Required Default value
value => void No None

API-Modal.Picker

label

picker label.

Type Required Default value
string No None

dataSource

picker data source. The specific types are as follows:

PropTypes.arrayOf(PropTypes.shape({
  value: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.bool,
  ]).isRequired,
  label: PropTypes.string,
 }))
Type Required Default value
array No None

value

picker value selected.

Type Required Default value
string/number/bool No None

onValueChange

Callback of picker changes.

Type Required Default value
(value, idx) => void No None

API-Modal.Countdown

value

The countdown value. The value range is 0~1440, and the unit is minute.

Type Required Default value
number Yes None

onlyone

Whether to display only one column (minutes). Two columns (hour + minute) are displayed by default.

Type Required Default value
boolean No true

max

The maximum selectable value of the countdown, in minutes.

Type Required Default value
number No 1440

step

The countdown step length, in minutes.

Type Required Default value
number No 1

hourText

The text represents hour.

Type Required Default value
string No Hour

minuteText

The text represents minute.

Type Required Default value
string No Minute

onValueChange

The callback of the countdown value change.

Type Required Default value
value => void No None

API-Modal.DatePicker

Modal.DatePicker props completely inherits from DatePicker.