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: 4 days ago
JSON representation

A pure JavaScript solution for react native`s modal component

• Host: GitHub
• URL: https://github.com/magicismight/react-native-root-modal
• Owner: magicismight
• License: mit
• Created: 2016-01-17T14:32:25.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2024-03-10T12:43:33.000Z (9 months ago)
• Last Synced: 2024-10-14T00:31:36.261Z (about 2 months ago)
• Language: JavaScript
• Size: 2.09 MB
• Stars: 366
• Watchers: 15
• Forks: 56
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-root-modal ★304 - React native modal component (Components / UI)
• awesome-reactnative-ui - react-native-root-modal - native-root-modal/master/./Example/screenShoot.ios.gif)| (Others)
• awesome-react-native - react-native-root-modal ★304 - React native modal component (Components / UI)
• awesome-reactnative-ui - react-native-root-modal - native-root-modal/master/./Example/screenShoot.ios.gif)| (Others)
• awesome-react-native - react-native-root-modal - React native modal component.  (Components / Dialog/Modal/Alert)
• awesome-react-native - react-native-root-modal ★304 - react native modal component (Components / UI)
• awesome-react-native-ui - react-native-root-modal ★154 - react native modal component (Components / UI)
• awesome-react-native - react-native-root-modal ★304 - React native modal component (Components / UI)

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)