Navigate to specific tab from Drawer Navigator

Question

Is it possible to nest a Tab Navigator inside of a Drawer Navigator and then navigate to a specific tab from the Drawer?

Consider this very basic set up:

const PrimaryNav = createBottomTabNavigator({
  ScreenOne,
  ScreenTwo
 })

export const DrawerNavigator = createDrawerNavigator({
  Home: {
    screen: PrimaryNav,
    drawerLabel: 'Option 1',
  },
  Investment: {
    screen: PrimaryNav,
    drawerLabel: 'Option 2',
  }
})

Obviously, this set up will just resolve to the first item in the TabNav regardless of which option you click.

Is there a way to pass an option to navigate to each of those tabs specifically? I know it would be possible to just pass ScreenOne and ScreenTwo to the "screen" options in DrawerNavigator, but I would like to retain the tabs.

score 8 · Answer 1 · answered Sep 03 '20 at 01:56

8

2020: navigating through nested navigators

onPress={() => {
  navigation.navigate('Root', {
  screen: 'Screen'
});

answered Sep 03 '20 at 01:56

Franciszek Szombara

520
7
14

score 4 · Accepted Answer · answered Oct 11 '18 at 05:35

4

There's a hacky workaround mentioned in react-navigation GitHub issues page:

navigation.dispatch(
    NavigationActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: 'PrimaryNav' })]
    })
);
navigation.navigate('ScreenTwo'))

Not the best solution, but the only thing I could find when I faced the same problem.

answered Oct 11 '18 at 05:35

Uzair A.

1,586
2
14
30

Does this solution work for navigating from a react-navigation navigator item? Where can I attach an onClick handler in a Drawer Item? – connor Oct 11 '18 at 13:17
@connor I believe it should. What kind of drawer items are you using? I think you can handle clicks by using the prop `onPress` for most of the RN components. Something like this: ` this.goToScreenTwo() }> Sign Out ` and put the code above in a separate `goToScreenTwo()` method in your component class. – Uzair A. Oct 12 '18 at 04:32
Thank you for helping me get to the solution. I did not see there was a `contentComponent` property I could pass to `createDrawerNavigator` to create my own custom component. – connor Oct 12 '18 at 15:48
Glad to know that! :) – Uzair A. Oct 13 '18 at 03:16
Is there any other way to do this, I'd prefer to not have to track navigation via redux if possible? – Tom Bird May 13 '21 at 03:17

Navigate to specific tab from Drawer Navigator

2 Answers2

Linked