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

LazyHStack

A SwiftUI LazyHStack component for lazy horizontal layouts.

iOS

tvOS

GitHub

npm

Changelog

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).

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

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

BasicLazyHStackExample.tsx

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.

LazyHStackAlignmentExample.tsx

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

export default function LazyHStackAlignmentExample() {
  return (
    <Host style={{ flex: 1 }}>
      <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`

iOS

tvOS

Type: React.Element<LazyHStackProps>

LazyHStackProps

`alignment`

iOS

tvOS

Optional • Literal type: string

The vertical alignment of children within the stack.

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

`children`

iOS

tvOS

Type: React.ReactNode

`spacing`

iOS

tvOS

Optional • Type: number

The spacing between children.

Inherited Props

CommonViewModifierProps