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
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';
<View style={styles.container}>
<Button
text="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';
<View style={styles.container}>
<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}>
<PopupDialog
dialogTitle={<DialogTitle title="Dialog Title" />}
ref={(popupDialog) => { this.popupDialog = popupDialog; }}
>
<View>
<Text>Hello</Text>
</View>
</PopupDialog>
</View>
this.popupDialog.show(() => {
console.log('callback');
});
this.popupDialog.dismiss(() => {
console.log('callback');
});
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? |
|
FadeAnimation |
animation for dialog |
dialogStyle? |
any |
|
|
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.dismiss}/>] |
Prop |
Type |
Default |
Note |
title |
String |
|
|
titleStyle? |
any |
|
|
titleTextStyle? |
any |
|
|
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? |
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