Dialog

Dialog is a collection of a series of commonly used dialog boxes, which are accompanied by fade-in and fade-out animation effects by default. It is used to display some components similar to Native effects.

Code demo

For more information, see Dialog Demo.

Alert box

Dialog.alert({
  title: "Title",
  subTitle: "Subtitle",
  confirmText: "Confirm",
  onConfirm: (data, { close }) => {
      close();
  },
 });

Prompt box

Dialog.confirm({
  title: "Title",
  subTitle: "Subtitle",
  cancelText: "Cancel",
  confirmText: "Confirm",
  onConfirm: (data, { close }) => {
    close();
  },
 });

Input dialog box

// Uncontrolled input box 
  Dialog.prompt({
  title: "Uncontrolled input box",
  subTitle: "Subtitle",
  cancelText: "Cancel",
  confirmText: "Confirm",
  defaultValue: this.state.promptUnControlled,
  placeholder: "Password",
  onConfirm: (text, { close }) => {
    console.log("uncontrolled text :", text);
    this.setState({ promptUnControlled: text });
    close();
  },
 });
 
// Controlled input box
 Dialog.prompt({
  title: "Controlled input box",
  subTitle: "Subtitle",
  cancelText: "Cancel",
  confirmText: "Confirm",
  value: this.state.promptControlled,
  placeholder: "Password",
  onChangeText: (text) => {
    // Use value props to make prompt a controlled component and control the content of its input box
    const t = +text;
    if (typeof t === "number" && ! Number.isNaN(t)) {
      return text;
    }
  },
  onConfirm: (text, { close }) => {
    console.log('controlled text :', text);
    this.setState({ promptControlled: text });
    if (text.length < 2) {
     return;
    }
    close();
  },
 });

Checkbox

Dialog.checkbox({
  title: "Required",
  cancelText: "Cancel",
  confirmText: "Confirm",
  type: "radio",
  value: this.state.checkValueRadio,
  dataSource: [
    {
      value: "code1",
      title: "Sensor selection",
    },
    {
      value: "code2",
      title: "Room sensor calibration",
    },
    {
      value: "code3",
      title: "Floor sensor calibration",
      iconSize: 24,
      Icon: "warning",
      reverse: true,
      hideOnUnselect: true,
    },
  ],
  onConfirm: (value, { close }) => {
    this.setState({ checkValueRadio: value });
    close();
  },
 });

List dialog box

A list dialog box pops up.

Dialog.list({
  title: 'This is the title',
  subTitle: 'This is the content',
  dataSource: new Array(6).fill(1).map((_, idx) => ({
  title: idx === 0 ? 'Click me to close' : `Option${idx}`,
  onPress: () => {
     idx === 0 && Dialog.close();
     console.log('Press', idx);
   },
  })),
  cancelText: 'Cancel',
  confirmText: 'Confirm',
  onConfirm: (value, { close }) => {
    close();
  },
 });

Custom dialog box

A custom content dialog box pops up.

Dialog.custom({
  title: "Custom",
  cancelText: "Cancel",
  confirmText: "Confirm",
  content: (
    <View
      style={{ height: 300, alignItems: "center", justifyContent: "center" }}
    >
      <Text style={{ fontSize: 32, color: "#000" }}>Custom content</Text>
    </View>
  ),
  onConfirm: (value, { close }) => {
    close();
  },
 });

Interaction demo

API

Besides close, the first parameter of the Dialog API is props of the corresponding component, and the second parameter is props of Modal. For example, Dialog.someMethod(props: Object, modalProps? : Object)

Dialog general properties

Dialog.alert

Alert box. The alert box only contains the confirm button, not the cancel button. alert does not contain cancel related properties, such as cancelText, cancelTextStyle, and onCancel. For other properties, see Dialog general properties.

Dialog.confirm

Prompt box. The prompt box adds a cancel button on the basis of the alert box. For more information, see Dialog general properties.

Dialog.prompt

Input dialog box. For more information, see Dialog general properties. Dialog.prompt inherits from TextInput, so prompt also contains TextInput Prop and the following properties:

Dialog.checkbox

Radio button or checkbox. For more information, see Dialog general properties. In the Dialog.checkbox, each checkbox item inherits from CheckboxItem, so checkbox also contains CheckboxItem Prop and the following properties:

Dialog.custom

Custom dialog box. For more information, see Dialog general properties. Dialog.custom also contains the following properties:

Dialog.close

Close the current dialog box.