![npm version]()
React Native Material Design Dialog
Description
Make beautiful material design dialogs for both Android and IOS with lots of configurations to suit your need
Installation
$ npm install react-native-md-dialog --save
Try with Exponent
[![Exponent Button][2]][1] [1]: https://getexponent.com/@ahmedlhanafy/MaterialDesignDialogExample [2]: https://raw.githubusercontent.com/ahmedlhanafy/react-native-md-dialog/master/imgs/run_with_exp.png
Screenshots
One Button Dialog
| Android | IOS |
![]() | ![]() |
Code
import Dialog, { DialogButton } from 'react-native-md-dialog'; ... <Dialog actions={[<DialogButton text='CLOSE' onPress={() => this.refs.dialog.close()} position='right'/>]} ref='dialog'> <View style={styles.dialogConatiner}> <Text > I'm a dialog with a close button </Text> </View> </Dialog>Multiple Buttons Dialog
| Android | IOS |
![]() | ![]() |
Code
import Dialog, { DialogButton } from 'react-native-md-dialog'; ... <Dialog actions={[ <DialogButton text='INCREMENT' onPress={() => this.setState({ numberOfClicks: this.state.numberOfClicks + 1})}/>, <DialogButton text='OK' onPress={() => this.refs.dialog.close()}/>, <DialogButton text='DISABLED' disabled={true} position='left' /> ]} ref='dialog'> <View style={styles.dialogConatiner}> <Text > I'm a dialog with multiple btns, {this.state.numberOfClicks} </Text> </View> </Dialog>Styles Dialog
| Android | IOS |
![]() | ![]() |
Code
import Dialog, { DialogButton } from 'react-native-md-dialog'; ... <Dialog backgroundColor='#3f51b5' titleColor='#d81b60' actions={[ <DialogButton text='DISABLED' disabled={true} position='left' color='#ffeb3b' />, <DialogButton text='OK' onPress={() => this.refs.dialog.close()} color='#d81b60'/> ]} ref='dialog'> <View style={styles.dialogConatiner}> <Text>Dialogs with custom styles</Text> </View> </Dialog>Scrollable Content Dialog
| Android | IOS |
![]() | ![]() |
Code
import Dialog, { DialogButton } from 'react-native-md-dialog'; ... <Dialog actions={[ <DialogButton text='DONE' onPress={() => this.refs.dialog.close()} /> ]} ref='dialog' maxHeight={280}> <ScrollView> <View style={styles.dialogConatiner}> <Text style={{ color: 'rgba(0,0,0,0.8)', fontSize: 16 }}> ... </Text> </View> </ScrollView> </Dialog><Dialog/> props
| Prop | Description | Type | Default |
| actions | Array of <DialogButton/> components | PropTypes.array | None |
| style | React Native style object | `PropTypes.object | |
| title | Dialog's tilte. | PropTypes.string | Dialog |
| titleColor | Color of dialog's tilte. | PropTypes.string | rgba(0,0,0,0.8) |
| backgroundColor | Dialog's background color. | PropTypes.string | white |
| dismissable | Determines if clicking outside the dialog closes the dialog or not. | PropTypes.bool | false |
| animationDuration | Duration of closing and opening the dialog. | PropTypes.number | 200 |
| width | Dialog's width. | PropTypes.number | deviceWidth - 48 |
| maxHeight | Dialog's max height. | PropTypes.number | 420 |
<DialogButton/> props
| Prop | Description | Type | Default |
| text | Button's text | PropTypes.string | None |
| disabled | Determines whether the button is enabled or not | PropTypes.bool | false |
| onPress | Determines the action when button is pressed | PropTypes.func | None |
| color | Text color of the button | PropTypes.string | #009688 |
| position | Determines where to put the button | PropTypes.string | right |
Dialog's methods
| Name | Description |
open() | Opens the dialog |
close() | Closes the dialog |
