Inconsistent behaviour when passing props through a NavigationStack in navigation-react-native

Hi, hope you’re well

My team has noticed an issue recently introduced in navigation-react-native version 8.6.0. Namely, when passing props all the way down from one screen, into a modal, into a navigation stack and then finally into another screen, we are seeing inconsistent behaviour.

The following can be seen at an example branch I have, here:

Background

Our team sometimes has need of a navigator that shows a single screen and no more. This is used for things like rendering a navigation title bar at the top of a modal. Here’s an example: https://github.com/grahammendick/navigation/blob/af36d4d43cdf05001524729c757f936235354ab2/NavigationReactNative/sample/singlescreennavigator/App.js#L41

By then passing the screen as a child of SingleScreenNavigator or passing a render function to the Screen prop, one can have easy one-off navigators without too much boilerplate: https://github.com/grahammendick/navigation/blob/af36d4d43cdf05001524729c757f936235354ab2/NavigationReactNative/sample/singlescreennavigator/App.js#L117-L126

This has advantages over a standard Navigator setup for one reason: the parent component can pass props to the child directly

<8.6.0

Prior to 8.6.0, on both iOS and Android this would work with initial props, but subsequent updates to those props would not render inside the child single screen navigator’s screen.

Replicable in my own project but not in the toy example provided is if the child screen is passed using a render function, instead of as a child:

https://github.com/grahammendick/navigation/blob/af36d4d43cdf05001524729c757f936235354ab2/NavigationReactNative/sample/singlescreennavigator/App.js#L129-L140

Doing it this way, the child would be able to receive updated props, likely because the way it is rendered in the scene changes - instead of passing a rendered component into the navigator, we pass a render function. I haven’t yet been able to replicate this behaviour in the example project.

Videos

https://user-images.githubusercontent.com/6651364/147356852-f6666980-9dba-4547-b63a-9b26f0aa5ea8.mp4

https://user-images.githubusercontent.com/6651364/147356867-0e518965-cd12-43d9-9ae1-68a55830c12d.mp4

>=8.6.0

Funny enough, with the release of 8.6.0 and also replicable in 8.7.0, this has changed. Props now update correctly! But only on iOS. When you pass the screen as a child it works flawlessly. Passing the screen as a function works okay but it is clear that something is unmounting and remounting it each time, since the spinner is no longer visible, meaning internal state gets destroyed.

Videos

https://user-images.githubusercontent.com/6651364/147359231-46786090-ee7b-4f02-a437-0c2ae8e74880.mp4

https://user-images.githubusercontent.com/6651364/147359228-e6abf440-3538-4f7b-a80b-9a6da1ea512f.mp4

Questions

I realise this might be not-best-practice, so if the answer is “what are you doing, of course that is weird” then I value a suggestion to replace this! That said, my main questions are:

• Is this pattern doomed to fail, and are these inconsistencies a cost of that?
• If this pattern is valid, should we look at making the two platforms work consistently? Should they match the “no nav stack” example?
• How would you approach this problem? There is a lot of value in being able to pass props to a screen without it going through a navigator, but I realise that breaks the navigation model fairly substantially.

Thank you for taking a look, I appreciate it. Let me know what you think, and we can take it from there.

[grahammendick]

I like the behaviour we ended up with.

Me too, it’s a big improvement. Thanks for raising the issue and working through it with me

[salockhart]

Hey @grahammendick, thanks for the quick response. Wasn’t expecting to hear from you until the new year!

That makes sense, and using Context for this is a pattern that we have experimented in the past. The extra boilerplate scared us off a bit, but I think I see a way to help with that.

Thanks as always! I will close this out.