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.

<Stack spacing={16}>
<Box w={64} h={64} />
<Box w={64} h={64} />
<Box w={64} h={64} />
</Stack>

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.

<VStack spacing={16} divider={true}>
<Box w={64} h={64} />
<Box w={64} h={64} />
<Box w={64} h={64} />
</VStack>

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