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 ;
+ }
+
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 ;
}
- // This layout can be deferred because it's not the root layout.
return ;
}
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() {
Hello there 👋
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() {
Unlock to continue