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.

[hunglv156]

same issue

[adids1221]

Hi guys, does this reproduce on RN 0.73 ? @hunglv156 @0-CAT @candronikos

I didn't managed to reproduce the issue on Android and on IOS seems to work fine on RN 0.73 (which is the version we are supporting currently). Please try to upgrade the UILIB version to the latest 7.34.

[0-CAT]

Hi guys, does this reproduce on RN 0.73 ?

Sorry for the late reply. Unfortunately, my project team has migrated to a different framework so I'm not able to verify. We were on RN v0.75.6 at the time, so it's possible it's an issue with changes made to RN since v0.73—but I can't confirm.

[ee-dd-cc]

same issue on RN 0.73.11

[mtx-dev]

@ee-dd-cc Downgraded to 7.20.3 Works for me

[iamkem]

same on RN 0.79.5

[M-i-k-e-l]

Hello,

We have a version that supports new-arch (RN77), you can use the next tag for now. Please make sure to go over the v8 doc, it includes breaking changes and some known issues.

Please close this ticket if it solved your bug.