Closed dylancom closed 1 year ago
yarn
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
redirect
<Screen />
It seems mandatory to have a "(tabs)/index" file?
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.
(tabs)/index.tsx
(tabs)/home.tsx
name="index"
name="home"
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
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" ...
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-tabIt 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:
New structure: