### Announcements - 📣 We're looking for maintainers and contributors! See [#598](https://github.com/react-native-modal/react-native-modal/discussions/598) - 💡 We're brainstorming if/how we can make a JavaScript-only version of `react-native-modal`. See [#597](https://github.com/react-native-modal/react-native-modal/discussions/597) - 🙏 If you have a question, please [start a new discussion](https://github.com/react-native-modal/react-native-modal/discussions) instead of opening a new issue. # react-native-modal [![npm version](https://badge.fury.io/js/react-native-modal.svg)](https://badge.fury.io/js/react-native-modal) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) > If you're new to the React Native world, please notice that React Native itself offers a [ component that works out-of-the-box](https://reactnative.dev/docs/modal). 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](https://reactnative.dev/docs/modal.html), it works in a similar fashion. 1. Import `react-native-modal`: ```javascript import Modal from "react-native-modal"; ``` 2. Create a `` component and nest its content inside of it: ```javascript function WrapperComponent() { return ( I am the modal content! ); } ``` 3. Then, show the modal by setting the `isVisible` prop to `true`: ```javascript function WrapperComponent() { return ( I am the modal content! ); } ``` 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. ```javascript 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 (

	Stars	Issues	Version	Updated	Created
react-bottom-sheet	5	1	1.1.1	7 years ago	7 years ago
react-native-modal	5,385	138	13.0.1	2 years ago	9 years ago
react-native-raw-bottom-sheet	1,038	5	3.0.0	a month ago	5 years ago
react-native-simple-modal	183	10	9.0.1	6 years ago	8 years ago

react-bottom-sheet vs react-native-modal vs react-native-raw-bottom-sheet vs react-native-simple-modal

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past