Skip to content
Docs
Components
Layout
VStack

VStack

VStack is a layout component to display several children elements vertically with a space between them.

Import

import { VStack } from 'react-native-ficus-ui';

Usage

EDITABLE EXAMPLE
<VStack spacing={10}>
  <Center w={40} h={40} bg="yellow.200">
    <Text>1</Text>
  </Center>
  <Center w={40} h={40} bg="red.200">
    <Text>2</Text>
  </Center>
  <Center w={40} h={40} bg="pink.200">
    <Text>3</Text>
  </Center>
</VStack>

Props

spacing

The stack spacing property between childrens.

TypeRequired
string, numberNo

bg

The background color property (backgroundColor style prop in StyleSheet)

TypeRequired
stringNo

m

The margin property (margin style prop in StyleSheet)

TypeRequired
number, stringNo

mt

The margin top property (marginTop style prop in StyleSheet)

TypeRequired
number, stringNo

mb

The margin bottom property (marginBottom style prop in StyleSheet)

TypeRequired
number, stringNo

mr

The margin right property (marginRight style prop in StyleSheet)

TypeRequired
number, stringNo

ml

The margin left property (marginLeft style prop in StyleSheet)

TypeRequired
number, stringNo

mx

The margin horizontal property (marginHorizontal style prop in StyleSheet)

TypeRequired
number, stringNo

my

The margin vertical property (marginVertical style prop in StyleSheet)

TypeRequired
number, stringNo

p

The padding property (padding style prop in StyleSheet)

TypeRequired
number, stringNo

pt

The padding top property (paddingTop style prop in StyleSheet)

TypeRequired
number, stringNo

pb

The padding bottom property (paddingBottom style prop in StyleSheet)

TypeRequired
number, stringNo

pr

The padding right property (paddingRight style prop in StyleSheet)

TypeRequired
number, stringNo

pl

The padding left property (paddingLeft style prop in StyleSheet)

TypeRequired
number, stringNo

px

The padding horizontal property (paddingHorizontal style prop in StyleSheet)

TypeRequired
number, stringNo

py

The padding vertical property (paddingVertical style prop in StyleSheet)

TypeRequired
number, stringNo

h

The height property (height style prop in StyleSheet)

TypeRequired
number, stringNo

w

The width property (width style prop in StyleSheet)

TypeRequired
number, stringNo

minH

The minimum height property (minHeight style prop in StyleSheet)

TypeRequired
number, stringNo

minW

The minimum width property (minWidth style prop in StyleSheet)

TypeRequired
number, stringNo

flex

The flex property for container (flex style prop in StyleSheet)

TypeRequired
numberNo

flexDirection

The flex direction property for container (flexDirection style prop in StyleSheet)

TypeRequired
enum("row", "column", "row-reverse", "column-reverse")No

direction

The flex direction property for container (flexDirection style prop in StyleSheet)

TypeRequired
enum("row", "column", "row-reverse", "column-reverse")No

flexWrap

The flex wrap property for container (flexWrap style prop in StyleSheet)

TypeRequired
enum("wrap", "nowrap", "wrap-reverse")No

wrap

The flex wrap property for container (flexWrap style prop in StyleSheet)

TypeRequired
enum("wrap", "nowrap", "wrap-reverse")No

flexGrow

The flex grow property for container (flexGrow style prop in StyleSheet)

TypeRequired
numberNo

grow

The flex grow property for container (flexGrow style prop in StyleSheet)

TypeRequired
numberNo

flexBasis

The flex basis property for container (flexBasis style prop in StyleSheet)

TypeRequired
number, stringNo

basis

The flex basis property for container (flexBasis style prop in StyleSheet)

TypeRequired
number, stringNo

flexShrink

The flex shrink property for container (flexShrink style prop in StyleSheet)

TypeRequired
numberNo

shrink

The flex shrink property for container (flexShrink style prop in StyleSheet)

TypeRequired
numberNo

