From cb37824516ad9a37df5774332a7619629004d212 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?=
 <100827540+reneaaron@users.noreply.github.com>
Date: Fri, 4 Oct 2024 21:38:51 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20prevent=20white=20screen=20of=20?=
 =?UTF-8?q?=E2=98=A0=EF=B8=8F=20(#150)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: onboarding state
* fix: prevent image being cut off
* fix: prevent image cutoff on unlock screen
---
 app/(app)/_layout.tsx | 22 +++++++++++++++++-----
 app/_layout.tsx       | 19 +++----------------
 pages/Onboarding.tsx  |  2 +-
 pages/Unlock.tsx      |  3 ++-
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx
index 2e67cd0..579b2a6 100644
--- a/app/(app)/_layout.tsx
+++ b/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 />;
 }
diff --git a/app/_layout.tsx b/app/_layout.tsx
index a55e8a5..2dff73f 100644
--- a/app/_layout.tsx
+++ b/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;
   }
 
diff --git a/pages/Onboarding.tsx b/pages/Onboarding.tsx
index 2a53a53..282183d 100644
--- a/pages/Onboarding.tsx
+++ b/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">
diff --git a/pages/Unlock.tsx b/pages/Unlock.tsx
index 81fa1c2..a6aacad 100644
--- a/pages/Unlock.tsx
+++ b/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>