Fork me on GitHub
#cljsrn
<
2017-06-26
>
skapoor07:06:06

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?

skapoor07:06:04

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

pesterhazy10:06:13

@skapoor component-did-mount gets called after the first render, so that would be too late to reset the atom

pesterhazy10:06:03

why not do it in the outer fn? that's its main job, creating resources for the component to use across it's lifecycle

skapoor10:06:04

hi @pesterhazy, I'm doing the initialization in component-will-mount

pesterhazy10:06:14

oh I misread

skapoor10:06:50

np, yes, I can move the definitions out. but the problem appears to be elsewhere..

pesterhazy10:06:57

what kind of issue do you see?

skapoor10:06:11

the handlers don't get called..

pesterhazy10:06:54

a couple comments

pesterhazy10:06:59

use #js instead of clj->js

pesterhazy10:06:41

so it should be more like (merge {:style ...} (.-panHandlers @p))

pesterhazy10:06:10

wait I'm not sure that makes sense

skapoor10:06:41

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

danielneal10:06:44

#TIL about the spread operator 🙂

pesterhazy10:06:46

try my merge but you'll need a js->clj around the second argument

skapoor10:06:22

@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!

skapoor10:06:38

thanks @pesterhazy, it works using (merge (js->clj (.-panHandlers ...)) {:style ...}). note to self: read the docs more carefully 🙂

skapoor10:06:45

have updated the gist..

verma16:06:50

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

manutter5117:06:30

I’m just getting started with re-natal, haven’t tried expo

manutter5117:06:54

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).

manutter5117:06:54

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

manutter5117:06:22

but I’m new at it, I’ll just keep plugging til I get it.

verma17:06:08

yeah, I think with re-natal etc. there’s like this additional command you have to run to use a dependency

verma17:06:19

could be that, not sure, I stopped using re-natal when I discovered expo

verma17:06:37

but don’t think they are that different, quite a lot of overlap

pesterhazy17:06:53

@manutter51 my tips is to take things very slowly at the beginning

pesterhazy17:06:13

make a change, see if it works, if not figure out why not, fix it, commit, repeat

aj taylor17:06:59

@manutter51 Have yo utried re-natal use-component some-library/Component ?

pesterhazy17:06:00

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

manutter5118:06:46

@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!

pesterhazy18:06:28

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?

manutter5118:06:59

Sure, I’ll do that when I get home.