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

LazyColumn

A Jetpack Compose LazyColumn component for displaying scrollable lists.

Android

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.

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 } from '@expo/ui/jetpack-compose';

export default function LazyColumnArrangement() {
  return (
    <Host style={{ height: 400 }}>
      <LazyColumn verticalArrangement={{ spacedBy: 8 }} horizontalAlignment="center">
        <ListItem headline="Spaced item 1" />
        <ListItem headline="Spaced item 2" />
        <ListItem headline="Spaced item 3" />
      </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 headline="Padded item 1" />
        <ListItem headline="Padded item 2" />
        <ListItem headline="Padded item 3" />
      </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.