How to create custom dialog box with text input React Native?

React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. In this article, we are going to create a dialog with Text Input. To achieve this we will use React Native’s built-in Modal component which we will use as a Dialog.

There are two ways to create a React Native application you can use any of them, but we are going to use expo-CLI to create our app. Here You can find both of the methods by which you can create an RN App. There are some prerequisites in order to create an RN App. You should have installed the following tools.

1. Node 12 LTS or greater
2. Expo-CLI

To install expo-CLI: Run the below command.

npm install -g expo-cli
or
yarn global add expo-cli

To create App: TestApp is the name of the app, you are free to use any other name

expo init TestApp

To Run the App: Go into the app folder the run the Command.

cd TestApp
expo start

App.js: After running all those commands you should have a directory named TestApp, which will contain files of your React Native app. We are going to edit our App.js file to create a dialog.

Javascript

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { Button, SafeAreaView, StyleSheet, Modal,
         View, TextInput, Dimensions } from "react-native";

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

export default function App() {

    // This is to manage Modal State
    const [isModalVisible, setModalVisible] = useState(false);

    // This is to manage TextInput State
    const [inputValue, setInputValue] = useState("");

    // Create toggleModalVisibility function that will
    // Open and close modal upon button clicks.
    const toggleModalVisibility = () => {
        setModalVisible(!isModalVisible);
    };

    return (
        <SafeAreaView style={styles.screen}>
            <StatusBar style="auto" />

            {/**  We are going to create a Modal with Text Input. */}
            <Button title="Show Modal" onPress={toggleModalVisibility} />

            {/** This is our modal component containing textinput and a button */}
            <Modal animationType="slide"
                   transparent visible={isModalVisible}
                   presentationStyle="overFullScreen"
                   onDismiss={toggleModalVisibility}>
                <View style={styles.viewWrapper}>
                    <View style={styles.modalView}>
                        <TextInput placeholder="Enter something..."
                                   value={inputValue} style={styles.textInput}
                                   onChangeText={(value) => setInputValue(value)} />

                        {/** This button is responsible to close the modal */}
                        <Button title="Close" onPress={toggleModalVisibility} />
                    </View>
                </View>
            </Modal>
        </SafeAreaView>
    );
}

// These are user defined styles
const styles = StyleSheet.create({
    screen: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#fff",
    },
    viewWrapper: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(0, 0, 0, 0.2)",
    },
    modalView: {
        alignItems: "center",
        justifyContent: "center",
        position: "absolute",
        top: "50%",
        left: "50%",
        elevation: 5,
        transform: [{ translateX: -(width * 0.4) },
                    { translateY: -90 }],
        height: 180,
        width: width * 0.8,
        backgroundColor: "#fff",
        borderRadius: 7,
    },
    textInput: {
        width: "80%",
        borderRadius: 5,
        paddingVertical: 8,
        paddingHorizontal: 16,
        borderColor: "rgba(0, 0, 0, 0.2)",
        borderWidth: 1,
        marginBottom: 8,
    },
});

Output: