Rutas Modal y de Presentación

app/
├── _layout.tsx
├── index.tsx
└── (app)/
    ├── _layout.tsx
    └── compose.tsx          # /compose - ruta modal

// 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)" options={{ headerShown: false }} />
      <Stack.Screen
        name="compose"
        options={{
          presentation: "modal",
          title: "Nuevo mensaje",
        }}
      />
    </Stack>
  );
}

// app/(app)/compose.tsx
import { router } from "expo-router";
import { Button, TextInput, View } from "react-native";
 
export default function ComposeModal() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <TextInput placeholder="Escribe algo…" style={{ flex: 1 }} />
      <Button title="Cerrar" onPress={() => router.back()} />
    </View>
  );
}

// Abre desde cualquier pantalla
import { Link, router } from "expo-router";
 
<Link href="/compose" asChild>
  <Button title="Redactar" />
</Link>
 
router.push("/compose");

// 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="sign-in"
          options={{
            presentation: "modal",
            title: "Inicia sesión",
          }}
        />
      </Stack>
    </SessionProvider>
  );
}

// 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)" options={{ headerShown: false }} />
      <Stack.Screen
        name="filters"
        options={{
          presentation: "formSheet",
          sheetAllowedDetents: [0.35, 0.6, 1],
          sheetInitialDetentIndex: 1,
          sheetGrabberVisible: true,
          sheetCornerRadius: 20,
          sheetLargestUndimmedDetentIndex: 0,
        }}
      />
      <Stack.Screen
        name="share"
        options={{
          presentation: "modal",
        }}
      />
    </Stack>
  );
}

// app/(app)/filters.tsx - contenido de form sheet
import { router } from "expo-router";
import { Button, ScrollView, Text, View } from "react-native";
 
export default function FiltersSheet() {
  return (
    <View style={{ flex: 1, backgroundColor: "white" }}>
      {/* Renderiza título/acciones en contenido - los encabezados de pila nativos no están soportados en form sheets de Android */}
      <Text style={{ fontSize: 18, fontWeight: "600", padding: 16 }}>Filtros</Text>
      <ScrollView contentContainerStyle={{ padding: 16, gap: 12 }}>
        <Text>Estado: Abierto</Text>
        <Text>Ordenar: Más reciente</Text>
      </ScrollView>
      <Button title="Aplicar" onPress={() => router.back()} />
    </View>
  );
}

// app/sign-in.tsx - el cierre respeta la plataforma
import { Link, router } from "expo-router";
import { Platform, Pressable, Text, View } from "react-native";
import { StatusBar } from "expo-status-bar";
 
export default function SignInModal() {
  const canDismiss = router.canGoBack();
 
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
      <Text>Inicia sesión para continuar</Text>
      {canDismiss && (
        <Link href="../" asChild>
          <Pressable style={{ marginTop: 24 }}>
            <Text>Descartar</Text>
          </Pressable>
        </Link>
      )}
    </View>
  );
}

// Android: el botón atrás de hardware llama a router.back() automáticamente en rutas modales.
// Manejador explícito opcional al interceptar atrás para formularios sin guardar:
import { useEffect } from "react";
import { BackHandler } from "react-native";
import { router } from "expo-router";
 
export function useConfirmBackOnDirty(isDirty: boolean) {
  useEffect(() => {
    if (!isDirty) return;
    const sub = BackHandler.addEventListener("hardwareBackPress", () => {
      // Mostrar diálogo de descarte; devolver true para bloquear atrás predeterminado
      router.back();
      return true;
    });
    return () => sub.remove();
  }, [isDirty]);
}

options={{
  presentation: "formSheet",
  sheetAllowedDetents: [0.25, 0.5, 1],       // fracciones de altura de pantalla
  sheetInitialDetentIndex: 0,                 // o 'last'
  sheetGrabberVisible: true,                  // grabber de iOS
  sheetCornerRadius: 24,
  sheetLargestUndimmedDetentIndex: 1,         // oscurecimiento por debajo de este detente
}}

options={{
  presentation: "formSheet",
  sheetAllowedDetents: [0.5, 1],
  unstable_sheetFooter: () => (
    <View style={{ padding: 16 }}>
      <Button title="Confirmar" onPress={() => router.back()} />
    </View>
  ),
}}