chore: fixes

app/_layout.tsx

@@ -42,8 +42,7 @@ export const unstable_settings = {
 
 export default function RootLayout() {
   const { isDarkColorScheme, setColorScheme } = useColorScheme();
-  const [themeLoaded, setThemeLoaded] = React.useState(false);
-  const [fontsLoaded, setFontsLoaded] = React.useState(false);
+  const [resourcesLoaded, setResourcesLoaded] = React.useState(false);
 
   useConnectionChecker();
 
@@ -54,8 +53,6 @@ export default function RootLayout() {
       "OpenRunde-Semibold": require("./../assets/fonts/OpenRunde-Semibold.otf"),
       "OpenRunde-Bold": require("./../assets/fonts/OpenRunde-Bold.otf"),
     });
-
-    setFontsLoaded(true);
   }
 
   async function checkBiometricStatus() {
@@ -65,27 +62,28 @@ export default function RootLayout() {
     }
   }
 
-  const loadTheme = React.useCallback((): void => {
-    const theme = useAppStore.getState().theme as "light" | "dark" | "system";
-    setColorScheme(theme);
-
-    setThemeLoaded(true);
+  const loadTheme = React.useCallback((): Promise<void> => {
+    return new Promise((resolve) => {
+      const theme = useAppStore.getState().theme;
+      setColorScheme(theme);
+      resolve();
+    });
   }, [setColorScheme]);
 
   React.useEffect(() => {
     const init = async () => {
       try {
-        loadTheme();
-        await Promise.all([loadFonts(), checkBiometricStatus()]);
+        await Promise.all([loadTheme(), loadFonts(), checkBiometricStatus()]);
       } finally {
+        setResourcesLoaded(true);
         SplashScreen.hideAsync();
       }
     };
 
     init();
   }, [loadTheme]);
 
-  if (!fontsLoaded || !themeLoaded) {
+  if (!resourcesLoaded) {
     return null;
   }
 

lib/state/appStore.ts

@@ -12,9 +12,9 @@ interface AppState {
   readonly addressBookEntries: AddressBookEntry[];
   readonly isSecurityEnabled: boolean;
   readonly isOnboarded: boolean;
-  readonly theme: string;
+  readonly theme: Theme;
   setUnlocked: (unlocked: boolean) => void;
-  setTheme: (theme: string) => void;
+  setTheme: (theme: Theme) => void;
   setOnboarded: (isOnboarded: boolean) => void;
   setNWCClient: (nwcClient: NWCClient | undefined) => void;
   updateCurrentWallet(wallet: Partial<Wallet>): void;
@@ -39,6 +39,8 @@ const themeKey = "theme";
 const isSecurityEnabledKey = "isSecurityEnabled";
 export const lastActiveTimeKey = "lastActiveTime";
 
+export type Theme = "system" | "light" | "dark";
+
 type Wallet = {
   name?: string;
   nostrWalletConnectUrl?: string;
@@ -145,7 +147,7 @@ export const useAppStore = create<AppState>()((set, get) => {
   const isSecurityEnabled =
     secureStorage.getItem(isSecurityEnabledKey) === "true";
 
-  const theme = secureStorage.getItem(themeKey) || "system";
+  const theme = (secureStorage.getItem(themeKey) as Theme) || "system";
 
   const initialWallets = loadWallets();
   return {

lib/useColorScheme.tsx

@@ -1,11 +1,23 @@
 import { useColorScheme as useNativewindColorScheme } from "nativewind";
+import { useAppStore } from "~/lib/state/appStore";
 
 export function useColorScheme() {
-  const { colorScheme, setColorScheme, toggleColorScheme } =
-    useNativewindColorScheme();
+  const {
+    colorScheme,
+    setColorScheme,
+    toggleColorScheme: _toggleColorScheme,
+  } = useNativewindColorScheme();
+
+  const isDarkColorScheme = colorScheme === "dark";
+
+  const toggleColorScheme = () => {
+    _toggleColorScheme();
+    useAppStore.getState().setTheme(isDarkColorScheme ? "light" : "dark");
+  };
+
   return {
     colorScheme: colorScheme ?? "dark",
-    isDarkColorScheme: colorScheme === "dark",
+    isDarkColorScheme,
     setColorScheme,
     toggleColorScheme,
   };

pages/settings/Settings.tsx

@@ -72,12 +72,7 @@ export function Settings() {
 
         <TouchableOpacity
           className="flex flex-row gap-4"
-          onPress={() => {
-            useAppStore
-              .getState()
-              .setTheme(colorScheme === "light" ? "dark" : "light");
-            toggleColorScheme();
-          }}
+          onPress={toggleColorScheme}
         >
           <Palette className="text-foreground" />
           <Text className="text-foreground font-medium2 text-xl">Theme</Text>