Skip to content
Docs
Components
Layout
Stack

Stack

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

Import

import { Stack } from "react-native-ficus-ui";

Usage

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

Props

Extends every Box props.

spacing

The stack spacing property between childrens.

TypeRequiredDefault
string | numberNo

divider

Each stack item will show a divider.

TypeRequiredDefault
React.ReactElementNo