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,6 +25,7 @@ export default function RootLayout() {
   }, [ready, settings.onboardingDone]);
 
   return (
+    <SafeAreaProvider>
       <GestureHandlerRootView style={{ flex: 1, backgroundColor: Colors.bg }}>
         <StatusBar style="light" />
         <Stack
@@ -35,5 +44,6 @@ export default function RootLayout() {
           <Stack.Screen name="onboarding" options={{ headerShown: false }} />
         </Stack>
       </GestureHandlerRootView>
+    </SafeAreaProvider>
   );
 }