Navigation deep into a different tab's stack does not provide a back button in header. Impossible to "go back" to root of that stack.

samskinner32 commented 2 months ago

Minimal reproducible example

https://github.com/samskinner32/sam-router-test

Which package manager are you using? (Yarn is recommended)

npm

If the issue is web-related, please select the bundler (`web.bundler` in the `app.json`)

None

Summary

Hi all, hoping for help on an unexpected behavior I'm seeing on a fresh project with a seemingly simple use case.

Basically, I have two tabs: Home and Two. The tab Two is a Stack and holds both an index and a details screen. If I navigate from two/index to two/details via the router (or Link), I get a back button in the header to return to index, as you'd expect.

On home/index I have a button to directly navigate to two/details via <Link href="/two/details".... Ideally, if I press this, I would switch to tab Two, land on the details screen and have a back button in the header to return to the index screen of tab Two.

However, if I press this button without previously viewing the second tab, I land on the details screen WITHOUT a back button. And I now have no possible way to navigate to the index screen of tab Two. If I do view the second tab prior to pressing the button, it acts as I've described in my ideal behavior. (Both of these flows are demonstrated in the video)

This feels wrong to me, but I'd love any input or help to achieve the ideal behavior described. Thanks so much!

File structure is:

\-(tabs)
 | index.tsx
 | _layout.tsx
 |
  \-two
   | index.tsx
   | details.tsx
   | _layout.tsx

https://github.com/expo/expo/assets/53786564/1ad0c231-d6a7-48f2-a5e0-ac903006bce7

Environment

expo-env-info 1.2.0 environment info: System: OS: macOS 14.3 Shell: 5.9 - /bin/zsh Binaries: Node: 21.7.2 - /opt/homebrew/bin/node npm: 10.5.0 - /opt/homebrew/bin/npm Watchman: 2024.04.01.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.15.2 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5 IDEs: Android Studio: 2023.2 AI-232.10300.40.2321.11567975 Xcode: 15.4/15F31d - /usr/bin/xcodebuild npmPackages: expo: ~51.0.17 => 51.0.17 expo-router: ~3.5.17 => 3.5.17 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 react-native: 0.74.2 => 0.74.2 react-native-web: ~0.19.10 => 0.19.12 npmGlobalPackages: eas-cli: 10.0.3 Expo Workflow: managed

samskinner32 commented 2 months ago

It seems like I can get my expected behavior by setting lazy: true on each of the tabs. Is that the recommended solution here or is there another way to achieve this? Thanks!

samskinner32 commented 2 weeks ago

I wanted to bump this as I'm not thrilled with the lazy approach as a fix. Right now my app is lightweight, but in the future, it could introduce poor performance for each tab to be firing off any requests/logic needed on their index screens.

I feel like this is a bug or at least that it's a common enough use case that there should be a recommended approach. Would love to discuss! Thanks!

expo / expo