react-navigation / react-navigation/react-navigation

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

Open
#10,282 14 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug package:stack platform:android repro provided
Dominant language
TypeScript
Stars
24.5k
Forks
5.1k
Avg merge
1d 5h
Merged PRs (30d)
18

Description

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
  • Android
  • iOS
  • Web
  • Windows
  • MacOS
Packages
  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs
  • @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 |

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction and reproduce the Android navigation from Screen 2 to Screen 3 using the listed React Navigation packages. Investigate the interaction between the material-top-tabs navigator and the stack screen's animationEnabled option; done means navigation reaches Screen 3 without resetting the tab navigator to Screen 1.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.