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.2

Patch Changes

• 2b91b7e Thanks @dohooo! - change width breaking the pagination component