Slow Re-Render on Multiple Nested Tab Navigator


#1

I am using the react-navigation package. I want my App to have DrawerNavigator (i.e. side menu), StackNavigator (i.e. header) and TabNavigator (i.e. transition between home to others tabs).

I found it needed 3-4 seconds to re-render from home to any tabs (i.e. cart, wishlist, detail, etc). Is the delay caused by the multiple nested navigators? If yes, could you show me on how to solve the lag while still having the DrawerNavigator, StackNavigator and TabNavigator on my App.

This is my navigation file:

const MainNavigator = TabNavigator({
  welcome: { screen: WelcomeScreen },
  main: {
    screen: DrawerNavigator({
      subMain: { screen: StackNavigator({
        homeScreen: { screen: TabNavigator({
          home: { screen: HomeScreen },
          cart: { screen: CartScreen },
          wishlist: { screen: WishListScreen },
          detail: { screen: DetailScreen },
          news: { screen: newsStack },
          search: { screen: SearchScreen },
        }, {
          tabBarPosition: 'bottom',
        }),
        navigationOptions: ({ navigation }) => ({
          title: 'MyProject',
          headerLeft: <Icon name="menu" navigate={navigation.navigate} />,
          headerStyle: { marginTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 },
        }) },
        categories: {
          screen: categoryStack,
        },
      }) },
      myOrder: { screen: MyOrdersScreen },
      login: { screen: LoginScreen },
      signUp: { screen: SignUpScreen },
    }, {
      tabBarPosition: 'bottom',
      swipeEnabled: false,
      animationEnabled: false,
      tabBarOptions: {
        showIcon: true,
        showLabel: true,
      },
      lazy: false,
    }),
  },
}, {
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  lazy: false,
});

Thanks.

Edit: I tested the Expo App on my Android Nexus device.