question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[NavigatorExperimental] Cannot Update Route Props While Transitioning

See original GitHub issue

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

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
joncursicommented, Apr 12, 2017

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 👍

1reaction
ericvicenticommented, Aug 9, 2016

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot update during an existing state transition (such as ...
In this case, it will make React Router try to start updating props to reflect the new path, which triggers the error you...
Read more >
[NavigationExperimental] Dealing with race conditions on ...
I've been having this issue with the navigation router in where I can't update the current route while the navigation animation is being ......
Read more >
Migrating to React Router v6: A complete guide
Migrate your React Router applications from v5 to v6 with this in-depth guide, including a review of additions and improvements from v5.
Read more >
createStackNavigator - React Navigation
Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
Read more >
Routing and Navigation in React Native - Expo Blog
When the transition completes and there are no active interactions demanding high responsiveness (the navigator transition is considered an ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found