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 | Object |
Whether the layout of the stack is vertical or horizontal. | "vertical" | "horizontal" |
alignment | Object? |
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 | Object? |
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.