React Native Modal box

Run the following command with your project directory

    npm i react-native-modalbox

Code for modal box

    Open index.js and replace the code with the following code

index.js 

import React,{Component} from 'react';

import { View, Button } from "react-native";

import styles from './styles';

import ModalBox from "./ModalBox";

class Account extends Component {

    closePhoto = () => {

        this._modalPhoto.close();

    };

    openPhoto = () => {

        this._modalPhoto.open();

    };

    render() {

        return (

            <View style={styles.container}>

                <Button title="open" onPress={this.openPhoto}></Button>

                <Login ref={(com) => (this._modalPhoto = com)} />

            </View>

        );

    }

}

export default Account;

ModalBox.js

import React, { Component, useState } from "react";

import { Text, TouchableOpacity } from "react-native";

import styles from './styles';

import Modal from "react-native-modalbox"

class ModalBox extends Component {

    open = () => {

        this._modalPhoto.open();

    };

    close = () => {

        this._modalPhoto.close();

    };

    render() {

        return (

            <Modal

                ref={(com) => (this._modalPhoto = com)}

                useNativeDriver

                swipeToClose={false}

                animationDuration={200}

                style={styles.modalBoxWrap}

            >

                <Text style={{justifyContent:"center",alignContent:'center',marginTop:30}}>login</Text>

                <TouchableOpacity style={styles.iconZoom} onPress={this.close}>

                    <Text style={styles.textClose}>close</Text>

                </TouchableOpacity>

            </Modal>

        );

    }

}

export default ModalBox;

styles.js

import { StyleSheet, Platform, Dimensions } from "react-native";

const { width, height } = Dimensions.get("window");

export default StyleSheet.create({

    modalBoxWrap: {

        position: "absolute",

        borderRadius: 2,

        width,

        height,

        zIndex: 9999,

        backgroundColor:'red'

    },

    iconZoom: {

        position: "absolute",

        right: 10,

        top: 10,

        backgroundColor: "rgba(255,255,255,.9)",

        paddingTop: 4,

        paddingRight: 4,

        paddingBottom: 4,

        paddingLeft: 8,

        zIndex: 9999,

    },

    textClose: {

        color: "#666",

        fontWeight: "600",

        fontSize: 15,

        margin: 4,

        zIndex: 9999,

    },

});