react-native-popup-dialog on NPM

React Native Modals

React Native Modals Library for iOS & Android.

How to thank me ?

Just click on ⭐️ button 😘

Try it with Exponent

BREAKING CHANGE

A lot of backward incompatible changes in v0.22.0. Please, Read the Docs before upgrading to v0.22.0

Installation

npm install --save react-native-modals
# OR
yarn add react-native-modals

Exposed Modules

Modal
ButtomModal
ModalPortal
Backdrop
ModalButton
ModalContent
ModalTitle
ModalFooter
Animation
FadeAnimation
ScaleAnimation
SlideAnimation
DragEvent,
SwipeDirection,
ModalProps
ModalFooterProps
ModalButtonProps
ModalTitleProps
ModalContentProps
BackdropProps

Examples

Example

Setup - this is essential step

The Component can not be used until ModalPortal is mounted. You should register in your app root. For example:

import { ModalPortal } from 'react-native-modals';
import { Provider } from 'react-redux';

const Root = () => {
  return (
    <Provider store={store}>
      <App />
      <ModalPortal />
    </Provider>
  );
}

Basic Usage

import { Modal, ModalContent } from 'react-native-modals';
import { Button } from 'react-native'

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

Usage - Imperative APIs

show

import { ModalPortal } from 'react-native-modals';

const id = ModalPortal.show((
  <View>
    {...}
  </View>
));

update

ModalPortal.update(id, {
  children: (
    <View>
      <Text>Updated</Text>
    </View>
  ),
});

dismiss

ModalPortal.dismiss(id);

dismissAll

ModalPortal.dismissAll(id);

Usage - Animation

import { Modal, SlideAnimation, ModalContent } from 'react-native-modals';

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    modalAnimation={new SlideAnimation({
      slideFrom: 'bottom',
    })}
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Usage - Swipe

import { Modal, ModalContent } from 'react-native-modals';
import { Button } from 'react-native'

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    swipeDirection={['up', 'down']} // can be string or an array
    swipeThreshold={200} // default 100
    onSwipeOut={(event) => {
      this.setState({ visible: false });
    }}
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Usage - Modal Title

import { Modal, ModalTitle, ModalContent } from 'react-native-modals';

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    modalTitle={<ModalTitle title="Modal Title" />}
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Usage - Modal Action

import { Modal, ModalFooter, ModalButton, ModalContent } from 'react-native-modals';

<View style={styles.container}>
  <Modal
    visible={this.state.visible}
    footer={
      <ModalFooter>
        <ModalButton
          text="CANCEL"
          onPress={() => {}}
        />
        <ModalButton
          text="OK"
          onPress={() => {}}
        />
      </ModalFooter>
    }
  >
    <ModalContent>
      {...}
    </ModalContent>
  </Modal>
</View>

Props

Modal

Prop	Type	Default	Note
`visible`	`boolean`	`false`
`rounded`	`boolean`	`true`
`useNativeDriver`	`boolean`	`true`
`children`	`any`
`modalTitle?`	`React Element`		You can pass a `modalTitle` component or pass a `View` for customizing titlebar
`width?`	`Number`	Your device width	The Width of modal, you can use fixed width or use percentage. For example `0.5` it means `50%`
`height?`	`Number`	300	The Height of modal, you can use fixed height or use percentage. For example `0.5` it means `50%`
`modalAnimation?`		`FadeAnimation`	animation for modal
`modalStyle?`	`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 modal shown
`onDismiss?`	`Function`		You can pass onDismiss function as a callback function, will call the function when modal dismissed
`onTouchOutside?`	`Function`	`() => {}`
`onHardwareBackPress?`	`Function`	`() => true`	Handle hardware button presses
`onMove?`	`Function`	`() => {}`
`onSwiping?`	`Function`	`() => {}`
`onSwipeRelease?`	`Function`	`() => {}`
`onSwipingOut?`	`Function`	`() => {}`
`onSwipeOut?`	`Function`
`swipeDirection?`	`string or Array<string>`	[]	Available option: `up`, `down`, `left`, `right`
`swipeThreshold?`	`number`	`100`
`footer?`	`React Element`	`null`	for example: `<View><Button text="DISMISS" align="center" onPress={() => {}}/></View>`

ModalTitle

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

ModalContent

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

ModalFooter

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

ModalButton

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`

Backdrop

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-modals';

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],
        }),
      }],
    };
  }
}