Enable functional components by default (#18820)

* enable functional components by default

* e2e: updated counter component locator

---------

Co-authored-by: Yevheniia Berdnyk <ie.berdnyk@gmail.com>

src/legacy/status_im/bottom_sheet/styles.cljs

@@ -16,12 +16,14 @@
    :align-self       :center})
 
 (def backdrop
-  {:position         :absolute
-   :left             0
-   :right            0
-   :bottom           0
-   :top              0
-   :background-color colors/neutral-100})
+  {:position :absolute
+   :left     0
+   :right    0
+   :bottom   0
+   :top      0})
+
+(def backdrop-color
+  {:background-color colors/neutral-100})
 
 (def container
   {:position :absolute

src/legacy/status_im/bottom_sheet/view.cljs

@@ -207,11 +207,13 @@
                            [@show-bottom-sheet? @expanded? @gesture-running?])
 
          [:<>
-          [rn/touchable-without-feedback {:on-press (when backdrop-dismiss? close-bottom-sheet)}
+          [rn/pressable
+           {:on-press (when backdrop-dismiss? close-bottom-sheet)
+            :style    styles/backdrop}
            [reanimated/view
             {:style (reanimated/apply-animations-to-style
                      {:opacity bg-opacity}
-                     styles/backdrop)}]]
+                     styles/backdrop-color)}]]
           (cond->> [reanimated/view
                     {:style (reanimated/apply-animations-to-style
                              {:transform [{:translateY translate-y}]}

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

@@ -1,13 +1,12 @@
 (ns legacy.status-im.ui.components.keyboard-avoid-presentation
   (:require
     [legacy.status-im.ui.components.react :as react]
+    [react-native.utils :as rn.utils]
     [reagent.core :as reagent]))
 
 (defn keyboard-avoiding-view
-  []
-  (let [this     (reagent/current-component)
-        props    (reagent/props this)
-        children (reagent/children this)]
+  [& argv]
+  (let [[props children] (rn.utils/get-props-and-children argv)]
     (reagent/as-element
      (into [react/keyboard-avoiding-view
             (update props

src/legacy/status_im/ui/components/list/footer.cljs

@@ -3,16 +3,16 @@
     [legacy.status-im.ui.components.spacing :as spacing]
     [legacy.status-im.ui.components.text :as text]
     [react-native.core :as rn]
-    [reagent.core :as reagent]))
+    [react-native.utils :as rn.utils]))
 
 (defn footer
-  []
-  (let [this (reagent/current-component)
+  [& argv]
+  (let [[props children] (rn.utils/get-props-and-children argv)
         {:keys [color]
          :or   {color :secondary}}
-        (reagent/props this)]
+        props]
     [rn/view
      {:style (merge (:base spacing/padding-horizontal)
                     (:small spacing/padding-vertical))}
      (into [text/text {:color color}]
-           (reagent/children this))]))
+           children)]))

src/legacy/status_im/ui/components/list/header.cljs

@@ -3,18 +3,18 @@
     [legacy.status-im.ui.components.spacing :as spacing]
     [legacy.status-im.ui.components.text :as text]
     [react-native.core :as rn]
-    [reagent.core :as reagent]))
+    [react-native.utils :as rn.utils]))
 
 (defn header
-  []
-  (let [this (reagent/current-component)
+  [& argv]
+  (let [[props children] (rn.utils/get-props-and-children argv)
         {:keys [color]
          :or   {color :secondary}}
-        (reagent/props this)]
+        props]
     [rn/view
      {:style (merge (:base spacing/padding-horizontal)
                     (:x-tiny spacing/padding-vertical))}
      (into [text/text
             {:color color
              :style {:margin-top 10}}]
-           (reagent/children this))]))
+           children)]))

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

@@ -3,7 +3,7 @@
     [legacy.status-im.ui.components.colors :as colors]
     [legacy.status-im.ui.components.typography :as typography]
     [react-native.core :as rn]
-    [reagent.core :as reagent]))
+    [react-native.utils :as rn.utils]))
 
 (defn text-style
   [{:keys [size align weight monospace color style]}]
@@ -40,11 +40,9 @@
          style))
 
 (defn text
-  []
-  (let [this      (reagent/current-component)
-        props     (reagent/props this)
-        component rn/text]
-    (into [component
+  [& argv]
+  (let [[props children] (rn.utils/get-props-and-children argv)]
+    (into [rn/text
            (merge {:style (text-style props)}
                   (dissoc props
                    :style
@@ -53,4 +51,4 @@
                    :color
                    :align
                    :animated?))]
-          (reagent/children this))))
+          children)))

