Merge pull request #93 from dohooo/fix/autoPlay

autoplay will scroll out of bounds

Author: dohooo

src/Carousel.tsx

@@ -67,6 +67,7 @@ function Carousel<T>(
         onScrollEnd: () => runOnJS(_onScrollEnd)(),
         onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
         onChange: (i) => onSnapToItem && runOnJS(onSnapToItem)(i),
+        duration: autoPlayInterval,
     });
 
     const {

src/ScrollViewGesture.tsx

@@ -12,8 +12,9 @@ import Animated, {
     useDerivedValue,
     useSharedValue,
     withDecay,
-    withSpring,
+    withTiming,
 } from 'react-native-reanimated';
+import { Easing } from './constants';
 import { CTX } from './store';
 
 type GestureContext = {
@@ -40,6 +41,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
             enableSnap,
             panGestureHandlerProps,
             loop: infinite,
+            autoPlayInterval,
         },
     } = React.useContext(CTX);
 
@@ -54,10 +56,11 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
     const _withSpring = React.useCallback(
         (toValue: number, onFinished?: () => void) => {
             'worklet';
-            return withSpring(
+            return withTiming(
                 toValue,
                 {
-                    damping: 100,
+                    duration: autoPlayInterval,
+                    easing: Easing.easeOutQuart,
                 },
                 (isFinished) => {
                     if (isFinished) {
@@ -66,7 +69,7 @@ const IScrollViewGesture: React.FC<Props> = (props) => {
                 }
             );
         },
-        []
+        [autoPlayInterval]
     );
 
     const endWithSpring = React.useCallback(

src/constants/index.ts

@@ -1,4 +1,10 @@
+import { Easing as _Easing } from 'react-native-reanimated';
+
 export enum DATA_LENGTH {
     SINGLE_ITEM = 1,
     DOUBLE_ITEM = 2,
 }
+
+export const Easing = {
+    easeOutQuart: _Easing.bezier(0.25, 1, 0.5, 1),
+};

src/hooks/useCarouselController.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
 import type Animated from 'react-native-reanimated';
-import { runOnJS, useSharedValue, withSpring } from 'react-native-reanimated';
+import { Easing } from '../constants';
+import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
 
 interface IOpts {
     loop: boolean;
     size: number;
     handlerOffsetX: Animated.SharedValue<number>;
     disable?: boolean;
+    duration?: number;
+    originalLength: number;
+    length: number;
     onScrollBegin?: () => void;
     onScrollEnd?: () => void;
     // the length before fill data
-    originalLength: number;
-    length: number;
     onChange: (index: number) => void;
 }
 
@@ -36,6 +38,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
         originalLength,
         length,
         onChange,
+        duration,
     } = opts;
 
     const index = useSharedValue<number>(0);
@@ -96,11 +99,11 @@ export function useCarouselController(opts: IOpts): ICarouselController {
         opts.onScrollBegin?.();
     }, [opts]);
 
-    const scrollWithSpring = React.useCallback(
+    const scrollWithTiming = React.useCallback(
         (toValue: number, callback?: () => void) => {
-            return withSpring(
+            return withTiming(
                 toValue,
-                { damping: 100 },
+                { duration, easing: Easing.easeOutQuart },
                 (isFinished: boolean) => {
                     callback?.();
                     if (isFinished) {
@@ -109,7 +112,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
                 }
             );
         },
-        [onScrollEnd]
+        [onScrollEnd, duration]
     );
 
     const next = React.useCallback(() => {
@@ -119,7 +122,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
 
         const currentPage = Math.round(handlerOffsetX.value / size);
 
-        handlerOffsetX.value = scrollWithSpring((currentPage - 1) * size);
+        handlerOffsetX.value = scrollWithTiming((currentPage - 1) * size);
     }, [
         canSliding,
         loop,
@@ -128,7 +131,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
         onScrollBegin,
         handlerOffsetX,
         size,
-        scrollWithSpring,
+        scrollWithTiming,
     ]);
 
     const prev = React.useCallback(() => {
@@ -138,15 +141,15 @@ export function useCarouselController(opts: IOpts): ICarouselController {
 
         const currentPage = Math.round(handlerOffsetX.value / size);
 
-        handlerOffsetX.value = scrollWithSpring((currentPage + 1) * size);
+        handlerOffsetX.value = scrollWithTiming((currentPage + 1) * size);
     }, [
         canSliding,
         loop,
         index.value,
         onScrollBegin,
         handlerOffsetX,
         size,
-        scrollWithSpring,
+        scrollWithTiming,
     ]);
 
     const to = React.useCallback(
@@ -159,7 +162,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
             const offset = handlerOffsetX.value + (index.value - idx) * size;
 
             if (animated) {
-                handlerOffsetX.value = scrollWithSpring(offset, () => {
+                handlerOffsetX.value = scrollWithTiming(offset, () => {
                     index.value = idx;
                 });
             } else {
@@ -174,7 +177,7 @@ export function useCarouselController(opts: IOpts): ICarouselController {
             onScrollBegin,
             handlerOffsetX,
             size,
-            scrollWithSpring,
+            scrollWithTiming,
             onScrollEnd,
         ]
     );