fix device theme change listener in ios

src/react_native/navigation.cljs

@@ -41,6 +41,10 @@
   [comp]
   (.catch (.dismissOverlay Navigation comp) #()))
 
+(defn dissmiss-all-overlays
+  []
+  (.catch (.dismissAllOverlays Navigation) #()))
+
 (defn reg-app-launched-listener
   [handler]
   (.registerAppLaunchedListener ^js (.events ^js Navigation) handler))

src/status_im/events.cljs

@@ -60,6 +60,9 @@
     status-im2.contexts.onboarding.events
     status-im.chat.models.gaps
     [status-im2.navigation.events :as navigation]
+    [status-im2.common.theme.core :as theme]
+    [react-native.core :as rn]
+    [react-native.platform :as platform]
     status-im2.contexts.chat.home.events))
 
 (re-frame/reg-fx
@@ -90,6 +93,10 @@
 (re-frame/reg-fx
  ::app-state-change-fx
  (fn [state]
+   (when (and platform/ios? (= state "active"))
+     ;; Change the app theme if the ios device theme was updated when the app was in the background
+     ;; https://github.com/status-im/status-mobile/issues/15708
+     (theme/change-device-theme (rn/get-color-scheme)))
    (status/app-state-change state)))
 
 (re-frame/reg-fx

src/status_im/multiaccounts/core.cljs

@@ -12,6 +12,7 @@
             [status-im.utils.identicon :as identicon]
             [status-im2.setup.hot-reload :as hot-reload]
             [status-im2.common.theme.core :as theme]
+            [react-native.navigation :as navigation]
             [taoensso.timbre :as log]
             [status-im2.contexts.shell.animation :as shell.animation]
             [status-im.contact.db :as contact.db]))
@@ -150,6 +151,7 @@
      (re-frame/dispatch [:change-shell-status-bar-style
                          (if (shell.animation/home-stack-open?) status-bar-theme :light)])
      (when reload-ui?
+       (navigation/dissmiss-all-overlays)
        (hot-reload/reload)
        (when-not (= view-id :shell-stack)
          (re-frame/dispatch [:change-shell-nav-bar-color nav-bar-color]))))))

src/status_im2/common/theme/core.cljs

@@ -1,18 +1,29 @@
 (ns status-im2.common.theme.core
   (:require [quo.theme :as quo]
             [quo2.theme :as quo2]
-            [react-native.core :as rn]))
+            [utils.re-frame :as rf]
+            [oops.core :refer [oget]]
+            [react-native.core :as rn]
+            [react-native.platform :as platform]))
 
 (def device-theme (atom (rn/get-color-scheme)))
 
-;; Note - don't use value returned by change listener
-;; https://github.com/facebook/react-native/issues/28525
+(defn change-device-theme
+  [theme]
+  (when-not (= theme @device-theme)
+    (reset! device-theme theme)
+    #(rf/dispatch [:system-theme-mode-changed (keyword theme)])))
+
+;; Appearance change listener fires false events in ios when the app is in the background
+;; So, we are ignoring those events and when the device returns form the background,
+;; we are manually checking the device theme, in ::app-state-change-fx
+;; https://github.com/status-im/status-mobile/issues/15708
 (defn add-device-theme-change-listener
-  [callback]
-  (rn/appearance-add-change-listener #(let [theme (rn/get-color-scheme)]
-                                        (when-not (= theme @device-theme)
-                                          (reset! device-theme theme)
-                                          (callback (keyword theme))))))
+  []
+  (rn/appearance-add-change-listener
+   #(when (or platform/android?
+              (not= (oget rn/app-state "currentState") "background"))
+      (change-device-theme (oget % "colorScheme")))))
 
 (defn device-theme-dark?
   []

src/status_im2/events.cljs

@@ -30,8 +30,7 @@
 (re-frame/reg-fx
  :setup/init-theme
  (fn []
-   (theme/add-device-theme-change-listener
-    #(re-frame/dispatch [:system-theme-mode-changed %]))))
+   (theme/add-device-theme-change-listener)))
 
 (rf/defn initialize-views
   {:events [:setup/initialize-view]}