https://github.com/sabeurthabti/react-native-css

Style React-Native components with css
https://github.com/sabeurthabti/react-native-css

Last synced: 3 months ago
JSON representation

Style React-Native components with css

• Host: GitHub
• URL: https://github.com/sabeurthabti/react-native-css
• Owner: thabti
• License: mit
• Archived: true
• Created: 2015-04-19T22:43:11.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2020-01-27T06:57:34.000Z (almost 5 years ago)
• Last Synced: 2024-10-12T17:39:32.416Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 255 KB
• Stars: 769
• Watchers: 25
• Forks: 66
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-react-native - react-native-css ★755 - Style React-Native components with css and built in support for SASS. (Components / Styling)
• awesome-react-native - react-native-css ★755 - Style React-Native components with css and built in support for SASS. (Components / Styling)
• awesome-react-native - react-native-css ★755 - Style React-Native components with css and built in support for SASS. (Components / Styling)
• awesome-react-native-ui - react-native-css ★584 - Style React-Native components with css and built in support for SASS. (Components / Styling)

README

        


# react-native-css [![Circle CI](https://circleci.com/gh/sabeurthabti/react-native-css.svg?style=svg&circle-token=a140907997e6a37c6c5ec75f04e8150cef049ff6)](https://circleci.com/gh/sabeurthabti/react-native-css) [![NPM](https://img.shields.io/npm/dm/react-native-css.svg?style=flat-square)](https://www.npmjs.com/package/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

```bash

yarn add react-native-css

```

```bash

npm install react-native-css --save

```

# Example

Given the following CSS:

``` js

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:

``` javascript

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

```  

# Usage

```js

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 (

      

        

            Search!

        

      

    );

  }

}

```