Stack
A container for other components that allows them to be stacked horizontally or vertically. When building complex UIs, this will be your primary building block.
| Name | Type | Description | Options |
|---|---|---|---|
| direction | string |
Whether the layout of the stack is vertical or horizontal. | "vertical" | "horizontal" |
| alignment | string? |
Describes how the stack should lay out its children. | "flex-end" | "center" | "flex-start" | "space-around" | "space-evenly" |
| paddingVertical | VerticalSpacing? |
The amount of vertical spacing between each of the stack’s children. | |
| paddingHorizontal | HorizontalSpacing? |
The amount of horizontal spacing between each of the stack’s children. | |
| spacing | Spacing? |
The amount of spacing between each of the stack’s children. For certain kinds of alignments such as space-evenly, the spacing will be ignored. The default value is 1. | 0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 16 |
| flexChildren | boolean? |
If true, the Stack will allow its children to take as much room as they can. If false, the children of the Stack will take only as much room as they need. |
|
| flex | number? |
The rule associated with how much the stack should grow to fill the available space. A value of 0 will tell the Stack and its children to occupy just enough space as they need. A value of 1 will tell the Stack to take up as much space as it can. |
|
| flexWrap | string? |
The rule associated with whether components that overflow should be allowed to create a new row or column. | "wrap" | "nowrap" | "wrap-reverse" | undefined |
The following examples will demonstrate some, but not all of the abilities of the Stack component. In all the following examples we will be applying horizontalPadding of ExtraExtraLarge, since this is the default that we use on POS when we wrap our screens. For simplicity, these examples use the React version of the Stack component, but the same results will be achieved by using the same props with the regular JS library.
Horizontal Stack with default values
Anchor link to section titled "Horizontal Stack with default values"In this example, we specify horizontal for the direction. We don't specify the flex, which means it's 0 by default. However, horizontal stacks will always stretch to fill from the left to the right of the screen. As you can see, we have two small buttons occupying just the amount of space that they need, at the left side of the Stack. This is because alignment is set to flex-end by default.
Horizontal Stack with flexChildren
Anchor link to section titled "Horizontal Stack with flexChildren"Similar to the example above, but this time we are specifying flexChildren to be true. This means that the two buttons will take up the max amount of space that they can within the horizontal stack.
Horizontal Stack with centered children
Anchor link to section titled "Horizontal Stack with centered children"You can also center elements in your horizontal stack. For this, you can specify the alignment to be center. However, in this case you also want flexChildren to be false (which is the default), so that the children can take up the minimal amount of space that they need, and be centered.
Horizontal Stack with children at the end
Anchor link to section titled "Horizontal Stack with children at the end"To make the children be aligned to the end of your horizontal container, you just need to specify alignment to be flex-end. Note that in the first example, the children were at the start of the container. This is because the default value is flex-start.
Vertical Stack
Anchor link to section titled "Vertical Stack"You can specify your Stack to layout its children vertically by setting direction to vertical.
Vertical Stack with centered children
Anchor link to section titled "Vertical Stack with centered children"You can center your stack's children along the vertical axis by setting the alignment to center. However, because vertical stacks only take up the minimal amount of vertical space required when flex is set to 0 (which is by default), you will need to set flex to 1
Vertical Stack with children at the bottom
Anchor link to section titled "Vertical Stack with children at the bottom"You can set your children to the bottom of your vertical stack by setting alignment to flex-end. As explained in the previous example, you also need to set flex to 1, since the default is 0, which will make your container only take up the minimum amount of space it needs.
Nested Stack
Anchor link to section titled "Nested Stack"Now that we've run through a few examples of what a Stack can do, let's move on to something more complex. You can nest multiple Stacks of different configurations to achieve a more complex UI. In this example, we will create a row that displays several labels and an icon. This will mimic some of the basic rows that you can find across different POS screens.
Let's put the Selectable aside for now; we'll get to that later. If you look at the first Stack, this is our parent Stack. We've set its direction to horizontal and its alignment to space-between. Then, we've added some vertical and horizontal padding (as highlighted in the screenshot).
As you can see, there are two child Stacks. Because the parent Stack is set to space-between, these two child Stacks are spread to each end of the parent horizontal Stack. Both of these child Stacks occupy the amount of space they need, but not more.
The first child Stack is a simple vertical Stack that stacks the two left labels. It specifies the spacing to be 0.5 (the default is 1, and this was a bit too much).
The second child Stack has another nested Stack. Let's discuss the nested Stack first. This is a horizontal Stack that lays out a text label and an icon horizontally. We then apply a bit of padding. That horizontal Stack is wrapped in a vertical Stack. The reason for this is to align the horizontal Stack on the center of the vertical axis, giving it a nicer appearance. Without it, the horizontal Stack would be located at the same height as the "Hello world!" Text on the left side of our row. But by specifying a flex of 1, we are telling the vertical Stack to take as much vertical space as it can within its parent container. And then we specify an alignment of center, which lays out its child horizontal Stack on the center of its vertical axis.
Finally, we can return to the Selectable. You'll notice that we've wrapped the entire Stack in a Selectable. This makes the entire Stack within the Selectable become a tappable surface, with an onPress handler, which is part of the Selectable component. It also gives a nice highlight effect when you tap, as you can see in the screenshot.
