Screen Performance inside React Navigation

  1. SDK Version: 36
  2. Platforms(Android/iOS/web/all): Android

Hi !

I’ve been struggling a lot with performance lately and I really need help on how to approach this.

I’m building an app with multiple levels of navigation. Here’s my basic structure

  • MaterialBottomTabNavigator: (Main Navigation)
    • ViewComponent (Map)
    • StackNavigator: (Places of Interest of the map)
      • ViewComponent ( List of All Places)
      • MaterialTopTabNavigator: (Details of a single place)
        • ViewComponent (Details Screen)
        • ViewComponent (Photo Gallery Screen)
        • ViewComponent (Quiz Screen)
    • StackNavigator: (Animals)
      • ViewComponent ( List of All Animals)
      • MaterialTopTabNavigator: (Details of a single Animal)
        • ViewComponent (Details Screen)
        • ViewComponent (Photo Gallery Screen)

The issue mostly comes from the Photo Gallery Screen, which is one of the screens of the MaterialTopTabNavigator. Performance is terrible, not really usable.

Now I tested a lot of possibilities to try to narrow it down, but all I could figure out was that the stack navigator is the problem. If I take the whole MaterialTopTabNavigator and makeup this kind of navigator hierarchy:

  • MaterialBottomTabNavigator: (Main Navigation)
    • ViewComponent (Map)
    • MaterialTopTabNavigator: (Details of a single place)
      • ViewComponent (Details Screen)
      • ViewComponent (Photo Gallery Screen)
      • ViewComponent (Quiz Screen)

Performance is excellent.

Now I thought that my navigator hierarchy was fine, but clearly this brings up important issued. What can I do from here ?

I also have a second question: How can I have a shared route param for all ViewComponents under my MaterialTopTabNavigator ? I couldn’t figure it out so I was about to fix it with Redux, but I have a hard time thinking it can’t be done with “normal” processes.

Thank you !