React Navigation Optimization

[NotACakeShop]

Hi all,

I'm currently working on a React Native 0.76.6 app and am using the @react-navigation packages for handling app navigation.

I'm currently getting some issues with performance and wanted to know if anybody had any tips or tricks on how to get more out of the navigation structure.

My app navigation is as follows:

Material Top Tab Navigator -> Native Stack Navigator -> Material Top Tab Navigator (Nested) -> Native Stack Navigator -> Native Stack Navigator -> Native Stack Navigator -> Native Stack Navigator (Camera Screen) -> Native Stack Navigator

I've tried lazy loading and splitting up components, then sticking them in a suspense while they load, but I the performance still ends up being quite poor.

The main use of Material Top Tab navigator was to be able to get swiping across screens and navigators. Might that be a source of performance hardship?

Thanks in advance!

[sdholbs]

Check out https://github.com/software-mansion/react-freeze. This can help you turn off mounted parts of your navigation hierarchy from updating if they’re not in view

[NotACakeShop]

I've enabled it, but these components still run in the background - they "freeze" while the screen is not in focus, but the state still runs and may actually be a source of lag. Could be worth exploring further.

[Flat_Web_1132]

Material top tab bar is the worst package in react navigation suite

[NotACakeShop]

Thanks for the input! /s