React Native Navigator renderScene called multiple times

Question

I've been stumped for a while with RN Navigator trying to figure out why Navigator renders all the routes pushed in its stack.

Initially

<Navigator initialRoute={{name:"Route 1", index: 1}} />

Then upon issuing a navigator.push({ name : "Route 2", index: 2 }) the render() method of my component gets called which re-renders Navigator, which in turn calls renderScene.

After pushing the 2nd route and logging the route when renderScene gets called yields to:

Render() --> renderScene(), {name:"Route 1", index: 1}

Render() --> renderScene(), {name:"Route 2", index: 2}

Does anyone know why the renderScene() gets called as many times as there are routes inside the Navigator's stack? Is this is expected behaviour and if it is how can we speed up the rendering?

There is a significant performance hit when trying to render scenes of 5 routes before finally rendering the scene for the last pushed route, when in reality it should be calling render() once for rendering only the scene of the last pushed route.

Any help is greatly appreciated. Thank you!

These are the relevant snippets:

nav.js

export function ListPage(){
    return {
        name: LIST_PAGE,
        index: 1
    }
}


Main App

<Navigator
        ref={(ref) => this.navigator = navigator = ref}
        initialRoute={nav.ListPage()}
        renderScene={(route,navigator)=>this.renderListingsScene(route,navigator)}
 />

renderListingsScene(route, navigator){
        console.log("renderScene()", route);

}

Can you share what your renderScene actually looks like? Also your <Navigator initialRoute={name:"Route 1", index: 1} /> is missing a pair of curly braces, it should be <Navigator initialRoute={{name:"Route 1", index: 1}} /> — rclai
I've updated the question to reflect the code you're looking for, and I've got the brackets in my code - fixed the typo — DritanX
Yeah it's odd. I have the same issue but just with 2 routes in initialRoute (render 2x) and using navigationState to pass the stack (but not pushing any on) — Dominic
I'm having the same issue, and it's not affected by the initialRoute at all. Did you find a fix? — Cyclonus
Looks like a known bug: github.com/facebook/react-native/issues/2536 and github.com/facebook/react-native/issues/952 — Cyclonus

roocell roocell · Accepted Answer · 2016-12-04T02:05:39

I had a similar problem (it was calling all routes I had defined at startup). Once I removed the initialRouteStack from the Navigator Properties it stopped happening.

<Navigator
          initialRoute={routes[0]}
          //initialRouteStack={routes}
          renderScene={ (route, navigator) => this._renderScene(route, navigator) }
/>

React Native Navigator renderScene called multiple times

2 Answers