Alignment#

Every component in Bumbag Native has the ability to set an alignX or alignY prop, allowing the component to be aligned horizontally or vertically.

Vertical alignment#

I am aligned to the center

Editable example

<Box alignY="center" border="default" height="250px">
  <Text>I am aligned to the center</Text>
</Box>

<Box alignY="center" border="default" height="250px">
  <Text>I am aligned to the center</Text>
</Box>

I am aligned to the top

Editable example

<Box alignY="top" border="default" height="250px">
  <Text>I am aligned to the top</Text>
</Box>

<Box alignY="top" border="default" height="250px">
  <Text>I am aligned to the top</Text>
</Box>

I am aligned to the bottom

Editable example

<Box alignY="bottom" border="default" height="250px">
  <Text>I am aligned to the bottom</Text>
</Box>

<Box alignY="bottom" border="default" height="250px">
  <Text>I am aligned to the bottom</Text>
</Box>

Horizontal alignment#

I am aligned to the center

Editable example

<Box alignX="center" border="default">
  <Text>I am aligned to the center</Text>
</Box>

<Box alignX="center" border="default">
  <Text>I am aligned to the center</Text>
</Box>

I am aligned to the left

Editable example

<Box alignX="left" border="default">
  <Text>I am aligned to the left</Text>
</Box>

<Box alignX="left" border="default">
  <Text>I am aligned to the left</Text>
</Box>

I am aligned to the right

Editable example

<Box alignX="right" border="default">
  <Text>I am aligned to the right</Text>
</Box>

<Box alignX="right" border="default">
  <Text>I am aligned to the right</Text>
</Box>

On this page