Expo UI and Router for iOS
Components

HStack

A SwiftUI HStack component for horizontal layouts. Also called Row (Universal).

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

Usage

Basic horizontal stack

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.

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

Type: React.Element<HStackProps>

HStackProps

alignment

Optional • Literal type: string

The vertical alignment of children within the stack.

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

children

Type: ReactNode

spacing

Optional • Type: number

The spacing between children.

Inherited props

Modifiers

Use these modifiers in the modifiers prop of the SwiftUI and Universal version.

Modifiers for HStack

Modifiers for any view

Sources

The original Expo docs for this page:

On this page