React Native Popup Dialog

React Native Popup Dialog for iOS & Android.

           

Try it with Exponent

Installation

npm install --save react-native-popup-dialog

Exposed Modules

1. PopupDialog
2. Dialog
3. Overlay
4. Animation
5. ScaleAnimation
6. SlideAnimation

Examples

Example

Usage

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>

Usage - With Animation

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>

Props

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

Animation

Params for (*)Animation

ScaleAnimation

Param	Type	Default	Note
toValue	Number	0

SlideAnimation

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.

• JavaScript
• React
• Use 2 spaces indentation

Additional, I recommend you use linter.

• Configure Text Editors