Merge pull request #1031 from andrew-bierman/fix/theme_state

package.json

@@ -92,6 +92,7 @@
     "@babel/runtime": "^7.21.0",
     "@manypkg/cli": "^0.21.0",
     "@prisma/extension-accelerate": "^0.6.2",
+    "@react-native-async-storage/async-storage": "^1.23.1",
     "check-dependency-version-consistency": "^4.1.0",
     "cross-env": "^7.0.3",
     "dotenv-cli": "^7.3.0",

packages/app/context/theme.tsx

@@ -1,12 +1,16 @@
-import { createContext, useReducer } from 'react';
+import { createContext, useEffect, useReducer, useState } from 'react';
 import { theme, darkTheme } from '../theme';
 import ThirdPartyThemeProviders from './ThirdPartyThemeProviders';
 import React from 'react';
+import { Platform } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useStorageState } from 'app/hooks/storage/useStorageState';
 
 const initialState = {
-  isDark: false,
-  isLight: true,
+  isDark: null,
+  isLight: null,
   currentTheme: theme,
+  loading: true,
 };
 const handlers = {
   /**
@@ -58,6 +62,29 @@ const ThemeContext = createContext({
  */
 export const ThemeProvider = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
+  const [[, storedIsEnabled], setStoredIsEnabled] =
+    useStorageState('isEnabled');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchTheme = async () => {
+      try {
+        if (storedIsEnabled !== null) {
+          const isEnabled = JSON.parse(storedIsEnabled);
+          dispatch({
+            type: isEnabled ? 'ENABLE_DARK_MODE' : 'ENABLE_LIGHT_MODE',
+          });
+        } else {
+          dispatch({ type: 'ENABLE_LIGHT_MODE' });
+        }
+      } catch (e) {
+        console.error('Local storage is unavailable:', e);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchTheme();
+  }, [storedIsEnabled]);
 
   /**
    * Enable dark mode.
@@ -66,6 +93,7 @@ export const ThemeProvider = ({ children }) => {
    */
   const enableDarkMode = () => {
     dispatch({ type: 'ENABLE_DARK_MODE' });
+    setStoredIsEnabled(JSON.stringify(true));
   };
   /**
    * Enables light mode.
@@ -75,11 +103,12 @@ export const ThemeProvider = ({ children }) => {
    */
   const enableLightMode = () => {
     dispatch({ type: 'ENABLE_LIGHT_MODE' });
+    setStoredIsEnabled(JSON.stringify(false));
   };
 
   const key = `themeContext + isDark=${state.isDark} + isLight=${state.isLight}`;
 
-  return (
+  return loading ? null : (
     <ThemeContext.Provider
       key={key}
       value={{

packages/app/hooks/appearance/useAppearance.ts

@@ -0,0 +1,28 @@
+import useTheme from '../useTheme';
+import { useStorageState } from 'app/hooks/storage/useStorageState';
+
+const useAppearance = () => {
+  const { enableDarkMode, enableLightMode, currentTheme } = useTheme();
+  const [[, isEnabledString], setIsEnabled] = useStorageState('isEnabled');
+
+  // Convert string to boolean
+  const isEnabled = JSON.parse(isEnabledString);
+
+  const toggleSwitch = async () => {
+    const newIsEnabledValue = !isEnabled ? 'true' : 'false';
+    setIsEnabled(newIsEnabledValue);
+    if (!isEnabled) {
+      enableDarkMode();
+    } else {
+      enableLightMode();
+    }
+  };
+
+  return {
+    isEnabled,
+    toggleSwitch,
+    currentTheme,
+  };
+};
+
+export default useAppearance;

packages/app/hooks/storage/useStorageState.ts

@@ -50,7 +50,7 @@ export function useStorageState(key: string): UseStateHook<string> {
           console.error('Local storage is unavailable:', e);
         }
       } else {
-        SecureStore.getItemAsync(key).then((value) => {
+        await SecureStore.getItemAsync(key).then((value) => {
           setState(value);
         });
       }

yarn.lock

@@ -6846,6 +6846,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-async-storage/async-storage@npm:^1.23.1":
+  version: 1.23.1
+  resolution: "@react-native-async-storage/async-storage@npm:1.23.1"
+  dependencies:
+    merge-options: "npm:^3.0.4"
+  peerDependencies:
+    react-native: ^0.0.0-0 || >=0.60 <1.0
+  checksum: 10/9d0acc7edb0ba9ee414d6e62c656e5d571c9d9615e7e9f4748865b965178998f2e73786b8050387ada00ddb6faaca97b5cf2e010ceaeebe91571991364a0f515
+  languageName: node
+  linkType: hard
+
 "@react-native-community/cli-clean@npm:12.3.6":
   version: 12.3.6
   resolution: "@react-native-community/cli-clean@npm:12.3.6"
@@ -28613,6 +28624,7 @@ __metadata:
     "@babel/runtime": "npm:^7.21.0"
     "@manypkg/cli": "npm:^0.21.0"
     "@prisma/extension-accelerate": "npm:^0.6.2"
+    "@react-native-async-storage/async-storage": "npm:^1.23.1"
     check-dependency-version-consistency: "npm:^4.1.0"
     cross-env: "npm:^7.0.3"
     dotenv-cli: "npm:^7.3.0"