unable to set inline styles with react native about helix

[lilactown]

By default, props that are passed to components are shallowly converted into a JS object. This means that when you pass a map into the :style prop here, the props object will look like:

{"style": <...CLJS map obj>}

I do special handling of the :style prop for "native" components (e.g. "div" and "button"), where I convert the entire structure into a JS object.

I'm not sure how best to handle this case. React Native components are semantically "native", but it's impossible to tell that from a functional component that you might want to grab the :styles prop from and manipulate it in some way with clojure core functions.

For now, you can write your Views and whatnot like:

($ View {:style #js {:background "blue"}})

or in the case where you want to pass in an array of styles:

($ View {:style #js [#js {:background "blue"}]})

Note that if you use React Native's StyleSheet function that it should just work, e.g.:

(def styles (.create StyleSheet #js {:red #js {:color "red"})))

($ View {:style (.-red styles)})

You could probably create a thin wrapper around StyleSheet to make this a little more ergonomic.

[alidcast]

ah I see, in snippet below you're checking if it's a string or a keyword, and imagine function names are symbols so it's being interpreted as non-native, hence why props' nested object is not converted (makes sense that you'd only want to do that on primitives)

https://github.com/Lokeh/helix/blob/0984dfd9add46885da7314ef1e4dc8d22c9e1573/src/helix/core.clj#L89

appreciate you showing the above example. i also see how you dynamically handled that macro creation for dom elements. very cool to see macros at work 👍

https://github.com/Lokeh/helix/blob/0984dfd9add46885da7314ef1e4dc8d22c9e1573/src/helix/dom.cljc#L139-L148

[lilactown]

A (currently undocumented) feature of the $ macro is that you can do "spread props" by passing in a map to a special & key.

(let [extra-props {:a :extra-a
                   :b :extra-b
                   :c :extra-c}]
  ($ MyComponent {:c :c
                  :d :d
                  & extra-props}))

MyComponent will receive the props:

{:a :extra-a
 :b :extra-b
 :c :extra-c
 :d :d}

Keys in the map passed to & will override keys passed in literally, so that you can give a default value and allow it to be dynamically overridden, just like spread props in JSX.

[alidcast]

oh yea, I was looking at code I thought conversion was being done for the second argument of every component called with $, but didn't realize it was only for dom primitives

I guess the best solution would be to do create my own wrappers and do same conversion for primitives I plan to use

[lilactown]

yes, that would probably be the best option. Something akin to:

(defmacro view
  [& args]
  (cond
    (map? (first args)) `^js/React.Element (create-element
                                            view-type
                                            ~(helix.core/props (first args) true)
                                            ~@(rest args))

    :else `^js/React.Element (create-element view-type nil ~@args))))

[alidcast]

mind explaining what the '& does here? why is it necessary to check if that symbol is contained in the clj-map, I don't see where it's being inserted elsewhere

https://github.com/Lokeh/helix/blob/0984dfd9add46885da7314ef1e4dc8d22c9e1573/src/helix/core.clj#L65-L71