LazyVStack

A SwiftUI LazyVStack component for lazy vertical layouts.

iOS

tvOS

Included in Expo Go

Recommended version:

~56.0.20

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

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

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 vertical stack

LazyVStack should be used inside a ScrollView to enable lazy rendering.

BasicLazyVStackExample.tsx

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

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

With alignment

The alignment prop controls horizontal alignment of children. Available options are: leading, center, and trailing.

LazyVStackAlignmentExample.tsx

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

export default function LazyVStackAlignmentExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ScrollView>
        <LazyVStack spacing={12} alignment="leading">
          <Rectangle modifiers={[frame({ width: 50, height: 50 })]} />
          <Rectangle modifiers={[frame({ width: 100, height: 50 })]} />
          <Rectangle modifiers={[frame({ width: 75, height: 50 })]} />
        </LazyVStack>
      </ScrollView>
    </Host>
  );
}

API

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

Component

`LazyVStack`

iOS

tvOS

Type: React.Element<LazyVStackProps>

LazyVStackProps

`alignment`

iOS

tvOS

Optional • Literal type: string

The horizontal alignment of children within the stack.

Acceptable values are: 'center' | 'leading' | 'trailing'

`children`

iOS

tvOS

Type: ReactNode

`spacing`

iOS

tvOS

Optional • Type: number

The spacing between children.

Inherited Props

CommonViewModifierProps