Navegación por Stack

npx expo install expo-router

app/
├── _layout.tsx           # Stack raíz
├── index.tsx
├── settings.tsx
└── orders/
    ├── _layout.tsx       # Stack anidado para /orders/*
    ├── index.tsx
    └── [id].tsx

// app/_layout.tsx
import { Stack } from "expo-router";
 
export default function RootLayout() {
  return (
    <Stack
      screenOptions={{
        headerShown: true,
        animation: "slide_from_right",
      }}
    >
      <Stack.Screen name="index" options={{ title: "Inicio" }} />
      <Stack.Screen name="settings" options={{ title: "Configuración" }} />
    </Stack>
  );
}

// app/orders/_layout.tsx
import { Stack } from "expo-router";
 
export default function OrdersLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "Pedidos" }} />
      <Stack.Screen name="[id]" options={{ title: "Pedido" }} />
    </Stack>
  );
}

// app/_layout.tsx
import { Stack } from "expo-router";
import { ThemeProvider } from "@/shared/theme";
 
export default function RootLayout() {
  return (
    <ThemeProvider>
      <Stack>
        <Stack.Screen name="index" options={{ headerShown: false }} />
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen
          name="settings"
          options={{
            title: "Configuración",
            presentation: "card",
          }}
        />
      </Stack>
    </ThemeProvider>
  );
}

// app/settings.tsx
import { useNavigation } from "expo-router";
import { useEffect } from "react";
import { ActivityIndicator, Text, View } from "react-native";
 
export default function SettingsScreen() {
  const navigation = useNavigation();
 
  useEffect(() => {
    navigation.setOptions({ title: "Configuración de Cuenta" });
  }, [navigation]);
 
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>Contenido de configuración</Text>
    </View>
  );
}

// app/orders/[id].tsx
import { useLocalSearchParams, Stack } from "expo-router";
import { useEffect, useState } from "react";
import { ActivityIndicator, Text, View } from "react-native";
 
export default function OrderDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const [title, setTitle] = useState(`Pedido #${id}`);
 
  useEffect(() => {
    // Simular fetch - luego actualizar encabezado a través del hijo del layout
    const timer = setTimeout(() => setTitle(`Pedido ${id} - Enviado`), 400);
    return () => clearTimeout(timer);
  }, [id]);
 
  return (
    <>
      <Stack.Screen options={{ title }} />
      <View style={{ flex: 1, padding: 16 }}>
        <Text>Detalle para pedido {id}</Text>
      </View>
    </>
  );
}

// Navegar entre pantallas de stack
import { Link, router } from "expo-router";
import { Pressable, Text, View } from "react-native";
 
export function HomeActions() {
  return (
    <View style={{ gap: 12 }}>
      <Link href="/settings">Configuración (declarativa)</Link>
      <Pressable onPress={() => router.push("/orders/42")}>
        <Text>Pedido 42 (imperativa)</Text>
      </Pressable>
    </View>
  );
}

app/orders/_layout.tsx  →  <Stack> envuelve esta carpeta
app/orders/index.tsx    →  ruta inicial (fondo del stack)
app/orders/[id].tsx     →  se impulsa cuando se navega a /orders/:id
app/orders/new.tsx      →  se impulsa cuando se navega a /orders/new

// Opciones estáticas por ruta (co-ubicadas)
export const options = {
  title: "Perfil",
  headerBackTitle: "Atrás",
};

<Stack.Screen
  name="compose"
  options={{
    presentation: "modal",        // Modal de tarjeta en iOS; pantalla completa en Android
    gestureEnabled: true,
    headerShown: true,
  }}
/>

(tabs)/_layout.tsx     → Tabs (barra de tabs siempre visible)
(tabs)/orders/_layout  → Stack (push dentro de la tab Orders solo)