react-native: [NavigatorExperimental] Cannot Update Route Props While Transitioning

Is there any other way to render a NavigationHeader other than the renderOverlay prop of NavigationCardStack? For example, being able to render a different NavigationHeader for each scene?

I want to theme my scenes based on data retrieved from a database. The same scene could render a nav bar that is pink, purple, blue, etc., based on what the user has configured in their settings. The title and right icon (which launches an action sheet menu) are also generated based on data retrieved by the scene.

Therefore, I do not know what these properties will be until the scene “does some work” in terms of data fetching. I would like to keep that work isolated within the scene itself, rather than having to pre-fetch these bits of data before the scene is called, in anticipation that the scene might be called, so that I can pass them into renderOverlay as scene props for the initial render.

Is it possible to set these properties of NavigationHeader dynamically at the scene itself, i.e. within a lifecycle hook once data is fetched, rather than having to define them upfront within renderOverlay? Specifically:

  • renderLeftComponent
  • renderRightComponent
  • renderTitleComponent
  • style

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 1
  • Comments: 23 (20 by maintainers)

Most upvoted comments

With NavExp being deprecated, I started migrating my app over to react-navigation and I’m happy to report that this pesky issue lives and dies with NavExp. So far so good on the react-navigation system 👍

You could put the color onto your route, so the logic within renderOverlay uses the route to determine which color to render.

Or, you could use redux connect or a flux store to store the color information, and have your header subscribe to changes in the store.

Hope that helps!