Giter Site home page Giter Site logo

Comments (12)

satya164 avatar satya164 commented on March 28, 2024 4

Fixed in #46

from react-navigation.

hilkeheremans avatar hilkeheremans commented on March 28, 2024 1

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?

from react-navigation.

Colmea avatar Colmea commented on March 28, 2024 1

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

from react-navigation.

frankrowe avatar frankrowe commented on March 28, 2024

Can confirm the same issue with embedding StackNavigators in a DrawerNavigator

from react-navigation.

ericvicenti avatar ericvicenti commented on March 28, 2024

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

from react-navigation.

hilkeheremans avatar hilkeheremans commented on March 28, 2024

from react-navigation.

hilkeheremans avatar hilkeheremans commented on March 28, 2024

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!

from react-navigation.

satya164 avatar satya164 commented on March 28, 2024

Awesome!

from react-navigation.

PManager1 avatar PManager1 commented on March 28, 2024

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

from react-navigation.

markusguenther avatar markusguenther commented on March 28, 2024

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.

from react-navigation.

PManager1 avatar PManager1 commented on March 28, 2024

from react-navigation.

markusguenther avatar markusguenther commented on March 28, 2024

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

from react-navigation.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.