react-native-reanimated-carousel

A performant, customizable carousel for React Native, powered by Reanimated and Gesture Handler.

• Getting started
• API reference
• Examples
• Migrating from v4

Migrating from v4

Read https://rn-carousel.dev/migration-v5.md and upgrade react-native-reanimated-carousel to v5 in this project, then summarize what changed for my review.

v5 highlights

• A smaller, named-only API with descriptive TypeScript types.
• Container sizing through style, with optional itemSize for a custom page distance.
• Explicit layout, itemAnimation, snapMode, and orientation contracts.
• Continuous logical progress plus signed pixel-level scrollOffsetValue.
• One Pagination component with loop-aware interpolation and accessible interactive dots.
• Stable item identity through keyExtractor, horizontal RTL normalization, and package exports.

Installation

Expo projects should let Expo select compatible Reanimated and Worklets versions:

npx expo install react-native-reanimated-carousel react-native-reanimated react-native-worklets react-native-gesture-handler

React Native Community CLI projects can use their package manager:

yarn add react-native-reanimated-carousel react-native-reanimated react-native-worklets react-native-gesture-handler

Follow the official setup instructions for Reanimated and Gesture Handler.

Quick start

import * as React from "react";
import { Text, useWindowDimensions, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { Carousel } from "react-native-reanimated-carousel";

const data = ["First", "Second", "Third"];

export default function App() {
  const { width } = useWindowDimensions();

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={{ flex: 1, justifyContent: "center" }}>
        <Carousel
          style={{ width, height: 200 }}
          data={data}
          renderItem={({ item }) => (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
              <Text>{item}</Text>
            </View>
          )}
        />
      </View>
    </GestureHandlerRootView>
  );
}

loop defaults to false in v5. Add loop when infinite wrapping is part of the product behavior.

Version compatibility

Carousel	Expo SDK	React Native	Reanimated	Gesture Handler	Worklets
v5	54–57 validated	0.80+	4.1.0+	>=2.9.0 <4.0.0	0.5.0+
v4.x (EOL)	50–53	0.70.3+	3.0.0+	2.9.0+	—
v3.x (EOL)	47–49	0.66.0+	2.0.0+	2.0.0+	—

Reanimated and Worklets must be a compatible pair. Expo users should use expo install; other projects should consult the Reanimated compatibility table.

Sponsors

License

MIT