LazyHStack

Expo UI LazyHStack matches the official SwiftUI LazyHStack API and arranges its children horizontally, creating items only as needed (when they become visible during scrolling).

LazyHStack is not truly lazy yet: the native side only builds visible items, but React still creates every child up front, so large lists can be slow to mount. We are working on improving this. For large lists, we recommend FlashList or Legend List.

Usage

Basic lazy horizontal stack

LazyHStack should be used inside a ScrollView with axes="horizontal" to enable lazy rendering.

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

export default function BasicLazyHStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ScrollView axes="horizontal">
        <LazyHStack spacing={12}>
          {Array.from({ length: 100 }, (_, i) => (
            <Text key={i}>{`Item ${i}`}</Text>
          ))}
        </LazyHStack>
      </ScrollView>
    </Host>
  );
}

With alignment

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

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

export default function LazyHStackAlignmentExample() {
  return (
    <Host
      matchContents={{ horizontal: true }}
      style={{ flex: 1, alignSelf: 'center' }}>
      <ScrollView axes="horizontal">
        <LazyHStack 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 })]}
          />
        </LazyHStack>
      </ScrollView>
    </Host>
  );
}

API

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

Component

`LazyHStack`

Type: React.Element<LazyHStackProps>

LazyHStackProps

`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

CommonViewModifierProps

Modifiers

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

Modifiers for LazyHStack

scrollTargetLayout iOS 17+

Modifiers for any view

Sources

The original Expo docs for this page:

LazyHStack (SwiftUI) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/lazyhstack.md)

On this page