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.
||Whether the layout of the stack is vertical or horizontal.||
||Describes how the stack should lay out its children.||
||The amount of vertical spacing between each of the stack’s children.|
||The amount of horizontal spacing between each of the stack’s children.|
||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.||
||The rule associated with how much the stack should grow to fill the available space. A value of
||The rule associated with whether components that overflow should be allowed to create a new row or column.||
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
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 valuesAnchor 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 flexChildrenAnchor 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 with centered childrenAnchor 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 endAnchor 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
Vertical StackAnchor link to section titled "Vertical Stack"
You can specify your
Stack to layout its children vertically by setting
Vertical Stack with centered childrenAnchor link to section titled "Vertical Stack with centered children"
You can center your stack's children along the
vertical axis by setting the
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
Vertical Stack with children at the bottomAnchor 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
flex-end. As explained in the previous example, you also need to set
1, since the default is
0, which will make your container only take up the minimum amount of space it needs.
Nested StackAnchor 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
horizontal and its
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
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.