I had a problem re-rendering my component on tabs change, and apparently adding lazyLoad: true to the navigation options solved it.
But I don't understand very well how it works...especially before that, I had another problem and adding lazy: true to options solved it.
so my question is, what is the difference between the two and how they work in react-navigation :)
There are two major releases of react navigation,
react-navigation-v1 and react-navigation-v2
When react-navigation loads up a navigator e.g TabNavigator, it tries to render all the screens inside that navigator.
For react-navigation-v1: When the TabNavigator is mounted on the screen, It tries to push all the screens/components configured inside itself at once to the UI. So to avoid this behavior, in the TabNavigator options, lazyLoad: true or lazy: true is passed, so the Screens/Components can be rendered as required.
Until react-navigation 1.0.0-beta9, lazyLoad: true was used, but since it is stable now, lazy: true is used.
For react-navigation-v2: TabNavigator and createTabNavigator are deprecated, you will always get that yellow screen error, so use createBottomTabNavigator and/or createMaterialTopTabNavigator . The lazy option works with TabNavigator and createTabNavigator, createBottomTabNavigator has lazyLoading option built in, but createMaterialTopTabNavigator seems to buggy, the lazy option does not work.
I hope this answers your question.
