### Announcements - 📣 We're looking for maintainers and contributors! See [#598](https://github.com/react-native-modal/react-native-modal/discussions/598) - 🙏 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	公開日時	ライセンス

react-native-modal	387,087	5,611	57.7 kB	83	6ヶ月前	MIT