justifyContent

The justify content property for container (justifyContent style prop in StyleSheet)

TypeRequired
enum("flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly")No

alignItems

The align items property for container (alignItems style prop in StyleSheet)

TypeRequired
enum("flex-start", "flex-end", "center", "stretch", "baseline")No

alignSelf

The align self property for container (alignSelf style prop in StyleSheet)

TypeRequired
enum("auto", "flex-start", "flex-end", "center", "stretch", "baseline")No

position

The position property for container (position style prop in StyleSheet)

TypeRequired
enum("absolute", "relative")No

top

The top position property for container (top style prop in StyleSheet)

TypeRequired
numberNo

bottom

The bottom position property for container (bottom style prop in StyleSheet)

TypeRequired
numberNo

right

The right position property for container (right style prop in StyleSheet)

TypeRequired
numberNo

left

The left position property for container (left style prop in StyleSheet)

TypeRequired
numberNo

overflow

The overflow property for container (overflow style prop in StyleSheet)

TypeRequiredDefault
enum("visible", "scroll", "hidden")No"hidden"

borderRadius

The border radius property (borderRadius style prop in StyleSheet)

TypeRequiredDefault
number, stringNonone

borderTopRadius

The border radius top property (borderTopLeftRadius and borderTopRightRadius style props in StyleSheet)

TypeRequiredDefault
number, stringNonone

borderBottomRadius

The border radius bottom property (borderBottomLeftRadius and borderBottomRightRadius style props in StyleSheet)

TypeRequiredDefault
number, stringNonone

borderLeftRadius

The border radius left property (borderTopLeftRadius and borderBottomLeftRadius style props in StyleSheet)

TypeRequiredDefault
number, stringNonone

borderRightRadius

The border radius right property (borderTopRightRadius and borderBottomRightRadius style props in StyleSheet)

TypeRequiredDefault
number, stringNonone

borderTopLeftRadius

The border radius top left property (borderTopLeftRadius style prop in StyleSheet)

TypeRequiredDefault
number, stringNonone

borderTopRightRadius

The border radius top right property (borderTopRightRadius style prop in StyleSheet)

TypeRequiredDefault
number, stringNonone

borderBottomLeftRadius

The border radius bottom left property (borderBottomLeftRadius style prop in StyleSheet)

TypeRequiredDefault
number, stringNonone

borderBottomRightRadius

The border radius bottom right property (borderBottomRightRadius style prop in StyleSheet)

TypeRequiredDefault
number, stringNonone

borderColor

The border color property (borderColor style prop in StyleSheet)

TypeRequired
stringNo

borderTopColor

The border top color property (borderTopColor style prop in StyleSheet)

TypeRequired
stringNo

borderBottomColor

The border bottom color property (borderBottomColor style prop in StyleSheet)

TypeRequired
stringNo

borderRightColor

The border right color property (borderRightColor style prop in StyleSheet)

TypeRequired
stringNo

borderLeftColor

The border left color property (borderLeftColor style prop in StyleSheet)

TypeRequired
stringNo

borderWidth

The border width property (borderWidth style prop in StyleSheet)

TypeRequired
numberNo

borderTopWidth

The border top width property (borderTopWidth style prop in StyleSheet)

TypeRequired
numberNo

borderBottomWidth

The border bottom width property (borderBottomWidth style prop in StyleSheet)

TypeRequired
numberNo

borderRightWidth

The border right width property (borderRightWidth style prop in StyleSheet)

TypeRequired
numberNo

borderLeftWidth

The border left width property (borderLeftWidth style prop in StyleSheet)

TypeRequired
numberNo

shadow

The shadow property (shadowOffset and elevation style props in StyleSheet)

TypeRequired
numberNo

shadowColor

The shadow color property (shadowColor style props in StyleSheet)

TypeRequired
stringNo

opacity

The opacity property (opacity style prop in StyleSheet)

TypeRequired
numberNo