Fix: Scroll interval and scoll duration should not be necessarily be the same time interval

Author: Stephan Brandt

src/Carousel.tsx

@@ -1,10 +1,12 @@
 import React, { PropsWithChildren } from 'react';
 import Animated, { runOnJS, useDerivedValue } from 'react-native-reanimated';
+
 import { useCarouselController } from './hooks/useCarouselController';
 import { useAutoPlay } from './hooks/useAutoPlay';
 import { usePropsErrorBoundary } from './hooks/usePropsErrorBoundary';
 import { ScrollViewGesture } from './ScrollViewGesture';
 import { useVisibleRanges } from './hooks/useVisibleRanges';
+
 import type { ICarouselInstance, TCarouselProps } from './types';
 import { StyleSheet, View } from 'react-native';
 import { DATA_LENGTH } from './constants';
@@ -33,6 +35,7 @@ function Carousel<T>(
         windowSize,
         autoPlayReverse,
         autoPlayInterval,
+        scrollAnimationDuration,
         renderItem,
         onScrollEnd,
         onSnapToItem,
@@ -67,7 +70,7 @@ function Carousel<T>(
         onScrollEnd: () => runOnJS(_onScrollEnd)(),
         onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
         onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),
-        duration: autoPlayInterval,
+        duration: scrollAnimationDuration,
     });
 
     const {

src/hooks/useInitProps.ts

@@ -17,6 +17,7 @@ export function useInitProps<T>(
         data: _data = [],
         loop = true,
         autoPlayInterval = 1000,
+        scrollAnimationDuration = 500,
         style = {},
         panGestureHandlerProps = {},
         pagingEnabled = true,
@@ -55,6 +56,7 @@ export function useInitProps<T>(
         data,
         loop,
         autoPlayInterval,
+        scrollAnimationDuration,
         style,
         panGestureHandlerProps,
         pagingEnabled,

src/types.ts

@@ -71,6 +71,11 @@ export type TCarouselProps<T = any> = {
      * @description playback interval
      */
     autoPlayInterval?: number;
+    /**
+     * Time a scroll animation takes to finish
+     * @default 500 (ms)
+     */
+    scrollAnimationDuration?:number;
     /**
      * Carousel container style
      */