README.md

This library is deprecated, you can use the dialog component in https://github.com/callstack/react-native-paper instead.

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