# react-native-modal-no-unmount

> Keep modal alive after invisble!

Latest version **1.0.2** (published 2018-01-15) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install react-native-modal-no-unmount
pnpm add react-native-modal-no-unmount
yarn add react-native-modal-no-unmount
bun add react-native-modal-no-unmount
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-01-15 |
| First published | 2018-01-13 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Binh Nguyen |
| Maintainers | binhnd |
| Keywords | react-native |

## Links

- npm: https://www.npmjs.com/package/react-native-modal-no-unmount
- Repository: https://github.com/binhnd-socicom/react-native-modal-no-unmount
- Homepage: https://github.com/binhnd-socicom/react-native-modal-no-unmount#readme
- Issues: https://github.com/binhnd-socicom/react-native-modal-no-unmount/issues
- npm.io page: https://npm.io/package/react-native-modal-no-unmount

## Recent versions

- 1.0.2 (latest) — 2018-01-15
- 1.0.1 — 2018-01-13
- 1.0.0 — 2018-01-13

## README

# react-native-modal-no-unmount (iOS only!)

## Why the module needed?

With simple view displayed, using default react-native Modal component is perfect.
The problem is, the view will be unmounted after the Modal invisible without any chances to keep it alive!

All states of the destroyed view should be saved somewhere (like Redux store) for restoing when open it again such as scroll position, stack-navigation state... The more states we want to restore, the more complicated and cases we have to handle and test!

## Solution

The module refer ALL code of Modal component in react-native@0.51.0
The modification points are as below:

1. In js code
- Keep Modal alive if visible = false
- Add `visible` prop to native module

2. In native code
- Clone `RCTModalHostViewManager` and `RCTModalHostView` classes to make `RNModalNoUnmountManager` and `RNModalHostView`
- Add `visible` prop to `RNModalHostView` class
- Present/Dismiss modal view by the setter of the `visible` prop.

## Getting started

`$ npm install react-native-modal-no-unmount --save`

### Mostly automatic installation

`$ react-native link react-native-modal-no-unmount`

### Manual installation


#### iOS

1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-modal-no-unmount` and add `RNModalNoUnmount.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNModalNoUnmount.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

#### Android

1. Open up `android/app/src/main/java/[...]/MainActivity.java`
  - Add `import com.reactlibrary.RNModalNoUnmountPackage;` to the imports at the top of the file
  - Add `new RNModalNoUnmountPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
    ```
    include ':react-native-modal-no-unmount'
    project(':react-native-modal-no-unmount').projectDir = new File(rootProject.projectDir,   '../node_modules/react-native-modal-no-unmount/android')
    ```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
    ```
      compile project(':react-native-modal-no-unmount')
    ```

## Usage
```javascript
import { Modal, Platform } from 'react-native';
import RNModalNoUnmount from 'react-native-modal-no-unmount';

const ModalComponent = Platform.select({
  ios: RNModalNoUnmount,
  android: Modal,
});

...

render() {
    // Using it exactly as what you are doing with Modal component
    return <ModalComponent>...</ModalComponent>
}
```

---
_Source: https://npm.io/package/react-native-modal-no-unmount · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._