common/shared screen routing in react navigation?

Question

I have a navigation config like this.

StackNavigator
     -> stack_screen1
     -> stack_screen2
     -> TabScreens

TabScreens
    -> tab_screen1
        -> StackNavigator
            -> screen x
            -> screen1 // common component
            -> screen2 // common component
    -> tab_screen2
        -> StackNavigator
            -> screen y
            -> screen1
            -> screen2
    -> tab_screen3
        -> StackNavigator
            -> screen z
            -> screen1
            -> screen2

here screen1 and screen2 are common components which can be called from any tab screen. For example I can show a product display page from any of the tab screens. The problem is if screen1 is called from say tab_screen1 and I switch tabs to say tab_screen2, and then access screen1 from tab_screen2 the previous mounted screen1 from tab_screen1 is called and the tab also switches to original tab.

A workaround is to have different key for similar component. But that's a lot of work as there are many shared components in my app and I am in process of replacing navigation-experimental to react-navigation.Any other solution for this?

Answer 1

You can wrap Tab into StackNavigator, try this...

const TabApp = TabNavigator(
  {
    Home: {
      screen: Home,
    },
    Notifications: {
      screen: Notifications,
    },
    Profile: {
      screen: Profile,
    },
  },
)
const App = = StackNavigator(
  {
    Home: { screen: TabApp },
    ProfileOne: { screen: ProfileScreen},
    ProfileTwo: { screen: ProfileScreen2},
  }
);

This way ProfileScreen and ProfileScreen2 is shared between all tabs

https://github.com/react-navigation/react-navigation/issues/586#issuecomment-310692484