This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

Expo UI LazyVStack matches the official SwiftUI LazyVStack API and arranges its children vertically.

Installation

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

Usage

Basic lazy vertical stack

Put LazyVStack inside a ScrollView. Each child of LazyVStack is one row. Use the spacing and alignment props to space and align the rows.

BasicLazyVStackExample.tsx

Copy

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

export default function BasicLazyVStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ScrollView>
        <LazyVStack spacing={12}>
          <Text>Wi-Fi</Text>
          <Text>Bluetooth</Text>
          <Text>Notifications</Text>
        </LazyVStack>
      </ScrollView>
    </Host>
  );
}

Large lists

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

LargeLazyVStackExample.tsx

Copy

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

type Contact = { id: string; name: string };

const contacts: Contact[] = Array.from(
  { length: 10000 },
  (_, i) => ({
    id: String(i),
    name: `Contact ${i + 1}`,
  })
);

function renderContact({ item }: { item: Contact }) {
  return <Text>{item.name}</Text>;
}

export default function LargeLazyVStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ScrollView>
        <LazyVStack spacing={12}>
          <LazyVStack.ForEach
            data={contacts}
            keyExtractor={contact => contact.id}
            estimatedItemSize={20}>
            {renderContact}
          </LazyVStack.ForEach>
        </LazyVStack>
      </ScrollView>
    </Host>
  );
}

Follow these rules when you render rows:

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

API

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

Components