Skip to content

Instantly share code, notes, and snippets.

@StankovicMarko
Created July 12, 2021 16:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save StankovicMarko/260deed5f57e0bcc15d95444cc5ac5a3 to your computer and use it in GitHub Desktop.
Save StankovicMarko/260deed5f57e0bcc15d95444cc5ac5a3 to your computer and use it in GitHub Desktop.
implementation of react-native-gesture-handler in clojurescript and react native (cljsrn) https://snack.expo.io/@adamgrzybowski/react-native-gesture-handler-demo
;; It's very important to update main activity as per https://docs.swmansion.com/react-native-gesture-handler/docs/#updating-mainactivityjava
;; otherwise this example won't work
(ns test.app
(:require ["react-native-gesture-handler" :as gesture]
["react-native-reanimated" :as re-animated]
[shadow.react-native :refer (render-root)]
["react-native" :as rn]
[reagent.core :as r]
[goog.object :as goog-obj]))
(defn gget-in [m ks]
(goog-obj/getValueByKeys m (clj->js (map name ks))))
(defn gkeys [obj]
(goog-obj/getKeys obj))
(defn draggable-view-gesture []
(let [x (new rn/Animated.Value 0)
y (new rn/Animated.Value 0)
last-offset (new rn/Animated.ValueXY #js {:x 0
:y 0})
gesture-handler (rn/Animated.event (clj->js [{:nativeEvent {:translationX x
:translationY y}}])
(clj->js {:useNativeDriver true}))
state-handler (fn [event]
(if (= (gget-in event [:nativeEvent :oldState])
gesture/State.ACTIVE)
(do
(.setValue ^js last-offset #js {:x (+ (gget-in last-offset [:x :_value]) (gget-in event [:nativeEvent :translationX]))
:y (+ (gget-in last-offset [:y :_value]) (gget-in event [:nativeEvent :translationY]))})
(.setOffset ^js x (gget-in last-offset [:x :_value]))
(.setOffset ^js y (gget-in last-offset [:y :_value]))
(.setValue ^js x 0)
(.setValue ^js y 0))))]
(fn []
[:> gesture/PanGestureHandler {:maxPointers 1
:onGestureEvent gesture-handler
:onHandlerStateChange state-handler}
[:> rn/Animated.View {:style {:background-color "blue"
:height 100
:width 100
:transform [{:translateX x}
{:translateY y}]}}]])))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment