HStack

A SwiftUI HStack component for horizontal layouts.

iOS

tvOS

Included in Expo Go

GitHub

npm

Changelog

Recommended version:

~57.0.18

For cross-platform usage, see the universal Row — it renders the appropriate native component per platform.

Expo UI HStack matches the official SwiftUI HStack API and arranges its children horizontally.

Four numbered colored rounded squares arranged horizontally in an HStack

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun 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 horizontal stack

BasicHStackExample.tsx

import { Host, HStack, Text } from '@expo/ui/swift-ui';

export default function BasicHStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <HStack spacing={12}>
        <Text>First</Text>
        <Text>Second</Text>
        <Text>Third</Text>
      </HStack>
    </Host>
  );
}

With alignment

The alignment prop controls vertical alignment of children. Available options are: top, center, bottom, firstTextBaseline, and lastTextBaseline.

HStackAlignmentExample.tsx

import { Host, HStack, Rectangle } from '@expo/ui/swift-ui';
import { frame } from '@expo/ui/swift-ui/modifiers';

export default function HStackAlignmentExample() {
  return (
    <Host style={{ flex: 1 }}>
      <HStack spacing={12} alignment="top">
        <Rectangle modifiers={[frame({ width: 50, height: 50 })]} />
        <Rectangle
          modifiers={[frame({ width: 50, height: 100 })]}
        />
        <Rectangle modifiers={[frame({ width: 50, height: 75 })]} />
      </HStack>
    </Host>
  );
}

API

import { HStack } from '@expo/ui/swift-ui';

Component

`HStack`

iOS

tvOS

Type: React.Element<HStackProps>

HStackProps

`alignment`

iOS

tvOS

Optional • Literal type: string

The vertical alignment of children within the stack.

Acceptable values are: 'center' | 'top' | 'bottom' | 'firstTextBaseline' | 'lastTextBaseline'

`children`

iOS

tvOS

Type: ReactNode

`spacing`

iOS

tvOS

Optional • Type: number

The spacing between children.

Inherited props

CommonViewModifierProps