How to return to certain component of navigation stack when clicking on it from a bottom tab navigator

user_14095613 0
Viewed 52

My React Native app has this structure:

  • Bottom Tabs Navigator
    • Stack Navigator 1
      • Screen A
      • Screen B
    • Stack Navigator 2

So I click on Stack Navigator 1 from the bottom tab navigator and go to Screen A, to Screen B, then close it. When I click Stack Navigator 1 again, Screen B shows up. What is the best way to "reset" it so every time I open Stack Navigator 1, Screen A shows up?

The current code in the Bottom Tabs Navigator:

<Tab.Navigator>
   <Tab.Screen
      name="Stack"
      component={StackNavigator1}
   />
   <Tab.Screen
      name="Other"
      component={Other}
   />
/>

Making Screen A the initial route of StackNavigator does not work.

react-navigation react-native reactjs
1 Answers

Add navigate("ScreenA") to whatever closes Screen B. For instance, if Screen B is closed by a button:

onPress={() => {
   props.navigation.navigate("ScreenA");
   props.navigation.navigate("Home");
}}

The user will not see Screen A, but the stack will open on Screen A next time it is opened.

user_140637610
Related