TabBar in TabController.PageCarousel not rendering in Android but working in web

[candronikos]

Description

The code below renders correctly in the web and I am able to scroll between them and move to the page corresponding to the item in the TabBar when clicked. The same goes for the Android implementation when running from my phone but the TabBar is not visible.

Related to

• [X] Components
• [ ] Demo
• [ ] Docs
• [ ] Typings

Steps to reproduce

Create an expo project and try running in both the web and android.

Expected behavior

I expected the TabBar to render on the bottom of the screen of my phone.

Actual behavior

TabBar is not visible at all but I am able to scroll between the tabs.

Code snippet

const Page = () => {
  return (
    <View style={{height:"100%", flex:1}}>
      <TabController
        items={[{ label: 'Page1' }, { label: 'Page2' }, { label: 'Page3' }, { label: 'Page4' }]}
        asCarousel={true}
      >
        <TabController.PageCarousel>
          <TabController.TabPage index={0}><Page1/></TabController.TabPage>
          <TabController.TabPage index={1}><Page2/></TabController.TabPage>
          <TabController.TabPage index={2}><Page3/></TabController.TabPage>
          <TabController.TabPage index={3}><Page4/></TabController.TabPage>
        </TabController.PageCarousel>
        <Text>Hi</Text>
        <TabController.TabBar enableShadows backgroundColor="black"/>
        <Text>Bye</Text>
      </TabController>
    </View>
  )
}

Environment

• Windows 10
• React Native version: 0.74.5
• React Native UI Lib version: ^7.31.0

Affected platforms

• [X] Android
• [ ] iOS
• [ ] Web

[0-CAT]

I believe this is happening in iOS also, unless I'm doing something wrong. I got no tabs after adding a TabBar:

With this code:

<TabController
    items={[
        { label: "First" },
        { label: "Second" },
        { label: "Third" },
    ]}
>
    <TabController.TabBar activeBackgroundColor={Colors.blue30} />
    <TabController.TabPage index={0}>
        <Text blue20 text20>
            Page 1!
        </Text>
    </TabController.TabPage>
    <TabController.TabPage index={1} lazy>
        <Text blue20 text20>
            Page 2!
        </Text>
    </TabController.TabPage>
    <TabController.TabPage index={2} lazy>
        <Text blue20 text20>
            Page 3!
        </Text>
    </TabController.TabPage>
</TabController>

But if I add containerStyle={{ height: 40 }}, they appear:

Versions

RN 0.75.4, RNUI 7.32.0.