Problem nesting stack navigators inside tab navigator

[andreweinhorn]

I would like to illustrate a problem I have encountered nesting stack navigators inside tab navigators with expo router.

The above is what I believe to be a very common app layout. It is a stack navigator that contains some children (in this case, a modal and a tab navigator). The tab navigator in turn contains two other stack navigators, in this example "Cupboards" and "Shelves".

When I navigate into the actual cupboards and shelves screens, I very soon cannot obtain a back button and get stuck at the deepest level of the stacks. See video below. I am fairly certain I have followed all the correct setup protocol. My code is here. I used the suggested setup of npx create-expo-app@latest --template tabs@49 and modified it to created the above.

Nested.Navigators.mp4

Is this the expected behaviour of expo router? I think this one reason why people are asking for a reset function (see discussion here). I am considering moving back to react navigation, but am praying I am wrong about something here as I really like file-based navigation.

[GibbyBox]

The underlying component has an issue logged documenting this if you wish to watch it.

software-mansion/react-native-screens#1460
The workaround I use is to force render a back button on these screens with the headerLeft option and then with a negative left margin to align it where it would normally be.

[mazshakibaii]

I can't believe this still hasn't been fixed! Looks like there is something cooking here: expo/expo#28644

In the meantime, I've found a short-term fix:

You can add a listener to your tabs which will force it to render the root tab, preventing users being locked inside a nested screen without being able to return.

      <Tabs.Screen
        name="trends"
        options={{
          tabBarIcon: ({ color }) => <BarChart color={color} />,
          href: null,
        }}
        listeners={{
          tabPress: (e) => {
            e.preventDefault()
            router.push("/main/trends")
          },
        }}
      />

Hope this helps some people, but a more stable fix would be much appreciated. This is a killer bug for so many apps.