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

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.

Prev DocIconFont

Next DocNotificationLegacy