Given the structure:

• Bottom tabs with lazy: false
  • TabOne
    • MainScreen
  • TabTwo
    • MainScreen
    • LevelTwoScreen
    • LevelThreeScreen

How I can navigate from TabOne -> MainScreen to get the route: TabTwo -> MainScreen -> LevelTwoScreen -> LevelThreeScreen?

Below code dont work, just navigates to TabTwoLevelTwoScreen:

navigation.navigate('TabTwoLevelTwoScreen', {
  screen: 'TabTwoLevelThreeScreen',
})

I tried this structure too, not sucess:

• Bottom tabs with lazy: false
  • TabOne
    • MainScreen
  • TabTwo
    • MainScreen
    • LevelTwoScreen
    • TabTwoNestedNavigator
      • LevelThreeScreen

This question started as a issue, see more here.

Thanks!

CodePudding user response：

You will need to use the nested navigator as you have, but you need to start from the top and work down. Reference https://reactnavigation.org/docs/nesting-navigators#passing-params-to-a-screen-in-a-nested-navigator

navigation.navigate('TabTwo', {
  screen: 'TabTwoNestedNavigator',
  params: {
      screen: 'LevelThreeScreen',
    },
})

This answer is still relevate. I think you are mixing up on how the nested navigator works. In your snack you are navigating to pages that don't exist. Updating your code to the following makes it work.

<Button
            title="Navigate to Tab Two - Level Three Screen"
            onPress={() =>
              navigation.navigate('TabTwo', {
                screen: 'TabTwoNestedNavigator',
                params: {
                  screen: 'TabTwoLevelThreeScreen'
                },
              })
            }
          />

Snack: https://snack.expo.dev/@halecolin1/nested-navigation-between-bottom-tabs-does-not-works-in-react-navigation-6

CodePudding user response：

As said by @RajendranNadar, I'll go with the reset option:

navigation.reset({
  routes: [
    {
      name: 'TabTwo',
      state: {
        routes: [
          { name: 'MainScreen' },
          { name: 'LevelTwoScreen' },
          { name: 'LevelThreeScreen' },
        ],
      },
    },
  ],
})