Docs
BlogChangelogStar Us on GitHub
HomeGuidesEASReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

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

Row

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

Android
iOS
Web
Included in Expo Go

GitHub

npm

Changelog

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';

Component

Row

Android
iOS
Web

Type: React.Element<RowProps>

A horizontal layout container that arranges its children from start to end.

Props for the Row component, a horizontal layout container.

RowProps

alignment

Android
iOS
Web
Optional • Literal type: string • Default: 'start'

Cross-axis (vertical) alignment of children.

Acceptable values are: 'start' | 'center' | 'end'

children

Android
iOS
Web
Optional • Type: ReactNode

Content to render inside the row.

disabled

Android
iOS
Web
Optional • Type: boolean

Whether the component is disabled. Disabled components do not respond to user interaction.

hidden

Android
iOS
Web
Optional • Type: boolean

Whether the component is hidden.

modifiers

Android
iOS
Optional • Type: ModifierConfig[]

Platform-specific modifier escape hatch. Pass an array of modifier configs from @expo/ui/swift-ui/modifiers or @expo/ui/jetpack-compose/modifiers. A modifier supplied here replaces any modifier of the same type that the component derives from style or other props.

onAppear

Android
iOS
Web
Optional • Type: () => void

Called when the component appears on screen.

onDisappear

Android
iOS
Web
Optional • Type: () => void

Called when the component is removed from screen.

onPress

Android
iOS
Web
Optional • Type: () => void

Called when the component is pressed.

spacing

Android
iOS
Web
Optional • Type: number

Horizontal spacing between children, in density-independent pixels.

style

Android
iOS
Web
Optional • Type: Pick<ViewStyle, 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'opacity' | 'width' | 'height'>

Platform-agnostic style properties. These are translated to SwiftUI modifiers on iOS and Jetpack Compose modifiers on Android.

testID

Android
iOS
Web
Optional • Type: string

Identifier used to locate the component in end-to-end tests.