Choose a version:

Stack

The Stack component organizes elements horizontally or vertically along the block or inline axis. Use it to structure layouts, group related components, or control spacing between elements with flexible alignment options.

The component simplifies layout creation by automatically managing spacing between child elements through gap properties, eliminating the need for manual margin management. It supports both horizontal and vertical arrangements, flexible alignment options, and wrapping behavior, making it the foundation for building consistent, responsive layouts throughout POS extensions.

Stack components support responsive gap values that automatically adjust spacing based on screen size, ensuring layouts remain visually balanced and maintain proper element separation across different devices.

Support

Targets (6)

Supported targets

Use cases

Organized layouts: Arrange form elements, buttons, or content in organized layouts.
Responsive design: Create responsive layouts that adapt to different screen sizes.
Consistent spacing: Control spacing between elements for visual hierarchy.
Precise alignment: Align content precisely using justify and align properties.

Anchor to examplesExamples

Anchor to example-layout-elements-horizontally-or-verticallyLayout elements horizontally or vertically

Organize UI elements horizontally or vertically with automatic spacing management. This example shows a Stack with default values, demonstrating how to structure layouts and control element spacing through gap properties without manual margin management.

Layout elements horizontally or vertically

React

</Stack>

</Screen>;

Anchor to example-arrange-elements-verticallyArrange elements vertically

Stack elements vertically by setting direction="block". This creates a vertical layout with automatic gap spacing between elements, ideal for forms, lists, or any vertically-stacked content.

Arrange elements vertically

React

</Stack>

</Screen>;

Anchor to example-center-content-on-both-axesCenter content on both axes

Center elements both horizontally and vertically using justifyContent="center", alignContent="center", and alignItems="center" with custom blockSize="50%" and inlineSize="100%". All three alignment properties work together to create perfectly centered content on both axes.

Center content on both axes

React

<Stack

direction="vertical"

flex={1}

alignment="center"

paddingHorizontal={'ExtraExtraLarge'}

</Stack>

</Screen>;

Anchor to example-center-elements-horizontallyCenter elements horizontally

Center elements horizontally using justifyContent="center" with flexChildren={false} (default). This positions children in the center while keeping them at their minimum required size, ideal for centered button groups without stretching.

Center elements horizontally

React

<Stack

direction="horizontal"

alignment="center"

paddingHorizontal={'ExtraExtraLarge'}

</Stack>

</Screen>;

Anchor to example-expand-children-to-fill-available-spaceExpand children to fill available space

Make child components expand to fill available space in an inline stack using flexChildren={true}. This stretches the two buttons to occupy maximum space within the inline container, distributing space evenly across children for full-width layouts.

Expand children to fill available space

React

<Stack

direction="horizontal"

flexChildren

paddingHorizontal={'ExtraExtraLarge'}

</Stack>

</Screen>;

Anchor to example-create-complex-layouts-with-nested-stacksCreate complex layouts with nested stacks

Nest multiple stacks to build sophisticated layouts. This example creates a tappable row using an inline parent stack with justifyContent="space-between" and inlineSize="100%" containing two child stacks: a block stack (left) with gap 100 for labels, and an inline stack (right) with gap 600 for text and icon. The entire structure is wrapped in a Selectable component for tap interaction with visual highlight.

Create complex layouts with nested stacks

React

<Selectable onPress={() => console.log('You tapped this row!')}>

// Parent stack

<Stack

direction="horizontal"

alignment="space-between"

paddingVertical={'Medium'}

paddingHorizontal={'ExtraExtraLarge'}

// First child stack

<Text>Hello world!</Text>

This is an example of nested stacks!

</Text>

</Stack>

// Second child stack

// Horizontal stack for the right label and chevron icon

</Stack>

</Selectable>

</Screen>;

Anchor to example-space-elements-apart-verticallySpace elements apart vertically

Distribute children vertically using justifyContent="space-between" with blockSize="50%" for custom height. This example removes the ScrollView wrapper and adds inlinePadding="450" to mimic screen header padding, spreading children across the available height with maximum spacing.

Space elements apart vertically

React

<Stack

direction="vertical"

flex={1}

alignment="flex-end"

paddingHorizontal={'ExtraExtraLarge'}

</Stack>

</Screen>;

Examples

Layout elements horizontally or vertically
Description
Organize UI elements horizontally or vertically with automatic spacing management. This example shows a Stack with default values, demonstrating how to structure layouts and control element spacing through gap properties without manual margin management.
React
```
<Screen name="Home">
  <Stack direction="horizontal" paddingHorizontal={'ExtraExtraLarge'}>
    <Button title="Hello" />
    <Button title="Hello" />
  </Stack>
</Screen>;
```
Arrange elements vertically
Description
Stack elements vertically by setting `direction="block"`. This creates a vertical layout with automatic gap spacing between elements, ideal for forms, lists, or any vertically-stacked content.
React
```
<Screen name="Home">
  <Stack direction="vertical" paddingHorizontal={'ExtraExtraLarge'}>
    <Button title="Hello" />
    <Button title="Hello" />
  </Stack>
</Screen>;
```
Center content on both axes
Description
Center elements both horizontally and vertically using `justifyContent="center"`, `alignContent="center"`, and `alignItems="center"` with custom `blockSize="50%"` and `inlineSize="100%"`. All three alignment properties work together to create perfectly centered content on both axes.
React
```
<Screen name="Home">
  <Stack
    direction="vertical"
    flex={1}
    alignment="center"
    paddingHorizontal={'ExtraExtraLarge'}
  >
    <Button title="Hello" />
    <Button title="Hello" />
  </Stack>
</Screen>;
```
Center elements horizontally
Description
Center elements horizontally using `justifyContent="center"` with `flexChildren={false}` (default). This positions children in the center while keeping them at their minimum required size, ideal for centered button groups without stretching.
React
```
<Screen name="Home">
  <Stack
    direction="horizontal"
    alignment="center"
    paddingHorizontal={'ExtraExtraLarge'}
  >
    <Button title="Hello" />
    <Button title="Hello" />
  </Stack>
</Screen>;
```
Expand children to fill available space
Description
Make child components expand to fill available space in an inline stack using `flexChildren={true}`. This stretches the two buttons to occupy maximum space within the inline container, distributing space evenly across children for full-width layouts.
React
```
<Screen name="Home">
  <Stack
    direction="horizontal"
    flexChildren
    paddingHorizontal={'ExtraExtraLarge'}
  >
    <Button title="Hello" />
    <Button title="Hello" />
  </Stack>
</Screen>;
```

