functional, maintainable styling for react-native
npm install react-native-style-tachyons





Let's see how tachyons compares to traditional styling:
##### 1. Traditional react-native style:
``javascript
import {StyleSheet} from "react-native";
const s = StyleSheet.create({
view: {
borderWidth: 1,
justifyContent: "flex-start",
padding: MAGIC_PIXEL_VALUE
},
text: {
color: "white",
textAlign: "center"
}
})
`
##### 2. Improved with react-native-style-tachyons:
`javascript
import {styles as s} from "react-native-style-tachyons";
Something
`
##### 3. or even simpler:
`javascript`
Something
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' typography
* The optional fontRem parameter scales the font sizes independently of other styles.
needs to know your rem upon start:1. In the entry point of your app include:
`javascript
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,
/ fontRem parameter is optional to allow adjustment in font-scaling. default falls back to rem /
fontRem: 20
}, StyleSheet);
` ##### 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.
2. To use the styles
`javascript
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:
`javascript
import NativeTachyons from "react-native-style-tachyons"; NativeTachyons.wrap(
class MyComponent extends React.Component {
...
})
/ or if you use simple functions /
NativeTachyons.wrap(() => Hi there! )
` If you prefer to use a different propName instead of
cls, specify the name in the options:
`javascript
NativeTachyons.build({
clsPropName: "cls"
}, StyleSheet);
`Reference / Supported Properties
##### FlexBox
`javascript
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)
`javascript
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
`javascript
h1 ... h6 height: 1|2|4|8|16|32 rem
w1 ... w6 width: 1|2|4|8|16|32 remmin-h1 ... min-h6 minHeight: 1|2|4|8|16|32 rem
max-h1 ... max-h6 maxHeight: 1|2|4|8|16|32 rem
`##### Absolute
`javascript
absolute position: absolute
top|right|bottom|left-0 top|right|bottom|left: 0 rem
... 1 ... 1 rem
... 2 ... 2 remabsolute-fill position: absolute, top/left/right/bottom: 0
`##### Borders
`javascript
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)
`javascript
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 remnormal fontWeight: normal
b fontWeight: bold
fw1 ... fw9 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
no-underline textDecorationLine: "none"
strike textDecorationLine: "line-through"
underline textDecorationLine: "underline"
strike-underline textDecorationLine: "underline line-through"
`##### Font-Families
Specify the font-families you need in the configuration to use them:
`javascript
ff-iowan fontFamily: "Iowan Old Style"/ setup: /
NativeTachyons.build({
fonts: {
iowan: 'Iowan Old Style'
}
}, StyleSheet);
`Note for Android: For weights on custom fonts to work correctly you have to name them like this (reference):
`
{fontFamilyName}.(ttf|otf)
{fontFamilyName}_bold.(ttf|otf)
{fontFamilyName}_italic.(ttf|otf)
{fontFamilyName}_bold_italic.(ttf|otf)
`
##### Images
`javascript
rm-contain resizeMode: "contain"
rm-cover resizeMode: "cover"
rm-stretch resizeMode: "stretch"tint-$color tintColor: $color, see Colors section
`##### Opacity
`javascript
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.
`javascript
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.
`javascript
NativeTachyons.build({
colors: {
palette: {
green: "#00FF00",
}
}
}, StyleSheet);
` The same syntax with
bg- for background and b-- for borderColor applies.
`javascript
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
`TypeScale
* You can specify the typescale in the options and Tachyons will generate the font sizes for you.`javascript
NativeTachyons.build({
typeScale: {
f1: '1.625',
f2: '1.375',
f3: '1.125',
f4: '0.9375',
f5: '0.8125',
f6: '0.75',
f7: '0.625',
},
rem: 16,
}, StyleSheet);
`This will result in font sizes of:
`javascript
{
f1: 26,
f2: 22,
f3: 18,
f4: 15,
f5: 13,
f6: 12,
f7: 10,
}
`Custom Styles
You can add custom styles you may need to the configuration at startup.`javascript
/ setup: /
NativeTachyons.build({
customStyles: {
myCustomBW: {
borderWidth: 2
}
}
}, StyleSheet);
`Raw Values
To access the actual computed sizes:
`javascript
import { sizes } from "react-native-style-tachyons"const s = sizes.ma2 / sizes.w4, ... /
``