Documentation
Components
Inline

Inline

The Inline component arranges its children horizontally, allowing you to display multiple items side by side. If the children exceed the available space, the component wraps them to the next line, with equal spacing between children.

Space

<Stack space={8}>
  <Inline space={2}>
    <Placeholder width={40} label="1" />
    <Placeholder width={50} label="2" />
    <Placeholder width={90} label="3" />
    <Placeholder width={40} label="4" />
    <Placeholder width={60} label="5" />
    <Placeholder width={80} label="6" />
    <Placeholder width={50} label="7" />
    <Placeholder width={40} label="8" />
    <Placeholder width={50} label="9" />
  </Inline>
  <Inline spaceX={2} spaceY={4}>
    <Placeholder width={60} label="1" />
    <Placeholder width={80} label="2" />
    <Placeholder width={70} label="3" />
    <Placeholder width={40} label="4" />
    <Placeholder width={50} label="5" />
    <Placeholder width={60} label="6" />
    <Placeholder width={60} label="7" />
    <Placeholder width={40} label="8" />
    <Placeholder width={70} label="9" />
  </Inline>
</Stack>
Expand code

The alignX prop can be used to align children horizontally.

AlignX

<Inline space={2} alignX="center">
  <Placeholder width={60} label="1" />
  <Placeholder width={80} label="2" />
  <Placeholder width={70} label="3" />
  <Placeholder width={40} label="4" />
  <Placeholder width={50} label="5" />
  <Placeholder width={60} label="6" />
  <Placeholder width={60} label="7" />
  <Placeholder width={40} label="8" />
</Inline>

The alignY prop enables you to vertically align children of varying heights vertically, ensuring they are all at the same level.

AlignY

<Inline space={2} alignX="between" alignY="center">
  <Placeholder width={60} height={50} label="1" />
  <Placeholder width={80} height={30} label="2" />
  <Placeholder width={70} height={40} label="3" />
  <Placeholder width={40} height={60} label="4" />
  <Placeholder width={50} height={40} label="5" />
  <Placeholder width={60} height={30} label="6" />
  <Placeholder width={60} height={50} label="7" />
  <Placeholder width={40} height={60} label="8" />
  <Placeholder width={70} height={30} label="9" />
</Inline>

The collapseBelow prop allows you to collapse all items into a single vertical stack, ensuring that your content remains accessible, even on smaller screens.

Props

The Inline 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.

*

Unavailable Box props:: gap, rowGap, columnGap, direction, wrap

space

Type
ResponsiveProp<number>

Sets the space between children.

spaceX 🚀

Type
ResponsiveProp<number>

Sets the horizontal space between children.

spaceY

Type
ResponsiveProp<number>

Sets the vertical space between children.

alignX

Type
ResponsiveProp<AxisX | Space>

Aligns children horizontally.

alignY

Type
ResponsiveProp<AxisY>

Aligns children vertically.

collapseBelow

Type
Breakpoint

Stacks children vertically when the current breakpoint is smaller than the provided breakpoint.

HiddenInset