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 ProjectIn the first step run the following command to create a project.
expo init ExampleAppStep 2: Install and Setup
In this step, you can install react-native-dialog-input:
npm install react-native-dialog-inputStep 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...