How do I reset a nested Stack to its root screen on tab reselect (and handle TV back button)?

[mtshv]

Hello! I’m using react-native-bottom-tabs with React Navigation v7 in an Expo Router v4 project. I have a bottom-tab setup where one of my tabs has a nested Stack navigator, and it includes dynamic sub-routes. My goals are:

1. Reset tab to root screen on reselect
   • When I open a nested screen (e.g., /teams/[teamId]/players/[playerId]), then switch to another tab, and later switch back, I see the same deeply nested screen. I want to always return to the main tab screen (like /teams/index.tsx) on reselect.
2. Handle TV “back/menu” button
   • On Apple TV or pressing the remote’s back/menu button opens the menu or closes/minimizes the app instead of popping the current route in the nested stack. I’d like it to navigate one level up (like mobile back button)

Native.Tabs.Example.mp4

Minimal Example
I created a small reproducible demo with stub data and minimal styling. Here’s the folder layout:

app
├── (app)                   // bottom-tab group
│   ├── _layout.tsx         // returns <Tabs>
│   ├── teams
│   │   ├── _layout.tsx     // returns <Stack>
│   │   ├── index.tsx       // main teams list
│   │   └── [teamId]
│   │       ├── index.tsx   // single team screen
│   │       └── players
│   │           └── [playerId]
│   │               └── index.tsx // nested player details

• The “Teams” tab can drill down multiple levels, and that part mostly works.
• Problem: When I re-select the Teams tab after being on a nested screen, it doesn’t pop back to /teams/index.tsx. Instead, it resumes the nested route.
• Problem: On TV platforms, the remote’s back/menu button closes the app or opens the menu if I’m on a nested screen.

Here’s the a link for a reproducible repo: https://github.com/mtshv/MyTVProject

Question

• Is there a recommended or built-in solution in react-native-bottom-tabs (or React Navigation v7) to “pop to top” on tab reselect.
• How can I properly intercept the TV remote’s back/menu so it calls navigation.goBack() (or router.back()) instead of minimizing the app?

Any guidance or examples would be greatly appreciated! 🙏

[okwasniewski]

Hey!

This is because tvOS doesn't have proper tab interception implemented:

react-native-bottom-tabs/packages/react-native-bottom-tabs/ios/TabViewImpl.swift

Line 32 in 93afe39

#if !os(tvOS) && !os(macOS) && !os(visionOS)

Probably there is a way to implement it so that you can intercept clicks and pop to root but for now, it's missing on that platform. Let's keep this open until it's added.