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);

}

Answer 1

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) }
/>