Fork me on GitHub
#cljsrn
<
2021-07-10
>
lepistane19:07:56

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"]])  )

  )

thheller19:07:06

@lepistane no clue but in your :onPanResponderMove that looks like some bad interop? mixing a couple CLJS types? missing a couple #js?

thheller19:07:43

{:useNativeDriver true} likely should be a js obj? same as {:dx ...}?

lepistane19:07:21

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

thheller19:07:41

sorry not a clue what any of this is supposed to do

lepistane19:07:08

no worries, thank you for taking a look at least