Fork me on GitHub
#cljsrn
<
2017-11-27
>
sachinharpalani05:11:12

@hoopes thanks i solved it by clearing data/cache of the expo-app on my phone

sachinharpalani06:11:28

hi im trying to write cljs version of the following drag-n-drop tutorial (https://moduscreate.com/blog/animated_drag_and_drop_with_react_native/). Im facing issue while trying to interop the code for dragging the element which uses PanResponder. This is the js code:

constructor(props){
    super(props);

    this.state = {
        pan     : new Animated.ValueXY()   //Step 1
    };

    this.panResponder = PanResponder.create({    //Step 2
        onStartShouldSetPanResponder : () => true,
        onPanResponderMove           : Animated.event([null,{ //Step 3
            dx : this.state.pan.x,
            dy : this.state.pan.y
        }]),
        onPanResponderRelease        : (e, gesture) => {} //Step 4
    });
}
renderDraggable(){
    return (
        <View style={styles.draggableContainer}>
            <Animated.View 
                {...this.panResponder.panHandlers}                       //Step 1
                style={[this.state.pan.getLayout(), styles.circle]}>     //Step 2
                <Text style={styles.text}>Drag me!</Text>
            </Animated.View>
        </View>
    );
}
This is my cljs code for the above:
(defn render-draggable []
  (let [pan (r/atom (js-obj (.ValueXY Animated)))]
    (r/create-class
     {:component-did-mount #(println "Component mounted.....")
      :component-will-mount (fn []
                              (println "Going to mount")
                              (let [pr (.create PanResponder (clj->js {:onStartShouldSetPanResponder #(do (println "onStartShouldSetPanResponder called") true)
                                                                        :onMoveShouldSetPanResponder #(do (println "onMoveShouldSetPanResponder called") true)
                                                                       :onPanResponderGrant #(do (println "onPanResponderGrant called..") true)
                                                                       :onPanResponderMove #(do (println "onPanResponderMove called..")
                                                                                                (.event Animated [nil , (clj->js {:dx (.-x @pan)
                                                                                                                                  :dy (.-y @pan)})]))
                                                                       :onPanResponderRelease #(do (println "onPanResponderRelease called..") true)
                                                                       :onPanResponderTerminate #(do (println "onPanResponderTerminate called..") true)}))]
                                (reset! pan pr)))
      :display-name "Circle"
      :reagent-render (fn []
                        (println (js->clj @pan))
                        [view {:style {:position "absolute"
                                       :top (- (/ (:height window-size) 2) circle-radius)
                                       :left (- (/ (:width window-size) 2) circle-radius)}}
                         [Animated-view (merge (js->clj (.-panHandlers @pan))
                                               {:style {:background-color "#1abc9c"
                                                        :width (* circle-radius 2)
                                                        :height (* circle-radius 2)
                                                        :border-radius circle-radius}})
                          [text {:style {:margin-top 25
                                         :margin-left 5
                                         :margin-right 5
                                         :text-align "center"
                                         :color "#fff"}}
                           "Drag me !!"]]])})))
The circle doesnt seem to change its coordinates so im assuming either my animated.event is wrong or .ValueXY Animated. Please help