IF-Else is a type of conditional statement which executes a part of code based on condition. The condition can be anything with different type of operators. So in this tutorial we would going to create a react native application with IF-Else & Nested IF-Else conditional statement for both android and iOS applications. So let’s get started .
IF-Else Syntax :
|
1
2
3
4
5
6
7
8
9
10
|
if (Your Condition) {
code to be executed if condition is true;
}
else {
code to be executed if condition is false;
}
|
Nested IF-Else Syntax :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
if( Condition 1 )
{
code to be executed if condition is true;
}
else if( Condition 2 )
{
code to be executed if condition is true;
}
else if( Condition 3 )
{
code to be executed if condition is true;
}
else
{
code to be executed if all above conditions is false;
}
|
Contents in this project IF-Else & Nested IF-Else conditional statement in React Native Android iOS App tutorial:
1. Import StyleSheet, View, Button, TextInput and Alert component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button, TextInput, Alert} from ‘react-native’;
|
2. Create constructor() in your project. Now we would make a State named as TextInputValue, which is used to store TextInput inside typed value.
|
1
2
3
4
5
6
7
8
9
10
11
|
constructor()
{
super();
this.state =
{
TextInputValue: ”
}
}
|
3. Create a function named as Simple_If_Else(). Inside this function we would simply use the normal If-Else condition checking that entered value is equals-equals(==) to 1, If the condition is true then it will simply print a Alert message on screen and If the condition is false then it will show alert message that value is not found.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
Simple_If_Else=()=>{
if( this.state.TextInputValue == 1 ){
Alert.alert(“ONE”);
}
else{
Alert.alert(“Sorry Entered Value Dose not Exist.”)
}
}
|
4. Create a function named as Nested_If_Else(). Inside this function we would the nested if conditional statement which is used to check multiple conditions using single IF-Else code.
|
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
|
Nested_If_Else=()=>{
if( this.state.TextInputValue > 5 )
{
Alert.alert(“Entered Value is Grater than 5.”);
}
else if(this.state.TextInputValue < 5)
{
Alert.alert(“Entered Value is Less than 5.”)
}
else if(this.state.TextInputValue == 5)
{
Alert.alert(“Entered Value is 5”)
}
else
{
Alert.alert(“Sorry Entered Value Dose not Exist.”)
}
}
|
5. Create a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
6. Create 1 TextInput and 2 Button components in root view.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
underlineColorAndroid = “transparent”
placeholder=“Enter Your Choice”
style = { styles.TextInputStyle }
onChangeText = { ( text ) => { this.setState({ TextInputValue: text })} }
/>
<View style={{marginBottom : 10}}>
<Button title=‘Call Normal If-Else’ onPress={this.Simple_If_Else} />
</View>
<View style={{marginBottom : 10}}>
<Button title=‘Call Nested If-Else’ onPress={this.Nested_If_Else} />
</View>
</View>
);
}
|
7. Create Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
padding: 10,
},
TextInputStyle:
{
width: ‘100%’,
borderWidth: 1,
borderColor: ‘#009688’,
height: 40,
borderRadius: 10,
marginBottom: 10,
textAlign: ‘center’,
}
});
|
8. Complete source code for App.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
118
119
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Button, TextInput, Alert} from ‘react-native’;
export default class Mynewproject extends Component {
constructor()
{
super();
this.state =
{
TextInputValue: ”
}
}
Simple_If_Else=()=>{
if( this.state.TextInputValue == 1 ){
Alert.alert(“ONE”);
}
else{
Alert.alert(“Sorry Entered Value Dose not Exist.”)
}
}
Nested_If_Else=()=>{
if( this.state.TextInputValue > 5 )
{
Alert.alert(“Entered Value is Grater than 5.”);
}
else if(this.state.TextInputValue < 5)
{
Alert.alert(“Entered Value is Less than 5.”)
}
else if(this.state.TextInputValue == 5)
{
Alert.alert(“Entered Value is 5”)
}
else
{
Alert.alert(“Sorry Entered Value Dose not Exist.”)
}
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
underlineColorAndroid = “transparent”
placeholder=“Enter Your Choice”
style = { styles.TextInputStyle }
onChangeText = { ( text ) => { this.setState({ TextInputValue: text })} }
/>
<View style={{marginBottom : 10}}>
<Button title=‘Call Normal If-Else’ onPress={this.Simple_If_Else} />
</View>
<View style={{marginBottom : 10}}>
<Button title=‘Call Nested If-Else’ onPress={this.Nested_If_Else} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
justifyContent: ‘center’,
padding: 10,
},
TextInputStyle:
{
width: ‘100%’,
borderWidth: 1,
borderColor: ‘#009688’,
height: 40,
borderRadius: 10,
marginBottom: 10,
textAlign: ‘center’,
}
});
|
Screenshots :
Also Read :
Upgrade Current Old React Native Project Version to Latest Version
React Native Show Default Image Before loading Real Image PlaceHolder iOS Android Example
React Native Create and Show Array Elements in Text using MAP
React Native User Registration using PHP MySQL Database PART-2- Writing App Code
React Native Apply Auto Zoom on Background Image Example
