Cross-platform simple dialogs for React Native based on the Modal component

by React Native Example

React Native Simple Dialogs

Cross-platform simple dialogs for React Native based on the Modal component.

Screenshots

Android iOS

Requirements

  • React Native >= 0.44.0

NOTES

  • for RN 0.56.0 or later use react-native-simple-dialogs@latest
  • for RN 0.44.0 ... 0.55.4, use react-native-simple-dialogs@0.3.1

Install

  yarn add react-native-simple-dialogs

Or

  npm i -S react-native-simple-dialogs

Use

Custom Dialog

import { Dialog } from 'react-native-simple-dialogs';

<Dialog 
    visible={this.state.dialogVisible} 
    title="Custom Dialog"
    onTouchOutside={() => this.setState({dialogVisible: false})} >
    <View>
        // your content here
    </View>
</Dialog>

Confirm Dialog

import { ConfirmDialog } from 'react-native-simple-dialogs';

// with message
<ConfirmDialog
    title="Confirm Dialog"
    message="Are you sure about that?"
    visible={this.state.dialogVisible}
    onTouchOutside={() => this.setState({dialogVisible: false})}
    positiveButton={{
        title: "YES",
        onPress: () => alert("Yes touched!")
    }}
    negativeButton={{
        title: "NO",
        onPress: () => alert("No touched!") 
    }}
/>

// with custom content
<ConfirmDialog
    title="Confirm Dialog"
    visible={this.state.dialogVisible}
    onTouchOutside={() => this.setState({dialogVisible: false})}
    positiveButton={{
        title: "OK",
        onPress: () => alert("Ok touched!")
    }} >
    <View>
        // your content here
    </View>
</ConfirmDialog>

Progress Dialog

import { ProgressDialog } from 'react-native-simple-dialogs';

<ProgressDialog 
    visible={this.state.progressVisible} 
    title="Progress Dialog" 
    message="Please, wait..."
/>

GitHub