This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

Row

A horizontal layout container for universal @expo/ui components.

Android

iOS

Web

Included in Expo Go

A horizontal layout container that arranges its children from start to end. Delegates to Jetpack Compose's Row on Android, SwiftUI's HStack on iOS, and a flex View on web.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic row

RowExample.tsx

import { Host, Row, Text } from '@expo/ui';

export default function RowExample() {
  return (
    <Host matchContents>
      <Row spacing={8}>
        <Text>One</Text>
        <Text>Two</Text>
        <Text>Three</Text>
      </Row>
    </Host>
  );
}

Alignment

Use alignment to position children along the cross (vertical) axis.

RowAlignmentExample.tsx

import { Host, Row, Text } from '@expo/ui';

export default function RowAlignmentExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Row spacing={8} alignment="center">
        <Text>Centered</Text>
        <Text>Centered</Text>
      </Row>
    </Host>
  );
}

Pushing content apart with Spacer

Pair Row with a flexible Spacer to push its children to the opposite ends.

RowSpacerExample.tsx

import { Host, Row, Text, Spacer } from '@expo/ui';

export default function RowSpacerExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Row>
        <Text>Leading</Text>
        <Spacer flexible />
        <Text>Trailing</Text>
      </Row>
    </Host>
  );
}

API

import { Row } from '@expo/ui';

No API data file found, sorry!