src/quo/components/common/no_flicker_image.cljs

@@ -5,35 +5,32 @@
     [react-native.platform :as platform]
     [reagent.core :as reagent]))
 
-
 (def cached-sources (js/Set. (js/Array.)))
 
 (defn- caching-image
-  [_ on-source-loaded]
-  (let [this (reagent/current-component)]
-    (reagent/create-class
-     {:component-did-update
-      (fn []
-        (let [source (-> this reagent/props :source)]
-          (when (oops/ocall cached-sources "has" source)
-            (on-source-loaded source))))
-      :reagent-render
-      (fn [{:keys [source] :as props}]
-        [rn/image
-         (assoc props
-                ;; hide the cache image under the real one
-                ;; have to render it for the on-load event
-                :style {:width    1
-                        :height   1
-                        :left     "50%"
-                        :top      "50%"
-                        :position :absolute}
-                :on-load
-                (fn [_]
-                  (when-not (oops/ocall cached-sources "has" source)
-                    (oops/ocall cached-sources "add" source)
-                    (on-source-loaded source)))
-                :on-error js/console.error)])})))
+  [{:keys [source]} on-source-loaded]
+  (reagent/create-class
+   {:component-did-update
+    (fn []
+      (when (oops/ocall cached-sources "has" source)
+        (on-source-loaded source)))
+    :reagent-render
+    (fn [{:keys [source] :as props}]
+      [rn/image
+       (assoc props
+              ;; hide the cache image under the real one
+              ;; have to render it for the on-load event
+              :style {:width    1
+                      :height   1
+                      :left     "50%"
+                      :top      "50%"
+                      :position :absolute}
+              :on-load
+              (fn [_]
+                (when-not (oops/ocall cached-sources "has" source)
+                  (oops/ocall cached-sources "add" source)
+                  (on-source-loaded source)))
+              :on-error js/console.error)])}))
 
 (defn image
   "Same as rn/image but cache the image source in a js/Set, so the image won't

src/quo/components/markdown/text.cljs

@@ -4,7 +4,7 @@
     [quo.foundations.typography :as typography]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [reagent.core :as reagent]))
+    [react-native.utils :as rn.utils]))
 
 (defn text-style
   [{:keys [size align weight style theme]}]
@@ -41,8 +41,6 @@
 (def ^:private text-view (quo.theme/with-theme text-view-internal))
 
 (defn text
-  []
-  (let [this     (reagent/current-component)
-        props    (reagent/props this)
-        children (reagent/children this)]
+  [& argv]
+  (let [[props children] (rn.utils/get-props-and-children argv)]
     (into [text-view props] children)))

src/quo/components/navigation/bottom_nav_tab/view.cljs

@@ -46,7 +46,7 @@
                                    {:width         90
                                     :height        40
                                     :border-radius 10})]
