Home

Awesome

React Native Simple Dialogs

License MIT npm version npm downloads

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

Features

Expo Snack

An Expo Demo Link

Screenshots

AndroidiOS
<img src='https://raw.githubusercontent.com/douglasjunior/react-native-simple-dialogs/master/screenshots/android-dialog.png' width='320' /><img src='https://raw.githubusercontent.com/douglasjunior/react-native-simple-dialogs/master/screenshots/ios-dialog.png' width='320' />
<img src='https://raw.githubusercontent.com/douglasjunior/react-native-simple-dialogs/master/screenshots/android-confirm.png' width='320' /><img src='https://raw.githubusercontent.com/douglasjunior/react-native-simple-dialogs/master/screenshots/ios-confirm.png' width='320' />
<img src='https://raw.githubusercontent.com/douglasjunior/react-native-simple-dialogs/master/screenshots/android-progress.png' width='320' /><img src='https://raw.githubusercontent.com/douglasjunior/react-native-simple-dialogs/master/screenshots/ios-progress.png' width='320' />

Requirements

NOTES

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

NameTypeDefaultDescription
visibleBooleanfalseShow the modal?
onRequestCloseFunctionnullCallback that's called when users taps the hardware back button on Android
animationTypeEnum('none', 'slide', 'fade')'none'Controls how the modal animates
onShowFunctionnullCallback that's called once the modal has been shown
onOrientationChangeFunctionnullCallback that's called when the orientation change while the modal is being displayed on iOS
supportedOrientationsArray of Enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')'portrait'Allowed orientation while modals is being shown. More info at react-native docs
statusBarTranslucentBooleannullDetermines whether your modal should go under the system statusbar. More info at react-native docs
onTouchOutsideFunctionnullCallbac that's called when users tap outside the shown modal
titleStringnullModal's title
titleStyleText StyleSheetnullCustom text style object for modal's title
dialogStyleView StyleSheetnullCustom view style for dialog box
contentStyleView StyleSheetnullCustom view style for dialog content wrapper
buttonsStyleView StyleSheetnullCustom view style for dialog button wrapper
overlayStyleView StyleSheetnullCustom view style for dialog overlay
buttonsReact NodenullModal button component
keyboardDismissModeEnum('none', 'on-drag', 'interactive')nullDetermines whether the keyboard gets dismissed in response to a drag.
keyboardShouldPersistTapsEnum('always', 'never', 'handled', false, true)nullDetermines when the keyboard should stay visible after a tap.

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

NameTypeDefaultDescription
...{Dialog.props}Dialog PropsnullSame props as Dialog Component
messageStringnullMessage shown in the confirm dialog
messageStyleText StyleSheetnullCustom text style for message
negativeButtonButton PropsnullButton element object to describe the negative button. See below for detailed shape of button
positiveButtonButton PropsREQUIREDButton element object to describe the positive button. See below for detailed shape of button
Button props
NameTypeDefault
titleStringREQUIRED
onPressFunctionREQUIRED
disabledBooleannull
titleStyleText StyleSheetnull
styleView StyleSheetnull

Progress Dialog

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

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

Available props

NameTypeDefaultDescription
...{Dialog.props}Dialog PropsnullSame props as Dialog Component
messageStringnullMessage shown in the progress dialog
messageStyleText StyleSheetnullCustom text style for message
activityIndicatorColorcolornullThe foreground color of the spinner
activityIndicatorSizeenum('small', 'large'), numbernullSize of the indicator. Number only supported on Android
activityIndicatorStyleView StyleSheetnullCustom style for the activity indicator

More info on the sample project.

Contribute

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

<a href="https://www.patreon.com/douglasjunior"><img src="http://i.imgur.com/xEO164Z.png" alt="Become a Patron!" width="200" /></a> Donate

Star History

Star History Chart

License

The MIT License (MIT)

Copyright (c) 2017 Douglas Nassif Roma Junior

See the full license file.