react-native-global-modal

Single instance Modal in Global scope

Preview

install

npm

npm install react-native-global-modal

yarn

yarn add react-native-global-modal

Usage

import {GlobalＭodal} from "react-native-global-modal";

export class SomeRootView extends React.Component<Props, State> {
    render() {
        return (
            <!-- ... some else component -->
            <GlobalModal />
            <!-- ... some else component -->
        );
    }
}

API

GlobalModal.open(renderFunction)

GlobalModal.close()

Render Example

() => (
    <View style={styles.modalContainer}>
        <Text style={styles.modalText}>Modal 2</Text>
        <TouchableOpacity style={styles.closeButton} onPress={GlobalModal.close}>
            <Text style={styles.modalText}>✕</Text>
        </TouchableOpacity>
    </View>
)
...

const styles = {
    modalContainer: {
        width: 250,
        height: 200,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "grey",
        borderRadius: 10,
    },
    modalText: {
        color: "#EEEEEE",
    },
    closeButton: {
        position: "absolute",
        top: 5,
        right: 7,
    },
}