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)

raspasov11:03:13

@misha thanks! šŸ™‚

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 ?