Better styling for React Native
JavaScript
Latest commit a2696a8 Jan 20, 2017 @fab1an fab1an 3.1.0

README.md

React Native Style Tachyons

npm version license semver build status total townloads

Overview

React Native Style Tachyons brings functional styling to react-native. It is inspired by Tachyons and uses it's scales and naming convention. More about the advantages of this approach.

Let's see how tachyons compares to traditional styling:

1. Traditional react-native style:
import {StyleSheet} from "react-native";

const s = StyleSheet.create({
  view: {
    borderWidth: 1,
    justifyContent: "flex-start",
    padding: MAGIC_PIXEL_VALUE
  },
  text: {
    color: "white",
    textAlign: "center"
  }
})

<View style={[s.view]}
   <Text style={[s.text]}>Something</Text>
</View>
2. Improved with react-native-style-tachyons:
import {styles as s} from "react-native-style-tachyons";

<View style={[s.ba, s.jcfs, s.pa2]}>     /* 'ba' means border-all */
   <Text style={[s.white, s.tc]}>
       Something
   </Text>
</View>
3. or even simpler:
<View cls="ba jcfs pa2">                 /* string is checked for validity */
   <Text cls="white tc">
       Something
   </Text>
</View>

Of course you can use your old styles along tachyons' classes.

Advantages

  • Less code
  • No need to maintain a separate stylesheet
  • No need to find a proper name for every component you want to style
  • Looking at a component tells you exactly how it looks, it's all in one place.

Tachyons' scale

  • Dimensions and typography build on a proven scale, which is relative to rem, the root font-size. Instead of having to find proper values for padding (or margin, width or height), you use a simple 7-step scale. pa2 gets you padding of 0.5rem.

  • The scale progresses with powers of two, so each step is twice as big as the last. This means everything will always line up, no more "off-by-one-pixel"-problems.

  • You can scale the entire design just by setting a different rem. This is a great advantage when building a responsive app.

    More about Tachyons' spacing

    More about Tachyons' typography

Usage

react-native-style-tachyons needs to know your rem upon start:

  1. In the entry point of your app include:

    import NativeTachyons from 'react-native-style-tachyons';
    import { StyleSheet } from 'react-native';
    
    NativeTachyons.build({
       /* REM parameter is optional, default is 16 */
       rem: screenWidth > 340 ? 18 : 16
    }, StyleSheet);
  2. To use the styles

    import { styles as s } from "react-native-style-tachyons";

    To support javascript property syntax, all style names with hyphens have an equivalent with an underscore, e.g. s.bg_black instead of s["bg-black"].

  3. To use the cls='' syntax, you have to wrap your component:

    import NativeTachyons from "react-native-style-tachyons";
    
    NativeTachyons.wrap(
       class MyComponent extends React.Component {
       ...
    })

Reference / Supported Properties

FlexBox
absolute               position: "absolute"                 /* default: "relative" */
flx-i                  flex: 1
flx-row                flexDirection: "row"                 /* default: "column" */
flx-row-reverse        flexDirection: "row-reverse"
flx-col-reverse        flexDirection: "column-reverse"
flx-wrap               flexWrap: "wrap"                     /* default: "nowrap" */
aifs                   alignItems: "flex-start"             /* default: "stretch" */
aic                    alignItems: "center"
aife                   alignItems: "flex-end"
jcc                    justifyContent: "center"             /* default: "flex-start" */
jcfe                   justifyContent: "flex-end"
jcsb                   justifyContent: "space-between"
jcsa                   justifyContent: "space-around"
asfs                   alignSelf: "flex-start"
asfe                   alignSelf: "flex-end"
asc                    alignSelf: "center"
ass                    alignSelf: "stretch"
Margins & Paddings (Scale)
ma0 ... ma8            margin: 0|0.25|0.5|1|2|4|8|16|32 rem
ml|mr|mb|mt [0-8]      marginLeft, marginRight, marginBottom, marginTop
mh [0-8]               marginHorizontal
mv [0-8]               marginVertical

/* Same with p for padding */
Heights & Widths
h1 ... h6              height: 1|2|4|8|16|32 rem
w1 ... w6              width: 1|2|4|8|16|32 rem

min-h1 ... min-h6      minHeight: 1|2|4|8|16|32 rem
max-h1 ... max-h6      maxHeight: 1|2|4|8|16|32 rem

/* Same with w for width */

absolute-fill          position: absolute, top/left/right/bottom: 0
Borders
ba                     borderWidth: 1
bl|br|bt|bb            borderLeftWidth: 1 | borderRightWidth: 1...

br0 ... br5            borderRadius: 0|0.125|0.25|0.5|1]2 rem
br--bottom             bottom radius only
br--top                top radius only
br--right              right radius only
br--left               left radius only
Text & Fonts (Scale)
f5                     fontSize: 1 rem
f1 ... f6              fontSize: 3|2.25|1.5|1.25|1|0.875 rem
f-headline             fontSize: 6 rem
f-subheadline          fontSize: 5 rem

normal                 fontWeight: normal
b                      fontWeight: bold
fw1 ... fw900          fontWeight: 100 ... fontWeight: 900

i                      fontStyle: italic

tl|tc|tr|tj            textAlign: left|right|center|justify

Specify the font-families you need in the configuration to use them:

ff-iowan               fontFamily: "Iowan Old Style"

/* setup: */
NativeTachyons.build({
    fonts: {
        iowan: 'Iowan Old Style'
    }
}, StyleSheet);
Images
rm-contain             resizeMode: "contain"
rm-cover               resizeMode: "cover"
rm-stretch             resizeMode: "stretch"
Opacity
o-10|20|...|100        opacity: 0.1|0.2|...|1
o-05                   opacity: 0.05
o-025                  opacity: 0.025

Colors

  • When using the cls='' syntax, colors can be specified directly in the string. Every Color supported by react-native works. If the color is prefixed with bg- the backgroundColor will be set. A prefix of b-- sets the borderColor.

    bg-green                     green background
    #232323                      text color of #232323
    b--rgba(255,255,255,0.5)     border set to rgba(255,255,255,0.5)
  • You can also specify a palette in the options and Tachyons will generate styles for you. It will also generate variants with different opacities.

    NativeTachyons.build({
       colors: {
          palette: {
             green: "#00FF00",
          }
       }
    }, StyleSheet);

    The same syntax with bg- for background and b-- for borderColor applies.

    bg-green                green background
    b--green                green border        // Note: double hyphens signify a class that needs
    green                   green text          // another class to work in this case a border-setting
    
    /* alpha variants (same for bg- and b--) */
    green-10, green-20 ... green-90       green text with 10%, 20%, ... , 90% alpha
    

Raw Values

To access the actual computed sizes:

import { sizes } from "react-native-style-tachyons"

const s = sizes.ma2          /* sizes.w4, ... */

Changes

See the ChangeLog