![npm](https://camo.githubusercontent.com/9c64c507132d04413e74b933b06e028868427ca31f4971faeb61073a94fdf618/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d706f7075702d6469616c6f672e737667)
React Native Popup Dialog
React Native Popup Dialog for iOS & Android.
Another similar dialog component: react-native-dialog-component the main difference is style.
Pull request are welcomed. Please follow Airbnb JS Style Guide
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
- FadeAnimation
- ScaleAnimation
- SlideAnimation
- PopupDialogType
- DialogType
- DialogButtonType
- DialogTitleType
- OverlayType
Example
import PopupDialog from 'react-native-popup-dialog';
import { Button } from 'react-native'
<View style={styles.container}>
<Button
title="Show Dialog"
onPress={() => {
this.popupDialog.show();
}}
/>
<PopupDialog
ref={(popupDialog) => { this.popupDialog = popupDialog; }}
>
<View>
<Text>Hello</Text>
</View>
</PopupDialog>
</View>
import PopupDialog, { SlideAnimation } from 'react-native-popup-dialog';
const slideAnimation = new SlideAnimation({
slideFrom: 'bottom',
});
<View style={styles.container}>
<PopupDialog
ref={(popupDialog) => { this.popupDialog = popupDialog; }}
dialogAnimation={slideAnimation}
>
<View>
<Text>Hello</Text>
</View>
</PopupDialog>
</View>
Usage - With Dialog Dialog Title
import PopupDialog, { DialogTitle } from 'react-native-popup-dialog';
<View style={styles.container}>
<PopupDialog
dialogTitle={<DialogTitle title="Dialog Title" />}
ref={(popupDialog) => { this.popupDialog = popupDialog; }}
>
<View>
<Text>Hello</Text>
</View>
</PopupDialog>
</View>
this.popupDialog.show(() => {
console.log('callback - will be called immediately')
});
this.popupDialog.dismiss(() => {
console.log('callback - will be called immediately')
});
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. For example 0.5 it means 50% |
height? |
Number |
300 |
The Height of Dialog, you can use fixed height or use percentage. For example 0.5 it means 50% |
dialogAnimation? |
|
FadeAnimation |
animation for dialog |
dialogStyle? |
any |
|
|
containerStyle? |
any |
null |
For example: { zIndex: 10, elevation: 10 } |
animationDuration? |
Number |
200 |
|
overlayPointerEvents? |
String |
|
Available option: auto , none |
overlayBackgroundColor? |
String |
#000 |
|
overlayOpacity? |
Number |
0.5 |
|
dismissOnTouchOutside? |
Bool |
true |
When touch overlay will dismiss dialog, but if haveOverlay? is false then the dismissOnTouchOutside won't work |
dismissOnHardwareBackPress? |
Bool |
true |
Only for Android |
haveOverlay? |
Bool |
true |
If false won't show overlay while dialog show |
show? |
Bool |
false |
|
onShown? |
Function |
|
You can pass shown function as a callback function, will call the function when dialog shown |
onDismissed? |
Function |
|
You can pass onDismissed function as a callback function, will call the function when dialog dismissed |
actions? |
Array |
|
Array of DialogButton component for example: [<DialogButton text="DISMISS" align="center" onPress={() => this.popupDialog.dismiss()}/>] |
Prop |
Type |
Default |
Note |
title |
String |
|
|
titleStyle? |
any |
|
|
titleTextStyle? |
any |
|
|
titleAlign? |
String |
center |
Available option: left , center , right |
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? |
any |
|
|
textStyle? |
any |
|
|
textContainerStyle? |
any |
|
|
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 |
yarn
yarn run build