This document provides a reference for the utility styles available in the project.
Spacing (Padding & Margin)
| Utility | Style |
|---|
p-0 | padding: 0 |
p-1 | padding: 8 |
pl-1 | paddingLeft: 8 |
pr-1 | paddingRight: 8 |
px-1 | paddingHorizontal: 8 |
py-1 | paddingVertical: 8 |
m-0 | margin: 0 |
m-1 | margin: 8 |
ml-1 | marginLeft: 8 |
mr-1 | marginRight: 8 |
mx-1 | marginHorizontal: 8 |
my-1 | marginVertical: 8 |
Flexbox
| Utility | Style |
|---|
flex | display: 'flex' |
flexRow | flexDirection: 'row' |
flexCol | flexDirection: 'column' |
flexWrap | flexWrap: 'wrap' |
flexNoWrap | flexWrap: 'nowrap' |
itemsCenter | alignItems: 'center' |
itemsStart | alignItems: 'flex-start' |
itemsEnd | alignItems: 'flex-end' |
justifyStart | justifyContent: 'flex-start' |
justifyCenter | justifyContent: 'center' |
justifyEnd | justifyContent: 'flex-end' |
justifyBetween | justifyContent: 'space-between' |
justifyAround | justifyContent: 'space-around' |
itemsCenter | alignItems: 'center' |
itemsStart | alignItems: 'flex-start' |
itemsEnd | alignItems: 'flex-end' |
selfCenter | alignSelf: 'center' |
selfStart | alignSelf: 'flex-start' |
selfEnd | alignSelf: 'flex-end' |
Text & Font
| Utility | Style |
|---|
textCenter | textAlign: 'center' |
textLeft | textAlign: 'left' |
textRight | textAlign: 'right' |
textJustify | textAlign: 'justify' |
textUnderline | textDecorationLine: 'underline' |
textLineThrough | textDecorationLine: 'line-through' |
textNoDecoration | textDecorationLine: 'none' |
textUppercase | textTransform: 'uppercase' |
textLowercase | textTransform: 'lowercase' |
textCapitalize | textTransform: 'capitalize' |
fontThin | fontWeight: '100' |
fontLight | fontWeight: '300' |
fontNormal | fontWeight: '400' |
fontMedium | fontWeight: '500' |
fontBold | fontWeight: '700' |
fontExtraBold | fontWeight: '800' |
fontBlack | fontWeight: '900' |
Borders
| Utility | Style |
|---|
border | borderWidth: 1 |
borderNone | borderWidth: 0 |
borderTop | borderTopWidth: 1, |
borderBottom | borderBottomWidth: 1, |
borderLeft | borderLeftWidth: 1, |
borderRight | borderRightWidth: 1, |
rounded | borderRadius: 8 |
roundedSm | borderRadius: 8 |
roundedLg | borderRadius: 16 |
roundedFull | borderRadius: 9999 |
Backgrounds
| Utility | Style |
|---|
bgPrimary | backgroundColor: '#3498db' |
bgSecondary | backgroundColor: '#2ecc71' |
bgWhite | backgroundColor: '#ffffff' |
bgBlack | backgroundColor: '#000000' |
Colors
| Utility | Style |
|---|
textPrimary | color: '#3498db' |
textSecondary | color: '#2ecc71' |
bgBackgroundLight | color: '#ffffff' |
textBlack | color: '#000000' |
Width & Height
| Utility | Style |
|---|
wFull | width: '100%' |
hFull | height: '100%' |
wHalf | width: '50%' |
hHalf | height: '50%' |
Overflow
| Utility | Style |
|---|
overflowHidden | overflow: 'hidden' |
overflowVisible | overflow: 'visible' |
overflowScroll | overflow: 'scroll' |
PointerEvent
| Utility | Style |
|---|
pointerEventNone | pointerEvents: 'none' |
pointerEventAuto | pointerEvents: 'auto' |
Opacity
| Utility | Style |
|---|
opacity-0 | opacity: 0 |
opacity-25 | opacity: 0.25 |
opacity-50 | opacity: 0.5 |
opacity-75 | opacity: 0.75 |
opacity-100 | opacity: 1 |
Shadows
| Utility | Style |
|---|
shadow | shadowColor: '#000000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.23, shadowRadius: 2.62, elevation: 4 |
shadowLg | shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 4.65, elevation: 8 |
Positioning
| Utility | Style |
|---|
absolute | position: 'absolute' |
relative | position: 'relative' |
top-0 | top: 0 |
right-0 | right: 0 |
bottom-0 | bottom: 0 |
left-0 | left: 0 |
Z-Index
| Utility | Style |
|---|
zIndex-1 | zIndex: 1 |
zIndex-10 | zIndex: 10 |
This utility reference helps in writing clean and reusable styles in React Native. 🚀