refactor: scroll animation duration of ScrollViewGesture

#101

Author: gxxgcn

example/src/anim-tab-bar/index.tsx

@@ -24,13 +24,15 @@ function Index() {
         defaultValue: false,
         buttonTitle: ElementsText.AUTOPLAY,
     });
+    const [loop, setLoop] = React.useState(false);
 
     return (
         <View style={{ flex: 1 }}>
             <View style={{ marginVertical: 100 }}>
                 <Carousel
+                    key={`${loop}`}
                     ref={r}
-                    loop={false}
+                    loop={loop}
                     style={{
                         width: window.width,
                         height: PAGE_HEIGHT,
@@ -48,10 +50,10 @@ function Index() {
                                 animationValue={animationValue}
                                 label={item}
                                 onPress={() =>
-                                    r.current?.scrollTo(
-                                        animationValue.value,
-                                        true
-                                    )
+                                    r.current?.scrollTo({
+                                        count: animationValue.value,
+                                        animated: true,
+                                    })
                                 }
                             />
                         );
@@ -60,6 +62,7 @@ function Index() {
                 />
             </View>
             {AutoPLay.button}
+            <SButton onPress={() => setLoop(!loop)}>{`Loop: ${loop}`}</SButton>
             <View
                 style={{
                     marginTop: 24,

example/src/hooks/useToggleButton.tsx

@@ -11,7 +11,7 @@ export function useToggleButton(opts: {
     const button = React.useMemo(() => {
         return (
             <SButton onPress={() => setStatus(!status)}>
-                {buttonTitle}:{`${status}`}
+                {buttonTitle}: {`${status}`}
             </SButton>
         );
     }, [status, buttonTitle]);

example/src/normal/index.tsx

@@ -30,7 +30,6 @@ function Index() {
                 {...baseOptions}
                 loop
                 autoPlay={isAutoPlay}
-                scrollAnimationDuration={2000}
                 autoPlayInterval={isFast ? 100 : 2000}
                 data={[...new Array(6).keys()]}
                 renderItem={({ index }) => <SBItem key={index} index={index} />}

src/Carousel.tsx

@@ -84,10 +84,7 @@ function Carousel<T>(
 
     const { run, pause } = useAutoPlay({
         autoPlay,
-        autoPlayInterval: Math.max(
-            autoPlayInterval - scrollAnimationDuration,
-            0
-        ),
+        autoPlayInterval: Math.max(autoPlayInterval, 0),
         autoPlayReverse,
         carouselController,
     });

src/ScrollViewGesture.tsx

@@ -41,7 +41,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             enableSnap,
             panGestureHandlerProps,
             loop: infinite,
-            autoPlayInterval,
+            scrollAnimationDuration,
         },
     } = React.useContext(CTX);
 
@@ -59,7 +59,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             return withTiming(
                 toValue,
                 {
-                    duration: autoPlayInterval,
+                    duration: scrollAnimationDuration,
                     easing: Easing.easeOutQuart,
                 },
                 (isFinished) => {
@@ -69,7 +69,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 }
             );
         },
-        [autoPlayInterval]
+        [scrollAnimationDuration]
     );
 
     const endWithSpring = React.useCallback(

src/hooks/useAutoPlay.ts

@@ -29,8 +29,8 @@ export function useAutoPlay(opts: {
 
         timer.current = setTimeout(() => {
             autoPlayReverse
-                ? carouselController.prev(run)
-                : carouselController.next(run);
+                ? carouselController.prev({ onFinished: run })
+                : carouselController.next({ onFinished: run });
         }, autoPlayInterval);
     }, [autoPlayReverse, autoPlayInterval, carouselController]);
 

src/hooks/useCarouselController.tsx

@@ -2,12 +2,7 @@ import React from 'react';
 import type Animated from 'react-native-reanimated';
 import { Easing } from '../constants';
 import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
-
-interface TCarouselActionOptions {
-    count?: number;
-    animated?: boolean;
-    onFinished?: () => void;
-}
+import type { TCarouselActionOptions } from '../types';
 
 interface IOpts {
     loop: boolean;

src/types.ts

@@ -146,12 +146,12 @@ export interface ICarouselInstance {
      * Scroll to previous item, it takes one optional argument (count),
      * which allows you to specify how many items to cross
      */
-    prev: (count?: number) => void;
+    prev: (opts?: TCarouselActionOptions) => void;
     /**
      * Scroll to next item, it takes one optional argument (count),
      * which allows you to specify how many items to cross
      */
-    next: (count?: number) => void;
+    next: (opts?: TCarouselActionOptions) => void;
     /**
      * Get current item index
      */
@@ -165,7 +165,7 @@ export interface ICarouselInstance {
      * Use value to scroll to a position where relative to the current position,
      * scrollTo(-2) is equivalent to prev(2), scrollTo(2) is equivalent to next(2)
      */
-    scrollTo: (value: number, animated?: boolean) => void;
+    scrollTo: (opts?: TCarouselActionOptions) => void;
 }
 
 export interface CarouselRenderItemInfo<ItemT> {
@@ -177,3 +177,9 @@ export interface CarouselRenderItemInfo<ItemT> {
 export type CarouselRenderItem<ItemT> = (
     info: CarouselRenderItemInfo<ItemT>
 ) => React.ReactElement;
+
+export interface TCarouselActionOptions {
+    count?: number;
+    animated?: boolean;
+    onFinished?: () => void;
+}