JSPM – react-native-popup-dialog@0.9.39

Package Exports

react-native-popup-dialog

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-popup-dialog) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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';

<View style={styles.container}>
  <Button
    text="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();

dismiss

this.popupDialog.dismiss();

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
`height?`	`Number`	300	The Width of Dialog, you can use fixed height or use percentage
`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
`title`	`String`
`titleStyle?`	`any`
`titleTextStyle?`	`any`
`titleAlign?`	`String`	`center`
`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

Param	Type	Default	Note
`toValue`	Number	0
`animationDuration`	Number	150

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`

Development

yarn

yarn run build