I want to mention my styling library here: <a href="https://www.npmjs.com/package/react-native-style-tachyons" rel="nofollow">https://www.npmjs.com/package/react-native-style-tachyons</a><p>The best part: it gives you a consistent spacing [0] and a consistent font scale [1] which is relative to rem. No more magic values, just use classes:<p><pre><code> ma0 ... ma7 margin: 0|0.25|0.5|1|2|4|8|16 rem
ml|mr|mb|mt [0-7] marginLeft, marginRight, marginBottom, marginTop
mh [0-7] marginHorizontal
mv [0-7] marginVertical
/* Same with p for padding */
</code></pre>
No more stylesheets, everything is there at a glance and easily fixable:<p><pre><code> <View cls="bt bb jcfs pa2"> /* border at top and bottom, justifyContent: stretch, padding: 0.5rem */
<Text cls="white tc"> /* white color, text-align: center */
Something
</Text>
</View>
</code></pre>
[0] <a href="http://tachyons.io/docs/layout/spacing/" rel="nofollow">http://tachyons.io/docs/layout/spacing/</a><p>[1] <a href="http://tachyons.io/docs/typography/scale/" rel="nofollow">http://tachyons.io/docs/typography/scale/</a>
For anyone unfamiliar with the syntax used to achieve this, it's called Tagged Template Literals [0] and it's part of ES2015. You have a function that receives the static strings and interpolations and can return anything you want.<p>[0] <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...</a>
I think using strings as an API is a step in the wrong direction. I like that it
produces a React component directly though.<p>We experimented with styling approaches for React a while ago and produced our
solution — React Stylesheet[1], which we used for over an year in different
React applications.<p>It also produces components out of style definitions directly:<p><pre><code> let GreenBox = style('div', {
base: {
background: 'green'
}
})
</code></pre>
Which you can use like any other React component later:<p><pre><code> <GreenBox />
</code></pre>
As you can see the API is kinda similar but uses JS instead of CSS string. What
are advantages? The following:<p>* Consistent syntax: you can use functions, variabls, mixins, w/o the need for
interpolation `${...}`.<p>* Tooling. This is big one. You can make your stylesheets linted with ESLint and
typesafe (!!!) with FlowType or TypeScript.<p>FlowType is supported out of the box, see [2]. Typesafe stylesheets is a huge
win for productivity, I constantly catch typos and invalid values via Flow.<p>[1]: <a href="https://github.com/prometheusresearch/react-stylesheet/blob/next/README.md" rel="nofollow">https://github.com/prometheusresearch/react-stylesheet/blob/...</a>
[2]: <a href="https://github.com/prometheusresearch/react-stylesheet/blob/next/README.md#type-safety" rel="nofollow">https://github.com/prometheusresearch/react-stylesheet/blob/...</a><p>EDIT: additions<p>Styles are compiled into CSS so :hover and friends work here.
What is the performance penalty of using generated styles on every render?<p>As far as I can see from the source code, React will have to modify `<style>` tag every time a component is being rendered.<p>I still think the best way to handle stylesheets is with external css file ( doesn't matter how it's generated. I use CSSModules ) and then add static class names for those components.
With components I think we are taking a step back from semantic HTML elements, where style is applied by a separate template. And business logic is also separated from the layout elements.
glamor is another option for React apps, if inline styling is your thing. <a href="https://github.com/threepointone/glamor" rel="nofollow">https://github.com/threepointone/glamor</a>
Very cool, I have been playing around with this idea for a little bit now and your implementation looks solid.<p>Looking forward to giving this a shot on my next side project.