Box

A convenient wrapper of React Native's View component. The props API matches the 'Flex' component in Reckon's Balance Design System.

<Box
  background="sunken"
  paddingX="xlarge"
  paddingY="medium"
  rounding="large"
  marginY="medium"
>
  <Text>Hello!</Text>
</Box>

Background

The background prop can be any of our background color tokens. Such as elevated or sunken. All possible options are listed in the props table below.

<Box background="sunken" padding="medium" />
<Box background="elevated" padding="medium" />

Flexbox shortcuts

Box includes special utility props for common flex-related style keys...

• align
• justify
• flex
• grow (flexGrow)
• shrink (flexShrink)
• basis (flexBasis)
• orientation (flexDirection)

Like in CSS, flex is shorthand for flexGrow flexShrink and flexBasis. Do not use flex if any of the other props are defined.

<Box orientation="horizontal">
  <Box
    grow="2"
    background="sunken"
    padding="medium"
    marginRight="medium"
    height={100}
    justify="center"
    align="center"
  >
    <Text>Hello!</Text>
  </Box>
  <Box
    grow="1"
    background="sunken"
    padding="medium"
    height={100}
    justify="end"
    align="end"
  >
    <Text>Hello!</Text>
  </Box>
</Box>

Margin and Padding

This components mimics the Box component from our web design system for margin and padding. Margin and padding can be controlled in any direction, using shorthand utility props like padding, for padding in all directions, paddingX for horizontal padding, or paddingLeft for padding left. Margin follows the same rules.

<Box
  background="sunken"
  paddingLeft="xlarge"
  paddingTop="small"
  paddingBottom="medium"
  marginX="medium"
  marginY="large"
>
  <Text>Hello!</Text>
</Box>

The valid tokens for these props come from 'spacing'.

Radii (border radius)

Like margin and padding, radii is also done using utility props, and each direction can be adjusted independently.

<Box rounding="large" padding="medium" margin="medium" background="sunken">
  <Text>Hello!</Text>
</Box>

All props