Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2021-07-12

Channels

#cljsrn
<
2021-07-12
>
lepistane07:07:23

I've tried this but it doesn't work. 

`(def event rn/Animated.event)

(defn draggable-view []
  (let [bounce-value (new rn/Animated.Value 0)
        on-press #(do (prn "AAA")
                      (-> bounce-value
                          (rn/Animated.spring #js {:toValue 125
                                                   :friction 1
                                                   :useNativeDriver true})
                          (.start)))
        pan-responder (rn/PanResponder.create #js {:onStartShouldSetPanResponder (fn [arg] true)
                                                   :onPanResponderMove (event
                                                                        (clj->js [{:nativeEvent {:contentOffset {:x bounce-value}}}])
                                                                        (clj->js {:useNativeDriver true}))

                                                   #_(fn [e state]
                                                       (.setValue ^js bounce-value (goog-obj/get state "dx")))
                                                   :onPanResponderRelease (fn [e state]
                                                                            (-> bounce-value
                                                                                (rn/Animated.spring #js {:toValue 0
                                                                                                         :friction 1
                                                                                                         :useNativeDriver true})
                                                                                (.start)))})]
    (fn []

      [:> rn/Animated.View (merge (js->clj (.-panHandlers pan-responder))
                                  {:style {:background-color "red"
                                           :height 100
                                           :width 100
                                           :transform [{:translateX bounce-value}]}})])))
and it gives me TypeError: config.onPanResponderMove is not a function. (In 'config.onPanResponderMove(event, gestureState)', 'config.onPanResponderMove' is an instance of AnimatedEvent) am i doing something wrong? @raspasov

raspasov07:07:30

Hm, let me see.

raspasov08:07:15

Just got to the same error that you got!

raspasov08:07:15

So we’re in the same spot 🙂 Let me see what could be the problem here… Again, I would say PanResponder is kinda irrelevant if you get reanimated going. But I’m curious what’s the reason for this error.

lepistane08:07:27

makes sense but some of the examples in react native gesture handler do use animated.event https://snack.expo.io/@adamgrzybowski/react-native-gesture-handler-demo and i failed to recreate them as well that's why i went back and figure out animated.event and move from there. Since i failed i got workaround working and that's what i shared

lepistane08:07:58

if u crack it please share, thank you!

raspasov08:07:16

Understood… It’s strange because I do have “event” working for onScroll.

raspasov08:07:55

Ok first thing: 

:onPanResponderMove          (fn [evt gesture-state]
                              (timbre/info "Move!!!")
                              (timbre/spy (js->clj gesture-state)))
This works.

raspasov08:07:19

Animated.event is weird… It’s basically a helper: https://reactnative.dev/docs/animated#event

raspasov08:07:35

“Takes an array of mappings and extracts values from each arg accordingly, then calls `setValue` on the mapped outputs. e.g.”

raspasov08:07:02

Pretty convoluted helper… might as well not use it…

lepistane08:07:10

yep oki so at least we have conclusion to just use setvalue manually as described https://clojurians.slack.com/archives/C0E1SN0NM/p1626040969278900

raspasov08:07:35

(fn [evt gesture-state]
                              (let [dx (.-dx gesture-state)
                                    dy (.-dy gesture-state)]
                               (timbre/spy [dx dy])
                               (.setValue (.-x pan-current) dx)
                               (.setValue (.-y pan-current) dy)))

raspasov08:07:34

Yes! I now recall having some weird issues with this as well years ago. No idea why it “works” with :onScroll …

raspasov09:07:41

Screen Shot 2021-07-12 at 2.01.15 AM.png

raspasov09:07:33

^^ I have had those kinds of events working for a very long time via :onScroll with the weird helper… Very strange. Perhaps something about that nil first parameter in onResponderMove throws it off but I could be wrong.

lepistane09:07:04

i've tried using not having first argument nil and using that native event without luck 🙂

raspasov09:07:12

Yeah there’s something whack about it… I wonder if this will even work from JavaScript.

raspasov09:07:47

One of my guesses is that this simply hasn’t been fixed for PanResponder…

raspasov09:07:28

Because not many people use PanResponder directly I believe.

raspasov09:07:59

Yeahhhh… “This is a current limitation of native Animated.event. It doesn’t work with PanResponder because it is implemented in JavaScript.”

raspasov09:07:04

And I think they never fixed it for PanResponder, because you can use things like “reanimated”… but the “Animated.event magic trick helper” should work for Animated.ScrollView and other components …

lepistane09:07:40

wait if that's the case then their examples wouldn't work either (pan responder with animated.event )https://reactnative.dev/docs/panresponder#example

raspasov09:07:24

That’s right… and it actually does. Well I give up! 🙂 It works without the magic…

lepistane11:07:49

i am sorry to bother you again. How did u exactly make react native gesture handler work? 

(defn draggable-view-gesture []
  (let [x (new rn/Animated.Value 0)]
    (fn []
      [:> rn/View {:flex 1
                   :justify-content :center}
       [:> gesture/PanGestureHandler {:maxPointers 1
                                      :onGestureEvent #(prn "AAA")}
        [:> rn/Animated.View {:style {:background-color "blue"
                                      :height 100
                                      :width 100
                                      :transform [{:translateX x}]}}]]])))
onGestureEvent never fires. installation process was 
npm install --save react-native-gesture-handler
first require is 
["react-native-gesture-handler" :as gesture]
cli version 2.0.1 rn version 0.64

lepistane14:07:04

i tried with different versions version of rn and gesture-handler 

"react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.8.0",
    "react-native": "0.62.2",
This project has react navigation working (which uses gesture-handler) and still onGestureEvent didn't trigger and 
"react-native": "0.64.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.2.0"
same behavior. I am testing only android emulator.

lepistane14:07:15

solved react native gesture handler

lepistane17:07:15

(defn draggable-view []
  (let [bounce-value (new rn/Animated.Value 0)
        on-press #(do (prn "AAA")
                      (-> bounce-value
                          (rn/Animated.spring #js {:toValue 125
                                                   :friction 1
                                                   :useNativeDriver true})
                          (.start)))
        pan-responder (rn/PanResponder.create #js {:onStartShouldSetPanResponder (fn [arg] true)
                                                   :onPanResponderMove #_(fn [e state]
                                                                         (.setValue ^js bounce-value (goog-obj/get state "dx")))
                                                   (rn/Animated.event (clj->js [nil
                                                                                {:dx bounce-value}])
                                                                      (clj->js {:useNativeDriver false}))
                                                   :onPanResponderRelease (fn [e state]
                                                                            (-> bounce-value
                                                                                (rn/Animated.spring #js {:toValue 0
                                                                                                         :friction 1
                                                                                                         :useNativeDriver false})
                                                                                (.start)))})]
    (fn []

      [:> rn/Animated.View (merge (js->clj (.-panHandlers pan-responder))
                                  {:style {:background-color "red"
                                           :height 100
                                           :width 100
                                           :transform [{:translateX bounce-value}]}})])))
this working example that's using animated.event if u set native driver true you need to pay attention to what values are in the 'event'. if u set {:useNativeDriver true} this will break how we saw earlier. Native driver changes this type of this fn call and it isn't compatible with panResponder if that is false you can use what ever value u want. (clj->js) is quite important here what i had before was #js which is shallow people smarter than me figured out how to use this. https://lwhorton.github.io/2018/10/20/clojurescript-interop-with-javascript.html https://github.com/status-im/status-react/blob/5f719ac95b8776d510ed809b06bbc959eab3b9f3/src/quo/animated.cljs#L101

👍 2
lepistane16:07:54

fully working example of react-native-gesture-handler draggable view (including animated.event) that was described https://snack.expo.io/@adamgrzybowski/react-native-gesture-handler-demo done in plain cljsrn (no expo) https://gist.github.com/StankovicMarko/260deed5f57e0bcc15d95444cc5ac5a3

lepistane17:07:15
replied to a thread:Hm, let me see.

(defn draggable-view []
  (let [bounce-value (new rn/Animated.Value 0)
        on-press #(do (prn "AAA")
                      (-> bounce-value
                          (rn/Animated.spring #js {:toValue 125
                                                   :friction 1
                                                   :useNativeDriver true})
                          (.start)))
        pan-responder (rn/PanResponder.create #js {:onStartShouldSetPanResponder (fn [arg] true)
                                                   :onPanResponderMove #_(fn [e state]
                                                                         (.setValue ^js bounce-value (goog-obj/get state "dx")))
                                                   (rn/Animated.event (clj->js [nil
                                                                                {:dx bounce-value}])
                                                                      (clj->js {:useNativeDriver false}))
                                                   :onPanResponderRelease (fn [e state]
                                                                            (-> bounce-value
                                                                                (rn/Animated.spring #js {:toValue 0
                                                                                                         :friction 1
                                                                                                         :useNativeDriver false})
                                                                                (.start)))})]
    (fn []

      [:> rn/Animated.View (merge (js->clj (.-panHandlers pan-responder))
                                  {:style {:background-color "red"
                                           :height 100
                                           :width 100
                                           :transform [{:translateX bounce-value}]}})])))
this working example that's using animated.event if u set native driver true you need to pay attention to what values are in the 'event'. if u set {:useNativeDriver true} this will break how we saw earlier. Native driver changes this type of this fn call and it isn't compatible with panResponder if that is false you can use what ever value u want. (clj->js) is quite important here what i had before was #js which is shallow people smarter than me figured out how to use this. https://lwhorton.github.io/2018/10/20/clojurescript-interop-with-javascript.html https://github.com/status-im/status-react/blob/5f719ac95b8776d510ed809b06bbc959eab3b9f3/src/quo/animated.cljs#L101

👍 2