React Native Reanimated Carousel#
import { Badges } from '@/components/Badges'
import { Callout } from 'nextra/components'
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
RTLlayout. 🌍 - 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:
npx expo install react-native-reanimated-carousel react-native-reanimated react-native-worklets react-native-gesture-handler
Using React Native Community CLI?
yarn add react-native-reanimated-carousel react-native-reanimated react-native-worklets react-native-gesture-handler
React Native Reanimated 4 requires a compatible react-native-worklets version. Follow the Reanimated installation guide and compatibility table. 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:
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 for sizing and pagination, or open the full Props reference.
