Bug material-top-tabs navigation to a screen with options={{animationEnabled: false}}

[amaurycoudr]

Current behavior

navigation structure :

• StackNaviagtor
  • Material to tab Bar
    • Screen 1
    • Screen 2
  • Screen 3 (options={{animationEnabled: false}})

When I navigate from Screen2 to Screen3 (navigation.navigate(...)), it goes back to the Material to tab Bar initial route Screen 1

https://user-images.githubusercontent.com/60610067/150562012-dcf2d896-5ec6-486c-88c6-c1e2d575752b.mp4

Expected behavior

when I navigate from screen 2 to screen 3 I hope to stay on screen 3

Reproduction

https://github.com/amaurycoudr/reactNavigationBug

Platform

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

Packages

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

Environment

package	version
@react-navigation/native	6.0.6
@react-navigation/bottom-tabs	6.0.9
@react-navigation/material-top-tabs	6.0.6
@react-navigation/stack	6.0.11
react-native-safe-area-context	^3.3.2
react-native-screens	^3.10.2
react-native-gesture-handler	^1.10.3

| react-native-tab-view | ^3.1.1 | | react-native-pager-view | ^5.4.9 | | react-native | 0.66.4 | | node | v16.13.1 | | npm or yarn | 1.22.17 |

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

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

• @react-navigation/drawer
• @react-navigation/material-bottom-tabs

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-navigation/native (found: 6.0.4, latest: 6.0.6)
• @react-navigation/bottom-tabs (found: 6.0.7, latest: 6.0.9)
• @react-navigation/material-top-tabs (found: 6.0.4, latest: 6.0.6)
• @react-navigation/stack (found: 6.0.9, latest: 6.0.11)

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-navigation/drawer
• @react-navigation/material-bottom-tabs

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

[amaurycoudr]

This bug appeared when we upgraded react native from 0.64 to 0.66

[ZHUIMEN]

This bug appeared when we upgraded react native from 0.64 to 0.66 I also encountered this bug my reactnative 0.68.1 The solution is closed animationEnabled This bug #10577 https://github.com/react-navigation/react-navigation/issues/10577#issue-1230699523

"@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/material-top-tabs": "^6.2.1", "@react-navigation/native": "^6.0.10", "@react-navigation/stack": "^6.2.1", "react": "17.0.2", "react-native": "0.68.1", "react-native-device-info": "^8.7.0", "react-native-gesture-handler": "^2.4.2",

`

[lucianojsjr]

I have the same problem.

"@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/material-top-tabs": "^6.2.1", "@react-navigation/native": "^6.0.10", "@react-navigation/stack": "^6.2.1", "react-native": "0.68.1", "react-native-gesture-handler": "^2.3.2"

[webgev]

I have the same problem.

"@react-navigation/bottom-tabs": "6.0.9", "@react-navigation/material-top-tabs": "^6.2.1", "@react-navigation/native": "6.0.6", "@react-navigation/native-stack": "^6.5.0", "@react-navigation/stack": "6.0.11", "react-native": "0.66.1", "react-native-gesture-handler": "1.10.3"

[DevinWallKcl]

On Android, this callback is invoked after the screen navigation from the second tab, which results in the navigation back to the first tab.

Unfortunately, I'm not exactly sure why this is happening.

Edit: I did some more tracing and the following line seems responsible for the values passed to the function invocation in question. I'm still not sure of the root cause though. Perhaps someone else might have more insight on this one.

pager2/src/main/java/androidx/viewpager2/widget/ScrollEventAdapter.java#197

[jcsgithub]

Still having the same problem.

"@react-navigation/bottom-tabs": "^6.2.3", "@react-navigation/material-top-tabs": "^6.2.3", "@react-navigation/native": "^6.0.12", "@react-navigation/native-stack": "^6.8.0", "@react-navigation/stack": "^6.2.3", "react-native": "0.69.5", "react-native-gesture-handler": "~2.5.0"

Attaching also this issue from StackOverflow: https://stackoverflow.com/questions/72630361/react-native-tabs-navigation-bug-automatically-returns-to-the-first-bottomtab-v

[nathanklassen7]

Have the same issue using MaterialTopTabNavigator nested in a stack navigator. It does not occur when using native-stack instead of stack, but native stack causes ugly visual artefacts when popping stack screens.

"@react-navigation/stack": "^6.3.4", "react-native": "0.69.6", "@react-navigation/material-top-tabs": "^6.2.1" OR "^6.3.0", "@react-navigation/native-stack@^6.5.0"

[ashgrover]

I'm encountering the same issue. I spent hours investigating why it's happening, I'm glad I found this post. I'll be enabling animation until this is fixed.

"@react-navigation/material-top-tabs": "^6.5.3", "@react-navigation/native": "^6.1.3", "@react-navigation/stack": "^6.3.12", "react-native": "0.70.5"

[Parkash997]

Have the same issue using MaterialTopTabNavigator nested in a stack navigator.

[FraserKemp]

Also having the same issue. Using these versions:

• "@react-navigation/material-top-tabs": "^6.0.6",
• "@react-navigation/native": "^6.0.2",
• "@react-navigation/stack": "^6.0.6",
• "@react-navigation/bottom-tabs": "^6.3.2",
• "react-native": "0.68.7",

EDIT :

Tested on latest versions apart from react-native and it still seems to be an issue. Versions:

• "@react-navigation/bottom-tabs": "^6.5.8",
• "@react-navigation/material-top-tabs": "^6.6.3",
• "@react-navigation/native": "^6.1.7",
• "@react-navigation/stack": "^6.3.17",

To fix this I have also enabled animation which seemed to fix the issue in this case.

<Stack.Screen
        name={'ScreenName'}
        options={{ animationEnabled: true }}
        component={ScreenName}
/>

[calebji123]

Had the same issue. Adding the option detachPreviousScreen to the screenOptions seemed to fix it for some reason.

"@react-navigation/material-top-tabs": "^6.6.3", "@react-navigation/native": "^6.1.7", "@react-navigation/stack": "^6.3.17", "react-native": "0.72.4",

`<Stack.Navigator screenOptions={{ animationEnabled: false, detachPreviousScreen: false, }}

`