This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-07-10
Channels
- # announcements (3)
- # architecture (54)
- # babashka (11)
- # beginners (12)
- # calva (5)
- # clj-on-windows (1)
- # cljdoc (2)
- # cljs-dev (1)
- # cljsrn (6)
- # clojure (130)
- # clojure-europe (8)
- # clojurescript (21)
- # conjure (23)
- # core-async (4)
- # datomic (7)
- # depstar (77)
- # events (1)
- # fulcro (27)
- # lsp (88)
- # malli (5)
- # meander (1)
- # off-topic (4)
- # pathom (43)
- # polylith (39)
- # re-frame (9)
- # shadow-cljs (14)
- # timbre (3)
- # tools-deps (53)
has anyone ever tested and got these 2 examples working in cljsrn? https://reactnative.dev/docs/0.63/panresponder https://reactnative.dev/docs/animatedvaluexy i am trying and honestly i am pulling my hair out. I haven't moved for 3hours and i've tried everything i can think off. I have no idea why this doesn't work. I cant figure out if it's Animated.event or ValueXY that's causing issues i managed https://gist.github.com/briandunn/d68eb0e135b2459f5a53431d0ed0630f to get working with panHandlers but as soon as i try ValueXY into the code -nothing happens and i can't figure out why can someone help?
(defn dragable-view []
(let [bounce-value (new rn/Animated.ValueXY)
pan-responder (rn/PanResponder.create #js {:onStartShouldSetPanResponder (fn [arg] true)
:onPanResponderGrant (fn []
(.setOffset ^js bounce-value #js {:x (goog-obj/getValueByKeys bounce-value #js ["x" "_value"])
:y (goog-obj/getValueByKeys bounce-value #js ["y" "_value"])}
{:useNativeDriver true}))
:onPanResponderMove (fn [ev state]
(rn/Animated.event #js [nil
{:dx (goog-obj/getValueByKeys bounce-value #js ["x"])
:dy (goog-obj/getValueByKeys bounce-value #js ["y"])}]
{:useNativeDriver true}))
:onPanResponderRelease (fn [args]
(.flattenOffset bounce-value {:useNativeDriver true}))})]
(fn []
[:> rn/Animated.View (merge (js->clj (.-panHandlers pan-responder))
{:style {
:transform [{:translateX (goog-obj/get bounce-value "x")}
{:translateY (goog-obj/get bounce-value "y")}]
:backgroundColor "blue"
:borderRadius 10
:height 50
:width 50}})
[:> rn/Text {} "This is a test"]]) )
)
@lepistane no clue but in your :onPanResponderMove
that looks like some bad interop? mixing a couple CLJS types? missing a couple #js
?
that does solve 'use native driver' warning. nice catch but still same behavior, the box doesn't move
(defn dragable-view []
(let [bounce-value (new rn/Animated.ValueXY)
pan-responder (rn/PanResponder.create #js {:onStartShouldSetPanResponder (fn [arg] true)
:onPanResponderGrant (fn []
(.setOffset ^js bounce-value #js {:x (goog-obj/getValueByKeys bounce-value #js ["x" "_value"])
:y (goog-obj/getValueByKeys bounce-value #js ["y" "_value"])}))
:onPanResponderMove (fn [ev state]
(rn/Animated.event #js [nil
#js {:dx (goog-obj/getValueByKeys bounce-value #js ["x"])
:dy (goog-obj/getValueByKeys bounce-value #js ["y"])}]
#js {:useNativeDriver true}))
:onPanResponderRelease (fn [args]
(.flattenOffset bounce-value))})]
(fn []
[:> rn/Animated.View (merge (js->clj (.-panHandlers pan-responder))
{:style {
:transform [{:translateX (goog-obj/get bounce-value "x")}
{:translateY (goog-obj/get bounce-value "y")}]
:backgroundColor "blue"
:borderRadius 10
:height 50
:width 50}})
[:> rn/Text {} "This is a test"]]) )
)
btw code is recreation of
https://reactnative.dev/docs/0.63/panresponder#example