An enhanced and customizable react-native modal

react-native-modal

An enhanced, animated and customizable react-native modal.

Features

• Smooth enter/exit animations
• Plain simple and flexible APIs
• Customizable backdrop opacity, color and timing
• Listeners for the modal animations ending
• Resize itself correctly on device rotation
• Swipeable
• Scrollable

Demo

Setup

This library is available on npm, install it with: npm install --save react-native-modal or yarn add react-native-modal.

Usage

Since react-native-modal is an extension of the original react native modal, it works in a similar fashion react-native original modal.

1. Import react-native-modal:

import Modal from "react-native-modal";

2. Create a modal and nest its content inside of it:

render () {
    return (
      <View>
        <Modal>
          <View style={{ flex: 1 }}>
            <Text>I am the modal content!</Text>
          </View>
        </Modal>
      </View>
    )
  }

3. Then simply show it by setting the isVisible prop to true:

render () {
    return (
      <View>
        <Modal isVisible={true}>
          <View style={{ flex: 1 }}>
            <Text>I am the modal content!</Text>
          </View>
        </Modal>
      </View>
    )
  }

The isVisible prop is the only prop you'll really need to make the modal work: you should control this prop value by saving it in your state and setting it to true or false when needed.

A complete example

The following example consists in a component (ModalTester) with a button and a modal.
The modal is controlled by the isModalVisible state variable and it is initially hidden, since its value is false.
Pressing the button sets isModalVisible to true, making the modal visible.
Inside the modal there is another button that, when pressed, sets isModalVisible to false, hiding the modal.

import React, { Component } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import Modal from "react-native-modal";

export default class ModalTester extends Component {
  state = {
    isModalVisible: false
  };

  _toggleModal = () =>
    this.setState({ isModalVisible: !this.state.isModalVisible });

  render() {
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity onPress={this._toggleModal}>
          <Text>Show Modal</Text>
        </TouchableOpacity>
        <Modal isVisible={this.state.isModalVisible}>
          <View style={{ flex: 1 }}>
            <Text>Hello!</Text>
            <TouchableOpacity onPress={this._toggleModal}>
              <Text>Hide me!</Text>
            </TouchableOpacity>
          </View>
        </Modal>
      </View>
    );
  }
}

For a more complex example take a look at the /example directory.

Available props

GitHub