how does [:>... ] syntax work exactly?

@bcbradley https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L310

it's a sign that the following object will be interpreted as a React (not reagent) component

it allows you to use native components from RN or from 3rd party js libraries

(def view (r/adapt-react-class (.-View rn)))
[view props ...]

[:> view props ...]

it's not exactly the same because 1 will error at load time if rn.View doesn't exist, whereas 2 will throw at render time

is there a convention for the names?

[:> listView props ...]

kebab-case instead of CamelCase

or what do you mean?

listView is the name of the js function/class

i was having trouble getting a FlatList to work

was looking for guides, tutorials or documentation about reagent but there doesn't seem to be a lot

i saw ([:> ) in the 0.6 patch and wondered if maybe i was just using an outdated way of getting a native react component, but based on what you've told me they are just similar

functionally equivalent yes

try translating the example from RN docs first

1 by 1

so everything that could be snake case is snake case right?

i want to make sure i'm getting that right

the errors are hard to trace

not sure what you mean

js/AppRegistry versus app-registry

https://github.com/drapanjanas/re-natal/blob/master/resources/cljs-reagent6/core.cljs#L13

erm i guess that doesn't make much sense

the JS names are just what they are in JS

it's convenient to def them to clojurescript names using kebab-case

(sorry I meant kebab-case above)

plus reagent automatically translates props like :font-family to "fontFamily"

but you can always use the straight react names as well

hrm so something like this?

(defn app-root []
  (let [quizzes (subscribe [:get-quizzes])]
    (fn []
      [view {:style {:flex-direction "column" :margin 40 :align-items "center"}}
       [text {:style {:font-size 30 :font-weight "100" :margin-bottom 20 :text-align "center"}} "Oi"]
       [button {:title "Press me" :background-color "#555" :on-press #(alert "HELLO!")}]
       [flat-list {:data @quizzes
                   :render-item (fn [{:keys [name]}] [text {} name])}]])))

with (def flat-list (r/adapt-react-class (.-FlatList ReactNative)))

i was working in re-natal but adding the flat-list element there at the bottom causes things to break

maybe i'm not really understanding something i should be

what error do you see?

try using :data (into-array @quizzes)

hold on i'll try compiling it and getting it up i forgot the exact error

srry i don't mean to spam, i'm just new to this and trying to figure it out

does it work if you comment out the flat list?

yup works like a charm

try replacing [text {} name] with [text "asdf"]

does it work then?

nope same error

ah

(r/as-element [text name])

solved ✅

🙂

ayy!

thankyou so much?

can you give me a resource that can help me understand why i needed the r/as-element?

i don't want to get stuck like that again if i can avoid it with a little research

its just been really hard finding any good documentation on this

think about it... the function passed as :render-item is expected to return a React element

but you're returning a PersistentVector

a React element this is not

hrm thats true but i figured reagent would hide that from me

it can't possibly do that unfortunately

it's one of the things about pure-React interop you need to know about Reagent

are there any other things?

unfortunately the docs on Reagent are a bit.. sparse

hm...

yeah no joking

i'm doing freelance work for someone and figured i'd give clojurescript a shot for a mobile app

its been... well atypical of my experience with clojure and clojurescript

unusually difficult

sometimes you need to pass js data structures to RN functions or get JS datastructures back in callbacks

remember to use #js[], #js{}, into-array, goog.obj/get to access/pass the data

you don't need to do that for styles and props

reagent handles this automatically

is there a reason to not use js->clj for this kind of thing?

or clj->js

hm they're not very well liked

have some unexpected caveats

avoid if you can

(but I use them sometimes as well)

i'm out of the loop

what are the caveats, or how do they compare to the 4 methods you gave above?

i'm assuming #js[] is an array and #js{} is an object

i've seen into-array before

goog.object/get ii've not seen

it's for accessing JS objects by key

instead of (.-property obj)

which will fail if you're using adv compilation

hold on a second the basic dot form for field access fails if you are using an advanced compilation?

thats a pretty serious weakness

rule of thumb is to use gobj/get for "data" as opposed to coe, methods and the like

well it'll be minfied away into or something like that

that's part of what adv compilation does

check this repo for usage of RN components in reagent: https://github.com/status-im/status-react

it's a larger app so may be hard to grok sometimes but can still be helpful

yeah anything is helpful thankyou!

i hope i get this done on time

if i have questions i'll ask them here

do ask 🙂

maybe we should start a FAQ

well i guess i have a unique perspective (not all that unique) as a new timer

so i can see how its difficult to get started

whereas some of the more veteran users of cljsrn might not remember

or what they remember might be different or outdated

yeah I know the beginning is rough

let's start a faq

how can i help?

@bcbradley I just started a FAQ in the re-natal wiki: https://github.com/drapanjanas/re-natal/wiki/ClojureScript-React-Native-Reagent-re-natal-FAQ

thanks! should i submit an issue or should i put something here if i think of something that would be good to add to the faq?

i might submit a pull request, but i don't think i'd want to do that unless i already had the answer

i guess one thing that might be nice to add to the faq is an explanation of why cljs->js and js->cljs isn't necessarily a good idea

and when to use the 4 alternatives you gave and why

for instance, you said that you don't have to use them in the properties map because reagent will do it for you'

that would be worth mentioning

i noticed that everything in reagent is snake case

for instance, all the keys to the property maps

i'm assuming that bird beak operator is always followed by snake case symbol too

that's really just a convention

but yeah reagent's camel-casing might be a good addition to the faq

i'm just trying to think of things that caught me up at first

i was new to both reagent and re-natal

feel free to add stuff that you bump into

and i haven't used clojurescript seriously before

i guess maybe i'm biting off a lot

let's make it a bit easier for the next gal or guy

absolutely 🙂

once we add some more stuff, @mfikes might add a link to the FAQ to http://cljsrn.org

Definitely @pesterhazy, if there is content you’d like to see there, just PR and I’ll put it up there.

cool!

Changed the link to the page: https://github.com/drapanjanas/re-natal/wiki/FAQ

@drapanjanas hope you're ok with me adding a FAQ page to the wiki?

@pesterhazy sure thing!

It seems that, when my device goes to sleep and I'm editing a bunch of code and saving several times, figwheel will end up reloading the code as many times as I saved once I wake up the device.

This can be pretty time consuming; has anyone else seen it?

Should've put that in #lein-figwheel