Tabs mounting all components on start

[isAlmogK]

So I don't think this is a bug but I'm not sure this is correct behavior also this might be caused be React Navigation.

If you have a tabs component on app start once tabs are loaded it also loads all the view components for each tab.

So if you have the following

<Scene key="tabBar" tabs>
 <Scene key="tab1" title="Home" tabBarLabel="Home" icon={HomeTabIcon}>
  <Scene key='Home' component={Home} title='Home' initial={true}  panHandlers={null}/>
     <Scene key='Teams' component={Teams} title='Teams' initial={false} />
   </Scene>
  <Scene key="tab2" title="Photos" tabBarLabel="Photos" icon={PhotosTabIcon}>
<Scene key='Photos' component={Photos} title='Photos' initial={false} />
</Scene>
<Scene key="tab3" title="Site Diary" tabBarLabel="Site Diary" icon={SiteDiaryTabIcon}>
<Scene key='SiteDiary' component={SiteDiary} title='SiteDiary' initial={false} />
</Scene>
</Scene>

As soon as home loads it also loads photos and site diary.

For the most part, this is fine but if you need to make API calls in componentDidMount you really can't. This feels like the wrong way with react, I thought the whole idea is to make API calls inside componentDidMount once the component is mounted or navigated to.

[aksonov]

Have you tried lazy prop for tabs?

…

14 июля 2017 г., в 22:02, Almog Koren ***@***.***> написал(а): So I don't think this is a bug but I'm not sure this is correct behavior also this might be caused be React Navigation. If you have a tabs component on app start once tabs are loaded it also loads all the view components for each tab. So if you have the following <Scene key="tabBar" tabs> <Scene key="tab1" title="Home" tabBarLabel="Home" icon={HomeTabIcon}> <Scene key='Home' component={Home} title='Home' initial={true} panHandlers={null}/> <Scene key='Teams' component={Teams} title='Teams' initial={false} /> </Scene> <Scene key="tab2" title="Photos" tabBarLabel="Photos" icon={PhotosTabIcon}> <Scene key='Photos' component={Photos} title='Photos' initial={false} /> </Scene> <Scene key="tab3" title="Site Diary" tabBarLabel="Site Diary" icon={SiteDiaryTabIcon}> <Scene key='SiteDiary' component={SiteDiary} title='SiteDiary' initial={false} /> </Scene> </Scene> As soon as home loads it also loads photos and site diary. For the most part, this is fine but if you need to make API calls in componentDidMount you really can't. This feels like the wrong way with react, I thought the whole idea is to make API calls inside componentDidMount once the component is mounted or navigated to. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[isAlmogK]

No, I have not how do I set that? or is there an example or docs?

[aksonov]

Sorry, docs are not ready (PR is welcome). As I said before all tabs/stack configs are passed directly to StackNavigation/TabNavigator. So you can check 'lazy' attribute within TabNavigator docs.

[isAlmogK]

Thanks lazy does it