Switch case statement is used to select one of my choices in all the programming languages. Switch case evaluates the given value or condition and according to them execute the code of block. In react native we can use the switch case statement to match the given value from user and according to them execute the condition or function. Switch case compare the value with each present case, if the matched case found then it will execute its code of block and if none of case matches then it will by default execute the default case. So in this tutorial we would going to make a tutorial on How to Use Switch Case Statement in React Native With Example.
Contents in this project How to Use Switch Case Statement in React Native With Example Tutorial:
1. Import Platform, StyleSheet, View, TextInput, TouchableOpacity, Alert and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, TextInput, TouchableOpacity, Alert, Text } from ‘react-native’;
|
2. Create constructor() in your project and make a State named as TextInput_Data. This State is used to store the TextInput component typed data.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(){
super();
this.state={
TextInput_Data : ”
}
}
|
3. Create a function named as checkSwitch() with param parameter. We would call this function on button onPress event and pass a value inside it. Inside this function we would create a Switch case statement with 4 cases and 1 default case. If entered value is matched with any of 4 cases then it will execute their code of block and if none of them found then it will execute the default case.
|
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
|
checkSwitch=(param)=>{
switch(param) {
case ‘1’:
this.ONE();
break;
case ‘2’:
this.TWO();
break;
case ‘3’:
this.THREE();
break;
case ‘4’:
this.FOUR();
break;
default:
Alert.alert(“NUMBER NOT FOUND”);
}
}
|
4. Create 4 functions named as ONE, TWO, THREE and FOUR . We would call these functions on each case as you can see in above code, You can call your own functions here.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
ONE=()=>{
Alert.alert(“ONE”);
}
TWO=()=>{
Alert.alert(“TWO”);
}
THREE=()=>{
Alert.alert(“THREE”);
}
FOUR=()=>{
Alert.alert(“FOUR”);
}
|
5. Creating a TextInput component and 1 Button using TouchableOpacity component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Value Here”
onChangeText={data => this.setState({ TextInput_Data: data })}
style={styles.textInputStyle}
underlineColorAndroid=‘transparent’
keyboardType = {“numeric”}
/>
<TouchableOpacity onPress={this.checkSwitch.bind(this, this.state.TextInput_Data)} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> GET RESULT </Text>
</TouchableOpacity>
</View>
);
}
|
6. Creating Style.
|
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
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
justifyContent: ‘center’,
alignItems: ‘center’,
marginBottom: 20
},
textInputStyle: {
height: 40,
width: ‘90%’,
textAlign: ‘center’,
borderWidth: 1,
borderColor: ‘#028b53’,
borderRadius: 8,
marginBottom: 15
},
button: {
width: ‘80%’,
padding: 8,
backgroundColor: ‘#4CAF50’,
borderRadius:5,
justifyContent: ‘center’,
alignItems: ‘center’
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
7. 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, TextInput, TouchableOpacity, Alert, Text } from ‘react-native’;
export default class App extends Component {
constructor(){
super();
this.state={
TextInput_Data : ”
}
}
checkSwitch=(param)=>{
switch(param) {
case ‘1’:
this.ONE();
break;
case ‘2’:
this.TWO();
break;
case ‘3’:
this.THREE();
break;
case ‘4’:
this.FOUR();
break;
default:
Alert.alert(“NUMBER NOT FOUND”);
}
}
ONE=()=>{
Alert.alert(“ONE”);
}
TWO=()=>{
Alert.alert(“TWO”);
}
THREE=()=>{
Alert.alert(“THREE”);
}
FOUR=()=>{
Alert.alert(“FOUR”);
}
render() {
return (
<View style={styles.MainContainer}>
<TextInput
placeholder=“Enter Value Here”
onChangeText={data => this.setState({ TextInput_Data: data })}
style={styles.textInputStyle}
underlineColorAndroid=‘transparent’
keyboardType = {“numeric”}
/>
<TouchableOpacity onPress={this.checkSwitch.bind(this, this.state.TextInput_Data)} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> GET RESULT </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
justifyContent: ‘center’,
alignItems: ‘center’,
marginBottom: 20
},
textInputStyle: {
height: 40,
width: ‘90%’,
textAlign: ‘center’,
borderWidth: 1,
borderColor: ‘#028b53’,
borderRadius: 8,
marginBottom: 15
},
button: {
width: ‘80%’,
padding: 8,
backgroundColor: ‘#4CAF50’,
borderRadius:5,
justifyContent: ‘center’,
alignItems: ‘center’
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
Screenshots:
Also Read :
React Native JSON Parsing ListView From MySQL Database Android iOS
How To Create Underline Text In React Native App Using CSS Style
How to Create Custom Trapezoid Shape View in React Native
Create Horizontal ScrollView in React Native Tutorial Android iOS
Send WhatsApp Message From React Native App Example Tutorial
