react-native-simple-dialogs v2.0.3

React Native Simple Dialogs

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

Features

• Custom Dialog
• Confirm Dialog
• Progress Dialog

Expo Snack

An Expo Demo Link

Screenshots

Requirements

• React Native >= 0.44.0

NOTES

• for RN 0.58.0 or later use react-native-simple-dialogs@latest
• for RN 0.56.0 ... 0.57.8 use react-native-simple-dialogs@1.0.0
• 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>

Available props

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>

Available props

Button props

Progress Dialog

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

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

Available props

More info on the sample project.

Contribute

New features, bug fixes and improvements are welcome! For questions and suggestions use the issues.

Star History

License

The MIT License (MIT)

Copyright (c) 2017 Douglas Nassif Roma Junior

See the full license file.