How to use Alert with TextInput in React Native?

Hi Guys,

Are you looking for example of how to use alert with text input in react native. you can understand a concept of react native alert with text input example. if you want to see example of alert with text input example in react native then you are a right place. you can see how to implement alert with text input in react native. Here, Creating a basic example of how to create alert with text input in react native.

Let's start following example:

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

expo init ExampleApp

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

npm install react-native-dialog-input

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;

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

expo start

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

It will help you...