How to change initial screen after user is logged in in react native?

Question

I'm using react-native router-flux for navigation in my app.How do I change the initial screen for logged in users? Currently after successful login the user will direct to firstScreen . But after I close and re-open the app the initial screen will be login screen , because I've set it as initial within my Main . I want to show the firstScreen if a user exit from app with out log out.So how do I change according to the condition. I'm using AsyncStorage for saving the userid .But after closing the app and opening it again (without log out) the consoled o/p of AsyncStorage is undefined without login.Following is the code for Main .Please help me to do this.

 import React, { Component } from 'react'; import {KeyboardAvoidingView, View, ActivityIndicator, AsyncStorage} from 'react-native'; import { Router, Scene, Actions, ActionConst } from 'react-native-router-flux'; import LoginScreen from './LoginScreen'; import RegisterScreen from './RegisterScreen'; import FirstScreen from './FirstScreen'; import ViewStatus from './ViewStatus'; import UserVerification from './UserVerification'; export default class Main extends Component{ constructor() { super(); this.state = { hasToken: false, isLoaded: false }; } componentDidMount() { AsyncStorage.getItem('userid').then((token) => { this.setState({ hasToken: token !== null, isLoaded: true }) }); } async onPressLogout() { try { await AsyncStorage.removeItem('userid'); Alert.alert('Logout Success!'); Actions.loginScreen(); } catch (error) { console.log('AsyncStorage error: ' + error.message); } } render(){ console.log(this.hasToken); if (this.state.isLoaded) { return ( <Router> <Scene key="root"> <Scene key="loginScreen" component={LoginScreen} animation='fade' hideNavBar={true} initial={true} /> </Scene> </Router> ) } else{ return( <Router> <Scene key="root"> <Scene key="firstScreen" component={FirstScreen} hideNavBar= {false} onRight={()=>this.onPressLogout()} rightTitle={' Logout'} renderBackButton={()=>(null)} animation='fade' /> <Scene key="viewStatus" component={ViewStatus} hideNavBar={false} /> <Scene key="userVerification" component={UserVerification} hideNavBar={true} /> </Scene> </Router> ); } } } 

Answer 1

If you have a splash screen, you can easily control the token(or something you store to control the user logged in or not) there. I'm not sure if it's possible doing it from router but with javascript, it's easy to handle it.

This is how I store token

AsyncStorage.setItem("token", this.state.token);

The routes

<Scene>
   <Scene key="splashScreen" component={SplashScreen}/>
   <Stack key="root" hideNavBar>                       
      <Scene key="login" component={Login} initial/>
      <Scene key="signup" component={Signup}/>
   </Stack>
   <Scene tabs key="tabbar">
      <Stack
         key="tab1"
         initial
      >
      ....
   </Scene>
</Scene>

The code below is from one of my projects. Tabbar is my main screen. (In your case, firstScreen)

import { NavigationActions } from 'react-navigation';
import {Actions} from 'react-native-router-flux';

let route = ''
    try {
      AsyncStorage.getItem('token').then((token) => {
        if (token !== null){
          axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
          route = 'tabbar'
        }
        else {
          route = 'login'
        }
      }); 
    } catch (error) {
      console.log(error);
    }

   if(route == 'tabbar') {
      Actions.tabbar();
   }
   else { // go to login
      let toHome = NavigationActions.reset({
         index: 0,
         actions: [NavigationActions.navigate({routeName: 'root'})]
      });
      this.props.navigation.dispatch(toHome);
   }