SheetHappens/app/_layout.tsx

import { useEffect } from "react";
import { Stack, router, SplashScreen } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import "../global.css";
import { Colors } from "@/constants/theme";
import { useSettings } from "@/hooks/useSettings";

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const { settings, ready } = useSettings();

  useEffect(() => {
    if (!ready) return;
    SplashScreen.hideAsync();
  }, [ready]);

  useEffect(() => {
    if (!ready) return;
    if (!settings.onboardingDone) {
      router.replace("/onboarding");
    }
  }, [ready, settings.onboardingDone]);

  return (
    <SafeAreaProvider>
      <GestureHandlerRootView style={{ flex: 1, backgroundColor: Colors.bg }}>
        <StatusBar style="light" />
        <Stack
          screenOptions={{
            headerStyle: { backgroundColor: Colors.surface },
            headerTintColor: Colors.text1,
            headerTitleStyle: { color: Colors.text1 },
            contentStyle: { backgroundColor: Colors.bg },
            animation: "slide_from_right",
          }}
        >
          <Stack.Screen name="index" options={{ title: "SheetHappens" }} />
          <Stack.Screen name="new" options={{ title: "New Incident", presentation: "modal" }} />
          <Stack.Screen name="incident/[id]" options={{ title: "Incident" }} />
          <Stack.Screen name="settings" options={{ title: "Settings" }} />
          <Stack.Screen name="onboarding" options={{ headerShown: false }} />
        </Stack>
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}