# Layout
# Flex
All component in React Native is a flex layout. So what you need to do is just modify the flex container props and the children
| class | style |
|---|---|
| flex-initial | flexGrow: 0, flexShrink: 1 |
| flex-1 | flex: 1 |
| flex-auto | flexGrow: 1, flexShrink: 1 |
| flex-row | flexDirection: row |
| flex-row-reverse | flexDirection: row-reverse |
| flex-col | flexDirection: column |
| flex-col-reverse | flexDirection: column-reverse |
| flex-no-wrap | flexWrap: nowrap |
| flex-wrap | flexWrap: wrap |
| flex-wrap-reverse | flexWrap: wrap-reverse |
# Align Item
| class | style |
|---|---|
| items-stretch | alignItems: stretch |
| items-start | alignItems: flex-start |
| items-center | alignItems: center |
| items-end | alignItems: flex-end |
| items-baseline | alignItems: baseline |
# Align Content
| class | style |
|---|---|
| content-start | alignContent: flex-start |
| content-center | alignContent: center |
| content-end | alignContent: flex-end |
| content-between | alignContent: space-between |
| content-around | alignContent: space-around |
# Align Self
| class | style |
|---|---|
| self-auto | alignSelf: auto |
| self-start | alignSelf: flex-start |
| self-center | alignSelf: center |
| self-end | alignSelf: flex-end |
| self-stretch | alignSelf: stretch |
# Justify Content
| class | style |
|---|---|
| justify-start | justifyContent: flex-start |
| justify-center | justifyContent: center |
| justify-end | justifyContent: flex-end |
| justify-between | justifyContent: space-between |
| justify-around | justifyContent: space-around |
# Flex Grow & Shrink
| class | style |
|---|---|
| flex-grow | flexGrow: 1 |
| flex-grow-0 | flexGrow: 0 |
| flex-shrink | flexShrink: 1 |
| flex-shrink-0 | flexShrink: 0 |
There is no order property in React Native flex layout, so we are not adding it to the utility.
# Position
Default position for all component in React Native is relative. Adding relative class is optional
| Class | Style |
|---|---|
| absolute | position: absolute |
| relative | position: relative |
# Top/Right/Bottom/Left
Reposition the component using top/right/bottom/left/axis class
| Class | Style |
|---|---|
| top-0 | top: 0 |
| right-0 | right: 0 |
| bottom-0 | bottom: 0 |
| left-0 | left: 0 |
| top-auto | top: auto |
| bottom-auto | bottom: auto |
| left-auto | left: auto |
| right-auto | right: auto |
| inset-0 | top: 0, right: 0, bottom: 0, left: 0 |
| inset-y-0 | top: 0, bottom: 0 |
| inset-x-0 | right: 0, left: 0 |
| inset-auto | top: auto, right: auto, bottom: auto, left: auto |
| inset-y-auto | top: auto, bottom: auto |
| inset-x-auto | left: auto, right: auto |
# Z-Index
| Class | Style |
|---|---|
| z-0 | zIndex: 0 |
| z-10 | zIndex: 10 |
| z-20 | zIndex: 20 |
| z-30 | zIndex: 30 |
| z-40 | zIndex: 40 |
| z-50 | zIndex: 50 |