Wondering what’s next for npm?Check out our public roadmap! »

    react-native-popup-dialog
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-native-popup-dialog package

    0.18.3 • Public • Published

    Build Status npm npm

    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

    Install

    npm i react-native-popup-dialog

    DownloadsWeekly Downloads

    5,408

    Version

    0.18.3

    License

    MIT

    Unpacked Size

    4.62 MB

    Total Files

    58

    Last publish

    Collaborators

    • avatar