LazyColumn

A Jetpack Compose LazyColumn component for displaying scrollable lists.

Android

Recommended version:

~55.0.17

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

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun 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>
          <ListItem.HeadlineContent>Spaced item 1</ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>Spaced item 2</ListItem.HeadlineContent>
        </ListItem>
        <ListItem>
          <ListItem.HeadlineContent>Spaced item 3</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';

No API data file found, sorry!