From 86303e5c8407c9966195838c50d4e7bf2e84e71b Mon Sep 17 00:00:00 2001
From: billisdead <billisdead@tutanota.com>
Date: Mon, 22 Jun 2026 09:00:39 +0200
Subject: [PATCH] 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        |  3 +++
 app/_layout.tsx | 48 +++++++++++++++++++++++++++++-------------------
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/app.json b/app.json
index 6a0ea7c..ef2036a 100644
--- a/app.json
+++ b/app.json
@@ -6,6 +6,9 @@
     "orientation": "portrait",
     "userInterfaceStyle": "dark",
     "backgroundColor": "#0f1117",
+    "splash": {
+      "backgroundColor": "#0f1117"
+    },
     "scheme": "sheethappens",
     "android": {
       "adaptiveIcon": {
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 2e56cf7..f96836a 100644
--- a/app/_layout.tsx
+++ b/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>
   );
 }