Unable to move to required screen using react-navigation? - react-native

Question

I want to move to a different screen when I have some AsyncStorage item for authFlow but when I am going to the next screen and construction is calling out the function it is not moving to the next screen.
I tried to use the basic method this.props.navigation.navigate('navigator_name'), but i think it's not moving as blank screen is appearing.
App.js
------
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { createSwitchNavigator, createAppContainer, } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import AuthLoadingScreen from './screens/auth-loading-screen';
import WelcomeScreen from './screens/welcomeScreen';
import AppHomeScreen from './screens/app-home-screen';
const AuthStackNavigator = createStackNavigator({
welcome: WelcomeScreen
})
// export default
const TestContainer = createAppContainer(createSwitchNavigator({
AuthLoading: AuthLoadingScreen,
Auth: AuthStackNavigator,
App: AppHomeScreen,
},
{
initialRouteName: 'AuthLoading',
}
))
export default class App extends React.Component {
constructor () {
super()
this.state = {
loggedIn: 'false',
}
}
render() {
return(
<View style={styles.container}>
<TestContainer />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
auth-loading-screen
-------------------
import React, { Component } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, AsyncStorage } from 'react-native';
export default class AuthLoadingScreen extends Component {
constructor (props) {
super(props);
console.log('calling _loadApp')
this._loadApp();
}
_loadApp = async() => {
const userToken = await AsyncStorage.getItem('userToken');
console.log('getting value of token ', userToken, JSON.stringify(this.props.navigation.actions))
this.props.navigation.navigate(userToken ? 'App' : 'Auth')
}
render() {
return (
<View style={styles.container}>
<ActivityIndicator />
</View>
)
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
welcomeScreen
-------------
import React, { Component } from 'react';
import { View, Text, StyleSheet, Button} from 'react-native';
export default class WelcomeScreen extends Component {
constructor (props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<Text>Welcome</Text>
</View>
)
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
The screen should directly move to the welcomeScreen as item is not set through AsynStorage

Answer 1

Your function is asynchronous. However, the constructor cannot execute the asynchronous function. Therefore, you should change the position of executing the function.
async componentDidMount() {
await this._loadApp();
}