This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-06-26
Channels
- # aws (1)
- # beginners (50)
- # boot (32)
- # chestnut (2)
- # cider (14)
- # clara (23)
- # cljs-dev (131)
- # cljsrn (44)
- # clojure (133)
- # clojure-belgium (3)
- # clojure-denmark (4)
- # clojure-dev (6)
- # clojure-italy (4)
- # clojure-nl (2)
- # clojure-russia (95)
- # clojure-spec (59)
- # clojure-uk (14)
- # clojurescript (157)
- # cursive (26)
- # data-science (1)
- # datomic (160)
- # devops (5)
- # dirac (80)
- # emacs (2)
- # graphql (2)
- # jobs (2)
- # lein-figwheel (1)
- # lumo (9)
- # off-topic (151)
- # onyx (2)
- # parinfer (2)
- # pedestal (5)
- # perun (2)
- # re-frame (60)
- # reagent (3)
- # remote-jobs (1)
- # test-check (3)
- # uncomplicate (11)
- # yada (1)
hi, am trying to use react-native's PanResponder
using reagent's Form-3 components.. I've setup my code similar to https://github.com/facebook/react-native/blob/master/RNTester/js/PanResponderExample.js#L70.. but it doesn't work.
does anybody have a working sample?
here's my code, that doesn't work. I think the problem is in the way I'm setting the pan-handlers
property of the view
https://gist.github.com/saukap/7b5ed374f7aba148815acef4b7dd3feb
@skapoor component-did-mount gets called after the first render, so that would be too late to reset the atom
why not do it in the outer fn? that's its main job, creating resources for the component to use across it's lifecycle
hi @pesterhazy, I'm doing the initialization in component-will-mount
oh I misread
sorry 🙂
what kind of issue do you see?
exceptions?
a couple comments
use #js
instead of clj->js
also are you sure about this line? https://gist.github.com/saukap/7b5ed374f7aba148815acef4b7dd3feb#file-pan-responder-cljs-L35
this looks like it's spreading all the values into top level props: https://github.com/facebook/react-native/blob/master/RNTester/js/PanResponderExample.js#L70
so it should be more like (merge {:style ...} (.-panHandlers @p))
wait I'm not sure that makes sense
from this page, I got the hint that pan-handlers
should be the name of the prop. but it doesn't seem to work 😞
https://github.com/madvas/jsx-to-clojurescript
@skapoor I think they get "spread" into top-level props: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes
#TIL about the spread operator 🙂
try my merge but you'll need a js->clj
around the second argument
@pesterhazy I see what you mean.. the sample I linked also does that. doh, I missed that. I'll try this and let you know what happens!
thanks @pesterhazy, it works using (merge (js->clj (.-panHandlers ...)) {:style ...})
. note to self: read the docs more carefully 🙂
hey, what’s everyone’s RN development setup here like? Are you using re-natal, expo? I just started with some RN development and was wondering what everyone else is doing
I’m just getting started with re-natal, haven’t tried expo
I had a pretty easy time getting the out-of-the-box hello-world-y project running in ios and android simulators (once I figured out you need to start the Android simulator first, then run react-native).
Unfortunately I npm install
-ed a couple additional libraries (nativebase and react-native-svg) and I’m currently in redbox dependency hell trying to get the ios app running
but I’m new at it, I’ll just keep plugging til I get it.
yeah, I think with re-natal etc. there’s like this additional command you have to run to use a dependency
@manutter51 my tips is to take things very slowly at the beginning
make a change, see if it works, if not figure out why not, fix it, commit, repeat
@manutter51 Have yo utried re-natal use-component some-library/Component
?
if you're adding libraries to re-natal you need to run re-natal use-component
: https://github.com/drapanjanas/re-natal#using-external-react-native-components
@aj @pesterhazy That’s probably what I’m missing. I saw the docs for that but I wasn’t thinking of svg as a component per se, so I didn’t apply it. I’ll try it when I get home. Thanks!
actually I noticed that too. The re-natal docs is misleading here. You need to run use-component
for any regular javascript libraries, like if you include moment.js
. It doesn't matter if it's a component or any other dependency picked up by the react-native packager. If you want to "require" it from figwheel, you'll need to register it using use-component
. Maybe you could submit a PR to fix this in the README?
Sure, I’ll do that when I get home.