From 117358af4ddea39e71efd27c1b00d2db04845641 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Mon, 30 Dec 2024 13:46:20 +0530
Subject: [PATCH] fix: get theme from device

---
 app.json              |  6 ++++--
 app/_layout.tsx       |  8 ++++++--
 lib/state/appStore.ts |  6 +++---
 package.json          |  1 +
 yarn.lock             | 13 +++++++++++++
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/app.json b/app.json
index 5d8fd3b..8fa1a88 100644
--- a/app.json
+++ b/app.json
@@ -50,7 +50,8 @@
       },
       "infoPlist": {
         "LSMinimumSystemVersion": "12.0"
-      }
+      },
+      "userInterfaceStyle": "automatic"
     },
     "android": {
       "package": "com.getalby.mobile",
@@ -60,7 +61,8 @@
         "backgroundImage": "./assets/adaptive-icon-bg.png",
         "monochromeImage": "./assets/monochromatic.png"
       },
-      "permissions": ["android.permission.CAMERA"]
+      "permissions": ["android.permission.CAMERA"],
+      "userInterfaceStyle": "automatic"
     },
     "extra": {
       "eas": {
diff --git a/app/_layout.tsx b/app/_layout.tsx
index e34d644..2b10fed 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -69,10 +69,14 @@ export default function RootLayout() {
   const loadTheme = React.useCallback((): Promise<void> => {
     return new Promise((resolve) => {
       const theme = useAppStore.getState().theme;
-      setColorScheme(theme);
+      if (theme) {
+        setColorScheme(theme);
+      } else {
+        useAppStore.getState().setTheme(isDarkColorScheme ? "dark" : "light");
+      }
       resolve();
     });
-  }, [setColorScheme]);
+  }, [isDarkColorScheme, setColorScheme]);
 
   React.useEffect(() => {
     const init = async () => {
diff --git a/lib/state/appStore.ts b/lib/state/appStore.ts
index ce227e0..1fee427 100644
--- a/lib/state/appStore.ts
+++ b/lib/state/appStore.ts
@@ -12,7 +12,7 @@ interface AppState {
   readonly addressBookEntries: AddressBookEntry[];
   readonly isSecurityEnabled: boolean;
   readonly isOnboarded: boolean;
-  readonly theme: Theme;
+  readonly theme?: Theme;
   readonly balanceDisplayMode: BalanceDisplayMode;
   setUnlocked: (unlocked: boolean) => void;
   setTheme: (theme: Theme) => void;
@@ -45,7 +45,7 @@ const isSecurityEnabledKey = "isSecurityEnabled";
 export const lastActiveTimeKey = "lastActiveTime";
 
 export type BalanceDisplayMode = "sats" | "fiat" | "hidden";
-export type Theme = "system" | "light" | "dark";
+export type Theme = "light" | "dark";
 
 type Wallet = {
   name?: string;
@@ -176,7 +176,7 @@ export const useAppStore = create<AppState>()((set, get) => {
   const isSecurityEnabled =
     secureStorage.getItem(isSecurityEnabledKey) === "true";
 
-  const theme = (secureStorage.getItem(themeKey) as Theme) || "system";
+  const theme = (secureStorage.getItem(themeKey) as Theme) || null;
   const balanceDisplayMode =
     (secureStorage.getItem(balanceDisplayModeKey) as BalanceDisplayMode) ||
     "sats";
diff --git a/package.json b/package.json
index 402050f..fa0ff6c 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "expo-router": "~4.0.11",
     "expo-secure-store": "~14.0.0",
     "expo-status-bar": "~2.0.0",
+    "expo-system-ui": "~4.0.6",
     "lottie-react-native": "7.1.0",
     "message-port-polyfill": "^0.2.0",
     "nativewind": "^4.0.1",
diff --git a/yarn.lock b/yarn.lock
index 3ed274e..e962198 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1947,6 +1947,11 @@
   resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.76.3.tgz#8d4de4a8671385c53b2d202ef0137632abcf747d"
   integrity sha512-Yrpmrh4IDEupUUM/dqVxhAN8QW1VEUR3Qrk2lzJC1jB2s46hDe0hrMP2vs12YJqlzshteOthjwXQlY0TgIzgbg==
 
+"@react-native/normalize-colors@0.76.5":
+  version "0.76.5"
+  resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.76.5.tgz#a33560736311aefcf1d3cb594597befe81a9a53c"
+  integrity sha512-6QRLEok1r55gLqj+94mEWUENuU5A6wsr2OoXpyq/CgQ7THWowbHtru/kRGRr6o3AQXrVnZheR60JNgFcpNYIug==
+
 "@react-native/virtualized-lists@0.76.3":
   version "0.76.3"
   resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.76.3.tgz#9865f9e3770c101476564dc2436018f82adfb4b3"
@@ -4573,6 +4578,14 @@ expo-status-bar@~2.0.0:
   resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-2.0.0.tgz#dd99adc2ace12a24c92718cd0f97b93347103393"
   integrity sha512-vxxdpvpNDMTEc5uTiIrbTvySKKUsOACmfl8OZuUdjNle05oGqwtq3v5YObwym/njSByjoyuZX8UpXBZnxvarwQ==
 
+expo-system-ui@~4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/expo-system-ui/-/expo-system-ui-4.0.6.tgz#23d172e346dbe478f31e36019c2570242e7c0762"
+  integrity sha512-JWmw0aaNIB8YxA6bXgH6nClyledZaAG5VNzoRvmXT4+j3MY4waAHSSSdVV71bUgjchT/2KOAcibZ/EeosJONug==
+  dependencies:
+    "@react-native/normalize-colors" "0.76.5"
+    debug "^4.3.2"
+
 expo@~52.0.14:
   version "52.0.14"
   resolved "https://registry.yarnpkg.com/expo/-/expo-52.0.14.tgz#e99a921dc5caff4b5b68fa96069ba7c3e64c4d17"