[Navigator] renderScene method called for every component in route stack

[ranyefet]

Hi all,

I'm having a weird bug with Navigator. This is the same issue as #952.
I'm using v0.10.0, basically what happens is that renderScene method is called for every route in the stack.
That causes some weird issues in my app and I think it also affects performance.

I was able to easily reproduce it using UIExplorer example.
NavigatorExample.js (line 113):

renderScene: function(route, nav) {
console.log('route', route); // Added to see the issue
switch (route.id) {

Is it supposed to happen?

Thanks,
Ran.

[brentvatne]

@ranyefet - I added alert(JSON.stringify(route)); where you put console.log (both work, just easier to see it there I find) and noticed that it is indeed calling renderScene on multiple routes, however it is only being called on the top 2 in the stack.

This does seem to be a bug, at least with using push:

• When you call push, it triggers setState and therefore a render, but does not update the presentedIndex until the render is complete (via _transitionTo)
• The logic for checking if a route is cached in renderedSceneMap will ignore the cached scene if its index is equal to the presentedIndex, which we know is only updated after this render. So we will re-render the active scene and then render the next scene.

Ideally, I believe, we would not re-render the active scene but rather only the upcoming scene. cc @ericvicenti @hedgerwang

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/navigator-renderscene-method-called-for-every-component-in-route-stack

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix. We rely on the community to provide
bugfixes as the core team is heavily focused working on performance.

[manavdahra]

Hi i am facing this issue for version: React native 0.33.0
Following is the code in my app

<Navigator ref='navigator'
                initialRoute={Routes.Home}
                initialRouteStack={this.getRouteStack()}
                renderScene={(route, navigator) => {
                    switch (route.routeUri) {
                        case '/home':
                            console.log('rendering scene: home')
                            return (<Home {...this.props}/>)
                        case '/loanApplication':
                            console.log('rendering scene: loanApplication')
                            return (<LoanApplication {...this.props}/>)
                    }
            }}

I get this output from adb logcat:

I/ReactNativeJS( 5126): ***** Renering AppContainer ******

I/ReactNativeJS( 5126): rendering scene: home
I/ReactNativeJS( 5126): rendering scene: loanApplication

..... some more logs

Is there a work around for this?