Navegadores Anidados

app/
├── _layout.tsx              # Root Stack
├── index.tsx
└── (app)/
    ├── _layout.tsx          # Tabs (o NativeTabs)
    └── (tabs)/
        ├── _layout.tsx      # Tab bar
        ├── home/
        │   ├── _layout.tsx  # Stack por tab
        │   ├── index.tsx    # /home
        │   └── feed.tsx     # /home/feed
        └── settings/
            ├── _layout.tsx
            └── index.tsx

// app/_layout.tsx - root stack envuelve el tab group
import { Stack } from "expo-router";
 
export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="(app)" />
      <Stack.Screen
        name="compose"
        options={{ presentation: "modal", title: "New post" }}
      />
    </Stack>
  );
}

// app/(app)/(tabs)/_layout.tsx - tabs poseen cuatro stacks
import { Tabs } from "expo-router";
 
export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: "Home" }} />
      <Tabs.Screen name="search" options={{ title: "Search" }} />
      <Tabs.Screen name="inbox" options={{ title: "Inbox" }} />
      <Tabs.Screen name="profile" options={{ title: "Profile" }} />
    </Tabs>
  );
}

// app/(app)/(tabs)/home/_layout.tsx - stack dentro de una tab
import { Stack } from "expo-router";
 
export default function HomeStackLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "Home" }} />
      <Stack.Screen name="feed" options={{ title: "Feed" }} />
      <Stack.Screen name="[id]" options={{ title: "Post" }} />
    </Stack>
  );
}

// app/_layout.tsx
import { Stack } from "expo-router";
import { SessionProvider } from "@/features/auth";
 
export default function RootLayout() {
  return (
    <SessionProvider>
      <Stack>
        <Stack.Screen name="(app)" options={{ headerShown: false }} />
        <Stack.Screen name="(auth)" options={{ headerShown: false }} />
      </Stack>
    </SessionProvider>
  );
}

// app/(app)/(tabs)/_layout.tsx
import { Tabs } from "expo-router";
 
export default function TabsLayout() {
  return (
    <Tabs screenOptions={{ headerShown: false }}>
      <Tabs.Screen name="home" options={{ tabBarLabel: "Home" }} />
      <Tabs.Screen name="inbox" options={{ tabBarLabel: "Inbox" }} />
    </Tabs>
  );
}

// app/(app)/(tabs)/inbox/_layout.tsx
import { Stack } from "expo-router";
 
export default function InboxStackLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "Inbox" }} />
      <Stack.Screen name="[threadId]" options={{ title: "Thread" }} />
    </Stack>
  );
}

// app/(app)/(tabs)/inbox/index.tsx
import { Link, router } from "expo-router";
import { FlatList, Pressable, Text } from "react-native";
 
const threads = [{ id: "t1", subject: "Hello" }, { id: "t2", subject: "Ship it" }];
 
export default function InboxListScreen() {
  return (
    <FlatList
      data={threads}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Pressable onPress={() => router.push(`/inbox/${item.id}`)}>
          <Text style={{ padding: 16 }}>{item.subject}</Text>
        </Pressable>
      )}
    />
  );
}

// app/(app)/(tabs)/inbox/[threadId].tsx
import { Link, useLocalSearchParams, useRouter } from "expo-router";
import { Button, Text, View } from "react-native";
 
export default function ThreadScreen() {
  const { threadId } = useLocalSearchParams<{ threadId: string }>();
  const router = useRouter();
 
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>Thread: {threadId}</Text>
      <Button title="Back" onPress={() => router.back()} />
      <Link href="/compose" asChild>
        <Button title="Reply (modal)" />
      </Link>
    </View>
  );
}

// Deep link - aterrizaje en thread dentro de inbox tab, atrás regresa a la lista de inbox
// myapp://inbox/t2
import { router } from "expo-router";
router.push("/inbox/t2");

Usuario en /inbox/t2 presiona atrás en Android:
 
1. Inbox Stack saca t2 - /inbox (lista)
2. Usuario presiona atrás de nuevo - se queda en Inbox tab (raíz de tab no tiene nada que sacar)
3. Usuario cambia a Home tab - estado de Inbox stack se preserva (por defecto)
4. Usuario abre modal /compose - atrás descarta modal, tabs permanecen debajo

// app/(app)/(native-tabs)/inbox/_layout.tsx
import { Stack } from "expo-router";
 
export default function InboxStack() {
  return <Stack />;
}

// app/(app)/_layout.tsx
export const unstable_settings = {
  anchor: "(tabs)",
};
 
import { Stack } from "expo-router";
 
export default function AppLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" />
      <Stack.Screen name="filters" options={{ presentation: "modal" }} />
    </Stack>
  );
}