React Native Navigator renderScene called multiple times

Question

I was at a standstill for some time when RN Navigator tried to find out why Navigator displays all routes nested on its stack.

Originally

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

Then, after issuing navigator.push({ name : "Route 2", index: 2 }) , the render () method of my component is called, which redirects the Navigator, which in turn calls renderScene .

After pressing the 2nd route and registering the route when calling renderScene, it displays:

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

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

Does anyone know why renderScene () is called as many times as there are routes inside the Navigator stack? This is the expected behavior, and if so, can we speed up the rendering?

When trying to render scenes from 5 routes, there is a significant increase in performance before finally rendering the scene for the last pushed route, when you actually need to call render () once to render only the scene of the last pushed route.

Any help is appreciated. Thanks!

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

renderListingsScene should return the JSX code. You must return a <View> or other component in renderScene . I think it re-renders each scene because you are not providing any component as the return value.

Answer 2

I had a similar problem (it caused all the routes that I determined at startup). As soon as I removed initialRouteStack from the Navigator Properties, it stopped.

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