Fork me on GitHub

It was some time ago, but I think I spent a bunch of time trying to do PanResponder, but eventually ended up using react-native-gesture-handler which was better.


(more performant)


ok i've given up. I will claim it's impossible to make it work. I will @raspasov’s suggestion using rn-gesture-handler


@raspasov is there any way you could share working example using pan responder? I am having trouble understanding how to set any handler that has Animated.Event i am having trouble with even most minimalistic examples like this


I’ll try to find it in a bit. It was some time ago. But I believe it was working.


alright here is the basic working example that works with X axis. Basically when u start moving the box it follows the finger after you let go it bounces to the center. Why i didn't come up with this earlier i am surprised myself. I was looking at RN examples all of those used Animated.event which does some bindings under the hood which doesn't play well with cljs. So the way i made it work is

(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})
        pan-responder (rn/PanResponder.create #js {:onStartShouldSetPanResponder (fn [arg] true)
                                                   :onPanResponderMove (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})
    (fn []

      [:> rn/Animated.View (merge (js->clj (.-panHandlers pan-responder))
                                  {:style {:background-color "red"
                                           :height 100
                                           :width 100
                                           :transform [{:translateX bounce-value}]}})])))
i think i already tried something like this before now but i couldn't make it work. This example was born from that comment in following code section made it click. if anyone has better way of doing this i am all ears. hopefully someone will find it useful in the future 😄

👏 4

Glad it’s working! As for Animated.event:

 (def event (.-Animated.event rn/ReactNative))

  {:onScroll (event
              ;scroll-y-anim is a React Animated value
              (clj->js [{:nativeEvent {:contentOffset {:y scroll-y-anim}}}])
              (clj->js {:useNativeDriver true}))}))
Once you have that :onScroll handler, the scroll-y-anim Animated.value will be mutably updated as the scroll view moves across the y-axis.


onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: scrollYAnim } } }] )}