BUG: Tab Indicator Does not Appear when upgrading to Expo 51

[jake-ruth]

Description

After upgrading to Expo 51, I am having an issue where the tab indicators do not appear under tabs.

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

Render a tab view with environment listed below.

Expected behavior

Show the tab indicators below each tab.

Code snippet

The example from the docs will reproduce this issue:

<TabController items={[{label: 'First'}, {label: 'Second'}, {label: 'Third'}]}>
  <TabController.TabBar />
  <View flex>
    <TabController.TabPage index={0}>{renderFirstPage()}</TabController.TabPage>
    <TabController.TabPage index={1} lazy>{renderSecondPage()}</TabController.TabPage>
    <TabController.TabPage index={2} lazy>{renderThirdPage()}</TabController.TabPage>
  </View>
</TabController>

Screenshots/Video

Environment

"expo": "^51.0.0",
"react-native": "0.74.1",
"react-native-ui-lib": "^7.23.3",
"react-native-gesture-handler": "~2.16.1",
"react-native-reanimated": "~3.10.1",

Affected platforms

• Android
• iOS
• [ ] Web

I am guessing it is something to do with reanimated/gesture handler.

[kwrobinski]

I have the same issue after upgrading to Expo 51

[hualongdai]

I have the same issue after upgrading to Expo 51, too

[jake-ruth]

Any luck from anyone on this issue? I am thinking of migrating to a new package for my tabs.

[jake-ruth]

I'm gonna move over to react-native-tab-view:
https://reactnavigation.org/docs/tab-view/

[adids1221]

Hi @jake-ruth,
Currently we are supporting react-native 0.71 not 0.74.
This issue might come from the react-native version and the react-native-reanimated version.
Does it reproduce on react-native 0.71 ?