fix: prevent white screen of ☠️ (#150)

* fix: onboarding state
* fix: prevent image being cut off
* fix: prevent image cutoff on unlock screen

app/(app)/_layout.tsx

@@ -1,20 +1,32 @@
 import { Redirect, Stack } from 'expo-router';
 import { useSession } from '~/hooks/useSession';
 import { useHandleLinking } from '~/hooks/useHandleLinking';
+import { secureStorage } from '~/lib/secureStorage';
+import { hasOnboardedKey } from '~/lib/state/appStore';
+import { useMemo } from 'react'; // Add useMemo
 
 export default function AppLayout() {
     const { hasSession } = useSession();
     useHandleLinking();
 
-    // Only require authentication within the (app) group's layout as users
-    // need to be able to access the (auth) group and sign in again.
+    // Memoize the onboarded status to prevent unnecessary reads from storage
+    const isOnboarded = useMemo(() => {
+        return secureStorage.getItem(hasOnboardedKey);
+    }, []);
+
+    // Don't render while the onboarding state is loaded
+    if (isOnboarded === null) {
+        return null;
+    }
+
+    if (!isOnboarded) {
+        return <Redirect href="/onboarding" />;
+    }
+
     if (!hasSession) {
         console.log("Not authenticated, redirecting to /unlock")
-        // On web, static rendering will stop here as the user is not authenticated
-        // in the headless Node process that the pages are rendered in.
         return <Redirect href="/unlock" />;
     }
 
-    // This layout can be deferred because it's not the root layout.
     return <Stack />;
 }

app/_layout.tsx

@@ -2,7 +2,7 @@ import "~/global.css";
 import { Theme, ThemeProvider } from "@react-navigation/native";
 import {
   Slot,
-  SplashScreen, useRouter
+  SplashScreen
 } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import * as React from "react";
@@ -16,8 +16,7 @@ import Toast from "react-native-toast-message";
 import { toastConfig } from "~/components/ToastConfig";
 import * as Font from "expo-font";
 import { useInfo } from "~/hooks/useInfo";
-import { secureStorage } from "~/lib/secureStorage";
-import { hasOnboardedKey, useAppStore } from "~/lib/state/appStore";
+import { useAppStore } from "~/lib/state/appStore";
 import { UserInactivityProvider } from "~/context/UserInactivity";
 import { PortalHost } from '@rn-primitives/portal';
 import { isBiometricSupported } from "~/lib/isBiometricSupported";
@@ -47,20 +46,9 @@ export const unstable_settings = {
 export default function RootLayout() {
   const { isDarkColorScheme } = useColorScheme();
   const [fontsLoaded, setFontsLoaded] = React.useState(false);
-  const [checkedOnboarding, setCheckedOnboarding] = React.useState(false);
-  const router = useRouter();
 
   useConnectionChecker();
 
-  async function checkOnboardingStatus() {
-    const hasOnboarded = await secureStorage.getItem(hasOnboardedKey);
-    if (!hasOnboarded) {
-      router.replace("/onboarding");
-    }
-
-    setCheckedOnboarding(true);
-  };
-
   async function loadFonts() {
     await Font.loadAsync({
       OpenRunde: require("./../assets/fonts/OpenRunde-Regular.otf"),
@@ -83,7 +71,6 @@ export default function RootLayout() {
     const init = async () => {
       try {
         await Promise.all([
-          checkOnboardingStatus(),
           loadFonts(),
           checkBiometricStatus(),
         ]);
@@ -96,7 +83,7 @@ export default function RootLayout() {
     init();
   }, []);
 
-  if (!fontsLoaded || !checkedOnboarding) {
+  if (!fontsLoaded) {
     return null;
   }
 

pages/Onboarding.tsx

@@ -24,7 +24,7 @@ export function Onboarding() {
       <View className="flex-1 flex items-center justify-center gap-4">
         <Image
           source={require('./../assets/logo.png')}
-          className="mb-10 w-52 h-52 object-contain"
+          className="mb-10 w-52 h-52" resizeMode="contain"
         />
         <Text className="font-semibold2 text-4xl text-center text-foreground">Hello there 👋</Text>
         <Text className="font-medium2 text-xl text-muted-foreground text-center">

pages/Unlock.tsx

@@ -44,7 +44,8 @@ export function Unlock() {
       <View className="flex-1 flex items-center justify-center gap-4">
         <Image
           source={require('./../assets/logo.png')}
-          className="mb-10 w-52 h-52 object-contain"
+          className="mb-10 w-52 h-52"
+          resizeMode="contain"
         />
         <Text className="font-semibold2 text-4xl text-center text-foreground">Unlock to continue</Text>
       </View>