search

callstack / react-native-pager-view

React Native wrapper for the Android ViewPager and iOS UIPageViewController.
MIT License
2.75k stars 422 forks source link

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

Open vicprz opened 2 months ago

vicprz commented 2 months ago

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

Packages

✅ 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:

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 commented 2 months ago

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

vicprz commented 2 months ago

No, it's not the same issue 😉

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

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

troZee commented 2 months ago

Thank you for the explanation 🙏

vicprz commented 4 days ago

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

MrRefactor commented 4 days ago

i will be looking into that

vicprz commented 3 days ago

Thanks 🥳