1.0.0 • Published 3 years ago
react-native-short-styles v1.0.0
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 |
1.0.0
3 years ago