0

I have a bottom tab bar created with createBottomTabNavigator, and when the user presses on one of the tabs I need to navigate to a particular stack (created with createStackNavigator). I can do that already, but now I need to decide which screen in that stack to go to first, depending on a condition. I know about the initialRouteName property that can be set to ensure a particular screen always shows first, so maybe I can use that?

Basically I want the user to view a tutorial the first time when pressing the tab, and the actual screen from the second time onwards.

Here is what I have currently (not working):

const shouldGoToTutorial = async () => {
  await AsyncStorage.getItem('hasSeenTutorial').then((hasSeenTutorial) => {
    return hasSeenTutorial ? 'Screen1' : 'Tutorial';
  });
}

const OtherStack = createStackNavigator({
  Tutorial: TutorialScreen,
  Other: OtherScreen
}, {
  initialRouteName: shouldGoToTutorial
});
instanceof
  • 1,404
  • 23
  • 30

1 Answers1

0

As per the docs rn-docs you cant have an asynchronus event to decide the initial route.

What i would suggest and thats how ive implemnted is first create a splashscreen , and that just displays your app logo, and i believe every app should have a splashscreen.

const OtherStack = createStackNavigator({
  Tutorial: TutorialScreen,
  Other: OtherScreen,
SplashScreen:SplashScreen
}, {
  initialRouteName: SplashScreen
});

In that splashscreen inside component DidMount you can do :

componentDidMount(){
this.shouldGoToTutorial();
}


const shouldGoToTutorial = async () => {
  await AsyncStorage.getItem('hasSeenTutorial').then((hasSeenTutorial) => {
    return hasSeenTutorial ? this.props.navigation.navigate('Screen1') : this.props.navigation.navigate('Tutorial');
  });
}

Hope this helps.

Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45
  • Like I said, 'when the user presses on one of the tabs', not on launch of the app. So unfortunately this won't work. – instanceof Jan 30 '20 at 14:44