Tiles

The Tiles component displays a grid of elements with equal spacing between them. You can use the space and columns props to customize the spacing and number of columns per screen size.

The space prop adjusts the spacing between the tiles.

<Stack space={8}>
  <Tiles space={2} columns={2}>
    <Placeholder label="1" />
    <Placeholder label="1" />
    <Placeholder label="3" />
    <Placeholder label="4" />
  </Tiles>
  <Tiles spaceX={2} spaceY={4} columns={3}>
    <Placeholder label="1" />
    <Placeholder label="2" />
    <Placeholder label="3" />
    <Placeholder label="4" />
  </Tiles>
</Stack>

The columns prop sets the number of columns to display.

<Tiles space={2} columns={3} fill={true}>
  <Placeholder label="1" />
  <Placeholder label="2" />
  <Placeholder label="3" />
  <Placeholder label="4" flex="fluid" />
  <Tiles space={2} columns={2} fill={true}>
    <Placeholder label="5.1" />
    <Placeholder label="5.2" />
    <Placeholder label="5.3" />
  </Tiles>
</Tiles>

The fill prop allows you to determine whether the empty content needs to be filled if the last row has fewer columns than defined in the columns prop. Depending on your requirements, you can set the value of the fill prop to true or false.

<Tiles space={2} columns={3} fill={true}>
  <Placeholder label="1" />
  <Placeholder label="2" />
  <Placeholder label="3" />
  <Placeholder label="4" />
</Tiles>

Props

The Tiles component is created using the Box component. It extends all the props* supported by Box, as well as React Native View (opens in a new tab), and the props mentioned below.

columns

space

spaceX 🚀

spaceY

fill