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:

importRNCfrom'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

importRNCfrom'react-native-css';classSearchPageextendsComponent{render(){const{ color, fontSize }=this.props;conststyles=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(<Viewstyle={styles.container}><Textstyle={styles.description}>
Search!
</Text></View>);}}