How to Create Alert with TextInput in React Native?

Hi Guys,

This tutorial is focused on react native alert with text input example. I’m going to show you about how to implement alert with text input in react native. you will learn how to use alert with text input in react native. if you want to see example of alert with text input example in react native then you are a right place. So, let's follow few step to create example of how to create alert with text input in react native.

Let's start following example:

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: Install and Setup

In this step, you can install react-native-dialog-input:

npm install react-native-dialog-input

Step 3: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import DialogInput from 'react-native-dialog-input';

const App = () => {
    const [visible, setVisible] = React.useState(false);
    const [input, setInput] = React.useState('');

    return (
        <View style={styles.container}>
            {input ? 
                <Text style={styles.title}>{input}</Text>
                :
                <Text style={styles.title}>App</Text>
            }
            <DialogInput 
                isDialogVisible={visible}
                title={"Feedback"}
                message={"Message for Feedback"}
                hintInput ={"Enter Text"}
                submitInput={ (inputText) => {
                    setInput(inputText),
                    setVisible(false);
                }}
                closeDialog={() => setVisible(false)}>
            </DialogInput>
            <Button 
                title='Show'
                onPress={() => setVisible(true)}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    title: {
        fontSize:20, 
        marginBottom:20,
        backgroundColor:'red',
        color:'white',
        padding:15,
        borderRadius:30,
    },
});

export default App;

Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...