Accessing a component with RN Tabs.Container functionality is very slow.

[Yawan-1]

Hi,

I have noticed a performance issue in one of my components where I have implemented Tabs.Container with renderHeader. When I navigate back to this component from another one that includes collapsible tabs, the navigation speed is significantly slower. However, when I remove the Tabs.Container and only leave the top component, the navigation speeds up. Reverting to the Tabs.Container causes a delay of about 2-3 seconds in navigation. This issue does not seem to be related to the navigation library, as removing the Tabs resolves the problem. Therefore, I suspect that the Tabs.Container may be the cause of this behavior.

    <Tabs.Container
      renderHeader={() => (
        <Header
          route={route}
          t={translate}
        />
      )}
      containerStyle={styles.container}
      renderTabBar={renderTabBar}
    >
      <Tabs.Tab name="First">
        <Tabs.ScrollView>
          <SecondTopTabComponent />
        </Tabs.ScrollView>
      </Tabs.Tab>
      <Tabs.Tab name="Second">
        <Tabs.ScrollView>
          <SecondTopTabComponent />
        </Tabs.ScrollView>
      </Tabs.Tab>
    </Tabs.Container>

so is there something I am doing wrong while rendering the Tabs? My main use is to have a sticky header tabs.

And I just noticed one more thing, When I remove the Tabs.Tab one by one then performance is increasing good. That's means if I have 5 Tabs then it is taking almost 3 seconds to open the page.

Developed a custom Tab View with a fixed header due to the lack of updates and unresolved pull requests for the existing library. This library is almost abandoned.

[khanhkom]

Waiting for some one resolve this