react-native-modal

What is react-native-modal?

react-native-modal is a customizable modal component for React Native applications. It provides a variety of features to create modals with different animations, styles, and behaviors.

What are react-native-modal's main functionalities?

Basic Modal

This code demonstrates a basic modal that can be toggled on and off with a button. The modal contains a simple text and a button to hide the modal.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import Modal from 'react-native-modal';

const BasicModalExample = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Modal" onPress={toggleModal} />
      <Modal isVisible={isModalVisible}>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Hello!</Text>
          <Button title="Hide Modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

export default BasicModalExample;

Custom Animation

This code demonstrates a modal with custom animations. The modal slides in from the left and slides out to the right.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import Modal from 'react-native-modal';

const CustomAnimationModalExample = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Modal" onPress={toggleModal} />
      <Modal isVisible={isModalVisible} animationIn="slideInLeft" animationOut="slideOutRight">
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Custom Animation!</Text>
          <Button title="Hide Modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

export default CustomAnimationModalExample;

Backdrop Customization

This code demonstrates a modal with a customized backdrop. The backdrop color is set to red with an opacity of 0.8.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import Modal from 'react-native-modal';

const BackdropCustomizationModalExample = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Modal" onPress={toggleModal} />
      <Modal isVisible={isModalVisible} backdropColor="red" backdropOpacity={0.8}>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Custom Backdrop!</Text>
          <Button title="Hide Modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

export default BackdropCustomizationModalExample;

Other packages similar to react-native-modal

react-native-modalbox

react-native-modalbox is another modal component for React Native. It provides similar functionalities such as custom animations and backdrop customization. However, react-native-modalbox is known for its simplicity and ease of use, making it a good choice for developers who need basic modal functionalities without extensive customization options.

react-native-popup-dialog

react-native-popup-dialog is a highly customizable dialog component for React Native. It offers a wide range of features including custom animations, backdrop customization, and various dialog types (e.g., alert, confirm). Compared to react-native-modal, react-native-popup-dialog provides more built-in dialog types and is more focused on creating different types of dialogs rather than just modals.

react-native-root-modal

react-native-root-modal is a modal component that allows you to render modals at the root level of your application. This package is useful for creating global modals that can be triggered from anywhere in the app. While it offers similar functionalities to react-native-modal, react-native-root-modal is more focused on providing a global modal solution.

README

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";

1. 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>
    )
  }

1. 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

Name	Type	Default	Description
animationIn	string or object	'slideInUp'	Modal show animation
animationInTiming	number	300	Timing for the modal show animation (in ms)
animationOut	string or object	'slideOutDown'	Modal hide animation
animationOutTiming	number	300	Timing for the modal hide animation (in ms)
avoidKeyboard	bool	false	Move the modal up if the keyboard is open
backdropColor	string	'black'	The backdrop background color
backdropOpacity	number	0.70	The backdrop opacity when the modal is visible
backdropTransitionInTiming	number	300	The backdrop show timing (in ms)
backdropTransitionOutTiming	number	300	The backdrop hide timing (in ms)
children	node	REQUIRED	The modal content
isVisible	bool	REQUIRED	Show the modal?
onBackButtonPress	func	() => null	Called when the Android back button is pressed
onBackdropPress	func	() => null	Called when the backdrop is pressed
onModalHide	func	() => null	Called when the modal is completely hidden
onModalShow	func	() => null	Called when the modal is completely visible
onSwipe	func	null	Called when the swipeThreshold has been reached
scrollOffset	number	0	When > 0, disables swipe-to-close, in order to implement scrollable content
scrollOffsetMax	number	0	Used to implement overscroll feel when content is scrollable. See /example directory
scrollTo	func	null	Used to implement scrollable modal. See /example directory for reference on how to use it
swipeThreshold	number	100	Swiping threshold that when reached calls onSwipe
swipeDirection	string	null	Defines the direction where the modal can be swiped (can be 'up', 'down', 'left, or 'right')
useNativeDriver	bool	false	Defines if animations should use native driver
hideModalContentWhileAnimating	bool	false	Enhances the performance by hiding the modal content until the animations complete
style	any	null	Style applied to the modal

Frequently Asked Questions

The component is not working as expected

Under the hood react-native-modal uses react-native original Modal component.
Before reporting a bug, try swapping react-native-modal with react-native original Modal component and, if the issue persists, check if it has already been reported as a react-native issue.

The backdrop is not completely filled/covered on some Android devices (Galaxy, for one)

Checkout the package react-native-extra-dimensions-android

To use, here's an example:

const IOS = Platform.OS === "ios";
const WIDTH = Dimensions.get("window").width;
const HEIGHT = IOS
  ? Dimensions.get("window").height
  : require("react-native-extra-dimensions-android").get("REAL_WINDOW_HEIGHT");

How can I hide the modal by pressing outside of its content?

The prop onBackdropPress allows you to handle this situation:

<Modal
  isVisible={this.state.isVisible}
  onBackdropPress={() => this.setState({ isVisible: false })}
>
  <View style={{ flex: 1 }}>
    <Text>I am the modal content!</Text>
  </View>
</Modal>

How can I hide the modal by swiping it?

The prop onSwipe allows you to handle this situation (remember to set swipeDirection too!):

<Modal
  isVisible={this.state.isVisible}
  onSwipe={() => this.setState({ isVisible: false })}
  swipeDirection="left"
>
  <View style={{ flex: 1 }}>
    <Text>I am the modal content!</Text>
  </View>
</Modal>

The modal flashes in a weird way when animating

Unfortunately this is a know issue that happens when useNativeDriver=true and must still be solved.
In the meanwhile as a workaround you can set the hideModalContentWhileAnimating prop to true: this seems to solve the issue. Also, do not assign a backgroundColor property directly to the Modal. Prefer to set it on the child container.

The modal background doesn't animate properly

Are you sure you named the isVisible prop correctly? Make sure it is spelled correctly: isVisible, not visible.

The modal doesn't change orientation

Add a supportedOrientations={['portrait', 'landscape']} prop to the component, as described in the React Native documentation.

Available animations

Take a look at react-native-animatable to see the dozens of animations available out-of-the-box. You can also pass in custom animation definitions and have them automatically register with react-native-animatable. For more information on creating custom animations, see the react-native-animatable animation definition schema.

Acknowledgements

Thanks @oblador for react-native-animatable, @brentvatne for the npm namespace and to anyone who contributed to this library!

Pull requests, feedbacks and suggestions are welcome!