Navegadores Aninhados

app/
├── _layout.tsx              # Stack Raiz
├── index.tsx
└── (app)/
    ├── _layout.tsx          # Abas (ou NativeTabs)
    └── (tabs)/
        ├── _layout.tsx      # Barra de abas
        ├── home/
        │   ├── _layout.tsx  # Stack por aba
        │   ├── index.tsx    # /home
        │   └── feed.tsx     # /home/feed
        └── settings/
            ├── _layout.tsx
            └── index.tsx

// app/_layout.tsx - a stack raiz envolve o grupo de abas
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: "Nova postagem" }}
      />
    </Stack>
  );
}

// app/(app)/(tabs)/_layout.tsx - as abas possuem quatro 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 uma aba
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 - lands on thread inside inbox tab, back returns to inbox list
// myapp://inbox/t2
import { router } from "expo-router";
router.push("/inbox/t2");

Usuário em /inbox/t2 pressiona voltar no Android:
 
1. A Stack do Inbox desempilha t2 → /inbox (lista)
2. Usuário pressiona voltar novamente → permanece na aba Inbox (a raiz da aba não tem para onde desempilhar)
3. Usuário muda para a aba Home → o estado da stack do Inbox é preservado (padrão)
4. Usuário abre o modal /compose → voltar fecha o modal, as abas permanecem por baixo

// 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>
  );
}