React Native Android Modal Using Portal

Since that react native didn’t provide modal component for android, We can use Portal to display contents on top of every component.

import Portal from 'react-native/Libraries/Portal/Portal';

and need unique tag to show Portal and close Portal

export default class Modal extends Component{
.....
  componentWillMount() {
      this.tag = Portal.allocateTag();
      if (this.props.visible) {
        Portal.showModal(this.tag, this._renderModal(this.props));
      }
    }
  componentWillReceiveProps(newProps: Object) {
    if (newProps.visible) {
      Portal.showModal(this.tag, this._renderModal(newProps));
      this.animateUp(); //some animation display when modal open
    } else {
      //some animation display when modal close
      this.animateDown();

      InteractionManager.runAfterInteractions(()=>{
        Portal.closeModal(this.tag);
      })
    }
.....

render component on Portal

_renderModal = (newProps: Object) => {
    var children = newProps.children;
    let {style, animated} = this.props
    if(!animated){
      return (
        <View style={style?style:styles.container}>
          {content}
        </View>
      )
    } else {
      return (
        <Animated.View 
         style={[styles.container,{top: this.state.pos}]}
        >
          {content}
        </Animated.View>
      )
    }
};

Leaving render method return null

The basic usage would be

<Modal visible={ this.state.showModal } style={styles.container}>
  <View>
    .......
 </View>
</Modal>