react-native-css

React-native-css turns valid CSS into the Facebook subset of CSS.

Babel-plugin

The awesome @danilosterrapid7 create a babel-plugin for React-native-css:

https://www.npmjs.com/package/babel-plugin-react-native-sass-classname

Version 2

With version 2 come new changes:

• Remove sass/scss support, this is a huge overhead for little benefit.
• No CLI, we believe that this is an unnecessary context switch
• NO I/O, no longer writing files, we do everything at runtime.

if you still want access to the the old implementation, please check v1 branch.

Install

yarn add react-native-css

npm install react-native-css --save

Example

Given the following CSS:

import RNC from 'react-native-css';

RNC`
  description {
    margin-bottom: 20px;
    font-size: 18px;
    text-align: center;
    color: #656656;
  }

  container {
    padding: 30px;
    margin-top: 65px;
    align-items: center;
    display: block;
  }
`

React-native-css will generate to the following:

{"description":{"marginBottom":20,"fontSize":18,"textAlign":"center","color":"#656656"},"container":{"padding":30,"marginTop":65,"alignItems":"center"}}

Usage

import RNC from 'react-native-css';

class SearchPage extends Component {
  render() {
    const { color, fontSize } = this.props;
      const styles = RNC`
        description {
          margin-bottom: 20px;
          font-size: ${fontSize}
          text-align: center;
          color: ${color}
        }

        container {
          padding: 30px;
          margin-top: 65px;
          align-items: center;
          display: block;
        }
      `;

    return (
      <View style={styles.container}>
        <Text style={styles.description}>
            Search!
        </Text>
      </View>
    );
  }
}