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

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>

Usage - With Animation

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>

Methods

show

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

dismiss

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

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:

new FadeAnimation({
  toValue: 0, // optional
  animationDuration: 150, // optional
  useNativeDriver: true, // optional
})

| Param | Type | Default | Note | |---|---|---|---| | toValue | Number | 0 | | | animationDuration? | Number | 150 | | | useNativeDriver? | Boolean | true | |

ScaleAnimation

Example:

new ScaleAnimation({
  toValue: 0, // optional
  useNativeDriver: true, // optional
})

| Param | Type | Default | Note | |---|---|---|---| | toValue | Number | 0 | | | useNativeDriver | Boolean | true | |

SlideAnimation

Example:

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