Reanimated Carousel For React Native

A simple, infinitely scrolling React Native carousel using Reanimated 2.

How to use it:

1. Install the package.

# Yarn
$ yarn add react-native-reanimated-carousel

# NPM
$ npm i react-native-reanimated-carousel

2. Import the carousel component.

import Carousel from "react-native-reanimated-carousel";

3. Add the carousel component to the app.

<Carousel<{ color: string }>
  width={width}
  data={[{ color: "red" }, { color: "purple" }, { color: "yellow" }]}
  renderItem={({ color }) => {
    return (
      <View
        style={{
          backgroundColor: color,
          justifyContent: "center",
          flex: 1,
        }}
      />
    );
  }}
/>;

4. Available props.

/**
 * Carousel loop playback.
 * @default true
 */
loop?: boolean;
/**
 * Carousel Animated transitions.
 * @default 'default'
 */
mode?: TMode;
/**
 * Render carousel item.
 */
renderItem: (data: T, index: number) => React.ReactNode;
/**
 * Specified carousel container width.
 */
width: number;
/**
 * Specified carousel container height.
 * @default '100%'
 */
height?: FlexStyle['height'];
/**
 * Carousel items data set.
 */
data: T[];
/**
 * Auto play
 */
autoPlay?: boolean;
/**
 * Auto play
 * @description reverse playback
 */
autoPlayReverse?: boolean;
/**
 * Auto play
 * @description playback interval
 */
autoPlayInterval?: number;
/**
 * Carousel container style
 */
style?: ViewStyle;
/**
 * When use 'default' Layout props,this prop can be control prev/next item offset.
 * @default 100
 */
parallaxScrollingOffset?: number;
/**
 * When use 'default' Layout props,this prop can be control prev/next item offset.
 * @default 0.8
 */
parallaxScrollingScale?: number;
/**
 * Callback fired when navigating to an item
 */
onSnapToItem?: (index: number) => void;
/**
 * Timing config of translation animated
 */
timingConfig?: Animated.WithTimingConfig;
/**
 * On scroll begin
 */
onScrollBegin?: () => void;
/**
 * On scroll end
 */
onScrollEnd?: (previous: number, current: number) => void;
/**
 * PanGestureHandler props
 */
panGestureHandlerProps?: Omit<
    Partial<PanGestureHandlerProps>,
    'onHandlerStateChange'
>;

Preview:

Reanimated Carousel For React Native

Download Details:

Author: dohooo

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/dohooo/react-native-reanimated-carousel

License: MIT

You Might Be Interested In:

Add Comment