TabBar switching avoid rendering middle tabs

[kashmiry]

Hello,
Thank you to everyone contributing to the amazing work on this package.
I am encountering an issue and would appreciate any help or guidance.

Case:
I have three tabs: A, B, C. using lazy to avoid rendering all tabs.

<Tabs.Container lazy ...>
  <Tabs.Tab name="A" label="Tab A">
   <ScreenA />
  </Tabs.Tab>
  <Tabs.Tab name="B" label="Tab B">
   <ScreenB />
  </Tabs.Tab>
    <Tabs.Tab name="C" label="Tab C">
   <ScreenC />
  </Tabs.Tab>
</Tabs.Container>

The issue:
When I press on Tab C from the tab bar, Tab B which is in between the tabs, is also initiated and rendered.
I would like Tab B to render only when I press on it or swipe to it.

Is there a solution or workaround for this behavior?

[nerodroid]

@kashmiry have you find any solution ?

[MusabDev]

+1

[souvenir718]

+1

[alextbogdanov]

Here is my solution:

<Tabs.Container
  renderHeader={() => <Header />}
  renderTabBar={props =>
    <MaterialTabBar
      {...props}
      TabItemComponent={props => 
        <MaterialTabItem
          {...props}
          android_ripple={{ radius: 0 }}
          labelStyle={{ color: COLORS['dark'], fontSize: 16 }}
        >
        </MaterialTabItem>
      }
      indicatorStyle={{ backgroundColor: COLORS['primary'] }}
      contentContainerStyle={{ marginTop: Platform.OS === "android" ? 20 : 0 }}
    />
  }
  headerContainerStyle={{ 
    elevation: 0,
    shadowColor: 'transparent',
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  }}
  pagerProps={{ scrollEnabled: false }}
  onIndexChange={(index) => {
    if (Platform.OS === "android") {
      setActiveTab(tabNames[index]);
    }
  }}
>
  <Tabs.Tab name="itinerary" label="Itinerary">
    <Tabs.ScrollView className="bg-background" style={animatedTabViewStyle}>
      {Platform.OS === "android" && activeTab === "itinerary" && <TabView tab="itinerary" />}
      {Platform.OS === "ios" && <TabView tab="itinerary" />}
    </Tabs.ScrollView>
  </Tabs.Tab>
  <Tabs.Tab name="ship" label="Ship">
    <Tabs.ScrollView className="bg-background">
      {Platform.OS === "android" && activeTab === "ship" && <TabView tab="ship" />}
      {Platform.OS === "ios" && <TabView tab="ship" />}
    </Tabs.ScrollView>
  </Tabs.Tab>
  <Tabs.Tab name="people" label="People">
    <Tabs.ScrollView className="bg-background">
      {Platform.OS === "android" &&  activeTab === "people" && (
        <Text>People</Text>
      )}
      {Platform.OS === "ios" && (
        <Text>People</Text>
      )}
    </Tabs.ScrollView>
  </Tabs.Tab>
</Tabs.Container>

Turns out iOS does that automatically