On iOS tabs not rendering properly (Android works properly)

[caralin3]

Hi,

On iOS, the 2 tabs look like they are overlapping and not displaying each panel's content properly. Android is working properly.

https://github.com/user-attachments/assets/2fc00866-bb01-4ed7-89cb-5df3463a19e0

This is how I am implementing the tabs

<Tabs.Container
      ref={tabRef}
      headerContainerStyle={styles.headerContainer}
      renderHeader={header}
>
    <Tabs.Tab key={`${tabs[0].name}-content`} name={tabs[0].name}>
        {tabs[0].content}
    </Tabs.Tab>
    <Tabs.Tab key={`${tabs[1].name}-content`} name={tabs[1].name}>
        {tabs[1].content}
    </Tabs.Tab>
</Tabs.Container>

Here is the tabs array

[
    {
         name: 'Episodes',
         content: (
            <Tabs.ScrollView>
                <Text type='title'>Test 1</Text>
                <Text type='title'>Test 2</Text>
             </Tabs.ScrollView>
          ),
     },
      {
           name: 'My Episodes',
           content: (
               <Tabs.FlatList
                    data={[{ name: 'Test 3', id: 1 }, { name: 'Test 4', id: 2 }]}
                    keyExtractor={(item) => item.id.toString()}
                    renderItem={({ item }) => (
                      <View>
                        <Text type='title'>{item.name}</Text>
                      </View>
                    )}
                />
            ),
      },
]}

[yanachrnsh]

I faced the same issue on the latest version, but everything is working fine on "react-native-collapsible-tab-view": "6.2.1" and "react-native-pager-view": "6.5.1"