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 :
How to render rest api message inside the tag
e.g: i want to display messages like username is invalid from api to tag
Adnan for you query you have to return you message “Username is invalid” direct from API like i did in this tutorial : https://reactnativecode.com/react-native-user-login-using-php-mysql/ . There is no need to use IF conditions for it.