fix: safe areas all over the app for iOS & Android

* Fix safe areas
* Refactor rf/defn -> rf/reg-event-fx for :reload-status-nav-color & :system-theme-mode-changed
* Fix status-bar mode when the theme is  changed for Android

Author: ulisesmac

package.json

@@ -59,16 +59,16 @@
     "react-native-linear-gradient": "3.0.0-alpha.1",
     "react-native-lottie-splash-screen": "^1.0.1",
     "react-native-mmkv": "2.12.2",
-    "react-native-navigation": "7.39.0",
+    "react-native-navigation": "7.43.0",
     "react-native-orientation-locker": "^1.5.0",
     "react-native-pdf": "^6.7.5",
     "react-native-permissions": "4.1.5",
     "react-native-reanimated": "3.6.1",
     "react-native-redash": "18.1.0",
+    "react-native-safe-area-context": "4.14.1",
     "react-native-shadow-2": "^7.0.8",
     "react-native-shake": "^3.3.1",
     "react-native-share": "10.0.2",
-    "react-native-static-safe-area-insets": "^2.2.0",
     "react-native-status-keycard": "git+https://github.com/status-im/react-native-status-keycard.git#refs/tags/v2.6.6",
     "react-native-svg": "13.10.0",
     "react-native-webview": "13.6.3",

src/js/worklets/communities.js

@@ -271,7 +271,7 @@ export function onPanEnd({
       endAnimation();
     } else {
       const maxValue = maxScroll.value + expandHeaderLimit;
-      const decelerationRate = isIOS ? { deceleration: 0.9997 } : { deceleration: 0.999 };
+      const decelerationRate = isIOS ? { deceleration: 0.998 } : { deceleration: 0.996 };
 
       scrollStart.value = withDecay({
         ...{

src/legacy/status_im/events.cljs

@@ -83,13 +83,13 @@
   [{:keys [db]} path gfycat]
   {:db (assoc-in db path gfycat)})
 
-(rf/defn system-theme-mode-changed
-  {:events [:system-theme-mode-changed]}
-  [{:keys [db] :as cofx} _]
-  (let [appearance-type (get-in cofx [:db :profile/profile :appearance])]
-    (when (and (multiaccounts.model/logged-in? db)
-               (= appearance-type status-im.constants/appearance-type-system))
-      {:dispatch [:theme/switch]})))
+(rf/reg-event-fx
+ :system-theme-mode-changed
+ (fn [{:keys [db]}]
+   (let [appearance-type (-> db :profile/profile :appearance)]
+     (when (and (multiaccounts.model/logged-in? db)
+                (= appearance-type status-im.constants/appearance-type-system))
+       {:fx [[:dispatch [:theme/switch]]]}))))
 
 (defn- on-biometric-auth-fail
   [{:keys [code]}]
@@ -217,5 +217,3 @@
                     :params     []
                     :on-success (fn [on-ramps]
                                   (re-frame/dispatch [::crypto-loaded on-ramps]))}]})
-
-

src/legacy/status_im/ui/components/topbar.cljs

@@ -40,7 +40,7 @@
     [quo/header
      (merge {:left-accessories navigation
              :title-component  content
-             :insets           (when use-insets (safe-area/get-insets))
+             :insets           (when use-insets safe-area/insets)
              :left-width       (when navigation
                                  default-button-width)
              :border-bottom    border-bottom?}

src/legacy/status_im/ui/screens/browser/stack.cljs

@@ -10,7 +10,7 @@
 (defn browser-stack
   []
   (let [screen-id (rf/sub [:browser/screen-id])]
-    [rn/view {:padding-top (safe-area/get-top) :flex 1}
+    [rn/view {:padding-top safe-area/top :flex 1}
      (case screen-id
        :empty-tab    [empty-tab/empty-tab]
        :browser      [browser/browser]

src/legacy/status_im/ui/screens/wakuv2_settings/edit_node/views.cljs

@@ -34,7 +34,7 @@
       [react/keyboard-avoiding-view
        {:style         {:flex 1}
         :ignore-offset true}
-       [react/view {:flex 1 :padding-bottom (safe-area/get-bottom)}
+       [react/view {:flex 1 :padding-bottom safe-area/bottom}
         [topbar/topbar {:title (i18n/label (if name :t/node-details :t/add-node))}]
         [react/scroll-view {:keyboard-should-persist-taps :handled}
          [react/view styles/edit-node-view

src/legacy/status_im/ui/screens/wakuv2_settings/views.cljs

@@ -28,7 +28,7 @@
 (views/defview wakuv2-settings
   []
   (views/letsubs [nodes [:wakuv2-nodes/list]]
-    [react/view {:flex 1 :padding-bottom (safe-area/get-bottom)}
+    [react/view {:flex 1 :padding-bottom safe-area/bottom}
      [topbar/topbar
       {:title (i18n/label :t/wakuv2-settings)
        :navigation :none

src/mocks/js_dependencies.cljs

@@ -173,7 +173,9 @@
 
 (def net-info #js {:addEventListener identity})
 (def react-native-biometrics #js {:default {}})
-(def react-native-static-safe-area-insets #js {:default {}})
+(def react-native-safe-area-context
+  #js {:initialWindowMetrics #js {}
+       :SafeAreaProvider     #js {}})
 
 (def back-handler
   #js
@@ -402,7 +404,7 @@
     "react-native-background-timer"                    background-timer
     "react-native-image-crop-picker"                   image-crop-picker
     "react-native-gesture-handler"                     react-native-gesture-handler
-    "react-native-static-safe-area-insets"             react-native-static-safe-area-insets
+    "react-native-safe-area-context"                   react-native-safe-area-context
     "react-native-config"                              config
     "react-native-mmkv"                                react-native-mmkv
     "react-native-iphone-x-helper"                     (clj->js {:getStatusBarHeight (fn [])

src/quo/components/animated_header_flatlist/view.cljs

@@ -56,7 +56,7 @@
   [{:keys [header-comp main-comp back-button-on-press] :as params}]
   (let [theme                   (quo.context/use-theme)
         window-height           (:height (rn/get-window))
-        {:keys [top bottom]}    (safe-area/get-insets)
+        {:keys [top bottom]}    safe-area/insets
         ;; view height calculation is different because window height is different on iOS and
         ;; Android:
         view-height             (if platform/ios?

src/quo/components/drawers/documentation_drawers/style.cljs

@@ -5,15 +5,15 @@
 
 (def outer-container
   ;; Margin negative to fill the bottom-sheet container where this component is used
-  {:margin-bottom (- (+ (safe-area/get-bottom) 8))})
+  {:margin-bottom (- (+ safe-area/bottom 8))})
 
 (def container
   {:align-items        :flex-start
    :padding-horizontal 20})
 
 (def content
   {:align-items   :flex-start
-   :margin-bottom (+ (safe-area/get-bottom) 12)})
+   :margin-bottom (+ safe-area/bottom 12)})
 
 (defn title
   [theme]