Rows

The Rows component is designed to organize its children in rows with consistent vertical spacing. It is particularly useful in building the generic Screen component.

<Rows space={2}>
  <Row flex="content">
    <Placeholder label="header" height={60} />
  </Row>
  <Row>
    <Placeholder label="body" flex="fluid" />
  </Row>
  <Row flex="content">
    <Placeholder label="footer" height={60} />
  </Row>
</Rows>

If you have rows with varying heights, you can use the alignY prop to align them vertically.

<Rows space={2} alignY="center">
  <Row height={60}>
    <Placeholder flex="fluid" label="1" />
  </Row>
  <Row height={140}>
    <Placeholder flex="fluid" label="2" />
  </Row>
  <Row height={100}>
    <Placeholder flex="fluid" label="3" />
  </Row>
</Rows>

The alignX prop can also help horizontally align the rows when their total width is less than that of the parent container.

<Rows space={2} alignX="center">
  <Row width={200}>
    <Placeholder flex="fluid" label="1" />
  </Row>
  <Row width={300}>
    <Placeholder flex="fluid" label="2" />
  </Row>
  <Row width={240}>
    <Placeholder flex="fluid" label="3" />
  </Row>
</Rows>

To set the flex value of a row, you can place Row directly inside Rows and set a flex property. To define a default flex for all rows, use the defaultFlex property on Rows.

<Rows space={2} defaultFlex="1/5">
  <Placeholder label="1" flex="fluid" />
  <Row flex="fluid">
    <Placeholder label="2" flex="fluid" />
  </Row>
  <Placeholder label="3" flex="fluid" />
  <Placeholder label="4" flex="fluid" />
</Rows>

Custom Row component

To include a custom component within Rows, you should utilize the Row.from method. This method enables you to create a new Row instance from a custom component and use it in your Rows layout. Following this approach, you can ensure your custom component is correctly integrated and behaves as expected.

const Content = Row.from<Props>(props => {
  return <Box {...props} />;
});

Props

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

defaultFlex

space

alignX

alignY