Fork me on GitHub
#cljsrn
<
2017-03-14
>
artemyarulin05:03:00

https://github.com/airbnb/native-navigation Hooray, one more navigation library, the one that was missing! troll

mozinator208:03:24

just wanted to post the same 😄

raspasov09:03:51

did anyone try/get VirtualizedList to work?

raspasov09:03:13

I’m seeing some very weird behavior trying to pass ClojureScript datastructure (a vector) in...

raspasov09:03:33

I *can* pass a JS object in like (cljs->js my-vector)

raspasov09:03:01

but I don’t want to do useless converting… (which can be pretty perf. intensive)

raspasov09:03:43

basically the whole app freezes completely when I try to pass in a cljs vector...

raspasov09:03:48

I’ve never seen anything like that

raspasov09:03:53

with React Native

misha09:03:37

what I did with ListView is - pass a list of ids (+ hashes maybe) as data source, and get full cljs object in render-row component

misha09:03:31

this way you avoid clj->js->clj roundtripping and loss of keyword namespaces on data

raspasov09:03:41

@misha I got it, I had a prop named wrong

raspasov09:03:21

the new VirtualizedList seems much nicer, I gotta say (after I got past the lack of documentation)

raspasov10:03:35

got it to work very nicely

raspasov10:03:04

the new VirtualizedList + Om.next

misha10:03:08

@raspasov what is this for?

(def ^js/window.ReactNative ReactNative js/window.ReactNative)

misha10:03:22

*metadata specifically

raspasov10:03:46

ClojureScript compiler can automatically infer externs

raspasov10:03:59

aka auto-generate them

misha10:03:27

ah, yes, thanks

raspasov10:03:34

I’m doing :advanced with Cljs + React Native 🙂

misha10:03:37

I forgot that future is here already

raspasov10:03:02

yea, it’s very, very nice … once I got into the habit to type hint all interop

raspasov10:03:34

it has solved almost 100% of my extern problems

raspasov10:03:17

the only place where I’ve seen it mess up is inside a core.async (go (loop []…)) - but I’m pretty sure that’s core.async’s fault because it probably drops metadata

raspasov10:03:48

the solution then is to (let [] … outside the go and type-hint there I found

raspasov10:03:47

one peeve I have is when a JS library or React Native itself hands me back some JS object… 😁 😑

raspasov10:03:01

like in this case

raspasov10:03:09

:renderItem (fn [^js/Object js-object] .....

raspasov10:03:55

and you have no choice except to manually pull out your nice immutable data out of the object nightmare 😂

misha10:03:32

so you have to write render-row component to accept obj converted from js one?

misha10:03:49

you give virtualized-list a clj map/vector, and it passes js item to render-row component/fn?

raspasov10:03:12

mm no… I don’t do any clj->js or js->clj conversion at all

raspasov10:03:54

hence the dark JS object magic in create-element-no-auto-js ..

raspasov10:03:59

with the (aset… )

raspasov10:03:10

basically your immutable data is under :data

raspasov10:03:53

this example expects a vector, and in general it makes sense I think, since it should be something sequentially seqable (or I guess it can be an ordered map?)

raspasov10:03:22

basically the react components expect JS object as props (to my understanding)

raspasov10:03:52

the most expensive part in (clj->js …) I believe is when you have a lot of data in there

raspasov10:03:38

so I (dissoc …) :data from the immutable props, turn the result into a js-object, and then “manually” aset data back into it

raspasov10:03:07

6 months ago when I started react native + clojurescript I didn’t realize/know how expensive the clj->js operation and back is… and I was doing it all the time but it really can hurt performance, esp on older devices

misha11:03:54

(let [[item-data _] (.-item js-object)
this?

misha11:03:07

ah, found it in create-element-no-auto-js

misha11:03:27

use goog.obj/set though opieop

raspasov11:03:53

@misha what is exactly the difference? I never quite understood how is (aset …) not good? (I think I read something by David Nolen or someone else a while ago)

artemyarulin11:03:55

oh wow, been using aget for ages for js object access, never knew that it’s wrong

raspasov11:03:08

going through porting my old ListViews to VirtualizedList, one thing that’s explicitly WIP...

raspasov11:03:23

… scrollEventThrottle: 50, // TODO: Android support ..

raspasov11:03:37

so if you need this… you might want to hold off on VirtualizedList… even though I just tried hacking the source and it *does* seem to work

raspasov11:03:13

scrollEventThrottle: 1 <<— seems to work, even on Android, but use with caution, I guess 🙂

raspasov11:03:43

@artemyarulin yea I still don’t quite understand how exactly it’s wrong but I’m going to switch to use goog.object, etc etc 🙂

viveke15:03:55

I am using cljs with react native. I would not like to navigate to another screen on-press. Can please share the peace of example code to do ?