react-navigation / react-navigation/react-navigation

Pushing a screen from outside of bottom tab navigation opens the screen in previous active bottom tab.

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

Nobody has claimed this yet.

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

Description

Current behavior

My root stack

<Stack.Navigator>
      <Stack.Screen
        name="BottomTabNavigation"
        component={BottomTabNavigation}
      />
      <Stack.Screen
        name={'ScreenWithoutTab'}
        key={'ScreenWithoutTab'}
        component={ScreenWithoutTab}
      />
</Stack.Navigator>

My BottomTab

<Tab.Navigator
      initialRouteName={'Home'}>
      <Tab.Screen
        name="Home"
        key={'Home'}
        component={HomeStack}
      />
      <Tab.Screen
        name="Settings"
        key={'Settings'}
        component={SettingsStack}
      />
</Tab.Navigator>

HomeStack

<Stack.Navigator
      initialRouteName={'HomeScreen'}>
      <Stack.Screen name="HomeScreen" key={'HomeScreen'} component={Home} />
      <Stack.Screen name="TestScreen" key={'TestScreen'} component={Test} />
</Stack.Navigator>

SettingsStack

<Stack.Navigator
      initialRouteName={'SettingsScreen'}>
      <Stack.Screen name="SettingsScreen" key={'SettingsScreen'} component={Settings} />
      <Stack.Screen name="TestScreen" key={'TestScreen'} component={Test} />
</Stack.Navigator>

Problematic Scenario

  1. I open the app and the bottom tab navigation appears with initial tab HOME
  2. I switch to Settings Tab
  3. I switch to Home Tab
  4. I press on a button on Home Screen to open the screen ScreenWithoutTab
  5. In ScreenWithoutTab screen, i press a button which calls following functions
navigation.push('TestScreen')
navigation.goBack()
  1. The screen opens at Settings Tab. But my latest active tab was Home as you can see at Step 3.

If i dont do the Step 2., everything works as expected the TestScreen opens at Home tab

Expected behavior

If I open a screen from the stack which is above bottom tab navigation and when a screen (which is nested in bottom tab) is pushed from that screen, the current tab should try to open the screen not previous selected tab.

Reproduction

Steps to reproduce described above.

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
  • [] I've removed the packages that I don't use
package version
@react-navigation/native 6.0.8
@react-navigation/stack 6.1.1

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 nested BottomTabNavigation, HomeStack, SettingsStack, and root Stack.Navigator setup described in the issue, then reproduce the sequence by switching Settings to Home before calling navigation.push('TestScreen') and navigation.goBack(). Done means TestScreen opens in the latest active Home tab rather than the previously selected Settings tab on Android and iOS.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, react-native
Domain
mobile-dev
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.