app/
├── _layout.tsx          # Root layout
├── index.tsx            # Home screen (/)
├── (tabs)/              # Tab group
│   ├── _layout.tsx      # Tab layout
│   ├── index.tsx        # First tab
│   └── settings.tsx     # /settings
├── [id].tsx             # Dynamic route (/123)
├── details/
│   └── index.tsx        # /details
└── modal.tsx            # Modal screen

// app/_layout.tsx
import { Stack } from "expo-router/stack";

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

// app/(tabs)/_layout.tsx
import { Tabs } from "expo-router";
import { Home, Settings } from "@tamagui/lucide-icons";

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ color }) => <Home color={color} />,
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: "Settings",
          tabBarIcon: ({ color }) => <Settings color={color} />,
        }}
      />
    </Tabs>
  );
}

import { useRouter } from "expo-router";

const router = useRouter();

// Push new screen
router.push("/details");

// With params
router.push({
  pathname: "/details/[id]",
  params: { id: "123" },
});

// Replace current screen
router.replace("/home");

// Go back
router.back();

// Go to root
router.dismissAll();

import { Link } from "expo-router";

<Link href="/details">Go to Details</Link>

<Link 
  href={{
    pathname: "/details/[id]",
    params: { id: "123" },
  }}
  asChild
>
  <Button>View Details</Button>
</Link>

// app/details/[id].tsx
import { useLocalSearchParams } from "expo-router";

export default function Details() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <Text>Item: {id}</Text>;
}

// Navigate with params
router.push({
  pathname: "/search",
  params: { query: "test", page: "1" },
});

// Read params
const { query, page } = useLocalSearchParams();

export default function Screen() {
  return <View />;
}

// Export options
export const unstable_settings = {
  initialRouteName: "index",
};

import { Stack } from "expo-router";

export default function Screen() {
  return (
    <>
      <Stack.Screen 
        options={{ 
          title: "Custom Title",
          headerRight: () => <Button />,
        }} 
      />
      <View />
    </>
  );
}

// app/_layout.tsx
<Stack.Screen
  name="modal"
  options={{
    presentation: "modal",
    headerShown: false,
  }}
/>

// Navigate to modal
router.push("/modal");

// Close modal
router.back();
// or
router.dismiss();

// app/_layout.tsx
import { Redirect } from "expo-router";

export default function Layout() {
  const { isLoggedIn } = useAuth();
  
  if (!isLoggedIn) {
    return <Redirect href="/login" />;
  }
  
  return <Stack />;
}

import { useFocusEffect } from "expo-router";
import { useCallback } from "react";

useFocusEffect(
  useCallback(() => {
    // Runs when screen is focused
    loadData();
    
    return () => {
      // Cleanup when unfocused
    };
  }, [])
);