React-native-popup-dialog-hendra 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 😘

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';
import { Button } from 'react-native'

<View style={styles.container}>
  <Button
    title="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(() => {
  console.log('callback - will be called immediately')
});

dismiss

this.popupDialog.dismiss(() => {
  console.log('callback - will be called immediately')
});

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. 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`
`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	Note
`title`	`String`
`titleStyle?`	`any`
`titleTextStyle?`	`any`
`titleAlign?`	`String`	`center`	Available option: `left`, `center`, `right`
`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

Example:

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

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

ScaleAnimation

Example:

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

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

SlideAnimation

Example:

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

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

Development

yarn

yarn run build

dialog popup react dialog react-native react-native-popup-dialog react-native-dialog react native dialog popup-dialog react-component ios android

prop-types babel-plugin-flow-react-proptypes

@everything-registry/sub-chunk-2588 @zalastax/nolb-react-native-po @infinitebrahmanuniverse/nolb-react-native-po

1.0.0

6 years ago