Create complex layouts with nested stacks

Description

Nest multiple stacks to build sophisticated layouts. This example creates a tappable row using an inline parent stack with `justifyContent="space-between"` and `inlineSize="100%"` containing two child stacks: a block stack (left) with gap 100 for labels, and an inline stack (right) with gap 600 for text and icon. The entire structure is wrapped in a Selectable component for tap interaction with visual highlight.

React

<Screen name="Home">
  <Selectable onPress={() => console.log('You tapped this row!')}>
    // Parent stack
    <Stack
      direction="horizontal"
      alignment="space-between"
      paddingVertical={'Medium'}
      paddingHorizontal={'ExtraExtraLarge'}
    >
      // First child stack
      <Stack direction="vertical" spacing={0.5}>
        <Text>Hello world!</Text>
        <Text variant="captionRegular">
          This is an example of nested stacks!
        </Text>
      </Stack>
      // Second child stack
      <Stack direction="vertical" flex={1} alignment="center">
        // Horizontal stack for the right label and chevron icon
        <Stack direction="horizontal" spacing={2}>
          <Text variant="captionRegular">Let's go!</Text>
          <Icon name="chevron-right" />
        </Stack>
      </Stack>
    </Stack>
  </Selectable>
</Screen>;

Space elements apart vertically
Description
Distribute children vertically using `justifyContent="space-between"` with `blockSize="50%"` for custom height. This example removes the ScrollView wrapper and adds `inlinePadding="450"` to mimic screen header padding, spreading children across the available height with maximum spacing.
React
```
<Screen name="Home">
  <Stack
    direction="vertical"
    flex={1}
    alignment="flex-end"
    paddingHorizontal={'ExtraExtraLarge'}
  >
    <Button title="Hello" />
    <Button title="Hello" />
  </Stack>
</Screen>;
```

Anchor to propertiesProperties

Configure the following properties on the Stack component.

Anchor to direction direction 'vertical' | 'horizontal' required: The direction of the stack.
Anchor to alignment alignment | 'flex-end' | 'center' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly' Default: 'flex-end': The alignment of the children along the cross axis.
Anchor to flex flex number: The flex value for the stack.
Anchor to flexChildren flexChildren boolean: Whether the children should be stretched to fill the cross axis.
Anchor to flexWrap flexWrap 'wrap' | 'nowrap' | 'wrap-reverse': Wrap behavior for the children of the stack.
Anchor to paddingHorizontal paddingHorizontal: The horizontal padding around the stack.
Anchor to paddingVertical paddingVertical: The vertical padding around the stack.
Anchor to spacing spacing Default: 1: The spacing between each child in the stack.

HorizontalSpacing

'HalfPoint' | 'ExtraSmall' | 'Small' | 'Medium' | 'Large' | 'ExtraLarge' | 'ExtraExtraLarge'

VerticalSpacing

'HalfPoint' | 'ExtraSmall' | 'Small' | 'Medium' | 'Large' | 'ExtraLarge'

Spacing

0.5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 16

Anchor to best-practicesBest practices

Apply consistent spacing using numeric values: Use the predefined numeric spacing values (0.5 through 16) to maintain consistency across your interface. Start with 3 or 4 for standard spacing and adjust up or down based on your content hierarchy needs.
Use semantic padding for consistent layouts: Apply paddingVertical and paddingHorizontal using the semantic spacing values (HalfPoint through ExtraLarge) to create consistent padding patterns that align with the POS design system.
Use alignment properties for professional layouts: Use the alignment property to control cross-axis positioning. Choose 'flex-start' for natural alignment, 'center' for centered layouts, or distribution values like 'space-between' for evenly distributed content.
Control flex behavior strategically: Use the flex property to make Stack components grow or shrink within their containers, and flexChildren to stretch child elements to fill available cross-axis space when needed.
Manage wrapping behavior appropriately: Use flexWrap to control how children behave when they exceed container space. Choose 'wrap' for responsive layouts, 'nowrap' for fixed layouts, or 'wrap-reverse' for specialized arrangements.

Anchor to limitationsLimitations

Direction is limited to vertical and horizontal orientations—diagonal or complex arrangements require multiple nested Stack components or alternative layout approaches.
Spacing values are predefined numeric constants—custom spacing values outside the provided scale aren't supported to maintain design consistency.
Flex behavior follows standard CSS flexbox rules—complex layout requirements may need multiple Stack components with different configurations for optimal results.

Was this page helpful?