This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-11-27
Channels
- # bangalore-clj (2)
- # beginners (41)
- # cider (14)
- # cljs-dev (12)
- # cljsrn (2)
- # clojure (106)
- # clojure-austin (6)
- # clojure-dev (22)
- # clojure-dusseldorf (1)
- # clojure-france (1)
- # clojure-greece (17)
- # clojure-italy (6)
- # clojure-poland (3)
- # clojure-russia (10)
- # clojure-serbia (5)
- # clojure-spec (24)
- # clojure-uk (100)
- # clojurescript (126)
- # cursive (3)
- # data-science (5)
- # datascript (15)
- # datomic (3)
- # defnpodcast (2)
- # dirac (6)
- # emacs (10)
- # fulcro (121)
- # graphql (30)
- # hoplon (7)
- # jobs (2)
- # leiningen (20)
- # off-topic (14)
- # onyx (3)
- # other-languages (13)
- # pedestal (1)
- # perun (2)
- # planck (41)
- # re-frame (16)
- # reagent (6)
- # reitit (5)
- # remote-jobs (3)
- # ring (1)
- # ring-swagger (17)
- # shadow-cljs (137)
- # spacemacs (6)
- # sql (4)
- # uncomplicate (7)
- # unrepl (56)
- # vim (27)
@hoopes thanks i solved it by clearing data/cache of the expo-app on my phone
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