react-native-pager-view tabBarIndicator does not update when navigating to another screen

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 https://github.com/react-navigation/react-navigation/issues/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

https://github.com/user-attachments/assets/f3dac012-72af-4ee5-bea8-0b8f74ad0598

Dec 19 '24 10:12 k1ng-slayer

I have the same Issue here aswell

Dec 19 '24 10:12 nielsq

same here

Dec 19 '24 15:12 toutiii

I have the same issue on Android.

Jan 09 '25 18:01 aeltersxops

I will take a look

Jan 16 '25 12:01 Kamill90

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

Jan 16 '25 12:01 troZee

New arch

Jan 16 '25 15:01 JameDodgers

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.

Jan 18 '25 15:01 prince-xebia

@Kamill90 any updates?

Jan 29 '25 14:01 nielsq

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.

Feb 11 '25 16:02 teracityyazilim

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.

https://github.com/user-attachments/assets/a1c51a18-bdfd-4977-9ef4-480ccd8e01fd

Mar 05 '25 15:03 georgekal2798

+1

Mar 25 '25 07:03 hari-mohan-choudhary

+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",

https://github.com/user-attachments/assets/cf0b59c8-1639-49b0-ae52-0a9e61a43bff