Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 681
Alec Bennett Avatar asked Jan 18 '18 02:01

Alec Bennett


People also ask

How do I go back to previous screen in react navigation?

On Android, the hardware back button just works as expected. You can go back to an existing screen in the stack with navigation. navigate('RouteName') , and you can go back to the first screen in the stack with navigation. popToTop() .


1 Answers

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.

like image 124
jhm Avatar answered Oct 06 '22 00:10

jhm