stefnnn / react-native-style-tachyons

Better styling for React Native

React Native Style Tachyons

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 {
       ...
   })

4. To use custom style definitions:

   import NativeTachyons from 'react-native-style-tachyons';
   import { StyleSheet, Dimensions } from 'react-native';
   
   const { screenWidth, screenHeight } = Dimensions.get('window')
   const rem = screenWidth > 340 ? 18: 16
   
   const myStyles = {
       bhair: { borderWidth: StyleSheet.hairlineWidth },
       card: { flex: 1, padding: 2*rem, borderWidth: 0.5*rem, borderColor: 'lightgrey' },
       /* custom styles take precedence and overwrite builtin styles ! */
       b: { fontWeight: 'bold', color: 'red' }
   }
   
   NativeTachyons.build({
       rem: rem,
       custom: myStyles
   }, StyleSheet);

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.

  ```javascript
  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