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:
plaese clear the concept of spread opertor in react native
Thanks for your suggestion Mukul, i will learn about Spread operator and soon publish a new tutorial regarding to your query.