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

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

Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic lazy horizontal stack

Put LazyHStack inside a ScrollView with axes="horizontal". Each child of LazyHStack is one item. Use the spacing and alignment props to space and align the items.

BasicLazyHStackExample.tsx

Copy

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}>
          <Text>Photos</Text>
          <Text>Music</Text>
          <Text>Videos</Text>
        </LazyHStack>
      </ScrollView>
    </Host>
  );
}

Large lists

Use LazyHStack.ForEach to render items from an array. Pass the items as data, a unique key for each item with keyExtractor, and a children function that returns the view for an item. LazyHStack.ForEach renders only the items near the visible area and reuses them while you scroll.

LargeLazyHStackExample.tsx

Copy

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

const items = Array.from(
  { length: 10000 },
  (_, i) => `Item ${i + 1}`
);

function renderItem({ item }: { item: string }) {
  return <Text>{item}</Text>;
}

export default function LargeLazyHStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ScrollView axes="horizontal">
        <LazyHStack spacing={12}>
          <LazyHStack.ForEach
            data={items}
            keyExtractor={item => item}
            estimatedItemSize={80}>
            {renderItem}
          </LazyHStack.ForEach>
        </LazyHStack>
      </ScrollView>
    </Host>
  );
}

Follow these rules when you render items:

• Define the children function outside the component, or wrap it in useCallback. Otherwise, the items near the visible area render again each time the component renders.
• A reused view keeps the local state (useState) of the item it showed before. Reset the state when the item changes, or keep the state outside the view.
• An item that is not ready yet shows an empty placeholder. Set estimatedItemSize close to the width of your items, in points.
• Use overscanCount to prepare more items before and after the visible items.
• To update the items, pass a new data array. Do not change the array in place.
• Set recycling={false} to render every item up front.

API

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

Components