fix device theme change listener in ios (#15724)

Author: Parveshdhull

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

@@ -150,6 +150,7 @@
      (re-frame/dispatch [:change-shell-status-bar-style
                          (if (shell.animation/home-stack-open?) status-bar-theme :light)])
      (when reload-ui?
+       (rf/dispatch [: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]}

src/status_im2/navigation/core.cljs

@@ -160,6 +160,8 @@
 ;; OVERLAY
 (def dissmiss-overlay navigation/dissmiss-overlay)
 
+(def dissmiss-all-overlays navigation/dissmiss-all-overlays)
+
 (defn show-overlay
   ([comp] (show-overlay comp {}))
   ([comp opts]
@@ -173,6 +175,8 @@
                                   :overlay {:interceptTouchOutside true}}
                                  opts)}})))
 
+(re-frame/reg-fx :dissmiss-all-overlays-fx dissmiss-all-overlays)
+
 ;; toast
 (navigation/register-component "toasts" (fn [] views/toasts) js/undefined)
 

src/status_im2/navigation/events.cljs

@@ -70,7 +70,6 @@
   {:events [:hide-bottom-sheet]}
   [{:keys [db]}]
   (let [{:keys [hide? sheets]} (:bottom-sheet db)]
-    (println :hide-bottom-sheet (not hide?) (seq sheets))
     (when (and (not hide?) (seq sheets))
       {:db (assoc-in db [:bottom-sheet :hide?] true)})))
 
@@ -140,3 +139,12 @@
                                            key-uid
                                            :keycard-pairing]))]
     {:set-root (if keycard-account? :multiaccounts-keycard :multiaccounts)}))
+
+(rf/defn dismiss-all-overlays
+  {:events [:dissmiss-all-overlays]}
+  [{:keys [db]}]
+  {:dissmiss-all-overlays-fx nil
+   :db                       (-> db
+                                 (dissoc :popover/popover)
+                                 (dissoc :visibility-status-popover/popover)
+                                 (assoc-in [:bottom-sheet :hide?] true))})