react-native-short-styles

Installation

npm install react-native-short-styles

or

yarn add react-native-short-styles

Example

import { Text, View } from "react-native"
import styles from "react-native-short-styles"

// In your any react-native component
function Example() {
  return (
    <View style={styles("f1 ic jc")}>
      <Text style={styles("tb clgreen")}>I'm green bold yext</Text>
    </View>
  )
}

Short Styles List

The listing mostly is in alphabetical order of the properties in each section. Values which are in bold, are the default value, for that property.

Spacing and Borders

Property	ShortStyle
top	ot
left	ol
right	or
bottom	ob
start	os
end	oe
margin	-m, m
marginTop	-mt, mt
marginLeft	-ml, ml
marginBottom	-mb, mb
marginRight	-mr, mr
marginStart	-ms, ms
marginEnd	-me, me
marginHorizontal	-mh, mh
marginVertical	-mv, mv
padding	p
paddingTop	pt
paddingLeft	pl
paddingBottom	pb
paddingRight	pr
paddingStart	ps
paddingEnd	pe
paddingHorizontal	ph
paddingVertical	pv
borderWidth	b
borderColor	bc
borderTopWidth	bt
borderTopColor	btc
borderLeftWidth	bl
borderLeftColor	blc
borderBottomWidth	bb
borderBottomColor	bbc
borderRightWidth	br
borderRightColor	brc
borderStartWidth	bs
borderStartColor	bsc
borderEndWidth	be
borderEndColor	bec

Property	Value	ShortStyle
borderStyle	solid	bss
	dashed	bsh
	dotted	bsd

---

General

Property	Value	ShortStyle
aspectRatio	-	a
backgroundColor	-	bg
elevation	-	e
minHeight	-	hn
height	-	h
maxHeight	-	hx
minWidth	-	wn
width	-	w
maxWidth	-	wx
opacity	-	o
overflow	hidden	oh
	scroll	oc
	visible	ov
position	absolute	poa
	relative	por

---

Flex

Property	Value	ShortStyle
alignContent	center	cc
	flex-end	ce
	flex-start	cs
	space-around	ca
	space-between	cb
	stretch	ct
alignItems	baseline	ia
	center	ic
	flex-end	ie
	flex-start	is
	stretch	it
alignSelf	auto	ac
	center	ac
	flex-end	ae
	flex-start	as
	space-around	aa
	space-between	ab
	stretch	at
flex	-	f
flexBasis	-	fb
flexDirection	column	fc
	column-reverse	-fc
	row	fr
	row-reverse	-fr
flexGrow	-	fg
flexShrink	-	fs
flexWrap	nowrap	fn
	wrap	fw
	wrap-reverse	-fw
justifyContent	center	jc
	flex-end	je
	flex-start	js
	space-around	ja
	space-between	jb

---

Text

Property	Value	ShortStyle
color	-	cl
fontSize	-	ts
fontStyle	italic	tsi
	normal	tsn
fontWeight	bold	tb
	normal	tn
letterSpacing	-	tls
lineHeight	-	th
textAlign	auto	ta
	center	tc
	left	tl
	justify	tj
	right	tr
textAlignVertical	auto	tva
	bottom	tvb
	center	tvc
	top	tvt
textTransform	capitalize	ttc
	lowercase	ttl
	none	ttn
	uppercase	ttu