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

Question

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')} />

have you tried navigating like this? navigation.navigate('SectionX', { screen: 'SharedScreenX' }); — Rohit S K, Feb 03 '23 at 11:38
@RohitSK Yes, but then the goBack function sends me back to the previous screen in that stack and not the screen in the stack i am navigating from. — Quantal, Feb 03 '23 at 12:16

score 1 · Accepted Answer · answered Feb 03 '23 at 15:49

1

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.

answered Feb 03 '23 at 15:49

Rohit S K

1,178
3
13

Sorry but i have been trying to play around with your answer and get it to work but it dont :( For example. If i navigate to SharedScreen1 from Section1 it works but when i then navigate to the same screen from Section2 it no longer works from Section1. It navigates but it breaks the goBack function and the goBack always send me to the rootScreen of Section2 and not the screen i am navigating from in Section1. – Quantal Feb 07 '23 at 11:58
If i change the name of the SharedScreen1 to a unique name in each section it works as intended but i can then see a performance issue because of the same screen being rendered multiple times in memory. – Quantal Feb 07 '23 at 12:06
In that case, please check out this [example](https://snack.expo.dev/J8vmRvr5z). Go back is working as expected here. – Rohit S K Feb 08 '23 at 06:53
Yes you are correct. I just forgot to pass the navigation prop to the header so it now works with goBack but it still seems that 2 different screen instances are created. If i have a shared screen in all stacks it will for example create 6 instances of the details screen. Is it not possible to share the same rendered screen over all stacks? Thank you for all your help and time! – Quantal Feb 09 '23 at 19:16
I will mark your answer as correct cause it pretty much works and bounty will soon expire but please answer my question above if you dont mind and i would be really grateful. – Quantal Feb 09 '23 at 20:23
as far as I have searched, there is no solution for that, you will have to add the common screens in every required tab-stack. Best possible solution for that is **create a separate stack for common screens and a tab-stack for all tab screens**, but with these separate stacks, common stack screens won't have tab-bar at bottom. – Rohit S K Feb 10 '23 at 10:03

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

1 Answers1