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 🌱 Source

Import

import { Stack, HStack, VStack } from 'react-native-flex-layout';
  • Stack: Used to add spacing and/or dividers between items in the horizontal or vertical direction.
  • HStack: Shorthand for <Stack direction="row" />.
  • VStack: Shorthand for <Stack direction="column" />.

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 true or any custom React element.

Stack items horizontally

Pass the direction and set it to row. Optionally, you can use align and justify to adjust the alignment and distribution of the items.

Notes on Stack vs Flex

Stack's primary use case is to lay items out and control the spacing between each item. If you have a more complicated use case, such as changing the margin on the last child, you can combine Stack and Flex and use justify-content: space-between for more control of the layout.

Props

PropTypeDescription
spacingSpacingThe spacing between items in the stack.
dividerReact.ReactElementIf true, each stack item will show a divider.
dividerStyleStyleProp<ViewStyle>A style object to apply to each divider.
shouldWrapChildrenbooleanIf true, the children will be wrapped in a Box and the Box will take the spacing properties.

...FlexProps , ...SelectorProps