Documentation
Components
Stack

Stack

Stack is a layout component that helps in positioning child elements vertically with equal spacing between them.

Space

<Stack space={4}>
  <Placeholder label="1" />
  <Stack space={2}>
    <Placeholder label="2.1" />
    <Placeholder label="2.2" />
    <Placeholder label="2.3" />
  </Stack>
  <Placeholder label="3" />
</Stack>

The component also supports horizontal alignment, which allows you to align children left, right, or center within the stack.

Align

<Stack space={2} align="center">
  <Placeholder width={140} label="1" />
  <Placeholder width={200} label="2" />
  <Placeholder width={120} label="3" />
  <Placeholder width={140} label="4" />
</Stack>

Stack allows you to arrange children in a horizontal layout by using the horizontal property.

Horizontal

<Stack space={4} align="center" horizontal={true}>
  <Placeholder width={40} label="1" />
  <Placeholder width={40} height={60} label="2" />
  <Placeholder width={40} height={80} label="3" />
  <Placeholder width={40} height={50} label="4" />
  <Placeholder width={40} label="5" />
  <Placeholder width={40} height={70} label="6" />
</Stack>

Additionally, you can insert a custom divider between all stack children by setting the divider prop on Stack. This is useful when you want to separate child elements with a visible line or space.

Divider

<Stack space={3} divider={<Divider />}>
  <Placeholder label="1" />
  <Placeholder label="2" />
  <Placeholder label="3" />
  <Placeholder label="4" />
</Stack>

Props

The Stack component is created using the Box component. It extends all the props* supported by Box, as well as React Native View (opens in a new tab), and the props mentioned below.

*

Unavailable Box props: direction, alignX, alignY, rowGap, columnGap

space

Type
ResponsiveProp<number>

Set the space between children.

horizontal

Type
ResponsiveProp<boolean>

Arranges children horizontally.

align

Type
ResponsiveProp<AxisX | AxisY>

Aligns children horizontally or vertically, depending on the value of the horizontal prop.

divider

Type
React.ReactElement

Inserts a custom divider between each child.

RowsTiles