Stack for each Tab causes a redirect to non-existent screen

[dylancom]

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

yarn

Summary

After moving from just tabs to a Stack for each Tab the initial route redirects to a non-existent screen. (showing the warning: The redirect prop on <Screen /> is deprecated.) Trying to replicate: https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab

It seems mandatory to have a "(tabs)/index" file?

Minimal reproducible example

npx create-expo-app@latest --template tabs@49

Example 1 (home instead of index file): Change (tabs)/index.tsx to (tabs)/home.tsx Update (tabs)/_layout.tsx first route: name="index" --> name="home". Now the initial route loads the [...missing].tsx screen.

Example 2 (Stack per each Tab):

Original structure:

(tabs)/index.tsx
(tabs)/settings.tsx
(tabs)/_layout.tsx

New structure:

(tabs)/home/index.tsx
(tabs)/home/_layout.tsx (defining the nested stack)
(tabs)/settings/index.tsx
(tabs)/settings/_layout.tsx (defining the nested stack)
(tabs)/_layout.tsx

[dylancom]

Solved it by adding a hidden index tab that redirects to the next sibling:

<Tabs.Screen name="index" options={{ href: null }} redirect />
<Tabs.Screen name="home" ...