tabBarIndicator does not update when navigating to another screen

[k1ng-slayer]

Environment

react: 18.3.1
react-native: 0.76.5
react-navigation/native: 7.0.13
react-navigation/material-top-tabs: 7.1.0
react-native-pager-view: 6.6.1

Description

This issue is a copy of react-navigation/react-navigation#12339, as I was advised to post it here because it is related to react-native-pager-view, which is a dependency of Material Top Tabs.

Reproducible Demo

https://snack.expo.dev/@k1ngslayer/navigation-app

react-navigation.mp4

[nielsq]

I have the same Issue here aswell

[toutiii]

same here

[aeltersxops]

I have the same issue on Android.

[Kamill90]

I will take a look

[troZee]

@k1ng-slayer
Thank you for reporting that issue. Does this bug exist on the new or old arch?

[JameDodgers]

New arch

[prince-xebia]

Is this bug fixed now? I need the fix badly as I need to upgrade my existing project into the new react-native version 0.76.6, but due to this bug, I am blocked.

[nielsq]

@Kamill90 any updates?

[teracityyazilim]

same here 🙋‍♀️🙋‍♂️

"react": "18.3.1",
"react-native": "0.77.0",
"@react-navigation/native": "^7.0.14",
"@react-navigation/stack": "^7.1.1",
"@react-navigation/material-top-tabs": "^7.1.0",
"react-native-pager-view": "^6.7.0",
"react-native-screens": "^4.6.0",
"react-native-tab-view": "^4.0.5"

There is no problem with the scrolling function, the indicator is not positioned correctly when clicking on the tabs.(Especially if lazy is active) It's one of the basic functions and it definitely creates a very bad user experience. We would be grateful if you are interested.

Have a nice day.

[georgekal2798]

This happens to me, too.

"react-native": "0.77.0",
"@react-navigation/drawer": "^6.7.2",
"@react-navigation/material-top-tabs": "6.2.1",
"@react-navigation/native": "^6.1.18",
"@react-navigation/stack": "^6.4.1",
"react-native-pager-view": "6.5.1",
"react-native-screens": "^3.34.0",

This happened right after upgrading react native from 0.75 to 0.77.

I have also noticed a wired animation when transitioning from one tab to another. It is as if the tab is tapped twice.

Record_2025-03-05-17-51-34.2.mp4

[hari-mohan-choudhary]

+1

[santhosh-umapathi-wikifolio]

+1

    "react-native": "0.78.1",
    "react-native-pager-view": "^6.7.0",
    "@react-navigation/bottom-tabs": "^7.3.3",
    "@react-navigation/material-top-tabs": "^7.2.3",
    "@react-navigation/native": "^7.0.19",
    "@react-navigation/native-stack": "^7.3.3",

Screen.Recording.2025-04-10.at.9.44.48.AM.mov