React Native Popup Dialog
React Native Popup Dialog for iOS & Android.
npm install --save react-native-popup-dialog
- PopupDialog
- Dialog
- Overlay
- Animation
- 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>
PopupDialog
Attribute |
Type |
Default |
Note |
title |
String |
The popup title |
|
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 |
|
ScaleAnimation |
animation for dialog |
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 |
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 |
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.