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:
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...