css-rn
A css literal string tag for React-Native
Installation
npm i css-rn
Usage
import React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';import { css } from 'rss-rn' const redStyle = css` color: blue; font-weight: bold; font-size: 30;`; const bigFontSize = 50; // variables can be used within css templateconst bigBlueStyle = css` color: blue; font-weight: bold; font-size: ${bigFontSize};`; const redStyle = css` color: red;`; export class LotsOfStyles extends Component { render() { return ( <View> <Text style={redStyle}>just red</Text> <Text style={bigBlue}>just bigblue</Text> <Text style={[bigBlue, redStyle]}>bigblue, then red</Text> <Text style={[redStyle, bigBlue]}>red, then bigblue</Text> </View> ); }}
css-to-react-native
css-rn uses https://github.com/styled-components/css-to-react-native to convert css strings to React-Native style objects. Check documentation there for more technical info.
StyleSheet
Literal tag css
from import { css } from 'rss-rn'
returns regular JS style objects.
If you want StyleSheet.create()
-ed variant of the style, use styleSheet
string literal tag instead:
...import { styleSheet } from 'rss-rn'...... const redStyle = styleSheet` color: blue; font-weight: bold; font-size: 30;`; const bigBlueStyle = styleSheet` color: blue; font-weight: bold; font-size: 30;`; // `redStyle` and `bigBlueStyle` are now StyleSheet.create()ed integers instead of style objects...