How to get TextInput inside typed value in React Native android iOS application and Show entered value in Alert Dialog message on screen.
TextInput is used to obtain value from application user in React Native. The same work has done in android using EditText. This tutorial is one of the most basic tutorial for React Native learners. Using this example a beginner can easily learn about State and Props. Because in React Native everything is depend on States and Props. So let’s get started .
What we are doing in this project : In this tutorial we would retrieving the Text Input entered value on button click and displaying the entered value on screen using Alert.
Contents in this project Retrieve TextInput entered value on Button onPress :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add AppRegistry, StyleSheet, TextInput, View, Alert and Button component in import block.
|
1
|
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button } from ‘react-native’;
|
3. Create Constructor in your application’s main class with props parameter.
|
1
2
3
4
5
|
constructor(props) {
}
|
3. Now add super method inside constructor with same props parameter.
|
1
2
3
4
5
6
7
|
constructor(props) {
super(props)
}
|
4. Add this.state in constructor and set TextInputValueHolder = ‘ ‘ empty. To control the data which is going to change in React Native application we have to use state. Here this.state represents that this state belongs to same class.
|
1
2
3
4
5
6
7
8
9
10
11
|
constructor(props) {
super(props)
this.state = {
TextInputValueHolder: ”
}
}
|
5. Create a function with named as GetValueFunction . In this function we have been creating a constant TextInputValueHolder and assign the value present on this.state to it. After getting the value in variable we have printing that value on screen using Alert dialog.s
|
1
2
3
4
5
6
7
|
GetValueFunction = () =>{
const { TextInputValueHolder } = this.state ;
Alert.alert(TextInputValueHolder)
}
|
6. Add View component in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View>
</View>
);
}
|
7. Create custom style sheet class named as MainContainer just above the AppRegistry.registerComponent line.
|
1
2
3
4
5
6
7
8
9
10
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
}
});
|
8. Call MainContainer class in View.
|
1
2
3
4
5
6
7
8
9
10
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
9. Add Text Input component inside View. Here placeholder represents the hint inside TextInput, onChangeText method set state’s value each type when user types somethings inside it and update the state value and using inline style we have set its inside typed text alignment center and TextInput height as 50 pixels.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Text here”
onChangeText={TextInputValueHolder => this.setState({TextInputValueHolder})}
style={{textAlign: ‘center’, marginBottom: 7, height: 50}}
/>
</View>
|
10. Add Button component in View just below the TextInput component. Call the GetValueFunction on onPress of button.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Text here”
onChangeText={TextInputValueHolder => this.setState({TextInputValueHolder})}
style={{textAlign: ‘center’, marginBottom: 7, height: 50}}
/>
<Button title=“Get Text Input Entered Value” onPress={this.GetValueFunction} color=“#2196F3” />
</View>
|
11. Complete Source Code for index.android.js file :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button } from ‘react-native’;
class Myproject extends Component {
constructor(props) {
super(props)
this.state = {
TextInputValueHolder: ”
}
}
GetValueFunction = () =>{
const { TextInputValueHolder } = this.state ;
Alert.alert(TextInputValueHolder)
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Text here”
onChangeText={TextInputValueHolder => this.setState({TextInputValueHolder})}
style={{textAlign: ‘center’, marginBottom: 7, height: 50}}
/>
<Button title=“Get Text Input Entered Value” onPress={this.GetValueFunction} color=“#2196F3” />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
}
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshots :
Also Read :
React Native Create Stopwatch Timer Android iOS Example Tutorial
React Native Change ListView Mode To GridView Dynamically on Button Click
React Native Vertical ScrollView Android iOS Example Tutorial
Disable Screen Rotation Landscape Mode in Android iOS React Native
Debug React Native Android iOS App Using Console.log Tutorial
