Skip to content

Instantly share code, notes, and snippets.

@StankovicMarko
Last active July 12, 2021 12:19
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/eff7726693bc10b714fe403519437d4a to your computer and use it in GitHub Desktop.
Save StankovicMarko/eff7726693bc10b714fe403519437d4a to your computer and use it in GitHub Desktop.
react native pan responder example in clojurescript https://reactnative.dev/docs/panresponder#example
(defn real-draggable-view []
(let [pan (new rn/Animated.ValueXY #js {:x 0
:y 0})
pan-responder (rn/PanResponder.create #js {:onStartShouldSetPanResponder (fn [arg] true)
:onPanResponderGrant (fn [e state]
(.setOffset ^js pan #js {:x (goog-obj/getValueByKeys pan #js ["x" "_value"])
:y (goog-obj/getValueByKeys pan #js ["y" "_value"])}))
:onPanResponderMove (fn [e state]
(.setValue ^js pan #js {:x (goog-obj/get state "dx")
:y (goog-obj/get state "dy")}))
:onPanResponderRelease (fn [e state]
(.flattenOffset ^js pan))})]
(fn []
[:> rn/Animated.View (merge (js->clj (.-panHandlers pan-responder))
{:style {:background-color "red"
:height 100
:width 100
:transform [{:translateX (goog-obj/get pan "x")}
{:translateY (goog-obj/get pan "y")}]}})])))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment