---
title: "Getting Started"
description: "A performant, customizable carousel for React Native, powered by Reanimated and Gesture Handler. Works on iOS, Android and Web."
canonical_url: "https://rn-carousel.dev"
markdown_url: "https://rn-carousel.dev/index.md"
version: "5"
---
# React Native Reanimated Carousel
---

  v5 is here. Install `react-native-reanimated-carousel` with Reanimated 4.1 or newer and React Native Worklets. Upgrading from v4? Read the [v5 migration guide](https://rn-carousel.dev/migration-v5.md).

A performant carousel for React Native powered by Reanimated. ⚡️

## Features

- The best performance you can get. 🚀
- Fully configurable. ⚙️
- Support for both `iOS` & `Android` & `Web`. 📱
- Support for `RTL` layout. 🌍
- Smooth gesture interactions & snapping animations. 🏎
- Support to customise the animation style. 🎨
- Powered by Reanimated 4 and React Native Worklets. 🎉
- Compatible with `Expo`. 🎩
- Accessibility support. ♿️
- Written in `TypeScript`. 🌳

## Installation

Using Expo? Let Expo select compatible Reanimated and Worklets versions:

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

Using React Native Community CLI?

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

**React Native Gesture Handler** needs extra steps to finalize its installation, please follow their [installation instructions](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation). Please **make sure** to wrap your App with `GestureHandlerRootView` when you've upgraded to React Native Gesture Handler ^2.

**React Native Reanimated 4** requires a compatible `react-native-worklets` version. Follow the [Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started) and [compatibility table](https://docs.swmansion.com/react-native-reanimated/docs/guides/compatibility). Community CLI projects must use the `react-native-worklets/plugin` Babel plugin as documented there.

## Your first carousel

Once the native dependencies are configured, this is a complete minimal example:

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

Continue with [Usage](https://rn-carousel.dev/usage.md) for sizing and pagination, or open the full [Props reference](https://rn-carousel.dev/props.md).

## Special thanks

[Video](quick-swipe.mp4)

  ![Image](SSLogo.webp)

    Screen Studio
    Thanks to [Screen Studio](https://www.screen.studio/@nGeEY) for sponsoring this library. You can use Screen Studio to record your screen and edit videos and get beautiful screen recordings in minutes.

## Sponsor & Support
To keep this library maintained and up-to-date please consider sponsoring to us. ☕️

- [Caspian](https://github.com/sponsors/dohooo)
- GX
- [Oliver Lopez](https://github.com/sponsors/oliverloops)

  ![Image](https://github.com/dohooo/sponsors/blob/master/sponsors.png?raw=true)

## More high quality libraries made by me 🚀

- [react-native-reanimated-table](https://github.com/dohooo/react-native-reanimated-table)

## Built With ❤️

- [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated)
- [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler)
- [react-native-redash](https://github.com/wcandillon/react-native-redash)
- [react-native-builder-bob](https://github.com/callstack/react-native-builder-bob)