Skip to main content

Stack

Stack is a layout component that makes it easy to stack elements together and apply a space between them.

💬 Feedback

Import

import { Stack, HStack, VStack } from "@react-native-material/core";
  • Stack: Used to add spacing between elements in the horizontal or vertical direction. It supports responsive values.
  • HStack: Used to add spacing between elements in horizontal direction, and centers them.
  • VStack: Used to add spacing between elements in vertical direction only, and centers them.

Usage

To stack elements in horizontal or vertical direction only, use the HStack or VStack components. You can also use the Stack component as well and pass the direction prop.

Adding dividers

In some scenarios, you may want to add dividers between stacked elements. Pass the divider prop and set its value to the Divider or any custom React element.

Props

spacing

The spacing between the stack items.

Type: number;

Optional: Yes

divider

A React.Node to render between each stack item.

Type: React.ReactNode;

Optional: Yes

...FlexProps