# react-native-modalbox > A component for react-native Latest version **2.0.2** (published 2020-10-09) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-modalbox pnpm add react-native-modalbox yarn add react-native-modalbox bun add react-native-modalbox ``` ## Health **Score 23/100 (F)** — status: abandoned. Positive: has types package; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.2 | | Published | 2020-10-09 | | First published | 2015-07-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | separate (@types/react-native-modalbox) | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 20.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2916 | | Author | Maxime Mezrahi | | Maintainers | maxs15 | | Keywords | react-component, react-native, ios, android, modal, box, modalbox, window, swipe | ## Links - npm: https://www.npmjs.com/package/react-native-modalbox - Repository: https://github.com/maxs15/react-native-modalbox - Homepage: https://github.com/maxs15/react-native-modalbox#readme - Issues: https://github.com/maxs15/react-native-modalbox/issues - npm.io page: https://npm.io/package/react-native-modalbox ## Dependencies (1) - [prop-types](https://npm.io/package/prop-types.md) ^15.5.10 ## Alternatives - [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads - [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads - [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads - [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads - [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads ## Recent versions - 2.0.2 (latest) — 2020-10-09 - 2.0.1 — 2020-10-04 - 2.0.0 — 2019-09-28 - 1.7.1 — 2019-01-29 - 1.7.0 — 2019-01-29 - 1.6.0 — 2018-07-06 - 1.5.0 — 2018-06-01 - 1.4.2 — 2017-08-05 - 1.4.1 — 2017-07-14 - 1.4.0 — 2017-06-28 - 1.3.12 — 2017-06-28 - 1.3.11 — 2017-06-26 - 1.3.10 — 2017-06-26 - 1.3.9 — 2017-02-08 - 1.3.8 — 2016-10-11 - … 25 more at https://npm.io/package/react-native-modalbox/versions ## README # react-native-modalbox [![npm](https://img.shields.io/npm/dm/react-native-modalbox.svg?maxAge=2592000)]() [![npm](https://img.shields.io/npm/dt/react-native-modalbox.svg?maxAge=2592000)]() A react native component, easy, fully customizable, implementing the 'swipe down to close' feature. ## Wanna implement IAP in your beautiful modal? 👇 IAPHUB
## Preview ![](https://i.imgur.com/QTAYh81.gif) ![](http://i.imgur.com/3XULLt8.gif) ## Install `npm install react-native-modalbox@latest --save` ## Example Check [index.js](https://github.com/maxs15/react-native-modalbox/blob/master/Example/index.ios.js) in the Example folder. ## Version note | react-native | react-native-modalbox | | :------------ |:---------------:| | <= 0.57 | <= 1.6.0 | | >= 0.58 | >= 1.6.1 | ## Properties | Prop | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | isOpen | false | `bool` | Open/close the modal, optional, you can use the open/close methods instead | | isDisabled | false | `bool` | Disable any action on the modal (open, close, swipe) | | backdropPressToClose | true | `bool` | Close the the modal by pressing on the backdrop | | swipeToClose | true | `bool` | Set to `true` to enable the swipe down to close feature | | swipeThreshold | 50 | `number` | The threshold to reach in pixels to close the modal | | swipeArea | - | `number` | The height in pixels of the swipeable area, window height by default | | position | center | `string` | Control the modal position using `top` or `center` or `bottom` | | entry | bottom | `string` | Control the modal entry position `top` or `bottom` | | backdrop | true | `bool` | Display a backdrop behind the modal | | backdropOpacity | 0.5| `number` | Opacity of the backdrop | | backdropColor | black| `string` | backgroundColor of the backdrop | | backdropContent | null| `ReactElement` | Add an element in the backdrop (a close button for example) | | animationDuration | 400| `number` | Duration of the animation | | easing | Easing.elastic(0.8) | `function` | Easing function applied to opening modal animation | | backButtonClose | false | `bool` | (Android only) Close modal when receiving back button event | | startOpen | false | `bool` | Allow modal to appear open without animation upon first mount | | coverScreen | false | `bool` | Will use RN `Modal` component to cover the entire screen wherever the modal is mounted in the component hierarchy | | keyboardTopOffset | ios:22, android:0 | `number` | This property prevent the modal to cover the ios status bar when the modal is scrolling up because the keyboard is opening | | useNativeDriver | true | `bool` | Enables the hardware acceleration to animate the modal. Please note that enabling this can cause some flashes in a weird way when animating | ## Events | Prop | Params | Description | | :------------ |:---------------:| :---------------:| | onClosed | - | When the modal is close and the animation is done | | onOpened | - | When the modal is open and the animation is done | | onClosingState | state `bool` | When the state of the swipe to close feature has changed (usefull to change the content of the modal, display a message for example) | ## Methods These methods are optional, you can use the isOpen property instead | Prop | Params | Description | | :------------ |:---------------:| :---------------:| | open | - | Open the modal | | close | - | Close the modal | --- _Source: https://npm.io/package/react-native-modalbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._