Fork me on GitHub
#cljsrn
<
2016-04-14
>
frank00:04:40

actually, can't seem to get luno running

frank00:04:53

anyone know of any other example apps that work on android?

alwx08:04:01

@frank: I am the developer of Luno, and I will try to check it today

seanhess14:04:07

@frank: cool, thanks! @alwx - I’m very confused about making custom components. Reagent says to do it a certain way, but that doesn’t seem to work. In Luno, you pass a “wrapper function” in from the top level down to your components. Why? Why doesn’t reagent’s recommended method work?

seanhess14:04:04

Hmm… and it looks like your scenes are the same as reagents recommendation: a function returning a vector, called as a vector.

andre.richards15:04:42

@seanhess the standard reagent method works when using RN.

andre.richards15:04:57

I see from your example that you are adding a [text] directly to [touchable-highlight]

andre.richards15:04:44

I have found that the RN components are sometimes very specific about what you can add to the native components

andre.richards15:04:36

I would try to add a [view] to [touchable-highlight] first, then add [text] to that

andre.richards15:04:33

[touchable-highlight [view [text "bob"]]]

seanhess16:04:18

@andre.richards: I’ll try that. But I copied what I have from the template. It has a text right inside the touchable-highlight. The only thing I did was try to move that text into another function / component. But otherwise it’s the lein template unchanged. See https://github.com/drapanjanas/re-natal/blob/master/resources/cljs-reagent/core.cljs

andre.richards16:04:28

Yeah, I just tried it out, and they I showed it above does indeed work....

andre.richards16:04:42

But if returning it from function it doesn't...

andre.richards16:04:57

Give me a few minutes to try something

seanhess16:04:12

thank you so much!

seanhess16:04:36

interesting… This works:

seanhess16:04:40

(defn box [] [view {:style {:width 80 :height 80 :background-color "red"}}])

seanhess16:04:52

[box] [touchable-highlight …]

seanhess16:04:05

It looks like it’s failing because it’s inside the touchable-highlight, like you suggested

andre.richards16:04:54

Yeah, so I not exactly sure the reason for this, but you are correct - as per your example, this is the error that gets written to console: 2016-04-14 17:16:56.349 [warn][tid:com.facebook.React.JavaScript] { [Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component] line: 2307, column: 16, sourceURL: 'http://localhost:8081/index.ios.bundle?platform=ios&amp;dev=true', name: 'Invariant Violation', framesToPop: 1 }

seanhess16:04:09

Yeah. I’m getting that too

andre.richards16:04:19

Basically, this is how I ended up doing it (looking at some code from a couple of weeks ago): (defn press-me-label [name] [ touchable-highlight [text {:style {:color "white" :text-align "center" :font-weight "bold"}} (str "press me: " name)]])

andre.richards16:04:49

Then you can do: [press-me-label "bob"] wherever you need the label

seanhess16:04:00

So I guess the problem is that reagent components are not forwarding setNativeProps?

andre.richards16:04:23

Sounds possible, yes. Presumably, [view] and [text] do not have NativeProps, so not an issue for them?

andre.richards16:04:50

(I'm also still pretty new to this :)

seanhess16:04:51

Or maybe touchable-highlight forwards them automatically, since it’s a react class. But if you put a component between touchable-highlight and text...

seanhess16:04:02

It’s forwarding the function to your in between component, which isn’t forwarding it in turn

seanhess16:04:41

I wonder if reagent would take a bug report

andre.richards16:04:07

I think they would

seanhess16:04:57

Thank you so much for your help @andre.richards, it’s hard to identify a bug when I’m new to everything, and assume I’m just doing it wrong simple_smile

andre.richards16:04:49

No worries, thanks for bug report. Also still feeling my way around, so know how you feel 👍