fix (fn[]) usage in hiccup (#15713)

Author: flexsurfer

ios/Podfile.lock

@@ -256,8 +256,6 @@ PODS:
     - React-Core
   - react-native-randombytes (3.6.1):
     - React-Core
-  - react-native-safe-area-context (2.0.0):
-    - React
   - react-native-shake (3.4.0):
     - React
   - react-native-slider (3.0.0):
@@ -412,6 +410,8 @@ PODS:
     - Yoga
   - RNShare (7.0.1):
     - React-Core
+  - RNStaticSafeAreaInsets (2.2.0):
+    - React-Core
   - RNSVG (9.13.6):
     - React
   - SDWebImage (5.11.1):
@@ -468,7 +468,6 @@ DEPENDENCIES:
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`)
   - react-native-randombytes (from `../node_modules/react-native-randombytes`)
-  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-shake (from `../node_modules/react-native-shake`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-status (from `../modules/react-native-status`)
@@ -503,6 +502,7 @@ DEPENDENCIES:
   - RNReactNativeHapticFeedback (from `../node_modules/react-native-haptic-feedback`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNShare (from `../node_modules/react-native-share`)
+  - RNStaticSafeAreaInsets (from `../node_modules/react-native-static-safe-area-insets`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - secp256k1 (from `https://github.com/status-im/secp256k1.swift.git`)
   - SQLCipher (~> 3.0)
@@ -589,8 +589,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-orientation-locker"
   react-native-randombytes:
     :path: "../node_modules/react-native-randombytes"
-  react-native-safe-area-context:
-    :path: "../node_modules/react-native-safe-area-context"
   react-native-shake:
     :path: "../node_modules/react-native-shake"
   react-native-slider:
@@ -659,6 +657,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-reanimated"
   RNShare:
     :path: "../node_modules/react-native-share"
+  RNStaticSafeAreaInsets:
+    :path: "../node_modules/react-native-static-safe-area-insets"
   RNSVG:
     :path: "../node_modules/react-native-svg"
   secp256k1:
@@ -682,11 +682,11 @@ SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   CryptoSwift: c4f2debceb38bf44c80659afe009f71e23e4a082
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
+  DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: d2db9d00883282819d03bbd401b2ad4360d47580
   FBReactNativeSpec: 94da4d84ba3b1acf459103320882daa481a2b62d
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 9e3310013355e9221591364060e841c28041dfe3
+  glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
   HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
   Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
   libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@@ -716,7 +716,6 @@ SPEC CHECKSUMS:
   react-native-netinfo: ddaca8bbb9e6e914b1a23787ccb879bc642931c9
   react-native-orientation-locker: 851f6510d8046ea2f14aa169b1e01fcd309a94ba
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
-  react-native-safe-area-context: 60f654e00b6cc416573f6d5dbfce3839958eb57a
   react-native-shake: de052eaa3eadc4a326b8ddd7ac80c06e8d84528c
   react-native-slider: 12bd76d3d568c9c5500825db54123d44b48e4ad4
   react-native-status: 21f75d492fd311dc111303da38a7a2b23a8a8466
@@ -751,6 +750,7 @@ SPEC CHECKSUMS:
   RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
   RNReanimated: 3ad6ec4e147462206be9d1c925df10b6ea850b0e
   RNShare: 2dc2fcac3f7321cfd6b60a23ed4bf4d549f86f5f
+  RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
   RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
@@ -763,4 +763,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: c29de3b14e3275299c51aa95520622f09d084bcb
 
-COCOAPODS: 1.12.0
+COCOAPODS: 1.12.1

package.json

@@ -63,9 +63,9 @@
     "react-native-randombytes": "^3.6.1",
     "react-native-reanimated": "2.3.3",
     "react-native-redash": "^16.0.11",
-    "react-native-safe-area-context": "^2.0.0",
     "react-native-shake": "^3.3.1",
     "react-native-share": "^7.0.1",
+    "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.5.39",
     "react-native-svg": "^9.8.4",
     "react-native-touch-id": "^4.4.1",

src/mocks/js_dependencies.cljs

@@ -155,10 +155,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
 (def net-info #js {})
 (def touchid #js {})
 (def react-native-image-viewing #js {:default {}})
-(def safe-area-context
-  (clj->js {:SafeAreaProvider      {:_reactNativeIphoneXHelper {:getStatusBarHeight (fn [])}}
-            :SafeAreaInsetsContext {:Consumer (fn [])}
-            :SafeAreaView          {}}))
+(def react-native-static-safe-area-insets #js {:default {}})
 
 (def back-handler
   #js
@@ -367,7 +364,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     "react-native-background-timer"                 background-timer
     "react-native-image-crop-picker"                image-crop-picker
     "react-native-gesture-handler"                  react-native-gesture-handler
-    "react-native-safe-area-context"                safe-area-context
+    "react-native-static-safe-area-insets"          react-native-static-safe-area-insets
     "react-native-config"                           config
     "react-native-iphone-x-helper"                  (clj->js {:getStatusBarHeight (fn [])
                                                               :getBottomSpace     (fn [])})

src/quo/components/animated_header.cljs

@@ -2,10 +2,10 @@
   (:require [oops.core :refer [oget]]
             [quo.animated :as animated]
             [quo.components.header :as header]
-            [quo.components.safe-area :as safe-area]
             [quo.design-system.colors :as colors]
             [quo.platform :as platform]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [react-native.safe-area :as safe-area]))
 
 (defn header-wrapper-style
   [{:keys [value offset]}]
@@ -95,11 +95,9 @@
 (defn header
   [{:keys [use-insets] :as props} & children]
   (if use-insets
-    [safe-area/consumer
-     (fn [insets]
-       [header-container
-        (-> props
-            (dissoc :use-insets)
-            (assoc :insets insets))
-        children])]
+    [header-container
+     (-> props
+         (dissoc :use-insets)
+         (assoc :insets (safe-area/get-insets)))
+     children]
     [header-container props children]))

src/quo/components/bottom_sheet/view.cljs

@@ -2,13 +2,13 @@
   (:require [cljs-bean.core :as bean]
             [quo.animated :as animated]
             [quo.components.bottom-sheet.style :as styles]
-            [quo.components.safe-area :as safe-area]
             [quo.design-system.colors :as colors]
             [quo.gesture-handler :as gesture-handler]
             [quo.platform :as platform]
             [quo.react :as react]
             [quo.react-native :as rn]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [react-native.safe-area :as safe-area]))
 
 (def opacity-coeff 0.8)
 (def close-duration 150)
@@ -43,7 +43,7 @@
         (rn/use-keyboard)
         keyboard-height-android-delta
         (if (and platform/android? keyboard-shown) (+ keyboard-height 20) 0)
-        safe-area (safe-area/use-safe-area)
+        safe-area (safe-area/get-insets)
         window-height (- window-height
                          (if platform/android?
                            (+ 50 keyboard-height-android-delta) ;; TODO : remove 50 when

src/quo/components/safe_area.cljs

@@ -8,7 +8,6 @@
             [quo.components.list.header :as list-header]
             [quo.components.list.index :as list-index]
             [quo.components.list.item :as list-item]
-            [quo.components.safe-area :as safe-area]
             [quo.components.separator :as separator]
             [quo.components.text :as text]
             [quo.components.text-input :as text-input]
@@ -29,8 +28,5 @@
 (def switch controls/switch)
 (def radio controls/radio)
 (def checkbox controls/checkbox)
-(def safe-area-provider safe-area/provider)
-(def safe-area-consumer safe-area/consumer)
-(def safe-area-view safe-area/view)
 (def separator separator/separator)
 (def get-color colors/get-color)

src/quo/core.cljs

@@ -30,7 +30,7 @@
     (reanimated/set-shared-value scroll-y current-y)))
 
 (defn header
-  [{:keys [theme-color display-picture-comp cover-uri title-comp]} top-inset scroll-y]
+  [{:keys [theme-color f-display-picture-comp cover-uri title-comp]} top-inset scroll-y]
   (let [input-range        [0 (* threshold 0.33)]
         picture-scale-down 0.4
         size-animation     (interpolate scroll-y input-range [80 (* 80 picture-scale-down)])
@@ -48,50 +48,49 @@
      [reanimated/view {:style (style/header-bottom-part border-animation)}
       [title-comp]]
      [reanimated/view {:style (style/entity-picture size-animation)}
-      [display-picture-comp image-animation]]]))
+      [:f> f-display-picture-comp image-animation]]]))
+
+(defn- f-animated-header-list
+  [{:keys [header-comp main-comp back-button-on-press] :as params}]
+  (let [window-height           (:height (rn/get-window))
+        {:keys [top bottom]}    (safe-area/get-insets)
+        ;; view height calculation is different because window height is different on iOS and Android:
+        view-height             (if platform/ios?
+                                  (- window-height bottom)
+                                  (+ window-height top))
+        initial-y               (if platform/ios? (- top) 0)
+        scroll-y                (reanimated/use-shared-value initial-y)
+        opacity-animation       (interpolate scroll-y
+                                             [(* threshold 0.33) (* threshold 0.66)]
+                                             [0 1])
+        translate-animation     (interpolate scroll-y [(* threshold 0.66) threshold] [100 56])
+        title-opacity-animation (interpolate scroll-y [(* threshold 0.66) threshold] [0 1])]
+    [rn/view {:style (style/container-view view-height)}
+     [rn/touchable-opacity
+      {:active-opacity 1
+       :on-press       back-button-on-press
+       :style          (style/button-container {:left 20})}
+      [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
+     [rn/touchable-opacity
+      {:active-opacity 1
+       :style          (style/button-container {:right 20})}
+      [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
+     [reanimated/blur-view
+      {:blurAmount   32
+       :blurType     :light
+       :overlayColor (if platform/ios? colors/white-opa-70 :transparent)
+       :style        (style/blur-view opacity-animation)}
+      [reanimated/view {:style (style/header-comp translate-animation title-opacity-animation)}
+       [header-comp]]]
+     [reanimated/flat-list
+      {:data                  [nil]
+       :render-fn             main-comp
+       :key-fn                str
+       :header                (reagent/as-element (header params top scroll-y))
+       ;; TODO: https://github.com/status-im/status-mobile/issues/14924
+       :scroll-event-throttle 8
+       :on-scroll             (fn [event] (scroll-handler event initial-y scroll-y))}]]))
 
 (defn animated-header-list
-  [{:keys [header-comp main-comp back-button-on-press] :as parameters}]
-  [safe-area/consumer
-   (fn [insets]
-     (let [window-height     (:height (rn/get-window))
-           status-bar-height (rn/status-bar-height)
-           bottom-inset      (:bottom insets)
-           ;; view height calculation is different because window height is different on iOS and Android:
-           view-height       (if platform/ios?
-                               (- window-height bottom-inset)
-                               (+ window-height status-bar-height))
-           initial-y         (if platform/ios? (- (:top insets)) 0)]
-       [:f>
-        (fn []
-          (let [scroll-y                (reanimated/use-shared-value initial-y)
-                opacity-animation       (interpolate scroll-y
-                                                     [(* threshold 0.33) (* threshold 0.66)]
-                                                     [0 1])
-                translate-animation     (interpolate scroll-y [(* threshold 0.66) threshold] [100 56])
-                title-opacity-animation (interpolate scroll-y [(* threshold 0.66) threshold] [0 1])]
-            [rn/view {:style (style/container-view view-height)}
-             [rn/touchable-opacity
-              {:active-opacity 1
-               :on-press       back-button-on-press
-               :style          (style/button-container {:left 20})}
-              [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
-             [rn/touchable-opacity
-              {:active-opacity 1
-               :style          (style/button-container {:right 20})}
-              [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
-             [reanimated/blur-view
-              {:blurAmount   32
-               :blurType     :light
-               :overlayColor (if platform/ios? colors/white-opa-70 :transparent)
-               :style        (style/blur-view opacity-animation)}
-              [reanimated/view {:style (style/header-comp translate-animation title-opacity-animation)}
-               [header-comp]]]
-             [reanimated/flat-list
-              {:data                  [nil]
-               :render-fn             main-comp
-               :key-fn                str
-               :header                (reagent/as-element (header parameters (:top insets) scroll-y))
-               ;; TODO: https://github.com/status-im/status-mobile/issues/14924
-               :scroll-event-throttle 8
-               :on-scroll             (fn [event] (scroll-handler event initial-y scroll-y))}]]))]))])
+  [params]
+  [:f> f-animated-header-list params])

src/quo2/components/animated_header_flatlist/view.cljs

@@ -65,10 +65,10 @@
       18 ;; ~ 9 is char width, 18 is width used in Figma.
       (* 9 max-line-digits font-scale))))
 
-(defn- native-renderer
+(defn- f-native-renderer
   [{:keys [rows max-lines on-copy-press]
     :or   {max-lines ##Inf}}]
-  (let [font-scale          (:font-scale (rn/use-window-dimensions))
+  (let [font-scale          (:font-scale (rn/get-window))
         total-rows          (count rows)
         number-rows-to-show (min (count rows) max-lines)
         line-number-width   (calc-line-number-width font-scale number-rows-to-show)
@@ -100,7 +100,7 @@
    {:language          language
     :renderer          (fn [^js/Object props]
                          (reagent/as-element
-                          [:f> native-renderer
+                          [:f> f-native-renderer
                            {:rows          (-> props .-rows bean/->clj)
                             :on-copy-press #(when on-copy-press (on-copy-press children))
                             :max-lines     max-lines}]))