reactjsreact-nativereact-navigationreact-navigation-v6

Sharing screens over multiple stacks/navigators in react-native using react-navigation v6


I have a few screens which i want to share among multiple stacks. I found a similar problem on github but with no working solution. When navigating to a shared screen i want to be able to go back to the screen where i am navigating from.

Any ideas is greatly appriciated. I have simplified my navigation structure below.

<NavigationContainer>
    <RootStack.Navigator>
      {isAuth ? (
        <RootStack.Screen name="Logged in" />
      ) : (
        <RootStack.Screen name="Not logged in" />
      )}        
    </RootStack.Navigator>
</NavigationContainer>

// First navigator for Logged in users in RootStack
<TabBottomNavigator.Navigator>
    <TabBottomNavigator.Screen name="Section1">
        <Stack.Navigator>
            <Stack.Screen name="Screen1" />
            <Stack.Screen name="Screen2" />
            <Stack.Screen name="SharedScreen1" /> /* Screen to be shared among all 3 stacks */
            <Stack.Screen name="SharedScreen2" /> /* Screen to be shared among all 3 stacks */
        </Stack.Navigator>
    </TabBottomNavigator.Screen>
    <TabBottomNavigator.Screen name="Section2">
            <Stack.Screen name="Screen3" />
            <Stack.Screen name="Screen4" />
            <Stack.Screen name="SharedScreen1" /> /* Screen to be shared among all 3 stacks */
            <Stack.Screen name="SharedScreen2" /> /* Screen to be shared among all 3 stacks */
    </TabBottomNavigator.Screen>
    <TabBottomNavigator.Screen name="Section3">
            <Stack.Screen name="Screen5" />
            <Stack.Screen name="Screen6" />
            <Stack.Screen name="SharedScreen1" /> /* Screen to be shared among all 3 stacks */
            <Stack.Screen name="SharedScreen2" /> /* Screen to be shared among all 3 stacks */
    </TabBottomNavigator.Screen>
</TabBottomNavigator.Navigator>

// Second navigator for users not logged in users in RootStack
// ...
// ...Navigator...
// ...

I am navigating to the screen with below

<TouchableOpacity onPress={() => navigation.navigate('SharedScreenX')} /> 

Solution

  • In your code only section 1 stack screens are in <Stack.Navigator> where all other stack screens are not inside of it, make sure all stack screens are in Stack Navigator. Also separate stack navigators should be created for each section like this,

        <TabBottomNavigator.Screen name="Section1">
            <SectionOne.Navigator>
                <SectionOne.Screen name="Screen1" />
                <SectionOne.Screen name="Screen2" />
                <SectionOne.Screen name="SharedScreen1" /> /* Screen to be shared among all 3 stacks */
                <SectionOne.Screen name="SharedScreen2" /> /* Screen to be shared among all 3 stacks */
            </SectionOne.Navigator>
        </TabBottomNavigator.Screen>
        <TabBottomNavigator.Screen name="Section2">
           <SectionTwo.Navigator>
                <SectionTwo.Screen name="Screen3" />
                <SectionTwo.Screen name="Screen4" />
                <SectionTwo.Screen name="SharedScreen1" /> /* Screen to be shared among all 3 stacks */
                <SectionTwo.Screen name="SharedScreen2" /> /* Screen to be shared among all 3 stacks */
          <SectionTwo.Navigator>
        </TabBottomNavigator.Screen>
    
    ///others tabs/stacks
    
    

    this should fix the back navigation issue. You may check this documentation for A stack navigator for each tab. If you are still able to reproduce the back issue after this, please share snack link for it.