How to prevent re-renders of nested navigators in react-navigation?

Viewed 698

Lets say we have nested navigators like this:

<NavigationContainer>
  <RootStack.Navigator>
    <RootStack.Screen name="Sceen" component={Screen} />
    <RootStack.Screen name="MainApp" component={MainApp} />
  </RootStack.Navigator>
</NavigationContainer>

// Main app
<MainTabs.Navigator>
  <MainTabs.Screen name="NestedStack" component={NestedStack} />
  <MainTabs.Screen name="AnotherScreen" component={AnotherScreen} />
</MainTabs.Navigator>

// NestedStack
<NestedStack.Navigator>
  <NestedStack.Screen name="Screen1" component={Screen1} />
  <NestedStack.Screen name="Screen2" component={Screen2} />
</NestedStack.Navigator>

Now, if we navigate from Screen1 to Screen2, it seems the whole tree right from NavigationContainer re-renders. It slows down screen transition a lot. Is it possible to prevent the whole tree re-render and re-render only the NestedStack?

0 Answers
Related