Tab content does not show on Android, only navigator is visible

[Freedzio]

Hi

I've run into a problem I cannot solve.

Im using expo to create react native app. I went with react native paper library, so react-paper-tabs was an obvious choice.

However, I cannot get tabs to show. At first I tried to map an array to tabs and thought maybe that's the issue, but static content doesn't work aswell.

<Tabs showTextLabel>
    <TabScreen label='test'>
        <View style={{ flex: 1, minHeight: 500 }}>
              <Text>asd</Text>
        </View>
    </TabScreen>
    <TabScreen label='test2'>
        <View style={{ flex: 1 }}>
            <Text>asd</Text>
        </View>
    </TabScreen>
</Tabs>

expo 5.2.0 react-native 0.64.3

I've tried setting flex in style, tried setting height or min-height,, I've tried wrapping it in more Views (both Tabs and TabView content), but nothing works

[RichardLindhout]

Surround it with flex: 1 view, try to debug with backgroundColor: pink/blue/purple. I think the root view somewhere is not full height

[Freedzio]

I've wrapped the Tabs component in <View style={{minHeight: 500}}> and tab content became visible. However, in my case content is dynamic, meaning it's not always the same height (tab height doesn't change despite setting minHeight, not height)

So if I'm understanding it correctly, one has to set specific height for whole Tabs ? And content cannot be dynamic, because height won't change

[RichardLindhout]

No it should not be the case. For me it's always fullscreen on all devices? I think your rootview in your app has somewhere problems or not a fullheight before tabs are rendered. Can you check with flex:1 view around it and e.g. backgroundColor pink

[crunchytoast]

I had an issue with using this inside a ScrollView, where it wouldn't show any content. Is this perhaps your situation? Try changing it to a normal View and see if that fixes it.

[Freedzio]

Here's what I've come up with

<View style={{ minHeight: 650 }}>
    <Tabs showLeadingSpace={false} mode='scrollable'>
    {createTabs()}
    </Tabs>
</View>

The whole view is wrapped in ScrollView, so setting minHeight seems to solve the problem. However, this solution isn't perfect, becasuse in case of dynamic content the height may vary

[timdujardin]

Is there a fix already for the Android and iOS tab content height issue? I really need the dynamic height solution, the fixed height solution works but is not sufficient in my case. I'm working with Expo SDK 47 to test and build.

"expo": "47.0.9", "react-native-paper-tabs": "0.7.0", "react-native-pager-view": "6.0.1"

[RichardLindhout]

I don't think it's good UX if it's not fullscreen? What does this screen look like?

[timdujardin]

I have a header which should remain on its position and then the content below should be scrollable. The screenshot is already with a different solution (Segmented buttons), but you get the goal of it. https://user-images.githubusercontent.com/5878634/211253252-fbe4139e-f6e9-4647-a4cc-6d8e7b5265d3.png

[RichardLindhout]

You should put the scrollView inside the tab instead of around the tabs

[alOletres]

<View style={{ flex: 1 }}>

... I wrapped the tabs tag in View element then I add flex: 1 in Style .. Everthing was worked fine thank you!!