Use Case

• 弹出框

Effect Picture

• 弹出弹出框效果

           

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 hasOverlay? is false then the dismissOnTouchOutside won't work
dismissOnHardwareBackPress?	Bool	true	Only for Android
haveOverlay? (DEPRECATED)
hasOverlay?	Bool	true
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? (DEPRECATED)
hasTitleBar?	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	Note
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