A pure JavaScript solution for react native`s modal component
JavaScript Objective-C Java
Switch branches/tags
Nothing to show
Clone or download
Latest commit 1be135b Apr 14, 2018
Permalink
Failed to load latest commit information.
Example add example Jan 21, 2016
lib fix modal Apr 14, 2018
.editorconfig init project Jan 17, 2016
.gitattributes 🍭 Added .gitattributes & .gitignore files Jan 13, 2016
.gitignore fix .gitignore Feb 18, 2016
.npmignore Add .npmignore Mar 8, 2017
LICENSE Add MIT license Jan 27, 2016
README.md feat:Add redux support Dec 28, 2017
package.json fix modal Apr 14, 2018

README.md

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 <View /> you can set your own style or animation or anything you can do with View.
  4. redux support.

Install

npm install react-native-root-modal

Usage

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

import Modal from 'react-native-root-modal';

Invoked by React element way.

....other elements before
<Modal
    style={{
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        transform: [{scale: this.state.scaleAnimation}]
    }}

    visible={this.state.modalVisible}
>
    ... You can add anything inside
</Modal>
....other elements after

Just put <Modal /> element anywhere, And it will be front of other elements. And you can set <Modal /> element`s style or other properties inherited from <View /> element

Or you can invoke it by JavaScript class way

Import modal Manager class.

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

Invoke it.

// Create a Modal element on screen.
let modal = new ModalManager(<View style={modal container style}>
    ...modal contents here.
</View>);

// Update (replace) the modal element which is already existed.
modal.update(<View style={modal container style}>
    ...other modal contents here.
</View>);

// Destroy it
modal.destroy();

Example

IOS

Example

Android

Example

Notice

Modal element created by this library can`t cover other native Modal elements,like: Official Modal Element