fix: prevent black screen on launch by holding splash until settings ready

Add SplashScreen.preventAutoHideAsync() at module level and hideAsync()
once SecureStore reads complete. Add splash backgroundColor to app.json
to match app theme. Wrap layout in SafeAreaProvider.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.json

@@ -6,6 +6,9 @@
     "orientation": "portrait",
     "userInterfaceStyle": "dark",
     "backgroundColor": "#0f1117",
+    "splash": {
+      "backgroundColor": "#0f1117"
+    },
     "scheme": "sheethappens",
     "android": {
       "adaptiveIcon": {

app/_layout.tsx

@@ -1,14 +1,22 @@
 import { useEffect } from "react";
-import { Stack, router } from "expo-router";
+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) {
@@ -17,23 +25,25 @@ export default function RootLayout() {
   }, [ready, settings.onboardingDone]);
 
   return (
-    <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>
+      <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>
   );
 }