Home

Awesome

Build Status npm npm

React Native Modals

React Native Modals Library for iOS & Android.

How to thank me ?

Just click on ⭐️ button 😘

Try it with Exponent<br>

<br> <br> <!-- ![Example](https://jacklam718.github.io/react-native-modals/resources/react-native-modals.gif) --> <span> <img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/swipeable-modal.gif" width="220">&nbsp;&nbsp; <img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/bottom-modal.gif" width="220">&nbsp;&nbsp; <img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/slide-animation.gif" width="220"> </span>

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

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

PropTypeDefaultNote
visiblebooleanfalse
roundedbooleantrue
useNativeDriverbooleantrue
childrenany
modalTitle?React ElementYou can pass a modalTitle component or pass a View for customizing titlebar
width?NumberYour device widthThe Width of modal, you can use fixed width or use percentage. For example 0.5 it means 50%
height?Number300The Height of modal, you can use fixed height or use percentage. For example 0.5 it means 50%
modalAnimation?FadeAnimationanimation for modal
modalStyle?any
containerStyle?anynullFor example: { zIndex: 10, elevation: 10 }
animationDuration?Number200
overlayPointerEvents?StringAvailable option: auto, none
overlayBackgroundColor?String#000
overlayOpacity?Number0.5
hasOverlay?Booleantrue
onShow?FunctionYou can pass shown function as a callback function, will call the function when modal shown
onDismiss?FunctionYou can pass onDismiss function as a callback function, will call the function when modal dismissed
onTouchOutside?Function() => {}
onHardwareBackPress?Function() => trueHandle 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?number100
footer?React Elementnullfor example: <View><Button text="DISMISS" align="center" onPress={() => {}}/></View>

ModalTitle

PropTypeDefaultNote
titleString
style?anynull
textStyle?anynull
align?StringcenterAvailable option: left, center, right
hasTitleBar?Booltrue

ModalContent

PropTypeDefaultNote
childrenany
style?anynull

ModalFooter

PropTypeDefaultNote
childrenModalButton
bordered?Booleantrue
style?anynull

ModalButton

PropTypeDefaultNote
textString
onPressFunction
align?StringcenterAvailable option: left, center, right
style?anynull
textStyle?anynull
activeOpacity?Number0.6
disabled?Booleanfalse
bordered?Booleanfalse

Backdrop

PropTypeDefaultNote
visibleBoolean
opacityNumber0.5
onPress?Function
backgroundColor?string#000
animationDuration?Number200
pointerEvents?StringnullAvailable option: auto, none
useNativeDriver?Booleantrue

Animation

Params for (*)Animation

FadeAnimation

Preview:
<img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/fade-animation.gif" width="200">
Example:
new FadeAnimation({
  initialValue: 0, // optional
  animationDuration: 150, // optional
  useNativeDriver: true, // optional
})
ParamTypeDefaultNote
initialValueNumber0
animationDuration?Number150
useNativeDriver?Booleantrue

ScaleAnimation

Preview:
<img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/scale-animation.gif" width="200">
Example:
new ScaleAnimation({
  initialValue: 0, // optional
  useNativeDriver: true, // optional
})
ParamTypeDefaultNote
initialValueNumber0
useNativeDriverBooleantrue

SlideAnimation

Preview:
<img src="https://raw.githubusercontent.com/jacklam718/react-native-modals/master/.github/slide-animation.gif" width="200">
Example:
new SlideAnimation({
  initialValue: 0, // optional
  slideFrom: 'bottom', // optional
  useNativeDriver: true, // optional
})
ParamTypeDefaultNote
initialValueNumber0
slideFromStringbottomAvailable option: top, bottom, left, right
useNativeDriverBooleantrue

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

Development

yarn

yarn run build

yarn test