Text Input is used to get value from user in react native apps but sometimes user leaves it empty and by mistake click on buttons. If there is no values present inside the Text Input then it will store the blank value or say space to database, which seems very wrong if you are a professional developer. So using this tutorial we can check the whether there is a value present in Text Input or Not on multiple Text Input. So let’s get started .
What we are doing in this tutorial :
We are creating a react native app with 3 Text Input and 1 Button. Now When user clicks on button,we would call a function and inside that function first we would retrieve the entered value and check value using if condition with logical OR operator ( || ) .
Contents in this project Check Text Input is Empty or Not in React Native :
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 including super method inside it.
|
1
2
3
4
5
6
|
constructor(props) {
super(props)
}
|
4. Add this.state in constructor and create 3 state variables named as TextInputName, TextInputEmail and TextInputPhoneNumber . Now set each state variable default value as empty using = ” .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
constructor(props) {
super(props)
this.state = {
TextInputName: ”,
TextInputEmail: ”,
TextInputPhoneNumber: ”
}
}
|
5. Create a function named as CheckTextInputIsEmptyOrNot() . Inside this function first we would get the entered value of all Text Input and then check them if they are empty or not using Logical OR operator.
Logical operator is used to check multiple conditions in a single if and if they all true then it will execute the True part. If any of given condition is False then it execute the False else part.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
CheckTextInputIsEmptyOrNot = () =>{
const { TextInputName } = this.state ;
const { TextInputEmail } = this.state ;
const { TextInputPhoneNumber } = this.state ;
if(TextInputName == ” || TextInputEmail == ” || TextInputPhoneNumber == ”)
{
Alert.alert(“Please Enter All the Values.”);
}
else{
// Do something here which you want to if all the Text Input is filled.
Alert.alert(“All Text Input is Filled.”);
}
|
6. Create custom style sheet class named as MainContainer and TextInputStyleClass just above the AppRegistry.registerComponent line.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextInputStyleClass: {
textAlign: ‘center’,
marginBottom: 7,
height: 40,
borderWidth: 1,
// Set border Hex Color Code Here.
borderColor: ‘#FF5722’,
}
});
|
7. Create a View in render’s return block and add MainContainer class to it.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
8. Add 3 Text Input and 1 Button inside the View.
placeholder = Shows hint inside the Text Input.
onChangeText = Every time when user type anything in Text Input it will store the entered value in state variable.
underlineColorAndroid = Hide the Text Input base line.
style = Used to call css class.
onPress = Call the CheckTextInputIsEmptyOrNot() function on button onPress.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Name”
onChangeText={TextInputName => this.setState({TextInputName})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Email”
onChangeText={TextInputEmail => this.setState({TextInputEmail})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Phone Number”
onChangeText={TextInputPhoneNumber => this.setState({TextInputPhoneNumber})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<Button title=“Check Text Input Is Empty or Not” onPress={this.CheckTextInputIsEmptyOrNot} color=“#2196F3” />
</View>
);
}
}
|
9. Complete source code for index.android.js / index.ios.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
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 = {
TextInputName: ”,
TextInputEmail: ”,
TextInputPhoneNumber: ”
}
}
CheckTextInputIsEmptyOrNot = () =>{
const { TextInputName } = this.state ;
const { TextInputEmail } = this.state ;
const { TextInputPhoneNumber } = this.state ;
if(TextInputName == ” || TextInputEmail == ” || TextInputPhoneNumber == ”)
{
Alert.alert(“Please Enter All the Values.”);
}
else{
// Do something here which you want to if all the Text Input is filled.
Alert.alert(“All Text Input is Filled.”);
}
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Name”
onChangeText={TextInputName => this.setState({TextInputName})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Email”
onChangeText={TextInputEmail => this.setState({TextInputEmail})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Phone Number”
onChangeText={TextInputPhoneNumber => this.setState({TextInputPhoneNumber})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<Button title=“Check Text Input Is Empty or Not” onPress={this.CheckTextInputIsEmptyOrNot} color=“#2196F3” />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextInputStyleClass: {
textAlign: ‘center’,
marginBottom: 7,
height: 40,
borderWidth: 1,
// Set border Hex Color Code Here.
borderColor: ‘#FF5722’,
}
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshots:
Also Read :
React Native Connect Run Apps Using Localhost PhpMyAdmin MySQL Database System
React Native JSON Parsing ListView From MySQL Database Android iOS
React Native Create Multi Language Localization Support App iOS Android
React Native Open Specific App in Google Play Store from App in Android
React Native Set View Height Width in Percentage format Respect of Root View
