[ReactNative] How to set StackNavigator initialRouteName by AsyncStorage?

React Native yeah >___<

How to set StackNavigator initialRouteName by AsyncStorage?

Let me talk about the scenario here:

1) If this is the first time login => default screen is Login

2) User already login in the App => default screen is Dashboard

Logic

To realize user account logged in or the user hasn’t logged in to the app. We will define a variable called token to check. The variable will be saved in App till user log out or password expires (assume you know the way to save token in AsyncStorage)

When the app is loaded, it will check the token

• If token => default screen is Dashboard

  Else => default screen is Login

Okay! Let’s code this case

At the App.js

const AppNavigator = StackNavigator({
  dashboard: { screen: Dashboard },
  login: { screen: Login },
  initScreen: { screen: InitScreen }
}, {
  // Default config for all screens
  initialRouteName: 'initScreen',
});

Why define initScreen?

Look over this image to imagine initScreen we use for what

• This is the screen stand bettween Login screen and Dashboard screen.

• We will define the method to check condition:

  If token => default screen is Dashboard

  Else => default screen is Login

Code

We will check status of this case in componentWillMount (the meaning like before the page loading it will check the condition) I assume you know the way to save and get data by use AsyncStorage.

componentWillMount() {
    AsyncStorageData.getToken().then((token) => {
      const mainPage = !!token ? 'dashboard' : 'login';
      const resetAction = NavigationActions.reset({
        index: 0,
        actions: [
          NavigationActions.navigate({ routeName: mainPage })
        ]
      });
      this.props.navigation.dispatch(resetAction);
    });
  }

Alright, Done.

Read comment code to understand more

^___^

Jany Mai