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

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 | Note | |---|---|---|---| | 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 | Note | |---|---|---|---| | 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