Lazy prop not working

[Jahans3]

Hi, thanks for the great router. I love the API. Unfortunately the lazy prop for Tabs has stopped working, I have used the prop as described in the API.

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta24
• react-native v0.50.3

Expected behaviour

I have a tab bar containing WebViews, I expect each WebView to be mounted only when it's navigated to.

Actual behaviour

Each WebView is mounted immediately, causing 4 WebViews to load at once, which slows down the app a fair bit.

Steps to reproduce

For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here.

1. Create router with tabs
2. Add lazy prop to Tabs, <Tabs lazy>...</Tabs>
3. Add something to notify you when a component is mounted (console.log inside each componentDidMount works fine)
4. Reload app, notice all scenes are mounted when tabs are loaded.

Here is what my router looks like:

export default () => (
  <Router>
    <Modal headerMode='none' panHandlers={null}>
      <Scene initial key='root' headerMode='none'>
        <Scene initial key='landing' headerMode='none' component={LandingScene} />
        <Scene key='landingPostcode' headerMode='none' component={LandingPostcodeScene} />
        <Scene key='landingTowns' headerMode='none' component={LandingTownsScene} />
        <Scene
          key='changePostcode'
          headerMode='none'
          component={ChangePostcodeScene}
          onEnter={() => boundSetEditingPostcode({ editingPostcode: true })}
          onExit={() => boundSetEditingPostcode({ editingPostcode: false })}
        />
        <Scene
          headerMode='none'
          key={constants.SCENE_ACCOUNT}
          leftButtonMode={constants.BUTTON_MODE_BACK}
          component={AccountScene}
          uri={env.SITE_URL + constants.FEED}
          section={constants.MOB_ACC_SCENE}
          sceneName={constants.SCENE_ACCOUNT}
          omitSelectors={omitAccount}
          onExit={boundPendingRefresh}
        />
        <Scene
          headerMode='none'
          key={constants.SCENE_THINGS_TO_DO}
          leftButtonMode={constants.BUTTON_MODE_BACK}
          title={translate.t('THINGS_TO_DO')}
          component={ThingsToDoScene}
          uri={env.SITE_URL + constants.FEED}
          section={constants.THINGS_TO_DO}
          sceneName={constants.SCENE_THINGS_TO_DO}
        />
        <Scene
          headerMode='none'
          key={constants.SCENE_NOTICES}
          leftButtonMode={constants.BUTTON_MODE_BACK}
          title={translate.t('NOTICES')}
          component={NoticesScene}
          uri={env.SITE_URL + constants.FEED}
          section={constants.NOTICES}
          sceneName={constants.SCENE_NOTICES}
        />
        <Scene
          headerMode='none'
          key={constants.SCENE_PROPERTY}
          leftButtonMode={constants.BUTTON_MODE_BACK}
          title={translate.t('PROPERTY')}
          component={PropertyScene}
          uri={env.SITE_URL + constants.FEED}
          section={constants.PROPERTY}
          sceneName={constants.SCENE_PROPERTY}
        />
        <Scene
          headerMode='none'
          key={constants.SCENE_OPENING_TIMES}
          leftButtonMode={constants.BUTTON_MODE_BACK}
          title={translate.t('OPENING_TIMES')}
          component={OpeningTimesScene}
          uri={env.SITE_URL + constants.FEED}
          section={constants.OPENING_TIMES}
          sceneName={constants.SCENE_OPENING_TIMES}
        />
        <Scene
          headerMode='none'
          key={constants.SCENE_AREA_STATS}
          leftButtonMode={constants.BUTTON_MODE_BACK}
          title={translate.t('AREA_STATS')}
          component={AreaStatsScene}
          uri={env.SITE_URL + constants.FEED}
          section={constants.AREA_STATS}
          sceneName={constants.SCENE_AREA_STATS}
        />
        <Scene
          lazy
          tabs
          key='tabs'
          headerMode='none'
          tabBarPosition='bottom'
          activeTintColor={brand.accent}
          inactiveTintColor={brand.greyDark}
        >
          <Scene
            tab
            headerMode='none'
            key={constants.SCENE_HOME}
            title={translate.t('HOME')}
            component={HomeScene}
            uri={env.SITE_URL + constants.FEED}
            sceneName={constants.SCENE_HOME}
            icon={TabBarIcon({ src: tabProperty })}
            omitSelectors={omitHome}
          />
          <Scene
            tab
            key={constants.SCENE_NEWS}
            headerMode='none'
            title={translate.t('NEWS')}
            component={NewsScene}
            uri={env.SITE_URL + constants.FEED}
            sceneName={constants.SCENE_NEWS}
            section={constants.NEWS}
            icon={TabBarIcon({ src: newspaper, style: { height: 20, width: 20 } })}
            omitSelectors={omitNews}
          />
          <Scene
            tab
            headerMode='none'
            key={constants.SCENE_DISCOVER}
            title={translate.t('DISCOVER')}
            component={DiscoverScene}
            uri={env.SITE_URL + constants.FEED}
            sceneName={constants.SCENE_DISCOVER}
            section={constants.DISCOVER}
            icon={TabBarIcon({ src: tabDiscover })}
            omitSelectors={omitDiscover}
          />
          <Scene
            tab
            headerMode='none'
            key={constants.SCENE_POST}
            title={translate.t('POST')}
            component={PostScene}
            uri={env.SITE_URL + constants.FEED}
            sceneName={constants.SCENE_POST}
            section={constants.POST}
            icon={TabBarIcon({ src: tabPost })}
            omitSelectors={omitPost}
          />
          <Scene
            tab
            headerMode='none'
            key={constants.SCENE_MORE}
            title={translate.t('MORE')}
            component={MoreScene}
            icon={TabBarIcon({ src: setting3 })}
          />
        </Scene>
      </Scene>
      <Scene
        headerMode='none'
        key={constants.SCENE_EXTERNAL_WEBVIEW}
        component={ExternalWebViewScene}
        sceneName={constants.SCENE_EXTERNAL_WEBVIEW}
      />
    </Modal>
  </Router>
)

[Donhv]

Lazy was removed

[JoePaulsenLyraHealth]

It's still in the API docs. Which now begs the question...how do we get content per component in a tabbed scene setup instead of mounting all of the components and making their requests all at once? Not sure how to accomplish this.

[Jahans3]

@Donhv I'm sure it was working in an earlier 4.x release

@JoePaulsenLyraHealth we add a lazy prop 😉

[digitaldavenyc]

+1 for this issue

It's causing a major lag booting up the app since each tab screen handles a substantial amount of API calls for our app. When loaded one by one it's fine but when we load 6 tabs and their child components at once, it's a lot.

[digitaldavenyc]

I think this issue is a dup of #2296

[aksonov]

lazy should work for v4. Could you please confirm that 4.0.0.beta.31 has lazy working?

[aksonov]

Closed due inactivity