I recently started using Expo Router, and I’m struggling to properly nest Stack Navigation inside a Tab Navigator.

In React Navigation, I used a simple structure like this:

const TabNavigator = createBottomTabNavigator();
const StackNavigator = createStackNavigator();

function HomeStack() {
  return (
    <StackNavigator.Navigator>
      <StackNavigator.Screen name="Home" component={HomeScreen} />
      <StackNavigator.Screen name="Search" component={SearchScreen} />
    </StackNavigator.Navigator>
  );
}

function AppTabs() {
  return (
    <TabNavigator.Navigator>
      <TabNavigator.Screen name="Home" component={HomeStack} />
      <TabNavigator.Screen name="Settings" component={SettingsScreen} />
    </TabNavigator.Navigator>
  );
}

Confusion in Expo Router I am trying to achieve the same nested Stack inside Tabs structure in Expo Router. Here’s what I have done so far:

/app
 ├── _layout.tsx       # ✅ Main Stack (Wraps Everything)
 ├── /(tabs)           # ✅ Tab Navigator
 │    ├── _layout.tsx  # ✅ Tab Navigation
 │    ├── home         # ✅ Home Tab (With Stack)
 │    │    ├── _layout.tsx  # ✅ Stack for Home
 │    │    ├── index.tsx    # ✅ Home Screen
 │    │    ├── search.tsx   # ✅ Search Screen (Inside Home Stack)
 │    ├── settings      # ✅ Settings Tab (With Stack)
 │    │    ├── _layout.tsx  # ✅ Stack for Settings
 │    │    ├── index.tsx    # ✅ Settings Screen

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";

export default function TabsLayout() {
  return (
    <Tabs screenOptions={{ headerShown: false }}>
      <Tabs.Screen
        name="home"
        options={{
          title: "Home",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home-outline" color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: "Settings",
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="settings-outline" color={color} size={size} />
          ),
        }}
      />
    </Tabs>
  );
}

Issues I'm Facing The structure feels unstructured and hard to follow, unlike React Navigation.

When navigating between screens, I sometimes get unmatched route errors. Expo Router automatically detects all files as routes, making it confusing to anize stacks properly.

Is there a better way to structure Stack navigation inside Tabs in Expo Router?