react-native-reanimated-carousel

What is react-native-reanimated-carousel?

react-native-reanimated-carousel is a highly customizable and performant carousel component for React Native, leveraging the power of Reanimated 2 for smooth animations.

What are react-native-reanimated-carousel's main functionalities?

Basic Carousel

This code demonstrates a basic carousel with three items. The carousel is rendered using the `react-native-reanimated-carousel` package, and each item is displayed within a styled container.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

const data = ['Item 1', 'Item 2', 'Item 3'];

const BasicCarousel = () => {
  return (
    <Carousel
      width={300}
      height={200}
      data={data}
      renderItem={({ item }) => (
        <View style={styles.itemContainer}>
          <Text>{item}</Text>
        </View>
      )}
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    elevation: 1,
  },
});

export default BasicCarousel;

Custom Animation

This code demonstrates a carousel with custom animations. The `customAnimation` prop is used to define a custom animation for the carousel items, and the `animationConfig` prop is used to configure the animation's easing and duration.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';
import { Easing } from 'react-native-reanimated';

const data = ['Item 1', 'Item 2', 'Item 3'];

const CustomAnimationCarousel = () => {
  return (
    <Carousel
      width={300}
      height={200}
      data={data}
      renderItem={({ item }) => (
        <View style={styles.itemContainer}>
          <Text>{item}</Text>
        </View>
      )}
      customAnimation={(value) => ({
        transform: [{ scale: value }],
        opacity: value,
      })}
      animationConfig={{
        easing: Easing.inOut(Easing.ease),
        duration: 500,
      }}
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    elevation: 1,
  },
});

export default CustomAnimationCarousel;

Looping Carousel

This code demonstrates a looping carousel. The `loop` prop is set to true, which makes the carousel items loop infinitely.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

const data = ['Item 1', 'Item 2', 'Item 3'];

const LoopingCarousel = () => {
  return (
    <Carousel
      width={300}
      height={200}
      data={data}
      renderItem={({ item }) => (
        <View style={styles.itemContainer}>
          <Text>{item}</Text>
        </View>
      )}
      loop
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    elevation: 1,
  },
});

export default LoopingCarousel;

Other packages similar to react-native-reanimated-carousel

react-native-snap-carousel

react-native-snap-carousel is a popular package for creating carousels in React Native. It offers a wide range of customization options and supports both horizontal and vertical carousels. Compared to react-native-reanimated-carousel, it does not leverage Reanimated 2 for animations, which may result in less smooth animations.

react-native-swiper

react-native-swiper is another widely used package for creating carousels and swipers in React Native. It provides a simple API and supports various features like autoplay, pagination, and custom animations. However, it may not offer the same level of performance and smoothness as react-native-reanimated-carousel, which uses Reanimated 2.

react-native-looped-carousel

react-native-looped-carousel is a package designed for creating looping carousels in React Native. It is easy to use and supports both horizontal and vertical carousels. While it is a good option for basic carousels, it may lack some of the advanced customization and animation capabilities provided by react-native-reanimated-carousel.

README

react-native-reanimated-carousel

The best carousel component in React Native community. ⚡️

• Getting Started
• Examples

Sponsors

License

MIT

Changelog

4.0.3

Patch Changes

• #834 1d2767b Thanks @dohooo! - Add accessibility support to pagination components and replace deprecated TouchableWithoutFeedback with Pressable

  • Add comprehensive accessibility props (accessibilityLabel, accessibilityRole, accessibilityHint, accessibilityState) to both Basic and Custom pagination components
  • Add carouselName prop to allow descriptive accessibility labels
  • Replace TouchableWithoutFeedback with Pressable to remove deprecation warnings
  • Improve screen reader support with proper labeling and state information

  Co-authored-by: AlexJackson01 [e-mail]

• #834 1d2767b Thanks @dohooo! - Add comprehensive programmatic control documentation

  • Add new "Programmatic Control" documentation page with detailed examples
  • Clarify that there's no React-style controlled component mode
  • Update migration guide to use correct terminology and link to new docs
  • Provide examples for common use cases: pagination, navigation buttons, dynamic content, auto-advance, and jump-to-item patterns
  • Include warnings about race conditions and timing considerations

• #834 1d2767b Thanks @dohooo! - Replace deprecated TouchableWithoutFeedback with Pressable in pagination components

  Fixes deprecation warnings by replacing TouchableWithoutFeedback with the recommended Pressable component in both Basic and Custom pagination items. This change maintains the same functionality while using the modern React Native API.

  Closes #812

• #834 1d2767b Thanks @dohooo! - Update homepage in package.json