react-native-reanimated-carousel

The best carousel component in React Native community. ⚡️

• Getting Started
• Examples

v5 beta highlights

• Sizing: style controls the container size; itemWidth/itemHeight control the page size (snap distance & animation progress).
• Scroll offset shared value: use scrollOffsetValue (recommended). defaultScrollOffsetValue is deprecated but still supported.
• Progress: onProgressChange supports both a callback and SharedValue<number>.
• Pagination accessibility: Pagination.Basic and Pagination.Custom support paginationItemAccessibility for per-item a11y overrides.
• Custom animation safety: customAnimation styles are sanitized and zIndex is normalized to finite integers.

Installation

v5 is currently available under the npm beta tag. Install it explicitly while public testing continues.

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

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

React Native Community CLI projects can install the same packages with their package manager:

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

Follow the official setup instructions for Reanimated and Gesture Handler. When upgrading from v4, read the v5 migration guide.

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>
  );
}

📊 Version Compatibility

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

The Expo 54-57 matrix type-checks a packed consumer, exports Web, and builds Android. Native iOS and Android E2E currently run on Expo 54.

Sponsors

License

MIT