Navigating from a nested material-top-tabs to a material-bottom-tabs doesn't work

[GaylordP]

Hello and thank you for your library :)

Let me copy/paste a problem posted by @andrei-datcu on react-navigation, because I have the same problem

Description

Material bottom tabs with two routes: TopTabs: Material Top tabs with two routes Screen 1 & Screen 2 Screen3 (default)

App starts with Screen2. Navigate to TopTabs. Navigate to Screen 2. Navigate to Screen 3: You'll get a flicker and a navigation back to TopTabs(Screen1)

Screenshots

https://user-images.githubusercontent.com/10829674/182887916-04ef92b0-396c-4911-a9db-9ae0091448de.mp4

Expected behavior

The navigation should work and you should not get navigated back.

Reproduction

https://snack.expo.dev/D35XYxBvr

Platform

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

Package versions

package	version
react-native	^0.69.1
@react-navigation/native	^6.0.6
@react-navigation/native-stack	^6.7.0
react-native-screens	^3.10.2
react-native-safe-area-context	^4.3.1
react-native-gesture-handler	^2.3.2
react-native-reanimated	^2.3.1
react-native-paper	^4.12.2
react-native-vector-icons	^9.1.0

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.69.1, latest: 0.69.3)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.69.1, latest: 0.69.3)
• react-native-paper (found: 4.12.2, latest: 4.12.4)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.69.1, latest: 0.69.3)
• react-native-paper (found: 4.12.2, latest: 4.12.4)
• react-native-vector-icons (found: 9.1.0, latest: 9.2.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[GaylordP]

Hello again :) Sorry for my english, I'm french :)

I spent the night there but without finding a solution. I see that react-native-tab-view : PagerViewAdapter.tsx#L142 is triggered when we page from one bottom tab to another:

    onPageSelected={(e) => {
      const index = e.nativeEvent.position;
      indexRef.current = index;
      onIndexChange(index);
    }}

onPageSelected it's a event from react-native-pager-view : PagerView.tsx#L152

This situation does not occur with Bottom-Tabs, only with Material-Bottom-Tabs.

Simple example :

For a simple example, I have integrated a very simple PagerView in Bottom-Tabs and Material-Bottom-Tabs.

Material Bottom Tabs always resets PagerView, and I think this is the problem with Material Top Tabs :

With Bottom Tabs :

https://snack.expo.dev/MEekEpszt

https://user-images.githubusercontent.com/10829674/183068439-655d985a-f516-498d-997d-9ce3a1521a16.mov

With Bottom Material Tabs (and react-native-paper) :

https://snack.expo.dev/moWi4V4X6

https://user-images.githubusercontent.com/10829674/183068533-dd12eb4c-5bbd-4739-b93f-bae98e53f1a2.mov

Maybe it's related to detachinactivescreens but I didn't find any concrete influence in my examples. If someone more experienced than me could take a look ... :)

[Boscher-audrey]

Hello, same issue here :/ Using @react-navigation/bottom-tabs instead of @react-navigation/material-bottom-tabs is not an option for me, so would be nice to have a solution !

[JacobDel]

@Boscher-audrey There is a solution on this stackoverflow post: https://stackoverflow.com/a/73348535/9611924

[Maclay74]

@JacobDel this solution doesn't work, we tried.

[lukewalczak]

Fix will be released in 5.0.0-rc.5