LazyRow

A Jetpack Compose LazyRow component for displaying horizontally scrolling lists.

Android

Included in Expo Go

GitHub

npm

Changelog

Bundled version:

~56.0.16

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

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

LazyRow rendering colored category cards in a horizontally scrolling 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 row

BasicLazyRow.tsx

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

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

export default function BasicLazyRow() {
  return (
    <Host style={{ height: 100 }}>
      <LazyRow>
        {items.map(item => (
          <Text key={item}>{item}</Text>
        ))}
      </LazyRow>
    </Host>
  );
}

With arrangement

Use the horizontalArrangement 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.

LazyRowArrangement.tsx

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

export default function LazyRowArrangement() {
  return (
    <Host style={{ height: 100 }}>
      <LazyRow horizontalArrangement={{ spacedBy: 16 }} verticalAlignment="center">
        <Text>Spaced item 1</Text>
        <Text>Spaced item 2</Text>
        <Text>Spaced item 3</Text>
      </LazyRow>
    </Host>
  );
}

With content padding

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

LazyRowPadding.tsx

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

export default function LazyRowPadding() {
  return (
    <Host style={{ height: 100 }}>
      <LazyRow contentPadding={{ start: 16, top: 8, end: 16, bottom: 8 }}>
        <Text>Padded item 1</Text>
        <Text>Padded item 2</Text>
        <Text>Padded item 3</Text>
      </LazyRow>
    </Host>
  );
}

API

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

Component

`LazyRow`

Android

Type: React.Element<LazyRowProps>

A lazy row component that efficiently displays a horizontally scrolling list.

LazyRowProps

`children`

Android

Optional • Type: React.ReactNode

The content to display inside the lazy row.

`contentPadding`

Android

Optional • Type: ContentPadding

Content padding in dp.

`horizontalArrangement`

Android

Optional • Literal type: union

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

Acceptable values are: 'start' | 'end' | 'center' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly' | { spacedBy: number }

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`verticalAlignment`

Android

Optional • Literal type: string

The vertical alignment of items.

Acceptable values are: 'top' | 'bottom' | 'center'