React Native Style Tachyons
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:
2. Improved with react-native-style-tachyons
:
3. or even simpler:
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 youpadding
of0.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. -
The optional
fontRem
parameter scales the font sizes independently of other styles.
Usage
react-native-style-tachyons
needs to know your rem
upon start:
-
In the entry point of your app include:
Sensible rem/fontRem values
Experience with variously sized iPhone and Android phones from 4" to 6" displays showed,
that for tablets, rem values in the range of 12 - 18, depending on device resolution, work well.
For phones, the same rem can be used, but fontRem should be floored at 14, to keep everything readable. -
To use the styles
To support javascript property syntax, all style names with hyphens have an equivalent with an underscore, e.g.
s.bg_black
instead ofs["bg-black"]
. -
To use the
cls=''
syntax, you have to wrap your component:If you prefer to use a different propName instead of
cls
, specify the name in the options:
Reference / Supported Properties
FlexBox
Margins & Paddings (Scale)
Heights & Widths
Absolute
Borders
Text & Fonts (Scale)
Font-Families
Specify the font-families you need in the configuration to use them:
Images
Opacity
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 withbg-
thebackgroundColor
will be set. A prefix ofb--
sets theborderColor
. -
You can also specify a palette in the options and Tachyons will generate styles for you. It will also generate variants with different opacities.
The same syntax with
bg-
for background andb--
for borderColor applies.
Raw Values
To access the actual computed sizes: