React Native Alert with TextInput Example

Jul 01, 2022 . Admin

Hi Guys,

I am going to explain you example of how to create alert with text input in react native. This post will give you simple example of react native alert with text input example. I would like to show you how to implement alert with text input in react native. we will help you to give example of how to use alert with text input in react native. Here, Creating a basic example of alert with text input example 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.