Improvements to nesting navigators #10491
Replies: 1 comment 1 reply
-
I don't really see any benefit to this. It's not any different from having some data in a global store and components accessing the data they use. Regardless it's impossible to implement this in a good way without a custom API for context which is worse than using just React APIs.
Data flow goes from parent to child in React. A parent component doesn't know what's in a child component, at least not on the first render and not without callbacks. It makes it impossible or fragile to do this. |
Beta Was this translation helpful? Give feedback.
-
Hey everyone. I work on a fairly large app and have run into a few cases where I think nesting navigators could provide an elegant solution but doesn't work due to constraints made clear in the library documentation. I opened this discussion to dive into these use cases and discuss potential solutions for them.
Sharing screens across navigators
The app I work on is fairly interconnected and shares screens across our tabs. When I first came across wanting to share screens I naturally came up with the following pattern, grouping the shared screens into their own navigator and nesting it into the navigators I want to launch the screens from:
Of course as mentioned above, this type of nesting (nesting like navigators) isn't really supported and is discouraged in the library documentation.
We have worked around this limitation by defining a list of all screens alongside their default options we want to share in a central location. Then in each navigator we want to access them in, we iterate over all the defined screens and add them as screens to the navigator. The solution works but doesn't really feel like React Navigation.
Wrapping a group of screens in a context provider
Another interesting use case for nesting navigators I've come across is scoping a context provider to a specific group of screens. Say for this checkout navigator I want to share some state across all the entire checkout flow and only across the checkout flow. Ideally I could do something like this to achieve that:
To summarize I know today React Navigation suggests against nesting navigators as a way to better organize your code but this constraint leads to:
Idea
Without knowing too much about the technical constraints and the internals of React Navigation, would it be possible to detect the nesting of like navigators and delegate to the parent navigator to display the screens of the nested navigator? Some kind of navigator merging mechanism. That way we could have the parent navigator still handle all the UX and avoid any duplicate UI while still getting the code organization benefits nesting navigators can provide.
Beta Was this translation helpful? Give feedback.
All reactions