Carousel

Jetpack Compose Carousel components for displaying scrollable collections of items.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.9

Expo UI provides three carousel components matching the official Jetpack Compose Carousel API: HorizontalCenteredHeroCarousel, HorizontalMultiBrowseCarousel, and HorizontalUncontainedCarousel.

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

HorizontalCenteredHeroCarousel

Centers one large hero item between two small peek items — ideal for spotlighting content like movie posters.

CenteredHeroExample.tsx

import { Host, HorizontalCenteredHeroCarousel, Box, Text } from '@expo/ui/jetpack-compose';
import { size, background } from '@expo/ui/jetpack-compose/modifiers';

export default function CenteredHeroExample() {
  const colors = ['#6200EE', '#03DAC5', '#FF5722', '#4CAF50', '#2196F3'];

  return (
    <Host matchContents>
      <HorizontalCenteredHeroCarousel itemSpacing={8}>
        {colors.map((color, index) => (
          <Box
            key={index}
            contentAlignment="center"
            modifiers={[size(300, 200), background(color)]}>
            <Text color="#FFFFFF">Slide {index + 1}</Text>
          </Box>
        ))}
      </HorizontalCenteredHeroCarousel>
    </Host>
  );
}

HorizontalMultiBrowseCarousel

Shows a large item alongside smaller peek items, letting users browse what comes next.

MultiBrowseExample.tsx

import { Host, HorizontalMultiBrowseCarousel, Box, Text } from '@expo/ui/jetpack-compose';
import { size, background } from '@expo/ui/jetpack-compose/modifiers';

export default function MultiBrowseExample() {
  const colors = ['#6200EE', '#03DAC5', '#FF5722', '#4CAF50', '#2196F3'];

  return (
    <Host matchContents>
      <HorizontalMultiBrowseCarousel
        preferredItemWidth={200}
        itemSpacing={8}
        flingBehavior="singleAdvance">
        {colors.map((color, index) => (
          <Box
            key={index}
            contentAlignment="center"
            modifiers={[size(200, 180), background(color)]}>
            <Text color="#FFFFFF">Card {index + 1}</Text>
          </Box>
        ))}
      </HorizontalMultiBrowseCarousel>
    </Host>
  );
}

HorizontalUncontainedCarousel

Each item has a fixed width with free-form scrolling.

UncontainedExample.tsx

import { Host, HorizontalUncontainedCarousel, Box, Text } from '@expo/ui/jetpack-compose';
import { size, background } from '@expo/ui/jetpack-compose/modifiers';

export default function UncontainedExample() {
  const items = ['Photo 1', 'Photo 2', 'Photo 3', 'Photo 4', 'Photo 5'];

  return (
    <Host matchContents>
      <HorizontalUncontainedCarousel
        itemWidth={160}
        itemSpacing={12}
        contentPadding={{ start: 16, top: 0, end: 16, bottom: 0 }}>
        {items.map(item => (
          <Box
            key={item}
            contentAlignment="center"
            modifiers={[size(160, 180), background('#3F51B5')]}>
            <Text color="#FFFFFF">{item}</Text>
          </Box>
        ))}
      </HorizontalUncontainedCarousel>
    </Host>
  );
}

API

import {
  HorizontalCenteredHeroCarousel,
  HorizontalMultiBrowseCarousel,
  HorizontalUncontainedCarousel,
} from '@expo/ui/jetpack-compose';

Components

`HorizontalCenteredHeroCarousel`

Android

Type: React.Element<ComponentType<HorizontalCenteredHeroCarouselProps>>

A hero carousel that centers one large item between two small peek items, matching Compose's HorizontalCenteredHeroCarousel.

HorizontalCenteredHeroCarouselProps

`maxItemWidth`

Android

Optional • Type: number

Maximum width of the hero item in dp. When unspecified, the hero item will be as wide as possible.

`maxSmallItemWidth`

Android

Optional • Type: number • Default: CarouselDefaults.MaxSmallItemSize

Maximum width of small peek items in dp.

`minSmallItemWidth`

Android

Optional • Type: number • Default: CarouselDefaults.MinSmallItemSize

Minimum width of small peek items in dp.

Inherited Props

CarouselCommonConfig

`HorizontalMultiBrowseCarousel`

Android

Type: React.Element<ComponentType<HorizontalMultiBrowseCarouselProps>>

A carousel that shows a large item alongside smaller peek items, matching Compose's HorizontalMultiBrowseCarousel.

HorizontalMultiBrowseCarouselProps

`maxSmallItemWidth`

Android

Optional • Type: number • Default: CarouselDefaults.MaxSmallItemSize

Maximum width of small peek items in dp.

`minSmallItemWidth`

Android

Optional • Type: number • Default: CarouselDefaults.MinSmallItemSize

Minimum width of small peek items in dp.

`preferredItemWidth`

Android

Type: number

The preferred width of the large item in dp.

Inherited Props

CarouselCommonConfig

`HorizontalUncontainedCarousel`

Android

Type: React.Element<ComponentType<HorizontalUncontainedCarouselProps>>

A carousel where each item has a fixed width with free-form scrolling, matching Compose's HorizontalUncontainedCarousel.

HorizontalUncontainedCarouselProps

`itemWidth`

Android

Type: number

The width of each item in dp.

Inherited Props

CarouselCommonConfig

Types

`CarouselCommonConfig`

Android

Shared props across all carousel components.

Property	Type	Description
children	`React.ReactNode`	Children to render as carousel items.
contentPadding(optional)	`number \| PaddingValuesRecord`	Padding for carousel content (dp or object).
flingBehavior(optional)	`FlingBehaviorType`	Controls snapping behavior when the user flings the carousel. `'singleAdvance'` snaps to the next item, `'noSnap'` allows free scrolling.
itemSpacing(optional)	`number`	Spacing between items in dp. Default:`0`
modifiers(optional)	`ModifierConfig[]`	Modifiers for the component.
userScrollEnabled(optional)	`boolean`	Whether the user can scroll the carousel. Default:`true`

`FlingBehaviorType`

Android

Literal Type: string

Fling behavior type for controlling carousel snapping.

Acceptable values are: 'singleAdvance' | 'noSnap'

`PaddingValuesRecord`

Android

Per-side padding values in dp for carousel content.

Property	Type	Description
bottom(optional)	`number`	-
end(optional)	`number`	-
start(optional)	`number`	-
top(optional)	`number`	-