- Notifications
You must be signed in to change notification settings - Fork56
A pure JavaScript solution for react native`s modal component
License
magicismight/react-native-root-modal
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
- Pure javascript solution, easy to install.
- Support both
React elementway andjavascript classway to invoke, easy to use. - Inherited from
<View />you can set your own style or animation or anything you can do with View. redux support.
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) => <Provider store={store}>{sibling}</Provider>);npm install react-native-root-modal
Import library any where inside your code beforeAppRegistry.registerComponent is called.
import Modal, { AnimatedModal, ModalManager } from 'react-native-root-modal';Invoked byReact 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 afterJust 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 byJavaScript 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(<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 itmodal.destroy();
Modal element created by this library can`t cover othernative Modal elements,like:Official Modal Element
About
A pure JavaScript solution for react native`s modal component
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.