Deeplinking in React Navigation 6

Question

I have the following navigation structure in my app:

<NavigationContainer ref={navigationRef} linking={linking}>
  <AppNavigator.Navigator>
    <AppNavigator.Screen name={RouteNames.bottomTabNav} component={BottomTabNavigator} />
    <AppNavigator.Screen name={RouteNames.mainStackNav} component={MainNavigator} />
  </AppNavigator.Navigator>
</NavigationContainer>

First screen is actually tab bar navigator, and the second one is stack navigator.

Is it possible that, when I am navigating to some screen in main stack nav through deeplink, simultaneously set the screen in tab bar navigator?

I tried something like:

const linking = {
  prefixes: ['#####'],
  config: {
    // initialRouteName: { [RouteNames.bottomTab]: { screens: RouteNames.profile } },
    initialRouteName: RouteNames.bottomTab,
    screens: {
      [RouteNames.main]: {
        screens: {
          [RouteNames.settings]: RouteNames.settings,
        },
      },
    },
  },
};

The commented line is what I want (to navigate to profile screen inside tab bar navigator), but that is not working.

score 0 · Answer 1 · answered Dec 13 '21 at 10:32

Using this implementation, you can't manipulate with another navigators, you can only define path for single navigator. To define full navigation state (i.e. to define path for multiple navigators), you need your config param to be something like this:

config = {
  getStateFromPath: (path) => {
      return composeState()
  }
}

where composeState() function returns partial state objects. For example:

const generateStackRoute = ({ tabRoute, stackRoute, params = {} }) => ({
  routes: [
    {
      name: RouteNames.bottomTab,
      state: {
        routes: [{ name: tabRoute }],
      },
    },
    {
      name: RouteNames.main,
      state: {
        routes: [{ name: stackRoute, params }],
      },
    },
  ],
});

Deeplinking in React Navigation 6

1 Answers1