React Native modal dialog – react-native-dialog

React Native modal dialog for our projects. Pure JavaScript React-Native dialog – react-native-dialog.

React Native modal dialog solution

A pure JavaScript React-Native dialog that follows closely the UI of its native counterpart while expanding its features.

Key features of react-native-dialog:

– Support for iOS and Android (JavaScript API)

– A flexible declarative API

– Follows closely the UI of a native dialog/alert

– Can be used both as an alert and as an input prompt

– Can be injected with any component

React Native modal dialog samples
React Native modal dialog samples

Usage

React-native-dialog exposes a set of components that can be used to build the UI of the dialog:

Dialog.Container: This component is the root component of the dialog and all the other components should be nested inside it.

Dialog.Title: A Text component styled as a native dialog title.

Dialog.Description: A Text component styled as a native dialog description.

Dialog.Button: A component styled as a native dialog button.

Dialog.Input: A TextInput component styled as a native dialog input.

Dialog.Switch: A native Switch component with an optional label.

Setup


# using npm
$ npm install react-native-dialog --save

# using yarn
$ yarn add react-native-dialog

Sample

import Dialog from "react-native-dialog";

// ...
// Create a dialog and nest its content inside of it:

render () {
    return (
      <View>
        <Dialog.Container>
          <Dialog.Title>Account delete</Dialog.Title>
          <Dialog.Description>
            Do you want to delete this account?
          </Dialog.Description>
          <Dialog.Button label="Cancel" />
          <Dialog.Button label="Delete" />
        </Dialog.Container>
      </View>
    )
  }

The visible prop is the only prop you’ll really need to make the dialog work: you should control this prop value by saving it in your state and setting it to true or false when needed.

The following example consists in a component (DialogTester) with a button and a dialog. The dialog is controlled by the dialogVisible state variable and it is initially hidden, since its value is false.

Pressing the button sets dialogVisible to true, making the dialog visible. Inside the dialog there are two button that, when pressed, sets dialogVisible to false, hiding the dialog.

import React, { Component } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import Dialog from "react-native-dialog";

export default class DialogTester extends Component {
  state = {
    dialogVisible: false
  };

  showDialog = () => {
    this.setState({ dialogVisible: true });
  };

  handleCancel = () => {
    this.setState({ dialogVisible: false });
  };

  handleDelete = () => {
    // The user has pressed the "Delete" button, 
    // so here you can do your own logic.
    // ...Your logic...
    this.setState({ dialogVisible: false });
  };

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.showDialog}>
          <Text>Show Dialog</Text>
        </TouchableOpacity>
        <Dialog.Container visible={this.state.dialogVisible}>
          <Dialog.Title>Account delete</Dialog.Title>
          <Dialog.Description>
            Do you want to delete this account? 
          </Dialog.Description>
          <Dialog.Button label="Cancel" onPress={this.handleCancel} />
          <Dialog.Button label="Delete" onPress={this.handleDelete} />
        </Dialog.Container>
      </View>
    );
  }
}

License: MIT

GitHub

https://github.com/mmazzarolo/react-native-dialog

scraperapi

See also

React Native datetime picker – cross-platform

React Dual Listbox solution

Responsive table header and columns freezing – jquery-freeze-table

How to create Vue JS infinite scroll? Try vue-infinite-loading!

Responsive ReactJS carousel gallery: react-image-gallery

Detect mobile in JavaScript – Vue.js example

Happy coding!