How to set other first screen when I am logged in - react-native

Question

How can I choose according value in AsyncStorage which screen should be displayed? I don't know why setting screen value 'Home' to InitialScreen variable doesn't work?
Once I log in login.js screen and I close app, after launching the app again I am navigated to login.js. But now I want to go to home.js screen.
Parent's file routes.js:
let InitialScreen
const RoutesNavigation = StackNavigator({
Login: { screen: Login },
Home: { screen: Home }
}, {
initialRouteName: InitialScreen,
navigationOptions: {
header: false,
}
});
export default class App extends Component {
constructor(props) {
super(props);
value = AsyncStorage.getItem('name');
if (value !== null) {
InitialScreen = 'Home'; //This doesn't change Initial screen!!!
console.log("JJJJJJJJJJJJJJJJJJ routes.js value !== null ");
}
}
render() {
return (
<RoutesNavigation />
);
}
}
This is login.js, where I store value from received json:
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
}
}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.textInput} placeholder='Username'
onChangeText={(username) => this.setState({ username })}
underlineColorAndroid='transparent'
/>
<TextInput
style={styles.textInput} placeholder='Password'
onChangeText={(password) => this.setState({ password })}
secureTextEntry={true}
underlineColorAndroid='transparent'
/>
<TouchableOpacity
style={styles.btn}
onPress={this.login}>
<Text>Log in</Text>
</TouchableOpacity>
</View>
);
}
login = () => {
var formData = new FormData();
formData.append('userName', this.state.username);
formData.append('password', this.state.password);
fetch('http://....', {
method: 'POST',
body: formData
})
.then((response) => response.json())
.then((responseJson) => {
console.log("JJJJJJJJJJJJJJJJJJJJJJJJJ name: " + responseJson.name);
AsyncStorage.setItem('name', responseJson.name);
this.props.navigation.navigate('Home');
})
.catch(() => {
console.log("JJJJJJJJJJJJJJJJJJ Wrong connection");
alert('Wrong connection');
})
}
}
This is home.js:
export default class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}> Member area. You are logged in. </Text>
<TouchableOpacity
style={styles.btn}
onPress={this.logout}>
<Text>Log out</Text>
</TouchableOpacity>
</View>
);
}
logout = () => {
AsyncStorage.removeItem('name');
this.props.navigation.navigate('Login');
console.log("JJJJJJJJJJJJJJJJJJ Logged out");
}
}

Answer 1

Create your navigator in here:
value = AsyncStorage.getItem('name');
if (value !== null) {
InitialScreen = 'Home';
const RoutesNavigation = StackNavigator({
Login: { screen: Login },
Home: { screen: Home }
},{
initialRouteName: InitialScreen,
navigationOptions: {
header: false,
}
});
}
Because you are creating your navigator at the top with empty initial route but you are changing value in here so you must create here.
Hope it will work.

Answer 2

AsyncStorage is async.Because of the js nature thread won't wait result of this
AsyncStorage.getItem('name');
use callback with getItem
AsyncStorage.getItem('name',(error,result) => {
if (result!== null) {
//do something
}
});