Load content of tab when pressing tab instead load all tabs

[SoldierCorp]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.21
• react-native v0.46.4

Expected behaviour

• Load content when the user touch the tab.

Actual behaviour

• All the content of my 3 tabs are being loaded at the same time. I have an API request within componentDidMount() function on each one so sometimes its slow.

[Nautal]

have you tried the "lazy" property ?

[mcabs3]

@SoldierCorp currently I don't believe there is way to render the tab "new" every time you go to the tab, if you are looking for just when you initially go to a tab for the first time, then @Nautal has the right idea of using the lazy property on the tabs you want to lazy load.

[pgonzalez-santiago]

@SoldierCorp Did you find any solution? I am having the same problem, I want to fetch the data of a second tab only when this tab is active.

[SoldierCorp]

@Nautal I cannot see any difference using lazy

@mcabs3 I want to know if there is a way to detect the tab event to compare if the content has not been loaded, then load the content because I'm using axios to get data from my API

@pgonzalez-santiago Not yet u.u

[aksonov]

Why don't use onEnter?

…

6 сент. 2017 г., в 17:20, Edgardo Ramírez ***@***.***> написал(а): @Nautal I cannot see any difference using lazy @mcabs3 I want to know if there is a way to detect the tab event to compare if the content has not been loaded, then load the content because I'm using axios to get data from my API @pgonzalez-santiago Not yet u.u — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[pgonzalez-santiago]

@SoldierCorp I added the prop "lazy" in the tabs parent and it works. Fetch data in the componentDidMount() on my second tab is called when I navigate into it. I think this is what you want.

[SoldierCorp]

@aksonov I'll check how to use it, thank you!

@pgonzalez-santiago That's weird, I have that prop and componentDidMount but all of them are being loaded at the same time.

[pgonzalez-santiago]

@SoldierCorp Could you paste the code of your scenes/tabs please?

[SoldierCorp]

<Router createReducer={reducerCreate}>
  <Stack key='main'>
    <Scene key='contact' hideNavBar='true' backTitle={'Regresar'} component={Contact} passProps={true}
      openSideMenu={props.openSideMenu}
      closeSideMenu={props.closeSideMenu}
      type={ActionConst.REPLACE}
    />
    <Scene key='gifts' hideNavBar='true' backTitle={'Regresar'} component={Gifts} passProps={true}
      openSideMenu={props.openSideMenu}
      closeSideMenu={props.closeSideMenu}
      type={ActionConst.REPLACE}
    />

    <Scene key='team' hideNavBar='true' backTitle={'Regresar'} component={Team} passProps={true}
      openSideMenu={props.openSideMenu}
      closeSideMenu={props.closeSideMenu}
      type={ActionConst.REPLACE}
    />

    <Scene  key='business' component={Business} title='INFORMACIÓN' hideNavBar='true' passProps={true} />

    <Scene key='filter' component={Filter} type={ActionConst.PUSH} passProps={true} navigationBarStyle={navBar}
      title={'Filtros de búsqueda'}
      titleStyle={titleStyle}
      leftButtonImage={ require('./assets/images/icons/close_icon.png') }
      onLeft={ Actions.pop }
    />
    
    {/* Tabs */}

    <Tabs
      key="home"
      tabs
      tabBarStyle={styles.tabBarStyle}
      hideNavBar="true"
      showLabel={false}
      tabBarPosition='bottom'
      titleStyle={titleStyle}
      navigationBarStyle={navBar}
      onLeft={props.openSideMenu}
      onRight={() => Actions.filter()}
      rightButtonTextStyle={filterTextStyle}
      hideBackImage={true}
      leftButtonImage={ require('./assets/images/icons/menu_trigger.png') }
      rightButtonImage={ require('./assets/images/icons/filter_icon.png') }
      activeBackgroundColor="#262a62"
      inactiveBackgroundColor="#444881"
    >
      <Scene
        key='info'
        component={BusinessList}
        icon={TabIcon}
        openSideMenu={props.openSideMenu}
        type={ActionConst.REPLACE}
        title="🏬 Negocios"
      />
      <Scene
        key="featured"
        component={Featured}
        title="♥ Destacados"
        icon={TabIcon}
        passProps={true}
        lazy
      />
      <Scene
        key="events"
        component={Events}
        title="🎉 Eventos"
        icon={TabIcon}
        passProps={true}
        lazy
      />
    </Tabs>
  </Stack>
</Router>

[aksonov]

lazy must be defined for Tabs, not for scene, please carefully check docs...

[SoldierCorp]

Actually if you check the docs, lazy is in the Scene not in Tabs, please review that part https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md

[hugoh59]

I've set lazy="true" in my scene but it still loads the componentDidMount method. How can we fix this?

[aksonov]

Read docs carefully.

[hugoh59]

Ok, sorry about that I found a fix! The lazy attribute is in fact working. My problem was coming from the fact that I was calling a onPress={this.connectWithFacebook()} instead of onPress={() => this.connectWithFacebook()} which was calling the function automatically. If this can help anyone in the future. Sorry about that!

[amitbravo]

@hugoh1995 so , is "lazy" a solution to get rid of this problem ? I have similar problem , my app is like land on signin page first and then after logged in user lands to 4tabs e.g. news , photos , videos and other , when user successfully logged in , it takes around 3-4 seconds pause from landing signin page to tab group because big heap of data is fetched , renders along with images , so I want user when he lands on main tabs which is news only this data should be loaded , rest of other 3 tabs data should get whenever we hit on them.

[Fiaz-Tariq]

Lazy Loading Tab Content in React Bootstrap:

Implementing lazy loading for tab content in React Bootstrap allows you to load the content of a specific tab only when that tab is clicked. This approach optimizes performance by avoiding the upfront loading of all tab content at once (avoid all tabs API response). Utilizing conditional rendering based on the active tab ensures that only the selected tab's content is displayed, providing a more efficient and responsive user experience. The example code demonstrates how to achieve lazy loading using the Tabs and Tab components in React:

const [activeTab, setActiveTab] = useState('tab1');
const handleTabSelect = (selectedTab) => {
setActiveTab(selectedTab);
};

<Tabs
      id="controlled-tab-example"
      activeKey={activeTab}
      onSelect={handleTabSelect}
      className="mb-4 pb-2 custom-tabs">
      
      <Tab eventKey="tab1" title="Tab 1 ">
        {activeTab === 'tab1' && <TabOneContent />}
      </Tab>
      <Tab eventKey="tab2" title="Tab 2">
        {activeTab === 'tab2' && <TabTwoContent />}
      </Tab>
 </Tabs>