react native if else condition in render() - node.js

Question

Hello everyone i am learning REACT-NATIVE from last two months , i got a small issue with if-else condition render method ,while i am executing the code if condition is not working properly .
Can you please tell me the solution
import React, { Component } from 'react';
import {
Image, Platform, StyleSheet, Text, View, TextInput, Button, TouchableHighlight, Alert,
TouchableOpacity, ScrollView, ColorPropType, FlatList, SectionList, Dimensions, AsyncStorage,
Keyboard,
} from 'react-native';
import axios from 'axios';
import GlobalStore from '../GlobalStore';
const API_URL = GlobalStore.BASE_URL;
var ACCESS_TOKEN = 'access_token';
export default class LogInScreen extends React.Component {
static navigationOptions = {
title: 'LogIn',
headerStyle: {
backgroundColor: '#03A9F4',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
/* *********** Code Starts Here ****************** */
constructor(props) {
super(props);
this.state = {
error: '',
userId: '',
user_id: '',
mobile: '',
password: '',
Token: '',
};
}
componentDidMount() {
this.get_Id();
this.getToken();
}
// get id from asyncStorage
async get_Id() {
try {
const userId = await AsyncStorage.getItem('USER_ID') // (STORAGE_KEY)
if (userId !== '' || userId !== null) {
this.setState({ userId: userId })
console.log('profile get_id id: =>', userId)
// this.getUserDetails(userId)
} else {
console.log('profile get_id id: => user_id=null')
Alert.alert('No user profile found LogIn Now ' + this.props.navigation.navigate('LogIn'))
}
} catch (error) {
alert('Failed to load profile get_Id() user_id.')
}
}
async storeToken(accessToken) {
try {
await AsyncStorage.setItem(ACCESS_TOKEN, accessToken);
this.getToken();
} catch (error) {
console.log('LogIn AsyncStorage Error: ' + error.message);
}
}
async getToken() {
try {
let token = await AsyncStorage.getItem(ACCESS_TOKEN);
this.setState({ Token: token })
console.log("LogIn Get token is :" + token);
} catch (error) {
console.log("something went wrong in getToken LogIn page")
}
}
async removeToken() {
try {
await AsyncStorage.removeItem(ACCESS_TOKEN);
this.getToken();
} catch (error) {
console.log("some thing went wrong removeToken LogIn page")
}
}
validate_Fields = () => {
const { mobile, password } = this.state
if (mobile == "") {
Alert.alert("please enter Mobile Number");
return false
}
if (mobile.length < 10) {
Alert.alert("please enter 10 digit Mobile Number");
return false
}
if ((password === "" && password.length < 6)) {
Alert.alert("please enter password minimum length should be 6");
return false
}
return true
}
// logIn function
logInUser() {
if (this.validate_Fields()) {
const { mobile, password } = this.state;
this.setState({ error: '', loading: true });
// NOTE HTTP is insecure, only post to HTTPS in production apps
axios.post(API_URL + '/usersapi/user_LogIn', {
mobile_no: mobile,
password: password
})
.then((response) => {
// console.log(JSON.stringify(response));
let accessToken = response.data.TOKEN;
this.storeToken(accessToken);
console.log("dataToken-LogIn:" + accessToken);
Alert.alert('LogIn Successfully ' + this.props.navigation.navigate('Profile', { accessToken }));
// Alert.alert('LogIn Successfully ' + + this.props.navigation.navigate('Profile'));
})
.catch((error) => {
console.log(error);
this.removeToken();
Alert.alert(' Login Failed try again , If you do not have an account, sign up first !');
});
}
}
render() {
if (this.state.userId !== '' || this.state.userId !== null) {
return (
// console.log('if block - No data found profile => LogIn now.:' + this.state.userId)
// Alert.alert('Please LogIn Now')
<View style={styles.container}>
<View style={styles.ifContainer}>
<Text style={styles.formHeader}>Thank you - you are already logedIn Got to</Text>
<TouchableOpacity style={[styles.buttonContainer, styles.greenButton]} onPress={() => this.props.navigation.navigate('Home')}>
<Text style={styles.buttonText}>Home</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.buttonContainer, styles.blueButton]} onPress={() => this.props.navigation.navigate('Profile')}>
<Text style={styles.buttonText}>Profile</Text>
</TouchableOpacity>
</View>
</View>
// Alert.alert('You are already LogedIn ' + this.props.navigation.navigate('Profile'))
)
} else {
return (
<View styel={styles.container}>
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<Text style={styles.formHeader}>LogIn</Text>
<View style={styles.inputContainer}>
<TextInput style={styles.inputs}
type='number'
value={this.state.mobile}
name="mobile"
maxLength={10}
placeholder="mobile"
keyboardType="numeric"
underlineColorAndroid='transparent'
onChangeText={(mobile) => this.setState({ mobile })} />
<Image style={styles.inputIcon} source={{ uri: 'https://img.icons8.com/color/48/000000/android.png' }} />
</View>
<View style={styles.inputContainer}>
<TextInput style={styles.inputs}
type='password'
value={this.state.password}
name="password"
placeholder="Password"
secureTextEntry={true}
underlineColorAndroid='transparent'
onChangeText={(password) => this.setState({ password })} />
<Image style={styles.inputIcon} source={{ uri: 'https://img.icons8.com/color/40/000000/password.png' }} />
</View>
<TouchableOpacity style={[styles.buttonContainer, styles.greenButton]} onPress={() => { this.logInUser() }}>
<Text style={styles.buttonText}>LogIn</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.buttonContainer, styles.blueButton]} onPress={() => this.props.navigation.navigate('Register')}>
<Text style={styles.buttonText}>Register</Text>
</TouchableOpacity>
</View >
</View>
)
}
}// Render Ends
} // Class Ends
const resizeMode = 'center';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#DCDCDC',
},
formHeader: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
fontSize: 30,
backgroundColor: 'transparent',
color: 'black',
},
inputContainer: {
borderBottomColor: '#F5FCFF',
backgroundColor: '#FFFFFF',
borderRadius: 30,
borderBottomWidth: 1,
width: 300,
height: 45,
marginBottom: 20,
flexDirection: 'row',
alignItems: 'center',
shadowColor: "#808080",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
inputs: {
height: 45,
marginLeft: 16,
borderBottomColor: '#FFFFFF',
flex: 1,
fontSize: 20,
},
inputIcon: {
width: 30,
height: 30,
marginRight: 15,
justifyContent: 'center'
},
buttonContainer: {
height: 45,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 20,
width: 300,
borderRadius: 30,
backgroundColor: 'transparent'
},
greenButton: {
backgroundColor: "#00a63f",
shadowColor: "#808080",
shadowOffset: {
width: 0,
height: 9,
},
shadowOpacity: 0.50,
shadowRadius: 12.35,
elevation: 19,
},
blueButton: {
backgroundColor: "#4e8bd1",
shadowColor: "#808080",
shadowOffset: {
width: 0,
height: 9,
},
shadowOpacity: 0.50,
shadowRadius: 12.35,
elevation: 19,
},
buttonText: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
textShadowColor: 'rgba(0, 0, 0, 0.75)',
textShadowOffset: { width: -1, height: 1 },
textShadowRadius: 10
},
bgImage: {
flex: 1,
resizeMode,
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
}
});
LogInScreen.navigationOptions = {
title: 'LogIn',
};
please check the code and let me know if i wrote anything wrong in the code .

Answer 1

change if condition in render from or to and:
if (this.state.userId !== '' && this.state.userId !== null) {....}
Recommended: Change method get_Id to arrow function signature:
get_Id = async ()=> {
try {
const userId = await AsyncStorage.getItem('USER_ID') // (STORAGE_KEY)
if (userId !== '' || userId !== null) {
this.setState({ userId: userId })
console.log('profile get_id id: =>', userId)
// this.getUserDetails(userId)
} else {
console.log('profile get_id id: => user_id=null')
Alert.alert('No user profile found LogIn Now ' + this.props.navigation.navigate('LogIn'))
}
} catch (error) {
alert('Failed to load profile get_Id() user_id.')
}
}