-    [rn/touchable-without-feedback
+    [rn/pressable
      {:test-ID                 test-ID
       :allow-multiple-presses? true
       :on-press                on-press

src/quo/components/wallet/network_routing/view.cljs

@@ -42,7 +42,7 @@
                                                                 [0 total-amount]
                                                                 [0 total-width])
             width->amount               #(/ (* % total-amount) total-width)]
-        [rn/touchable-without-feedback
+        [rn/pressable
          {:on-press (fn []
                       (when (and (not @detecting-gesture?) allow-press?)
                         (on-press)

src/react_native/core.cljs

@@ -53,8 +53,9 @@
   (into [touchable-highlight-class (utils/custom-pressable-props props)] children))
 
 (defn touchable-without-feedback
-  [props & children]
-  (into [touchable-without-feedback-class (utils/custom-pressable-props props)] children))
+  {:deprecated "pressable should be used instead"}
+  [props child]
+  [touchable-without-feedback-class (utils/custom-pressable-props props) child])
 
 (def flat-list flat-list/flat-list)
 

src/react_native/reanimated.cljs

@@ -22,8 +22,8 @@
                      useAnimatedScrollHandler
                      runOnJS)]
     ["react-native-redash" :refer (withPause)]
-    [oops.core :as oops]
     [react-native.flat-list :as rn-flat-list]
+    [react-native.utils :as rn.utils]
     [reagent.core :as reagent]
     [utils.transforms :as transforms]
     [utils.worklets.core :as worklets.core]))
@@ -43,16 +43,10 @@
 (def ^:private view* (reagent/adapt-react-class (.-View reanimated)))
 
 (defn view
-  []
-  (let [current-component (reagent/current-component)
-        reagent-props     (reagent/props current-component)
-        children          (reagent/children current-component)
-        updated-props     (update reagent-props :style transforms/styles-with-vectors)
-        ;; Some components add JS props to their children (such as TouchableWithoutFeedback), to make
-        ;; this component fully compatible we are passing those props to the inner component (`view*`).
-        external-props    (oops/gobj-get current-component "props")
-        all-props         (transforms/copy-js-obj-to-map external-props updated-props #(not= % "argv"))]
-    (into [view* all-props] children)))
+  [& argv]
+  (let [[reagent-props children] (rn.utils/get-props-and-children argv)
+        updated-props            (update reagent-props :style transforms/styles-with-vectors)]
+    (into [view* updated-props] children)))
 
 (def text (reagent/adapt-react-class (.-Text reanimated)))
 (def scroll-view (reagent/adapt-react-class (.-ScrollView reanimated)))

src/react_native/utils.cljs

@@ -30,3 +30,10 @@
       on-press
       (assoc :on-press (throttled-on-press props throttle-id)
              :ref      (wrapped-ref props throttle-id)))))
+
+(defn get-props-and-children
+  [argv]
+  (let [first-child (first argv)
+        props       (when (map? first-child) first-child)
+        children    (if props (rest argv) argv)]
+    [props children]))

src/status_im/common/bottom_sheet/view.cljs

@@ -94,7 +94,9 @@
                                   true))
         [rn/view {:style {:flex 1}}
          ;; backdrop
-         [rn/touchable-without-feedback {:on-press #(rf/dispatch [:hide-bottom-sheet])}
+         [rn/pressable
+          {:on-press #(rf/dispatch [:hide-bottom-sheet])
+           :style    {:flex 1}}
           [reanimated/view
            {:style (reanimated/apply-animations-to-style
                     {:opacity bg-opacity}

src/status_im/contexts/syncing/scan_sync_code/view.cljs

@@ -203,7 +203,7 @@
 
 (defn- f-bottom-view
   [insets translate-y]
-  [rn/touchable-without-feedback
+  [rn/pressable
    {:on-press #(js/alert "Yet to be implemented")}
    [reanimated/view
     {:style (style/bottom-container translate-y (:bottom insets))}

src/status_im/core.cljs

@@ -12,6 +12,7 @@
     [react-native.core :as rn]
     [react-native.platform :as platform]
     [react-native.shake :as react-native-shake]
+    [reagent.core]
     [reagent.impl.batching :as batching]
     [status-im.common.log :as logging]
     [taoensso.timbre :as log]
@@ -32,6 +33,8 @@
 ;;;; re-frame RN setup
 (set! interop/next-tick js/setTimeout)
 (set! batching/fake-raf #(js/setTimeout % 0))
+(def functional-compiler (reagent.core/create-compiler {:function-components true}))
+(reagent.core/set-default-compiler! functional-compiler)
 
 (def adjust-resize 16)
 

src/utils/transforms.cljs

@@ -49,14 +49,3 @@
         (map? x)                 (reduce-kv convert-keys-and-values #js {} x)
         (vector? x)              (to-array (mapv styles-with-vectors x))
         :else                    (clj->js x)))
-
-(defn copy-js-obj-to-map
-  "Copy `obj` keys and values into `m` if `(pred obj-key)` is satisfied."
-  [obj m pred]
-  (persistent!
-   (reduce (fn [acc js-prop]
-             (if (pred js-prop)
-               (assoc! acc js-prop (oops/gobj-get obj js-prop))
-               acc))
-           (transient m)
-           (js-keys obj))))

test/appium/views/base_view.py

@@ -41,7 +41,7 @@ class AllowButton(Button):
 class UnreadMessagesCountText(Text):
     def __init__(self, driver, parent_locator: str):
         super().__init__(driver,
-                         xpath="%s/*[@resource-id='counter-component']/android.widget.TextView" % parent_locator)
+                         xpath="%s//*[@resource-id='counter-component']/android.widget.TextView" % parent_locator)
 
 
 class TabButton(Button):