Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/magicismight/react-native-root-modal

A pure JavaScript solution for react native`s modal component
https://github.com/magicismight/react-native-root-modal

Last synced: 2 months ago
JSON representation

A pure JavaScript solution for react native`s modal component

Lists

README 

        
# react-native-root-modal [![npm version](https://badge.fury.io/js/react-native-root-modal.svg)](http://badge.fury.io/js/react-native-root-modal)



------------------------



## Features

1. Pure javascript solution, easy to install.

2. Support both `React element` way and `javascript class` way to invoke, easy to use.

3. Inherited from `` you can set your own style or animation or anything you can do with View.

4. ~~redux support~~.



## Breaking changes



### 5.x

From 5.x redux support is not enabled by default.

The redux support can be enabled by setting a redux context wrapper.



```

import { setSiblingWrapper } from 'react-native-root-siblings';

import { Provider } from 'react-redux';



// const store = ... get store;



// Call this before using redux context inside RootSiblings.

setSiblingWrapper((sibling) => {sibling});

```



## Install



`npm install react-native-root-modal`



## Usage



Import library any where inside your code before `AppRegistry.registerComponent` is called.



```

import Modal, { AnimatedModal, ModalManager } from 'react-native-root-modal';

```



Invoked by `React element` way.



```

....other elements before



    ... You can add anything inside



....other elements after



```



Just put `` element anywhere, And it will be front of other elements.

And you can set `` element\`s style or other properties inherited from `` element



Or you can invoke it by `JavaScript class` way



Import modal Manager class.

```

import { ModalManager } from 'react-native-root-modal';



```



Invoke it.

```

// Create a Modal element on screen.

let modal = new ModalManager(

    ...modal contents here.

);



// Update (replace) the modal element which is already existed.

modal.update(

    ...other modal contents here.

);



// Destroy it

modal.destroy();

```



## Example



### IOS

----

![Example](./Example/screenShoot.ios.gif)



### Android

----

![Example](./Example/screenShoot.android.gif)

## Notice



Modal element created by this library can\`t cover other `native` Modal elements,like: [Official Modal Element](http://facebook.github.io/react-native/docs/modal.html#content)