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
How to thank me ?
Just click on ⭐️ button 😘
Installation
npm install --save react-native-popup-dialog
# OR
yarn add react-native-popup-dialog
Exposed Modules
- Dialog
- PopupDialog
- DialogButton
- DialogTitle
- Overlay
- Animation
- FadeAnimation
- ScaleAnimation
- SlideAnimation
- PopupDialogType
- DialogType
- DialogButtonType
- DialogTitleType
- OverlayType
Examples
Usage
; <View style=stylescontainer> <Button title="Show Dialog" onPress= { thispopupDialog; } /> <PopupDialog ref= { thispopupDialog = popupDialog; } > <View> <Text>Hello</Text> </View> </PopupDialog></View>
Usage - With Animation
; const slideAnimation = slideFrom: 'bottom'; <View style=stylescontainer> <PopupDialog ref= { thispopupDialog = popupDialog; } dialogAnimation=slideAnimation > <View> <Text>Hello</Text> </View> </PopupDialog></View>
Usage - With Dialog Dialog Title
; <View style=stylescontainer> <PopupDialog dialogTitle=<DialogTitle title="Dialog Title" /> ref= { thispopupDialog = popupDialog; } > <View> <Text>Hello</Text> </View> </PopupDialog></View>
Methods
show
thispopupDialog;
dismiss
thispopupDialog;
Props
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()}/>] |
DialogTitle
Prop | Type | Default | Note |
---|---|---|---|
title |
String |
||
titleStyle? |
any |
||
titleTextStyle? |
any |
||
titleAlign? |
String |
center |
Available option: left , center , right |
haveTitleBar? |
Bool |
true |
DialogButton
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 |
Animation
Params for (*)Animation
FadeAnimation
Example:
toValue: 0 // optional animationDuration: 150 // optional useNativeDriver: true // optional
Param | Type | Default | Note |
---|---|---|---|
toValue |
Number | 0 | |
animationDuration? |
Number | 150 | |
useNativeDriver? |
Boolean | true |
ScaleAnimation
Example:
toValue: 0 // optional useNativeDriver: true // optional
Param | Type | Default | Note |
---|---|---|---|
toValue |
Number | 0 | |
useNativeDriver |
Boolean | true |
SlideAnimation
Example:
toValue: 0 // optional slideFrom: 'bottom' // optional useNativeDriver: true // optional
Param | Type | Default | Note |
---|---|---|---|
toValue |
Number | 0 | |
slideFrom |
String | bottom |
Available option: top , bottom , left , right |
useNativeDriver |
Boolean | true |
Development
yarn
yarn run build