How to Use Alert with TextInput in React Native?

Hi Developers,

Looking for an **example of how to use an alert with a text input in React Native**? This guide will help you implement a **React Native alert dialog** with an input field, useful for forms, feedback, or user prompts. Follow the **step-by-step tutorial** below!

Run the following command to create a new React Native project:

expo init ExampleApp

Install the required package:

npm install react-native-dialog-input

Update the `App.js` file to implement the alert with a text input field:

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 (
        
            {input ? 
                {input}
                :
                App
            }
             {
                    setInput(inputText);
                    setVisible(false);
                }}
                closeDialog={() => setVisible(false)}
            />
             setVisible(true)}
            />
        
    );
};

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;

Start your app using Expo:

expo start

Scan the **QR code** in the **Expo Go** app to see it in action.

if (inputText.trim() === '') {
   alert('Please enter a valid input');
}
    

setVisible(false);