Props

Basic

data

Carousel items data set

renderItem

Render carousel item

defaultScrollOffsetValue

The default animated value of the carousel.

autoFillData

Auto fill data array to allow loop playback when the loop props is true.([1] => [1, 1, 1]；[1, 2] => [1, 2, 1, 2])

vertical

Layout items vertically instead of horizontally

width

Specified carousel item width

height

Specified carousel item height

mode

Carousel Animated transitions

modeConfig

Different modes correspond to different configurations. For details, see below[modeConfig](#modeConfig Props)

style

Carousel container style

defaultIndex

Default index

autoPlay

Auto play

autoPlayReverse

Auto play reverse playback

autoPlayInterval

Auto play playback interval

scrollAnimationDuration

Time a scroll animation takes to finish

loop

Carousel loop playback

testID

Used to locate this view in end-to-end tests

onSnapToItem

Callback fired when navigating to an item

onScrollStart

Callback fired when scroll start

onScrollEnd

Callback fired when scroll end

withAnimation

Specifies the scrolling animation effect

onConfigurePanGesture

PanGesture config

windowSize

The maximum number of items that can respond to pan gesture events, 0 means all items will respond to pan gesture events

onProgressChange

This callback is called when the carousel is scrolled. If you want to update a shared value automatically, you can use the shared value as a parameter directly. The callback provides two parameters: offsetProgress:Total of offset distance (0 390 780 ...); absoluteProgress:Convert to index (0 1 2 ...)

modeConfig

Stack layout animation style

pagingEnabled

When true, the scroll view stops on multiples of the scroll view's size when scrolling

overscrollEnabled

If enabled, the item will scroll to the first placement when scrolling past the edge rather than closing to the last. (previous conditions: loop=false)

snapEnabled

If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false

enabled

when false, Carousel will not respond to any gestures

fixedDirection

If positive, the carousel will scroll to the positive direction and vice versa.

customConfig

Custom carousel config

customAnimation

Custom animations. For details, see below[custom animation](./custom-animation.md)

maxScrollDistancePerSwipe

Maximum offset value for one scroll. Carousel cannot scroll over than this value.

minScrollDistancePerSwipe

Minimum offset value for once scroll. If the translation value is less than this value, the carousel will not scroll.

Parallax Mode

<Carousel
    {...restProps}
    mode="parallax"
    modeConfig={{
        parallaxScrollingScale: 0.9,
        parallaxScrollingOffset: 50,
        parallaxAdjacentItemScale: 0.8,
    }}
/>

parallaxScrollingOffset

control prev/next item offset

parallaxScrollingScale

control prev/current/next item scale

parallaxAdjacentItemScale

control prev/next item scale

Stack Mode

<Carousel
    {...restProps}
    mode="stack"
    modeConfig={{
        moveSize: 200,
        stackInterval: 30,
        scaleInterval: 0.08,
        rotateZDeg: 135,
        snapDirection: 'left',
    }}
/>

stackInterval

The spacing of each item

moveSize

Item translate size

scaleInterval

The scale of each item

opacityInterval

The opacity of each item

rotateZDeg

The item rotation Angle

snapDirection

Slide direction

Ref

By using these methods, remember you need to reference the component using React useRef() (opens in a new tab).

JavaScript

const ref = React.useRef(null)

If you're using TypeScript:

You need to import:

import type { ICarouselInstance } from "react-native-reanimated-carousel";

and then:

const ref = React.useRef<ICarouselInstance>(null);

Now, you only need to pass the ref to the Carousel component:

<Carousel ref={ref} (...) />;

And now you can use these methods throughout your component. Here's an example of implementing a button to go to the next slide:

import React from "react";
import Carousel from "react-native-reanimated-carousel";
import type { ICarouselInstance } from "react-native-reanimated-carousel";
import { Button, Text, View } from "react-native";
 
// 1. Create a data array with the slides
const data = [
  {
    title: "Slide 1",
    content: "Slide 1 Content",
  },
  {
    title: "Slide 2",
    content: "Slide 2 Content",
  },
  {
    title: "Slide 3",
    content: "Slide 3 Content",
  },
];
 
const Example = () => {
  const ref = React.useRef<ICarouselInstance>(null); // 2. Create a ref for the Carousel component
 
  return (
    <View>
      {/* 3. Add the Carousel component with the ref */}
      <Carousel
        ref={ref}
        data={data}
        width={300} // 4. Add the required "width" prop
        renderItem={({ item }) => (
          <View>
            <Text>{item.title}</Text>
            <Text>{item.content}</Text>
          </View>
        )}
      />
      {/* 5. Add a button to trigger the next slide */}
      <Button
        title="Next"
        onPress={() => {
          ref.current?.next(); // 6. Call the "next" method on the ref
        }}
      />
    </View>
  );
};
 
export default Example;

prev

Scroll to previous item, it takes one optional argument (count), which allows you to specify how many items to cross

next

Scroll to next item, it takes one optional argument (count), which allows you to specify how many items to cross

scrollTo

scrollTo({ count: -2 })

Use count to scroll to a position where relative to the current position, scrollTo({count:-2}) is equivalent to prev(2), scrollTo({count:2}) is equivalent to next(2). And also can jump to specific position.

getCurrentIndex

Get current item index