[#16322] Add carousel tap gesture

* Add tap gesture to carousel

* Updates uses of carousel

* Gestures only detected on carousel content instead of full screen on Android

src/status_im2/contexts/onboarding/common/background/view.cljs

@@ -79,7 +79,7 @@
        :paused?           paused?
        :header-text       header-text
        :header-background true
-       :swipeable?        true
+       :gesture           :swipeable
        :background        [background-image (* 4 window-width)]}]
      (when dark-overlay?
        [blur/view

src/status_im2/contexts/onboarding/common/carousel/animation.cljs

@@ -95,18 +95,21 @@
 
 (defn drag-gesture
   [progress paused]
-  (->
+  (-> (gesture/gesture-pan)
-    (gesture/gesture-pan)
+      (gesture/max-pointers 1)
-    (gesture/enabled true)
+      (gesture/on-finalize
-    (gesture/max-pointers 1)
+       (fn [event]
-    (gesture/on-finalize
+         (let [next?     (< (oops/oget event "translationX") (- drag-limit))
-     (fn [event]
+               previous? (> (oops/oget event "translationX") drag-limit)]
-       (let [next?     (< (oops/oget event "translationX") (- drag-limit))
+           (when next?
-             previous? (> (oops/oget event "translationX") drag-limit)]
+             (update-progress progress paused (get-next-progress progress)))
-         (when next?
+           (when previous?
-           (update-progress progress paused (get-next-progress progress)))
+             (update-progress progress paused (get-previous-progress progress))))))))
-         (when previous?
+
-           (update-progress progress paused (get-previous-progress progress))))))))
+(defn tap-gesture
+  [progress paused]
+  (-> (gesture/gesture-tap)
+      (gesture/on-end #(update-progress progress paused (get-next-progress progress)))))
 
 (defn carousel-left-position
   [window-width animate? progress]

src/status_im2/contexts/onboarding/common/carousel/style.cljs

@@ -63,14 +63,9 @@
 
 (defn carousel-container
   [left animate?]
-  (let [normal-style {:position       :absolute
+  (cond->> {:position       :absolute
-                      :right          0
+            :right          0
-                      :top            0
+            :top            0
-                      :bottom         0
+            :flex-direction :row
-                      :flex-direction :row
+            :left           left}
-                      :left           left}]
+    animate? (reanimated/apply-animations-to-style {:left left})))
-    (if animate?
-      (reanimated/apply-animations-to-style
-       {:left left}
-       normal-style)
-      normal-style)))

src/status_im2/contexts/onboarding/common/carousel/view.cljs

@@ -50,15 +50,18 @@
        :progress-bar-width progress-bar-width}]]))
 
 (defn f-view
-  [{:keys [animate? progress paused? header-text background header-background swipeable?]}]
+  [{:keys [animate? progress paused? header-text background header-background gesture]}]
   (let [window-width       (rf/sub [:dimensions/window-width])
         status-bar-height  (:status-bar-height @navigation/constants)
         progress-bar-width (- window-width 40)
         carousel-left      (animation/carousel-left-position window-width animate? progress)
-        container-view     (if animate? reanimated/view rn/view)]
+        container-view     (if animate? reanimated/view rn/view)
+        identified-gesture (case gesture
+                             :swipeable (animation/drag-gesture progress paused?)
+                             :tappable  (animation/tap-gesture progress paused?)
+                             nil)]
     [:<>
-     [gesture/gesture-detector
+     [gesture/gesture-detector {:gesture identified-gesture}
-      {:gesture (when swipeable? (animation/drag-gesture progress paused?))}
       [container-view {:style (style/carousel-container carousel-left animate?)}
        (for [index (range 2)]
          ^{:key index}
@@ -68,7 +71,7 @@
            :index             index
            :header-text       header-text
            :header-background header-background}
-          (when background background)])]]
+          background])]]
      [rn/view
       {:style (style/progress-bar-container
                progress-bar-width

src/status_im2/contexts/onboarding/identifiers/view.cljs

@@ -41,7 +41,7 @@
        {:animate?    true
         :progress    progress
         :paused?     paused?
-        :swipeable?  false
+        :gesture     :tappable
         :header-text header-text}]
       [rn/view {:style style/content-container}
        [quo/profile-card