React Native Popup Dialog
React Native Popup Dialog for iOS & Android.
Try it with Exponent
![](https://camo.githubusercontent.com/d732aa6cc8d84c73a3f6238e219ffb103ee494a234c0c2aa6f727bf717d7cffd/68747470733a2f2f6a61636b6c616d3731382e6769746875622e696f2f72656163742d6e61746976652d706f7075702d6469616c6f672f7265736f75726365732f706f7075702d6469616c6f672d736c6964652d616e696d6174696f6e2e676966)
![](https://camo.githubusercontent.com/9259d7f1965b08fdfc19ec63aeb99a3f1bf8fdaac91e6575c02834366266d1ce/68747470733a2f2f6a61636b6c616d3731382e6769746875622e696f2f72656163742d6e61746976652d706f7075702d6469616c6f672f7265736f75726365732f72656163742d6e61746976652d706f7075702d6469616c6f672d64656d6f2e706e67)
npm install --save react-native-popup-dialog
# OR
yarn add react-native-popup-dialog
- Dialog
- PopupDialog
- DialogButton
- DialogTitle
- Overlay
- Animation
- DefaultAnimation
- ScaleAnimation
- SlideAnimation
Example
import PopupDialog from 'react-native-popup-dialog';
<View style={styles.container}>
<Button
text="Open Dialog"
onPress={() => {
this.popupDialog.openDialog();
}}
/>
<PopupDialog
ref={(popupDialog) => { this.popupDialog = popupDialog; }}
>
<View>
<Text>Hello</Text>
</View>
</PopupDialog>
</View>
import PopupDialog, { SlideAnimation } from 'react-native-popup-dialog';
<View style={styles.container}>
<Button
text="Open Dialog"
onPress={() => {
this.popupDialog.openDialog();
}}
/>
<PopupDialog
ref={(popupDialog) => { this.popupDialog = popupDialog; }}
dialogAnimation = { new SlideAnimation({ slideFrom: 'bottom' }) }
>
<View>
<Text>Hello</Text>
</View>
</PopupDialog>
</View>
Usage - With Dialog Dialog Title
import PopupDialog, { DialogTitle } from 'react-native-popup-dialog';
<View style={styles.container}>
<Button
text="Open Dialog"
onPress={() => {
this.popupDialog.openDialog();
}}
/>
<PopupDialog
dialogTitle={<DialogTitle title="Dialog Title" />}
ref={(popupDialog) => { this.popupDialog = popupDialog; }}
>
<View>
<Text>Hello</Text>
</View>
</PopupDialog>
</View>
PopupDialog
Prop |
Type |
Default |
Note |
dialogTitle |
React Element |
|
You can pass a DialogTitle component or pass a View for customizing titlebar |
width |
Number |
Your device width |
The Width of Dialog, you can use fixed width or use percentage |
height |
Number |
300 |
The Width of Dialog, you can use fixed height or use percentage |
dialogAnimation |
|
DefaultAnimation |
animation for dialog |
dialogStyle |
Object or Number |
|
|
animationDuration |
Number |
200 |
|
overlayPointerEvents |
String |
|
Available option: auto , none |
overlayBackgroundColor |
String |
#000 |
|
overlayOpacity |
Number |
0.5 |
|
closeOnTouchOutside |
Bool |
true |
When touch overlay will close dialog, but if haveOverlay is false then the closeOnTouchOutside won't work |
haveOverlay |
Bool |
true |
If false won't show overlay while dialog open |
open |
Bool |
false |
|
onOpened |
Function |
|
You can pass onOpend function as a aallback function, will call the function while dialog opened |
onClosed |
Function |
|
You can pass onClosed function as a callback function, will call the function while dialog closed |
actions |
Array |
|
Array of DialogButton component for example: [<DialogButton text="CLOSE", align="center" onPress={this.closeDialog}/>] |
Prop |
Type |
Default |
Note |
title |
String |
|
|
titleStyle |
Object or Number |
|
|
titleTextStyle |
Object or Number |
|
|
titleAlign |
String |
center |
|
haveTitleBar |
Bool |
true |
|
Prop |
Type |
Default |
Note |
text |
String |
|
|
align |
String |
center |
The position of the button. Available option: left , center , right |
onPress |
Function |
|
|
buttonStyle |
Object or Number |
|
|
textStyle |
Object or Number |
|
|
textContainerStyle |
Object or Number |
|
|
disabled |
Boolean |
false |
|
activeOpacity |
Number |
|
|
Param |
Type |
Default |
Note |
toValue |
Number |
0 |
|
animationDuration |
Number |
150 |
|
Param |
Type |
Default |
Note |
toValue |
Number |
0 |
|
Param |
Type |
Default |
Note |
toValue |
Number |
0 |
|
slideFrom |
String |
bottom |
Available option: top , bottom , left , right |
Welcome Become a Contributor 😃 👍
I'm welcome anyone become a contributor.
You must follow style guide.
Additional, I recommend you use linter.