Allow usage of "className"

[fab1an]

Hi, I use tachyons [0] to style react for web, so I'd like to use the className property in react-native as well.

It allows me to use "mini"-css classes and write code like this, instead of using the styles property, which I find way better (after having tried both approaches).

   <View className="w1 wv">

   </View>

[0] http://tachyons.io/docs/

[kohver]

Hi!
Do you want to use real CSS in React Native? It's not possible yet and probably won't be. You have to have tachyons implementation for RN.
For more info check this article http://facebook.github.io/react-native/docs/style.html#content

[satya164]

Check https://speakerdeck.com/vjeux/react-css-in-js

[fab1an]

@kohver No, I don't want real css, I just want classnames I can assign to React's CSS-subset and then use.

@satya164 I know that presentation. I used this (styles={styles.main}) in production multiple times, but I prefer the way tachyons and http://www.basscss.com do it. In my eyes it's superior.

[satya164]

@fab1an There is no reason you shouldn't be able to have a className prop. Does RN give you warning if you use className?

[fab1an]

No, but the classnames don't seem to be applied to react-native?

[satya164]

@fab1an What do you mean by they are not applied? You've to handle the prop in your component if you want to. React Native doesn't support CSS.

[fab1an]

I'm not talking about supporting CSS. I'm taking about being able to create a React.StyleSheet with properties like so:

var styles = StyleSheet.create({
  w100: {
    width: 100
  },
  h100: {
    height: 100
  },
  bg-black: {
    backgroundColor: '#000000',
  },
  bg-white: {
    backgroundColor: '#FFFFFF',
  },
});

and then use it like so:

<View className="h100 w100 bg-black">
   <Text className="w100 bg-white"/>
</View>

This way I have my styles at the place where the are being applied, which makes development faster AND I don't need to find a name for every css component, which is good since they rarely have a proper semantic meaning.

I can implement this myself with a babel-transformation, but I wanted to know if something like this is possible out of the box.

[satya164]

@fab1an No. React Native doesn't support this pattern. To support this at runtime, you'll have to implement a className prop in every component that wants to support this and you also need a reference to the styles object to extract the styles out from it. Also conditionally applying style is much messier with this approach.

Why not just use this? It doesn't look that different to me. Also this is more flexible.

<View style={[ s.h100, s.w100, dark ? s.bgBlack : null ]}>
   <Text style={[ s.w100, s.bgWhite ]} />
</View>

BTW, you can't use - in a JavaScript object key unless you quote it.

[fab1an]

For conditional styles I tend to use the classnames library.

I didn't know you could pass an array to style. Maybe I'll write the babel-transform, but this should work for me in the meantime, thank you.

[grabbou]

You can write that as a 3rd party plugin and it will just work.

What to do:

1. Call MyCustomStyleSheet.create() that just calls StyleSheet.create() but also stores keys in a global object so you can refer to them
2. Wrap every component you want to style that way by a HOC Stylable (or whatever) that, given a className string, will cal MyCostomStyleSheet.resolve(strings) and return an object with styles where strings is a separated by spaces list of keys to apply

[fab1an]

What do you mean by "HOC"?

That sounds good, but i think it's too much clutter to wrap every JSX tag in an extra parent.

[satya164]

@fab1an Higher order components - https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e

[grabbou]

More or less this -> https://gist.github.com/grabbou/cec8608d7dbb54ec8cb4080134a997e5

Note - it probably does not work, but shows the concepts :)

[fab1an]

Great! Thanks.

[fab1an]

I build this into a library: https://github.com/fab1an/react-native-tachyons

[boiawang]

Maybe you could use https://github.com/alibaba/rax/blob/master/packages/babel-plugin-transform-jsx-stylesheet/README.md.