TabNavigator's tabs are not displayed when nested in a DrawerNavigator

[Colmea]

Hi,

First, thank you for this module !

I have an issue when using a TabNavigator nested in a DrawerNavigator: tabs are not displayed.
This issue appears only when I go to the nested TabNavigator from the Drawer menu link and when using navigate('MyNestedTabStack') like in the get started guide.

Here is an example:

class HomeScreen extends React.Component {
    render() {
        return <Button
            onPress={() => this.props.navigation.navigate('Projects')}
            title="Go to Projects"
        />;
    }
}

class RecentProjectsScreen extends React.Component {
    render() {
        return <Text>List of recent projects</Text>
    }
}

class AllProjectsScreen extends React.Component {
    render() {
        return <Text>List of all projects</Text>
    }
}

const ProjectScreenNavigator = TabNavigator({
    Recent: { screen: RecentProjectsScreen },
    All: { screen: AllProjectsScreen },
});


const App = DrawerNavigator({
    Home: { screen: HomeScreen },
    Projects: { screen: ProjectScreenNavigator }
});

AppRegistry.registerComponent('App', () => App);

[hilkeheremans]

I can confirm this issue, and it is also related to issue #31.

I have tracked down this issue to the way DrawerNavigator attempts to retrieve the components it renders. DrawerNavigator internally uses a TabRouter to find out what content it needs to render. However, whenever you nest a StackNavigator, or in this case a TabNavigator, this TabRouter will retrieve the deepest component in the navigation tree, bypassing all intermediary navigators from rendering.

The root cause of this seems to lie in TabRouter's getComponentForState function, which will automatically recurse through all child routers:

getComponentForState(state: NavigationState) {
  const routeName = order[state.index];
  invariant(
    routeName,
    `There is no route defined for index ${state.index}. Check that
    that you passed in a navigation state with a valid tab/screen index.`
  );
  const childRouter = tabRouters[routeName];
  if (childRouter) {
    return childRouter.getComponentForState(state.routes[state.index]);
  }
  return getScreenForRouteName(routeConfigs, routeName);
},

Bypassing/removing this recursion allows tabs and stacks inside drawers to function normally. However, I want to hold off on a PR as I assume this recursion is there for a reason, and I do not yet grok react-navigation sufficiently to fully understand the consequences.

I believe that, ideally, DrawerNavigation should get its own router to cleanly separate concerns with TabRouter.

@ericvicenti @skevy Any insight for us laypeople?

[frankrowe]

Can confirm the same issue with embedding StackNavigators in a DrawerNavigator

[ericvicenti]

Maybe the drawer navigator should use the router.getComponentForRouteName instead? If you can find a fix inside the drawer navigator without changing any routers, then the PR would be quickly accepted!

cc @satya164

[hilkeheremans]

I will attempt to push out a fix ASAP, in a few hours. On 27 Jan 2017, at 18:58, Eric Vicenti <notifications@github.com<mailto:notifications@github.com>> wrote: Maybe the drawer navigator should use the router.getComponentForRouteName instead? If you can find a fix inside the drawer navigator without changing any routers, then the PR would be quickly accepted! cc @satya164<https://github.com/satya164> - You are receiving this because you commented. Reply to this email directly, view it on GitHub<#38 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AJ32YF5FCRIKAMdCIev52Ktd0HkdPCGYks5rWjBMgaJpZM4Lv56d>.

[satya164]

Fixed in #46

[hilkeheremans]

Thanks @satya164! FYI, I was doing the same fix at the same time. I have tested it in the following scenarios:

Tab in Drawer --> ok
Tab in Tab in Drawer --> ok
Stack in Tab in Drawer --> ok
Tab in Drawer in Tab --> ok
Tab in Drawer in Stack --> ok

... so we should be golden!

[satya164]

Awesome!

[Colmea]

Wow 4 hours after my issue, thank you ! Best.Customer.Service.Ever

[PManager1]

How can we handle the scenarios of Drawer inside the Tab , Can you please point me to some working code ?

[markusguenther]

That would be interesting. Or a way to have both - a TabNavigator and a DrawerNavigator.

I have a project where I should have 3 Tabs on all screens and a drawer with other NavigationItems.

[PManager1]

Can you pls share the link ?

…

Sent from my iPhone

On Jul 14, 2017, at 3:00 PM, Markus Günther ***@***.***> wrote: That would be interesting. Or a way to have both - a TabNavigator and a DrawerNavigator. I have a project where I should have 3 Tabs on all screens and a drawer with other NavigationItems. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[markusguenther]

Which link should I share? It is more or less a question ... will try to join this with a stacknavigator or so.