Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 (about 9 years ago)
- Default Branch: master
- Last Pushed: 2020-01-27T06:57:34.000Z (over 4 years ago)
- Last Synced: 2024-04-03T00:05:53.201Z (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
Lists
- awesome-react-native-ui - react-native-css ★584 - Style React-Native components with css and built in support for SASS. (Components / Styling)
- awesome-react-native - react-native-css - Native组件 (组件 / 工具包)
- awesome-react-native - react-native-css ★678 - Style React-Native components with css and built in support for SASS. (Components / Styling)
- awesome-react-native - react-native-css ★678 - 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 ★332 - 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-stars - react-native-css - Style React-Native components with css and built in support for SASS/SCSS (JavaScript)
- Awesome-React-Native-Education - React Native CSS - Native components with css and built in support for SASS/SCSS | (Index / Styling)
- awesome - react-native-css ★755 - Style React-Native components with css and built in support for SASS. (Components / Styling)
- awesome-react-native-master - react-native-css ★263 - 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 - react-native-css ★755 - Style React-Native components with css and built in support for SASS. (Components / Styling)
README
# react-native-css [](https://circleci.com/gh/sabeurthabti/react-native-css) [](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!
);
}
}
```