react-native-short-styles

1.0.0 • Public • Published

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
;<View style={styles("f1 ic jc")}>
  <Text style={styles("")}></Text>
</View>

Short Styles List

The Listing is in alphabetical order of the properties in each section

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

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i react-native-short-styles

      Weekly Downloads

      3

      Version

      1.0.0

      License

      MIT

      Unpacked Size

      13.8 kB

      Total Files

      6

      Last publish

      Collaborators

      • curiosbasant