node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

react-native-style-tachyons

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 {
        ...
    })
     
    /* or if you use simple functions */
    NativeTachyons.wrap(() => <Text cls="b">Hi there!</Text>)

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
Absolute
absolute                     position: absolute
top|right|bottom|left-0      top|right|bottom|left: 0 rem
                  ... 1                         ... 1 rem
                  ... 2                         ... 2 rem
 
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|center|right|justify
 
lh-solid               lineHeight: 1 rem
lh-title               lineHeight: 1.25 rem
lh-copy                lineHeight: 1.5 rem
 
/* Letter-spacing is only supported on iOS */
tracked                letterSpacing:  0.1 rem
tracked-tight          letterSpacing: -0.05 rem
tracked-mega           letterSpacing:  0.25 rem
 

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"
 
tint-$color            tintColor: $color, see Colors section
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)
    tint-blue                    tint-color set to blue
  • 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