Demo: Overlay

Docs: https://github.com/caoyongfeng0214/rn-overlay#installation

import React from 'react';
// the Overlay is rn-overlay
import { View, Button, Text, Modal, Overlay } from 'react-native';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            modal: false
        };
    }

    onOverlayShowClick = () => {
        // Overlay.show() will create a instance of Overlay and show it
        let overlay = Overlay.show({
            // style of the Overlay
            style: {
                justifyContent: 'center'
            },
            // content of the Overlay
            children: <View style={{paddingVertical:80, backgroundColor:"white"}}>
                <Button title="Close the Overlay" onPress={() => { overlay.close(); }}/>
            </View>,
            // callback function when the Overlay shown
            onShow: () => {
                console.log('Overlay shown');
            },
            // callback function when the Overlay closed
            onClose: function() {
                console.log('Overlay closed');
            }
        });
    }

    onLeftBottomClick = () => {
        this.overlayLeftBottom.show();
    }

    onShowInModalClick = () => {
        this.overlayInModal.show();
    }

    render() {
        return <View style={{paddingTop: 200}}>
            <Button title="Show a Overlay" onPress={this.onOverlayShowClick}/>
            <Button title="Left Bottom" onPress={this.onLeftBottomClick}/>
            <Button title="Right Bottom" onPress={() => this.overlayRightBottom.show()}/>
            <Button title="Show in Modal" onPress={() => this.setState({modal: true})}/>
            <Overlay ref={ele => this.overlayLeftBottom = ele} style={{left:0, bottom:0, width:160, backgroundColor:"#aaa"}}>
                <View style={{paddingVertical:100}}>
                    <Button title="Close" onPress={() => this.overlayLeftBottom.close()}/>
                </View>
            </Overlay>
            <Overlay ref={ele => this.overlayRightBottom = ele} style={{right:0, bottom:0, width:160, backgroundColor:"yellow"}}>
                <View style={{paddingVertical:100}}>
                    <Button title="Close" onPress={() => this.overlayRightBottom.close()}/>
                </View>
            </Overlay>
            <Modal visible={this.state.modal} transparent={true}>
                <View style={{paddingVertical:100, backgroundColor:"#bbb"}}>
                    <Text style={{textAlign:"center"}}>This is a Modal</Text>
                    <Button title="Show a Overlay" onPress={this.onShowInModalClick}/>
                    <Button title="Close Modal" onPress={() => this.setState({modal: false})}/>
                    <Overlay ref={ele => this.overlayInModal = ele} style={{width:"50%", backgroundColor:"yellow", justifyContent:"center"}}>
                        <Button title="Close" onPress={() => this.overlayInModal.close()}/>
                    </Overlay>
                </View>
            </Modal>
        </View>;
    }
}

export default App;