rn-overlay | react-native-overlay

Overlay component for React Native, same as Modal component. contains: Overlay(fixed View), Toast(message), Picker(select), DateTime, Dialog.

Contact me: [email protected]

Why create this package ?

• Modal component is not applicable in some scenarios.
• Why some UI components need to reference native modules ? e.g. Toast、Picker ......
• Why are the development and experience of Android and iOS inconsistent ? e.g. Picker、DateTime ......
• I want to make some things easier and consistent.

Demo:

Demo Source Code

TODOs

• ~~Toast~~ (done)
• Dialog
• ~~Picker~~ (done)
• ~~DateTime~~ (done)

Installation

npm install rn-overlay --save

import the rn-overlay package in the lauche file （PROJECT/index.js）

// import rn-overlay in the first line, this will save some trouble.
import 'rn-overlay';

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Usage

• Toast
• Dialog
• Picker
• DateTime

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

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

    onOverlayShow() {
        console.log('Overlay shown');
    }

    onOverlayClose() {
        console.log('Overlay closed');
    }

    render() {
        return <View style={{paddingTop: 200}}>
            <Button title="Show a Overlay" onPress={() => this.overlay.show()}/>
            <Overlay
                // ref for the overlay
                ref={ele => this.overlay = ele}
                // callback function when the Overlay shown
                onShow={this.onOverlayShow}
                // callback function when the Overlay closed
                onClose={this.onOverlayClose}
                // style of the Overlay, same as View component
                style={{justifyContent:"center"}}>
                    <View style={{paddingVertical:80, backgroundColor:"white"}}>
                        <Button title="Close the Overlay" onPress={() => this.overlay.close()}/>
                    </View>
            </Overlay>
        </View>;
    }
}

export default App;

Why not use prop visible to control the display status of Overlay ?

Overlay does not belong to any Screen. if allowed to do that, it will easily cause confusion.

You can also use it in js code:

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

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

    onOverlayShowClick = () => {
        // Overlay.show() will create a instance of Overlay and show it.
        // if a Modal component is showing, the Overlay will cover the Modal component.
        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');
                setTimeout(() => {
                    // the [ this ] is the instance of Overlay. this === overlay variable
                    this.show(); // show it again
                }, 3000);
            }
        });
    }

    render() {
        return <View style={{paddingTop: 200}}>
            <Button title="Show a Overlay" onPress={this.onOverlayShowClick}/>
        </View>;
    }
}

export default App;

if content of the Overlay contains dynamic data, then should pass a function to the children param.

import React from 'react';
import { View, Button, Text, Overlay } from 'react-native';

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

        this.state = {
            n: 0
        };
    }

    onOverlayShowClick = () => {
        let overlay = Overlay.show({
            style: {
                justifyContent: 'center'
            },
            // pass a function to the children param
            children: () => <View style={{paddingVertical:80, backgroundColor:"white"}}>
                <Text style={{textAlign:"center"}}>{this.state.n}</Text>
                <Button title="Click Me" onPress={() => {
                    this.setState({ n: this.state.n + 1 });
                    // use apply() to display the latest data
                    overlay.apply();
                    }}/>
                <Button title="Close the Overlay" onPress={() => { overlay.close(); }}/>
            </View>,
            onShow: () => {
                console.log('Overlay shown');
            },
            onClose: function() {
                console.log('Overlay closed');
            }
        });
    }

    render() {
        return <View style={{paddingTop: 200}}>
            <Button title="Show a Overlay" onPress={this.onOverlayShowClick}/>
        </View>;
    }
}

export default App;

if the Overlay is shown in multiple Screens, the above code will not work properly. you can use scopeState to solve it.

        Overlay.show({
            style: {
                justifyContent: 'center'
            },
            // scopeState: the state of the instance of Overlay
            scopeState: {
                n: 0
            },
            children: function(){
                return <View style={{paddingVertical:80, backgroundColor:"white"}}>
                    {/* this is using state of the instance of Overlay */}
                    {/* [ this ] === current instance of Overlay */}
                    <Text style={{textAlign:"center"}}>{this.scopeState.n}</Text>
                    <Button title="Click Me" onPress={() => {
                        // the usage of setScopeState() is similar to setState()
                        this.setScopeState({ n: this.scopeState.n + 1 });
                        }}/>
                    <Button title="Close the Overlay" onPress={() => { this.close(); }}/>
                </View>;
            },
            onShow: () => {
                console.log('Overlay shown');
            },
            onClose: function() {
                console.log('Overlay closed');
            }
        });

Props

style

Object. The style of overlay. same as View Component .

visible

Boolean. Default display status of the Overlay. default value: false.

onShow

Function. The onShow prop allows passing a function that will be called once the Overlay has been shown.

onClose

Function. The onClose prop allows passing a function that will be called once the Overlay has been closed.

enableBackPress

Boolean. if true, allow press Back Nav at bottom of Android. default value: false.

scopeState

Object. state of the instance of the Overlay.

Static Methods

show(options)

create a instance of Overlay and show it.

params

  options [ object ]

    style: Object. The style of overlay. same as View Component .

    scopeState: Object. state of the instance of the Overlay.

    children: Element or Function. content of the Overlay.

    onShow: Function. The onShow prop allows passing a function that will be called once the Overlay has been shown.

    onClose: Function. The onClose prop allows passing a function that will be called once the Overlay has been closed.

    enableBackPress: Boolean. if true, allow press Back Nav at bottom of Android. default value: false.

Instance Methods

show()

show the Overlay.

close()

close the Overlay.

apply()

use apply() to display the latest data. same as forceUpdate().

setScopeState(updater, [callback])

change scopeState. is similar to setState()