diff --git a/src/mocks/js_dependencies.cljs b/src/mocks/js_dependencies.cljs index 1a38af70cf..460d01bfc8 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -164,6 +164,7 @@ :PureNativeButton #js {} :TapGestureHandler #js {} :PanGestureHandler #js {} + :TouchableHighlight #js {} :LongPressGestureHandler #js {} :TouchableWithoutFeedback #js {} :createNativeWrapper identity}) diff --git a/src/quo/components/list/item.cljs b/src/quo/components/list/item.cljs index ac4ff3422e..94a5057595 100644 --- a/src/quo/components/list/item.cljs +++ b/src/quo/components/list/item.cljs @@ -2,6 +2,7 @@ (:require [quo.react-native :as rn] [quo.platform :as platform] [quo.haptic :as haptic] + [quo.gesture-handler :as gh] [quo.design-system.spacing :as spacing] [quo.design-system.colors :as colors] [quo.components.text :as text] @@ -153,7 +154,7 @@ :or {subtitle-max-lines 1 theme :main haptic-feedback true - animated true + animated platform/ios? haptic-type :selection}}] (let [theme (if disabled :disabled theme) {:keys [icon-color text-color icon-bg-color @@ -167,7 +168,7 @@ (not on-long-press)) rn/view animated animated/pressable - :else rn/touchable-opacity)] + :else gh/touchable-hightlight)] [rn/view {:background-color (if (and (= accessory :radio) active) active-background passive-background)} diff --git a/src/quo/gesture_handler.cljs b/src/quo/gesture_handler.cljs index 7d6ec96b7f..5dd0f2971f 100644 --- a/src/quo/gesture_handler.cljs +++ b/src/quo/gesture_handler.cljs @@ -2,9 +2,11 @@ (:require [oops.core :refer [oget]] ["react-native-reanimated" :default animated] [reagent.core :as reagent] + [quo.design-system.colors :as colors] ["react-native-gesture-handler" :refer (TapGestureHandler PanGestureHandler LongPressGestureHandler PureNativeButton TouchableWithoutFeedback + TouchableHighlight createNativeWrapper State)])) (def tap-gesture-handler @@ -23,6 +25,13 @@ (def touchable-without-feedback (reagent/adapt-react-class touchable-without-feedback-class)) +(def touchable-hightlight-class (reagent/adapt-react-class TouchableHighlight)) + +(defn touchable-hightlight [props & children] + (into [touchable-hightlight-class (merge {:underlay-color (:interactive-02 @colors/theme)} + props)] + children)) + (def raw-button (reagent/adapt-react-class (createNativeWrapper (.createAnimatedComponent animated PureNativeButton)