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 👍