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

direction

The direction of the stack.

alignment

The alignment of the children along the cross axis.

paddingVertical

The vertical padding around the stack.

paddingHorizontal

The horizontal padding around the stack.

spacing

The spacing between each child in the stack.

flexChildren

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

flex

The flex value for the stack.

flexWrap

Wrap behavior for the children of the stack.

VerticalSpacing

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

HorizontalSpacing

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

Spacing

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