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

LazyColumn

A Jetpack Compose LazyColumn component for displaying scrollable lists.

Android

Included in Expo Go

GitHub

npm

Changelog

A lazily-loaded vertical list component that only renders visible items for efficient scrolling. See the official Jetpack Compose documentation for more information.

LazyColumn is not truly lazy yet: the native side only composes 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.

LazyColumn rendering a settings list of five Material 3 list items

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 column

BasicLazyColumn.tsx

import { Host, LazyColumn, ListItem } from '@expo/ui/jetpack-compose';

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

export default function BasicLazyColumn() {
  return (
    <Host style={{ height: 400 }}>
      <LazyColumn>
        {items.map(item => (
          <ListItem key={item} headline={item} />
        ))}
      </LazyColumn>
    </Host>
  );
}

With arrangement

Use the verticalArrangement prop to control how items are spaced within the list. Pass a string value like 'spaceBetween' or an object like { spacedBy: 8 } for fixed spacing in dp.

LazyColumnArrangement.tsx

import { Host, LazyColumn, ListItem, Text } from '@expo/ui/jetpack-compose';

export default function LazyColumnArrangement() {
  return (
    <Host style={{ height: 400 }}>
      <LazyColumn verticalArrangement={{ spacedBy: 8 }} horizontalAlignment="center">
        <ListItem>
          <ListItem.HeadlineContent>
            <Text>Spaced Item 1</Text>
          </ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>
            <Text>Spaced Item 2</Text>
          </ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>
            <Text>Spaced Item 3</Text>
          </ListItem.HeadlineContent>
        </ListItem>
      </LazyColumn>
    </Host>
  );
}

With content padding

Use the contentPadding prop to add padding around the list content in dp.

LazyColumnPadding.tsx

import { Host, LazyColumn, ListItem } from '@expo/ui/jetpack-compose';

export default function LazyColumnPadding() {
  return (
    <Host style={{ height: 400 }}>
      <LazyColumn contentPadding={{ start: 16, top: 8, end: 16, bottom: 8 }}>
        <ListItem>
          <ListItem.HeadlineContent>Padded item 1</ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>Padded item 2</ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>Padded item 3</ListItem.HeadlineContent>
        </ListItem>
      </LazyColumn>
    </Host>
  );
}

API

import { LazyColumn } from '@expo/ui/jetpack-compose';

Component

`LazyColumn`

Android

Type: React.Element<LazyColumnProps>

A lazy column component that efficiently displays a vertically scrolling list.

LazyColumnProps

`children`

Android

Optional • Type: React.ReactNode

The content to display inside the lazy column.

`contentPadding`

Android

Optional • Type: ContentPadding

Content padding in dp.

`horizontalAlignment`

Android

Optional • Literal type: string

The horizontal alignment of items.

Acceptable values are: 'start' | 'end' | 'center'

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`verticalArrangement`

Android

Optional • Literal type: union

The vertical arrangement of items. Can be a preset string or an object with spacedBy to specify spacing in dp.

Acceptable values are: 'top' | 'bottom' | 'center' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly' | { spacedBy: number }

Types

`ContentPadding`

Android

Content padding values for LazyColumn.

Property	Type	Description
bottom(optional)	`number`	Bottom padding in dp.
end(optional)	`number`	End padding in dp.
start(optional)	`number`	Start padding in dp.
top(optional)	`number`	Top padding in dp.