Stack
Stack is a layout component that makes it easy to stack elements together and apply a space between them.
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​
| Prop | Type | Description |
|---|---|---|
spacing | Spacing | The spacing between items in the stack. |
divider | React.ReactElement | If true, each stack item will show a divider. |
dividerStyle | StyleProp<ViewStyle> | A style object to apply to each divider. |
shouldWrapChildren | boolean | If true, the children will be wrapped in a Box and the Box will take the spacing properties. |