Use touchable opacity on android

status-im · Jun 18, 2020 · ab9eff7 · ab9eff7
1 parent 6f20b98
commit ab9eff7
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 38 deletions.
diff --git a/src/quo/components/animated/pressable.cljs b/src/quo/components/animated/pressable.cljs
@@ -1,6 +1,7 @@
 (ns quo.components.animated.pressable
   (:require [quo.animated :as animated]
             [quo.react :as react]
+            [quo.platform :as platform]
             [quo.gesture-handler :as gesture-handler]))
 
 (def long-press-duration 500)
@@ -22,26 +23,26 @@
 (defmethod type->animation :secondary
   [{:keys [animation]}]
   {:background {:transform [{:scale (animated/mix animation scale-down-small 1)}]
-                :opacity   (animated/mix animation 0.1 opactiy)}
+                :opacity   (animated/mix animation 0 opactiy)}
    :foreground {:transform [{:scale (animated/mix animation 1 scale-down-small)}]
                 :opacity   (animated/mix animation 1 opactiy)}})
 
 (defmethod type->animation :icon
   [{:keys [animation]}]
   {:background {:transform [{:scale (animated/mix animation scale-down-large 1)}]
-                :opacity   (animated/mix animation 0.1 opactiy)}
+                :opacity   (animated/mix animation 0 opactiy)}
    :foreground {:transform [{:scale (animated/mix animation 1 scale-down-large)}]
                 :opacity   (animated/mix animation 1 opactiy)}})
 
 (defmethod type->animation :list-item
   [{:keys [animation]}]
-  {:background {:opacity (animated/mix animation 0.1 opactiy)}
+  {:background {:opacity (animated/mix animation 0 opactiy)}
    :foreground {:transform [{:scale (animated/mix animation 1 scale-down-small)}]
                 :opacity   (animated/mix animation 1 opactiy)}})
 
 (defmethod type->animation :scale
   [{:keys [animation]}]
-  {:background {:opacity 0.1}
+  {:background {:opacity 0}
    :foreground {:transform [{:scale (animated/mix animation 1 scale-down-small)}]
                 :opacity   (animated/mix animation 1 opactiy)}})
 
@@ -75,38 +76,50 @@
             handle-press       (fn [] (when on-press (on-press)))
             handle-press-start (fn [] (when on-press-start (on-press-start)))
             handle-long-press  (fn [] (when on-long-press (on-long-press)))]
-        [:<>
-         (when on-long-press
+        (if platform/android?
+          [gesture-handler/touchable-opacity {:on-press            handle-press
+                                              :on-long-press       handle-long-press
+                                              :on-press-in         handle-press-start
+                                              :disabled            disabled
+                                              :accessibility-label accessibility-label}
+           [animated/view
+            [animated/view {:style (merge absolute-fill
+                                          background
+                                          {:background-color background-color
+                                           :border-radius    border-radius})}]
+            (into [animated/view {:style foreground}]
+                  children)]]
+          [:<>
+           (when on-long-press
+             [animated/code
+              {:exec (animated/on-change long-state
+                                         (animated/cond* (animated/eq long-state (:active gesture-handler/states))
+                                                         [(animated/call* [] handle-long-press)
+                                                          (animated/set state (:undetermined gesture-handler/states))]))}])
            [animated/code
-            {:exec (animated/on-change long-state
-                                       (animated/cond* (animated/eq long-state (:active gesture-handler/states))
-                                                       [(animated/call* [] handle-long-press)
-                                                        ;; (animated/set state (:undetermined gesture-handler/states))
-                                                        ]))}])
-         [animated/code
-          {:key  (str on-press on-long-press on-press-start)
-           :exec (animated/on-change state
-                                     [(animated/cond* (animated/eq state (:began gesture-handler/states))
-                                                      (animated/call* [] handle-press-start))
-                                      (animated/cond* (animated/eq state (:end gesture-handler/states))
-                                                      [(animated/call* [] handle-press)])])}]
-         [gesture-handler/tap-gesture-handler
-          (merge gesture-handler
-                 {:shouldCancelWhenOutside true
-                  :wait-for                long-press-ref
-                  :enabled                 (boolean (and (or on-press on-long-press on-press-start)
-                                                         (not disabled)))})
-          [animated/view {:accessible          true
-                          :accessibility-label accessibility-label}
-           [gesture-handler/long-press-gesture-handler (merge long-gesture-handler
-                                                              {:enabled         (and (not disabled)
-                                                                                     (boolean on-long-press))
-                                                               :min-duration-ms long-press-duration
-                                                               :ref             long-press-ref})
-            [animated/view
-             [animated/view {:style (merge absolute-fill
-                                           background
-                                           {:background-color background-color
-                                            :border-radius    border-radius})}]
-             (into [animated/view {:style foreground}]
-                   children)]]]]]))))
+            {:key  (str on-press on-long-press on-press-start)
+             :exec (animated/on-change state
+                                       [(animated/cond* (animated/eq state (:began gesture-handler/states))
+                                                        (animated/call* [] handle-press-start))
+                                        (animated/cond* (animated/eq state (:end gesture-handler/states))
+                                                        [(animated/call* [] handle-press)])])}]
+           [gesture-handler/tap-gesture-handler
+            (merge gesture-handler
+                   {:shouldCancelWhenOutside true
+                    :wait-for                long-press-ref
+                    :enabled                 (boolean (and (or on-press on-long-press on-press-start)
+                                                           (not disabled)))})
+            [animated/view {:accessible          true
+                            :accessibility-label accessibility-label}
+             [gesture-handler/long-press-gesture-handler (merge long-gesture-handler
+                                                                {:enabled         (and (not disabled)
+                                                                                       (boolean on-long-press))
+                                                                 :min-duration-ms long-press-duration
+                                                                 :ref             long-press-ref})
+              [animated/view
+               [animated/view {:style (merge absolute-fill
+                                             background
+                                             {:background-color background-color
+                                              :border-radius    border-radius})}]
+               (into [animated/view {:style foreground}]
+                     children)]]]]])))))
diff --git a/src/quo/gesture_handler.cljs b/src/quo/gesture_handler.cljs
@@ -5,6 +5,7 @@
             ["react-native-gesture-handler"
              :refer (TapGestureHandler PanGestureHandler LongPressGestureHandler
                                        PureNativeButton TouchableWithoutFeedback
+                                       TouchableOpacity
                                        createNativeWrapper State)]))
 
 (def tap-gesture-handler
@@ -23,6 +24,8 @@
 (def touchable-without-feedback
   (reagent/adapt-react-class touchable-without-feedback-class))
 
+(def touchable-opacity (reagent/adapt-react-class TouchableOpacity))
+
 (def raw-button
   (reagent/adapt-react-class
    (createNativeWrapper (.createAnimatedComponent animated PureNativeButton)