react-navigation / react-navigation/react-navigation
Pushing a screen from outside of bottom tab navigation opens the screen in previous active bottom tab.
Nobody has claimed this yet.
- 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
- I open the app and the bottom tab navigation appears with initial tab HOME
- I switch to Settings Tab
- I switch to Home Tab
- I press on a button on Home Screen to open the screen ScreenWithoutTab
- In ScreenWithoutTab screen, i press a button which calls following functions
navigation.push('TestScreen')
navigation.goBack()
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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