![npm]()
![npm]()

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 😘

Try it with Exponent







           

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

Example

Usage

`javascript
import PopupDialog from 'react-native-popup-dialog';
import { Button } from 'react-native'


title="Show Dialog"
onPress={() => {
this.popupDialog.show();
}}
/>
ref={(popupDialog) => { this.popupDialog = popupDialog; }}
>

Hello



`

Usage - With Animation


`javascript
import PopupDialog, { SlideAnimation } from 'react-native-popup-dialog';

const slideAnimation = new SlideAnimation({
slideFrom: 'bottom',
});


ref={(popupDialog) => { this.popupDialog = popupDialog; }}
dialogAnimation={slideAnimation}
>

Hello



`

Usage - With Dialog Dialog Title


`javascript
import PopupDialog, { DialogTitle } from 'react-native-popup-dialog';


dialogTitle={}
ref={(popupDialog) => { this.popupDialog = popupDialog; }}
>

Hello



`

Methods


#### show
`javascript
this.popupDialog.show(() => {
console.log('callback - will be called immediately')
});
`

#### dismiss
`javascript
this.popupDialog.dismiss(() => {
console.log('callback - will be called immediately')
});
`

Props

$3


| 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: `[ this.popupDialog.dismiss()}/>]` | |

$3

| Prop | Type | Default | Note |
|---|---|---|---|
| title | String | | | |
| titleStyle? | any | | | |
| titleTextStyle? | any | | | |
| titleAlign? | String | center | Available option: left, center, right | |
| haveTitleBar? | Bool | true | | |

$3

| 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

$3

$3

##### Example:
`javascript
new FadeAnimation({
toValue: 0, // optional
animationDuration: 150, // optional
useNativeDriver: true, // optional
})
`
| Param | Type | Default | Note |
|---|---|---|---|
| toValue | Number | 0 | |
| animationDuration? | Number | 150 | |
| useNativeDriver? | Boolean | true | |

$3

##### Example:
`javascript
new ScaleAnimation({
toValue: 0, // optional
useNativeDriver: true, // optional
})
`
| Param | Type | Default | Note |
|---|---|---|---|
| toValue | Number | 0 | |
| useNativeDriver | Boolean | true | |

$3

##### Example:
`javascript
new SlideAnimation({
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`