Skip to main content


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

💬 Feedback 🌱 Source


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" />.


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.


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