Fork me on GitHub
#cljsrn
<
2015-11-16
>
johanatan00:11:06

I just need to know how to accomplish computed styles in Om.Next (on React Native)

johanatan00:11:39

[Basically I have a textinput whose bordercolor needs to be one value when there is no text in it (except the placeholder txt) and another value when there is some text in it]

dvcrn02:11:32

@johanatan: in om you pass styles as maps:

(view {:style {:flexDirection "column" :margin 40}}
                  (text nil msg))

dvcrn02:11:38

just use multiple separate maps and merge them together

dvcrn02:11:07

(merge style1-map style2-map style3-map)

dvcrn02:11:50

@iamjarvo: if it's passed as props, cant you do (get (om/props this) navigator) or something like this?

dvcrn02:11:57

(also keep in mind that (println (om/props this)) and (.log js/console (om/props this)) will print different things. The first one gives you the clojure representation, the second one the javascript version. If you want to check what's inside the props, use println. You don't want to navigate through all the things clojure does for you)

iamjarvo02:11:40

@dvcrn: so it looks like when I do (println (om/props this)) I get back just app-state

dvcrn02:11:11

hrm but your component is rendered inside NavigatorIOS?

iamjarvo02:11:42

there is some useless code in there because I have been poking around to figure out hwo things work

iamjarvo02:11:18

line 108 where where RecentPosts is being rendered

dvcrn02:11:11

Gonna check it when I have a bit buffer time within the next hour-ish, but it could be a bug. Let me ask in #C06DT2YSY after verifying

iamjarvo02:11:42

cool, ill be around just mention me

iamjarvo02:11:24

when i inspect this I see props and navigator

dvcrn02:11:58

if you can pull the navigator out of it, that of course works too!

iamjarvo02:11:36

I was able to pull navigator out but that seems like the incorrect way to do it

iamjarvo02:11:50

also thanks for your work with natal

dvcrn02:11:10

as long as it works, go with it until we have a better solution 😉

dvcrn02:11:45

you could also get the navigator inside your navigator component and pass it directly to the child. I never tried any of that yet though

johanatan02:11:53

@dvcrn: I fail to see how that answers my question. I need to compute the style based on a property of the component

johanatan02:11:28

It is getting the property of the component that is the problem; not constructing a map

johanatan02:11:53

In my case, I need the style to be conditional upon the length of txt in the txt input

dvcrn02:11:19

@johanatan: ah. How about binding the text of the input to a state piece? Something like onChange write the current text inside a atom or similar. Then upon render, use something like (if (> (count something) 5) (merge style style-active) style)

dvcrn02:11:50

sorry if I'm misunderstanding

johanatan02:11:53

Ahh, so I can save my state off to the side in just an atom and not go through React's 'setState' et al?

johanatan02:11:01

Yea that might work

johanatan02:11:08

I was getting stuck on trying to use React's facilities for this I guess

dvcrn02:11:46

if you want to make it as correct as possible, keep the state inside the big om state atom since 1 version of the state should always represent a version of your app (including dynamic styles). But nothing prohibits you from just using a local atom that you don't expose

dvcrn02:11:26

If the overhead of adding another mutator and reader is too big of course

johanatan04:11:16

@dvcrn: what do you mean by "overhead of adding another mutator and reader" ?

johanatan04:11:35

[and re: single big om state atom-- yea was thinking the same thing-- it really belongs in there]

dvcrn05:11:15

@johanatan: I meant for changing state you invoke a mutator. So another piece of state would mean another mutator and another reader

dvcrn05:11:22

(or using the default one)

johanatan05:11:56

Oh, I see. Yea, I like the idea of everything inside one atom.

johanatan05:11:34

You're referring to this boilerplate yea: (defmethod read :default ...

mjmeintjes22:11:23

Hi. Just found out about this slack channel, and thought I'd share my example app for using Reagent, React Native and re-frame to build an Android app (tictactoe) - https://github.com/mjmeintjes/cljs-react-native-tictactoe . Some cool things about it: uses boot for building, auto testing using phantomjs, fast building using :optimizations :none, "hot-reloading" while keeping app state.

mfikes22:11:21

@mjmeintjes: looks cool! I'll add it to the Android section to http://cljsrn.org

mjmeintjes22:11:16

@mfikes Thanks. Thanks for keeping that resource up to date, used it extensively while building this example.

donmullen23:11:45

@mjmeintjes: Thanks for sharing!