Merge pull request #103 from contagt/develop

Add: Scroll Duration Prop

Author: dohooo

docs/props.md

@@ -13,7 +13,8 @@
 | defaultIndex           | ❌                        | 0                                                                                                     | number                                                                                                                   | Default index                                                                                                                  |
 | autoPlay               | ❌                        | false                                                                                                 | boolean                                                                                                                  | Auto play                                                                                                                      |
 | autoPlayReverse        | ❌                        | false                                                                                                 | boolean                                                                                                                  | Auto play reverse playback                                                                                                     |
-| autoPlayInterval       | ❌                        | 1000                                                                                                  | autoPlayInterval                                                                                                         | Auto play playback interval                                                                                                    |
+| autoPlayInterval       | ❌                        | 1000                                                                                                  | number                                                                                                         | Auto play playback interval                                                                                                    |
+| scrollAnimationDuration       | ❌                        | 500                                                                                                  | number                                                                                                         | Time a scroll animation takes to finish                                                                                                    |
 | loop                   | ❌                        | true                                                                                                  | boolean                                                                                                                  | Carousel loop playback                                                                                                         |
 | onSnapToItem           | ❌                        |                                                                                                       | (index: number) => void                                                                                                  | Callback fired when navigating to an item                                                                                      |
 | onScrollBegin          | ❌                        |                                                                                                       | () => void                                                                                                               | Callback fired when scroll begin                                                                                               |

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
      */