LazyRow

A Jetpack Compose LazyRow component for displaying horizontally scrolling lists.

Android

Included in Expo Go

GitHub

npm

Changelog

Recommended version:

~57.0.11

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,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';
import {
  border,
  padding,
} from '@expo/ui/jetpack-compose/modifiers';

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

export default function BasicLazyRow() {
  const colors = useMaterialColors();

  return (
    <Host style={{ height: 100 }}>
      <LazyRow>
        {items.map(item => (
          <Text
            key={item}
            style={{ fontSize: 28 }}
            color={colors.onBackground}
            modifiers={[
              border(1, colors.outline),
              padding(12, 6, 12, 6),
            ]}>
            {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,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';
import {
  border,
  padding,
} from '@expo/ui/jetpack-compose/modifiers';

export default function LazyRowArrangement() {
  const colors = useMaterialColors();

  return (
    <Host style={{ height: 100 }}>
      <LazyRow
        horizontalArrangement={{ spacedBy: 16 }}
        verticalAlignment="center">
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          Spaced item 1
        </Text>
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          Spaced item 2
        </Text>
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          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,
  useMaterialColors,
} from '@expo/ui/jetpack-compose';
import {
  border,
  padding,
} from '@expo/ui/jetpack-compose/modifiers';

export default function LazyRowPadding() {
  const colors = useMaterialColors();

  return (
    <Host style={{ height: 100 }}>
      <LazyRow
        contentPadding={{ start: 16, top: 8, end: 16, bottom: 8 }}>
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          Padded item 1
        </Text>
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          Padded item 2
        </Text>
        <Text
          style={{ fontSize: 28 }}
          color={colors.onBackground}
          modifiers={[
            border(1, colors.outline),
            padding(12, 6, 12, 6),
          ]}>
          Padded item 3
        </Text>
      </LazyRow>
    </Host>
  );
}

API

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

Component

`LazyRow`

Type: React.Element<LazyRowProps>

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

LazyRowProps

`children`

Optional • Type: ReactNode

The content to display inside the lazy row.

`contentPadding`

Optional • Type: ContentPadding

Content padding in dp.

`horizontalArrangement`

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`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`verticalAlignment`

Optional • Literal type: string

The vertical alignment of items.

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