callstack / callstack/react-native-pager-view
[Material Top Tabs] The tab bar UI doesn't update when navigate to a tab of the navigator from an external screen
- Dominant language
- TypeScript
- Stars
- 3.4k
- Forks
- 476
- Avg merge
- 10d 21h
- Merged PRs (30d)
- 2
Description
This issue is [a duplicate of an issue opened on React Navigation repo](https://github.com/react-navigation/react-navigation/issues/12119), 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](https://snack.expo.dev/@victorpe/bug-top-tab?platform=ios)
Contributor guide
Assessment
This issue has not been assessed yet.