Rotas de Modal & Apresentação

app/
├── _layout.tsx
├── index.tsx
└── (app)/
    ├── _layout.tsx
    └── compose.tsx          # /compose - rota 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: "Nova mensagem",
        }}
      />
    </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="Escreva algo…" style={{ flex: 1 }} />
      <Button title="Fechar" onPress={() => router.back()} />
    </View>
  );
}

// Abrir de qualquer tela
import { Link, router } from "expo-router";
 
<Link href="/compose" asChild>
  <Button title="Compor" />
</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: "Entrar",
          }}
        />
      </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 - conteúdo da folha de formulário
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/ações no conteúdo - cabeçalhos nativos não são suportados em folhas de formulário Android */}
      <Text style={{ fontSize: 18, fontWeight: "600", padding: 16 }}>Filtros</Text>
      <ScrollView contentContainerStyle={{ padding: 16, gap: 12 }}>
        <Text>Status: Aberto</Text>
        <Text>Ordenar por: Mais recentes</Text>
      </ScrollView>
      <Button title="Aplicar" onPress={() => router.back()} />
    </View>
  );
}

// app/sign-in.tsx - o descarte respeita a 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>Entre para continuar</Text>
      {canDismiss && (
        <Link href="../" asChild>
          <Pressable style={{ marginTop: 24 }}>
            <Text>Fechar</Text>
          </Pressable>
        </Link>
      )}
    </View>
  );
}

// Android: o botão 'back' de hardware chama router.back() automaticamente em rotas modais.
// Manipulador de 'back' explícito opcional ao interceptar 'back' para formulários não salvos:
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", () => {
      // Mostra diálogo de descarte; retorna true para bloquear o 'back' padrão
      router.back();
      return true;
    });
    return () => sub.remove();
  }, [isDirty]);
}

options={{
  presentation: "formSheet",
  sheetAllowedDetents: [0.25, 0.5, 1],       // frações da altura da tela
  sheetInitialDetentIndex: 0,                 // ou 'last'
  sheetGrabberVisible: true,                  // grabber do iOS
  sheetCornerRadius: 24,
  sheetLargestUndimmedDetentIndex: 1,         // escurecimento abaixo deste detent
}}

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