react native modal component
npm install react-native-root-modal------------------------
React element way and javascript class way to invoke, easy to use. you can set your own style or animation or anything you can do with View.``
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) =>
`
npm install react-native-root-modal
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
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
....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();
`
Modal element created by this library can\t cover other native Modal elements,like: Official Modal Element