react-navigation.github.io icon indicating copy to clipboard operation
react-navigation.github.io copied to clipboard

Clarify passing state params to tab + stack navigator routes where name is shared.

Open AndrewSouthpaw opened this issue 5 years ago • 3 comments

The Tabs Navigation documentation provides an example of putting a StackNavigator on a tab route. In the example, the name for the tab and the stack are the same: Home or Settings.

It turns out that state params passed via navigate will not be accessible inside the StackNavigator, which may be obvious to someone deeply familiar with the library but not to casual users (such as myself).

This PR clarifies this behavior and provides a couple examples of how to resolve the situation, so that state params can be successfully passed to the StackNavigator.

If folks think this behavior is actually a bug or warrants some other helper methods that may make it easier to deal with situations like these, I'm all ears and would love to hear how I might contribute more.

AndrewSouthpaw avatar Mar 09 '19 22:03 AndrewSouthpaw

Deploy preview for react-navigation ready!

Built with commit c697cf645a9884b12a494b26f2ad8723b19a8bb9

https://deploy-preview-375--react-navigation.netlify.com

react-navigation-bot avatar Mar 09 '19 22:03 react-navigation-bot

thank you! I think the general idea behind this is good but I'd want to improve the wording before landing. i think we're conflating a couple of things here - 1) using the same route name in multiple places 2) accessing params from a screen that is inside of a stack that is inside of a tab navigator. i think we want to address 2 here, but as for 1 we should probably clarify this in the fundamentals section, so i'd remove it from this particular pr.

also, we should include the relevant portion of the code in the snack in the docs page itself, then link to the snack under snippet

brentvatne avatar Mar 16 '19 01:03 brentvatne

Thanks for the feedback!

My reason for addressing #1 is that this particular section of the docs provides an example where it uses the same route name in multiple places, which led to the initial confusion. People often explore docs in a non-linear fashion and it's easy to fall over this nuance. I can remove it if you feel strongly, but I think it would benefit the docs to try to clarify it here one way or another.

I actually don't know how my PR is addressing #2, which probably just reveals my lack of a deep understanding of react-navigation. 😬 Can you clarify how you might want the example to be reworked to emphasize it?

I can add the code snippet in the docs page itself once we sort out the above.

AndrewSouthpaw avatar Mar 28 '19 01:03 AndrewSouthpaw

From 6.x onwards, we started warning if you have the same name for the immediately nested screen. I'm closing this since this isn't a recommended pattern, and the main problem seems to be accessing parent's params which should be documented differently.

satya164 avatar Oct 21 '22 08:10 satya164