To help you get started, we've collected the most common ways that react-native-modal is being used within popular public projects.

EdgeApp / edge-react-gui / src / modules / UI / components / PasswordReminderModal / components / Modal.ui.js View on Github

export type ItemState = {}

Modal.Item = class Item extends Component {
  render () {
    return 
  }
}

// BODY /////////////////////////////////////////////////////////////////////////////
export type BodyProps = {
  children: Node,
  style?: Object
}
export type BodyState = {}

Modal.Body = class Body extends Component {
  render () {
    return 
  }
}

// FOOTER /////////////////////////////////////////////////////////////////////////////
export type FooterProps = {
  children: Node,
  style?: Object
}
export type FooterState = {}

Modal.Footer = class Footer extends Component {
  render () {
    return 
  }

View more ways to use react-native-modal

Announcements

• 📣 We're looking for maintainers and contributors! See #598
• 💡 We're brainstorming if/how we can make a JavaScript-only version of react-native-modal. See #597
• 🙏 If you have a question, please start a new discussion instead of opening a new issue.

react-native-modal

> If you're new to the React Native world, please notice that React Native itself offers a component that works out-of-the-box.

An enhanced, animated, customizable React Native modal.

The goal of react-native-modal is expanding the original React Native `` component by adding animations, style customization options, and new features, while still providing a simple API.

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

Setup

This library is available on npm, install it with: npm i 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.

1. Import react-native-modal:

import Modal from "react-native-modal";

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

function WrapperComponent() {
  return (
    
  );
}

3. Then, show the modal by setting the isVisible prop to true:

function WrapperComponent() {
  return (
    
  );
}

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 wrapper component 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, { useState } from "react";
import { Button, Text, View } from "react-native";
import Modal from "react-native-modal";

function ModalTester() {
  const [isModalVisible, setModalVisible] = useState(false);

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

  return (