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

10 Dec, 2020
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.
Node 12 LTS or greaterExpo-CLI
Node 12 LTS or greater
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 stylesconst 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: 
Picked
React-Native
Technical Scripter 2020
JavaScript
Technical Scripter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.