How to "lazy load" tab navigator screens now that lazy has been removed from react-navigation

Question

The maintainers of react-navigation have removed 'lazy: true' from the library, causing all tabs to attempt to render at once (and fetches previously controlled by lazy now firing out of order).

In order to maintain similar functionality, how do you force a wait on a tab screen to not load or call fetch calls prior to being focused for the first time?

Answer 1

It seems they did remove it, but have decided to add it back in v 1.1.2

https://github.com/react-navigation/react-navigation/releases/tag/v1.1.2

Thus, you should be able to pass lazy={true} in your TabNavigatorConfig object, and then tabs will not be rendered before they are active. To further optimize memory usage, you can couple this with removeClippedSubviews to free memory from inactive tabs.