[Material Top Tabs] The tab bar UI doesn't update when navigate to a tab of the navigator from an external screen

[vicprz]

This issue is a duplicate of an issue opened on React Navigation repo, but a contributor suggests me to also post an issue on this repo as react-native-pager-view is a dependency of @react-navigation/material-top-tabs and the issue seems related to react-native-pager-view. Thanks for your help 🙂

Environment

Platform

• [X] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Packages

• [ ] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [X] @react-navigation/material-top-tabs
• [ ] @react-navigation/stack
• [ ] @react-navigation/native-stack
• [X] react-native-tab-view

✅ I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.18
@react-navigation/bottom-tabs	6.6.1
@react-navigation/material-top-tabs	6.6.14
@react-navigation/native-stack	6.11.0
react-native-safe-area-context	4.10.9
react-native-screens	3.34.0
react-native-tab-view	3.5.2
react-native-pager-view	6.4.0
react-native	0.75.2
node	20.10.0
npm	10.8.1

Description

Current behavior

Context

My application has a bottom bar, managed by @react-navigation/bottom-tabs, which manages two screens:

• A Home screen, which includes text and a button
• A Video screen, which is a @react-navigation/material-top-tabs that also manages two screens (text only):
  • In the first position, Shorts
  • In the second position, Replays

Problem

✅ If I navigate to Replays by tapping on Videos in the bottom tab and then on Replays in the material top tabs, everything works correctly.

🔴 If I navigate to Replays by clicking on the "Go to replays" Home screen button (and whose onPress is navigate(‘Videos’, {screen: ‘Replays’})), it navigates to the replays screen, but the TabBarIndicator isn't in the right position (it stays below Shorts instead of below Replays) and the bold title is Shorts and not Replays. What's more, the bug is random and occurs 1 time out of 2. Yet, if i tap on Shorts, I navigate to the Shorts screen: I think that the state of the navigation is correctly managed, and that the problem is related to the animation of the material top tab, but maybe I'm wrong 😅.

A video is linked below to help you to better visualise my problem.

I've also realised that if, when I launch my app, I first go to the Videos tab, go back to Home and click on my button, I don't get a bug. The bug only occurs when I click on the Home button without having first clicked on the Videos tab.

What I've tried

I generated a reproducible minimal example, by creating a new React Native app. The code for my minimal example is available on a Snack linked below. The bug occurs on iOS on the Snack, but it occurs with both iOS and Android when I use my own simulators. With Snack, I have something weird with Android (touching the "Go to Replays" button goes to Shorts Screens sometimes 😅)

https://github.com/user-attachments/assets/25d40d92-71e9-4d69-a9f1-5ce699becfc0

Expected behavior

When I tap the "Go to Replays" button of the Home Page, the tab bar indicator is under the "Replays" title, and this title is bold.

Reproducible Demo

https://snack.expo.dev/@victorpe/bug-top-tab?platform=ios

[troZee]

@vicprz could you check and confirm, if it is the same issue https://github.com/react-navigation/react-navigation/issues/10932 ?

[vicprz]

No, it's not the same issue 😉

In react-navigation/react-navigation#10932, there are two problems, that only occur on iOS:

• a problem of extra blank space
• the indicator of the Material Top Bar is not moving when navigating to another screen from inside the navigator.

In my issue, the problem occurs on both iOS and Android:

• When navigating to another screen from inside the Material Top Tab navigator, everything is working well. ✅
• When navigating from outside the navigator to a screen which is not the initial route of the navigator, the indicator doesn't update its position 1 time out of 2. 🔴

[troZee]

Thank you for the explanation 🙏

[vicprz]

Hi @draggie @troZee 🙂 Do you have any news on this issue?

[MrRefactor]

i will be looking into that

[vicprz]

Thanks 🥳

[EmirEsen]

After running command npx expo run:ios and take the build, the problem was fixed for me, top bar screens are shown as expected. I don't have any technical explanation since I'm a total beginner for react native and mobile dev but hope this helps.

https://github.com/user-attachments/assets/2e5ea43c-067a-467c-beb8-69394c3e6356

[vicprz]

Hi! After upgrading my app to React Native 0.77.1 and React Navigation 7, I can confirm that this bug still occurs on my end. Thanks for your help 🙂

package	version
@react-navigation/native	7.0.14
@react-navigation/bottom-tabs	7.2.0
@react-navigation/material-top-tabs	7.1.0
@react-navigation/native-stack	7.2.0
react-native-safe-area-context	5.2.0
react-native-screens	4.9.1
react-native-tab-view	4.0.5
react-native-pager-view	6.5.1
react-native	0.77.1
node	20.10.0

[khayym]

There's an issue with the TabView component where the tab bar indicator doesn't always update correctly when navigating to a screen with a non-default tab index. Specifically, when you navigate to a screen containing TabView and programmatically set the index (either before or immediately after navigation), the tab content changes correctly, but the tab bar indicator sometimes remains at index 0.

https://github.com/user-attachments/assets/547e7577-cda5-4b22-b823-95856c7c518d

[santhosh-umapathi-wikifolio]

Similar issue reported here -> https://github.com/callstack/react-native-pager-view/issues/951

[luizomg]

any update here? i'm facing the same issue