fix (fn[]) usage in hiccup

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/core.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/quo2/components/animated_header_flatlist/view.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/code/snippet.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}]))