No content rendered when the tab navigation is inside a ScrollView.

[YoucefBen47]

We were facing an issue after upgrading React Native and the navigation packages to the latest versions. Not sure if it's react-native-tab-view or react-native-pager-view but the content of the Material Top Tab was blank when inside a ScrollView. I found suggestions to use your package however it's the same issue. Is there a way to fix this ?

[Ritik5Prasad]

+1 I was facing same I removed lazy

[Ritik5Prasad]

    lazy
    cancelLazyFadeIn
    // cancelTranslation
    // lazy Android Issue Content not Visible

    Write it like this

[Kerumen]

This also happened to us. Looks like this is due to react-native-pager-view@6.2.3 and the new architecture they are working on. If you upgrade to react-native-pager-view@6.3.1 it should fix the issue (as they enforced the legacy architecture in this version).

[MohsinAtArbisoft]

I am having same issue, I was not using lazy at the first place. Issue is specific to android, working fine on iOS.

[DSKonstantin]

The same issue, problems only on Android. Any ideas?

[MohsinAtArbisoft]

I resolved it my removingflex: 1 from child component of Tabs.Tab. @DSKonstantin

<Tabs.Tab name={'name'}>
<View /> // this view should not have flex: 1
</Tabs.Tab>

[DSKonstantin]

Thank you @MohsinAtArbisoft

For me helped:

<Tabs.Container
        lazy
        cancelLazyFadeIn 
        .....
>
  <Tabs.Tab name="followers" label={`Followers ${followersCount || 0}`}>
         <View style={{height: '100%'}}>
             <Tabs.FlashList />
.......

[FabianDean]

Thank you @MohsinAtArbisoft

For me helped:

<Tabs.Container

        lazy

        cancelLazyFadeIn 

        .....

>

  <Tabs.Tab name="followers" label={`Followers ${followersCount || 0}`}>

         <View style={{height: '100%'}}>

             <Tabs.FlashList />

.......

Yeah this is exactly how I set it up as well 👍

[bkensey]

I resolved it my removingflex: 1 from child component of Tabs.Tab. @DSKonstantin

<Tabs.Tab name={'name'}>
<View /> // this view should not have flex: 1
</Tabs.Tab>

This worked for me as well.

[AhmedAhmedEG]

I have been stuck with this problem with all the available tab components out there, everyone suggested this component as the one that worked with ScrollView, now when I gone ahead and tried it, it' doesn't work, I treid all the solution provided here and they didn't fix it.

I have just latterly recreated my whole project again in the new Expo API including the expo-routing, had to reorganize my code from scratch, and now after all of that, I am having that problem still there.

<ScrollView>
    <Tabs.Container renderHeader={Header} lazy cancelLazyFadeIn>
        <Tabs.Tab name='Test'>
            <View>
                <Text>Test Text</Text>
            </View>
        </Tabs.Tab>
    </Tabs.Container>
</ScrollView>