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.

<Screen name="Home">
  <Stack direction="horizontal" paddingHorizontal={'ExtraExtraLarge'}>
    <Button title="Hello" />
    <Button title="Hello" />
  </Stack>
</Screen>;

Stack

StackProps

alignment

The alignment of the children along the cross axis.

direction

The direction of the stack.

flex

The flex value for the stack.

flexChildren

Whether the children should be stretched to fill the cross axis.

flexWrap

Wrap behavior for the children of the stack.

paddingHorizontal

The horizontal padding around the stack.

paddingVertical

The vertical padding around the stack.

spacing

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