JSPM – react-native-popup-dialog@0.18.3

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

How to thank me ?

Just click on ⭐️ button 😘

Try it with Exponent

BREAKING CHANGE

Has a lot of backward incompatible changes in v0.16.0. Please, Read the Docs before upgrading to v0.16.0

Installation

npm install --save react-native-popup-dialog
# OR
yarn add react-native-popup-dialog

Exposed Modules

Dialog
Overlay
DialogButton
DialogContent
DialogTitle
DialogFooter
Animation
FadeAnimation
ScaleAnimation
SlideAnimation
DialogProps
DialogFooterProps
DialogButtonProps
DialogTitleProps
DialogContentProps
OverlayProps

Examples

Example

Basic Usage

import Dialog, { DialogContent } from 'react-native-popup-dialog';
import { Button } from 'react-native'

<View style={styles.container}>
  <Button
    title="Show Dialog"
    onPress={() => {
      this.setState({ visible: true });
    }}
  />
  <Dialog
    visible={this.state.visible}
    onTouchOutside={() => {
      this.setState({ visible: false });
    }}
  >
    <DialogContent>
      {...}
    </DialogContent>
  </Dialog>
</View>

Usage - Animation

import Dialog, { SlideAnimation, DialogContent } from 'react-native-popup-dialog';

<View style={styles.container}>
  <Dialog
    visible={this.state.visible}
    dialogAnimation={new SlideAnimation({
      slideFrom: 'bottom',
    })}
  >
    <DialogContent>
      {...}
    </DialogContent>
  </Dialog>
</View>

Usage - Dialog Dialog Title

import Dialog, { DialogTitle, DialogContent } from 'react-native-popup-dialog';

<View style={styles.container}>
  <Dialog
    visible={this.state.visible}
    dialogTitle={<DialogTitle title="Dialog Title" />}
  >
    <DialogContent>
      {...}
    </DialogContent>
  </Dialog>
</View>

Usage - Dialog Action

import Dialog, { DialogFooter, DialogButton, DialogContent } from 'react-native-popup-dialog';

<View style={styles.container}>
  <Dialog
    visible={this.state.visible}
    footer={
      <DialogFooter>
        <DialogButton
          text="CANCEL"
          onPress={() => {}}
        />
        <DialogButton
          text="OK"
          onPress={() => {}}
        />
      </DialogFooter>
    }
  >
    <DialogContent>
      {...}
    </DialogContent>
  </Dialog>
</View>

Props

Dialog

Prop	Type	Default	Note
`visible`	`boolean`	`false`
`rounded`	`boolean`	`true`
`useNativeDriver`	`boolean`	`true`
`children`	`any`
`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`
`hasOverlay?`	`Boolean`	`true`
`onShow?`	`Function`		You can pass shown function as a callback function, will call the function when dialog shown
`onDismiss?`	`Function`		You can pass onDismiss function as a callback function, will call the function when dialog dismissed
`onTouchOutside?`	`Function`	`() => {}`
`onHardwareBackPress?`	`Function`	`() => true`	Handle hardware button presses
`footer?`	`React Element`	`null`	for example: `<View><Button text="DISMISS" align="center" onPress={() => {}}/></View>`

DialogTitle

Prop	Type	Default	Note
`title`	`String`
`style?`	`any`	`null`
`textStyle?`	`any`	`null`
`align?`	`String`	`center`	Available option: `left`, `center`, `right`
`hasTitleBar?`	`Bool`	`true`

DialogContent

Prop	Type	Default	Note
`children`	`any`
`style?`	`any`	`null`

DialogFooter

Prop	Type	Default
`children`	`DialogButton`
`bordered?`	`Boolean`	`true`
`style?`	`any`	null

DialogButton

Prop	Type	Default	Note
`text`	`String`
`onPress`	`Function`
`align?`	`String`	`center`	Available option: `left`, `center`, `right`
`style?`	`any`	`null`
`textStyle?`	`any`	`null`
`activeOpacity?`	`Number`	`0.6`
`disabled?`	`Boolean`	`false`
`bordered?`	`Boolean`	`false`

Overlay

Prop	Type	Default	Note
`visible`	`Boolean`
`opacity`	`Number`	`0.5`
`onPress?`	`Function`
`backgroundColor?`	`string`	`#000`
`animationDuration?`	`Number`	`200`
`pointerEvents?`	`String`	`null`	Available option: `auto`, `none`
`useNativeDriver?`	`Boolean`	`true`

Animation

Params for (*)Animation

FadeAnimation

Preview:

Example:

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

Param	Type	Default
`initialValue`	Number	0
`animationDuration?`	Number	150
`useNativeDriver?`	Boolean	true

ScaleAnimation

Preview:

Example:

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

Param	Type	Default	Note
`initialValue`	Number	0
`useNativeDriver`	Boolean	true

SlideAnimation

Preview:

Example:

new SlideAnimation({
  initialValue: 0, // optional
  slideFrom: 'bottom', // optional
  useNativeDriver: true, // optional
})

Param	Type	Default	Note
`initialValue`	Number	0
`slideFrom`	String	`bottom`	Available option: `top`, `bottom`, `left`, `right`
`useNativeDriver`	Boolean	true

Create your custom animation

Example:

import { Animated } from 'react-native';
import { Animation } from 'react-native-popup-dialog';

class CustomAnimation extends Animation {
  in(onFinished) {
    Animated.spring(this.animate, {
      toValue: 1,
      useNativeDriver: this.useNativeDriver,
    }).start(onFinished);
  }

  out(onFinished) {
    Animated.spring(this.animate, {
      toValue: 0,
      useNativeDriver: this.useNativeDriver,
    }).start(onFinished);
  }

  getAnimations() {
    return {
      transform: [{
        translateY: this.animate.interpolate({
          inputRange: [0, 1],
          outputRange: [800, 1],
        }),
      }],
    };
  }
}

Development

yarn

yarn run build

yarn test