- SDK Version: 36
- 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 !