react-native-reanimated-carousel 0.4.0 → 0.4.4

package/src/Carousel.tsx

@@ -13,28 +13,16 @@ import Animated, {
     withTiming,
 } from 'react-native-reanimated';
 import { CarouselItem } from './CarouselItem';
-import { fillNum } from './fillNum';
 import type { TMode } from './layouts';
 import { ParallaxLayout } from './layouts/index';
 import { useCarouselController } from './useCarouselController';
 import { useComputedAnim } from './useComputedAnim';
-import { useLoop } from './useLoop';
+import { useAutoPlay } from './useAutoPlay';
 import { useComputedIndex } from './useComputedIndex';
+import { useLockController } from './useLock';
 
-export const _withTiming = (
-    num: number,
-    callback?: (isFinished: boolean) => void
-) => {
-    'worklet';
-    return withTiming(
-        num,
-        {
-            duration: 250,
-        },
-        (isFinished) => {
-            !!callback && runOnJS(callback)(isFinished);
-        }
-    );
+const defaultTimingConfig: Animated.WithTimingConfig = {
+    duration: 250,
 };
 
 export interface ICarouselProps<T extends unknown> {
@@ -98,6 +86,10 @@ export interface ICarouselProps<T extends unknown> {
      * Callback fired when navigating to an item
      */
     onSnapToItem?: (index: number) => void;
+    /**
+     * Timing config of translation animated
+     */
+    timingConfig?: Animated.WithTimingConfig;
 }
 
 export interface ICarouselInstance {
@@ -133,25 +125,38 @@ function Carousel<T extends unknown = any>(
         parallaxScrollingScale,
         onSnapToItem,
         style,
+        timingConfig = defaultTimingConfig,
     } = props;
+    const lockController = useLockController();
     const handlerOffsetX = useSharedValue<number>(0);
     const data = React.useMemo<T[]>(() => {
+        if (!loop) return _data;
+
         if (_data.length === 1) {
             return [_data[0], _data[0], _data[0]];
         }
+
         if (_data.length === 2) {
             return [_data[0], _data[1], _data[0], _data[1]];
         }
+
         return _data;
-    }, [_data]);
+    }, [_data, loop]);
 
     const computedAnimResult = useComputedAnim(width, data.length);
-    const carouselController = useCarouselController({ width, handlerOffsetX });
-    useLoop({
+    const carouselController = useCarouselController({
+        width,
+        handlerOffsetX,
+        lockController,
+        timingConfig,
+        disable: !data.length,
+    });
+    useAutoPlay({
         autoPlay,
         autoPlayInterval,
         autoPlayReverse,
         carouselController,
+        lockController,
     });
     const { index, computedIndex } = useComputedIndex({
         length: data.length,
@@ -166,12 +171,24 @@ function Carousel<T extends unknown = any>(
 
     useAnimatedReaction(
         () => index.value,
-        (i) => onSnapToItem && runOnJS(onSnapToItem)(i),
-        [onSnapToItem]
+        (i) => {
+            if (loop) {
+                switch (_data.length) {
+                    case 1:
+                        i = 0;
+                        break;
+                    case 2:
+                        i = i % 2;
+                        break;
+                }
+                onSnapToItem && runOnJS(onSnapToItem)(i);
+            }
+        },
+        [onSnapToItem, loop, _data]
     );
 
     const callComputedIndex = React.useCallback(
-        (isFinished: boolean) => isFinished && computedIndex?.(),
+        () => computedIndex?.(),
         [computedIndex]
     );
 
@@ -191,77 +208,91 @@ function Carousel<T extends unknown = any>(
         useAnimatedGestureHandler<PanGestureHandlerGestureEvent>(
             {
                 onStart: (_, ctx: any) => {
+                    if (lockController.isLock()) return;
                     ctx.startContentOffsetX = handlerOffsetX.value;
+                    ctx.currentContentOffsetX = handlerOffsetX.value;
+                    ctx.start = true;
                 },
                 onActive: (e, ctx: any) => {
+                    if (lockController.isLock() || !ctx.start) return;
+                    /**
+                     * `onActive` and `onEnd` return different values of translationX！So that creates a bias！TAT
+                     * */
+                    ctx.translationX = e.translationX;
                     if (loop) {
                         handlerOffsetX.value =
-                            ctx.startContentOffsetX +
-                            Math.round(e.translationX);
+                            ctx.currentContentOffsetX + e.translationX;
                         return;
                     }
                     handlerOffsetX.value = Math.max(
-                        Math.min(
-                            ctx.startContentOffsetX +
-                                Math.round(e.translationX),
-                            0
-                        ),
+                        Math.min(ctx.currentContentOffsetX + e.translationX, 0),
                         -(data.length - 1) * width
                     );
                 },
-                onEnd: (e) => {
-                    const intTranslationX = Math.round(e.translationX);
-                    const sub = Math.abs(intTranslationX);
-
+                onEnd: (e, ctx: any) => {
+                    if (lockController.isLock() || !ctx.start) return;
+                    const translationX = ctx.translationX;
                     function _withTimingCallback(num: number) {
-                        return _withTiming(num, callComputedIndex);
+                        return withTiming(num, timingConfig, (isFinished) => {
+                            if (isFinished) {
+                                ctx.start = false;
+                                lockController.unLock();
+                                runOnJS(callComputedIndex)();
+                            }
+                        });
                     }
 
-                    if (intTranslationX > 0) {
+                    if (translationX > 0) {
+                        /**
+                         * If not loop no , longer scroll when sliding to the start.
+                         * */
                         if (!loop && handlerOffsetX.value >= 0) {
                             return;
                         }
-
-                        if (sub > width / 2) {
+                        lockController.lock();
+                        if (
+                            Math.abs(translationX) + Math.abs(e.velocityX) >
+                            width / 2
+                        ) {
                             handlerOffsetX.value = _withTimingCallback(
-                                fillNum(
-                                    width,
-                                    handlerOffsetX.value + (width - sub)
-                                )
+                                handlerOffsetX.value + width - translationX
                             );
                         } else {
                             handlerOffsetX.value = _withTimingCallback(
-                                fillNum(width, handlerOffsetX.value - sub)
+                                handlerOffsetX.value - translationX
                             );
                         }
                         return;
                     }
 
-                    if (intTranslationX < 0) {
+                    if (translationX < 0) {
+                        /**
+                         * If not loop , no longer scroll when sliding to the end.
+                         * */
                         if (
                             !loop &&
                             handlerOffsetX.value <= -(data.length - 1) * width
                         ) {
                             return;
                         }
-
-                        if (sub > width / 2) {
+                        lockController.lock();
+                        if (
+                            Math.abs(translationX) + Math.abs(e.velocityX) >
+                            width / 2
+                        ) {
                             handlerOffsetX.value = _withTimingCallback(
-                                fillNum(
-                                    width,
-                                    handlerOffsetX.value - (width - sub)
-                                )
+                                handlerOffsetX.value - width - translationX
                             );
                         } else {
                             handlerOffsetX.value = _withTimingCallback(
-                                fillNum(width, handlerOffsetX.value + sub)
+                                handlerOffsetX.value - translationX
                             );
                         }
                         return;
                     }
                 },
             },
-            [loop, data]
+            [loop, data, lockController]
         );
 
     React.useImperativeHandle(ref, () => {
@@ -275,29 +306,29 @@ function Carousel<T extends unknown = any>(
     const Layouts = React.useMemo<React.FC<{ index: number }>>(() => {
         switch (mode) {
             case 'parallax':
-                return ({ index, children }) => (
+                return ({ index: i, children }) => (
                     <ParallaxLayout
                         parallaxScrollingOffset={parallaxScrollingOffset}
                         parallaxScrollingScale={parallaxScrollingScale}
                         computedAnimResult={computedAnimResult}
                         width={width}
                         handlerOffsetX={offsetX}
-                        index={index}
-                        key={index}
+                        index={i}
+                        key={i}
                         loop={loop}
                     >
                         {children}
                     </ParallaxLayout>
                 );
             default:
-                return ({ index, children }) => (
+                return ({ index: i, children }) => (
                     <CarouselItem
                         computedAnimResult={computedAnimResult}
                         width={width}
                         height={height}
                         handlerOffsetX={offsetX}
-                        index={index}
-                        key={index}
+                        index={i}
+                        key={i}
                         loop={loop}
                     >
                         {children}
@@ -329,10 +360,10 @@ function Carousel<T extends unknown = any>(
                     style,
                 ]}
             >
-                {data.map((item, index) => {
+                {data.map((item, i) => {
                     return (
-                        <Layouts index={index} key={index}>
-                            {renderItem(item, index)}
+                        <Layouts index={i} key={i}>
+                            {renderItem(item, i)}
                         </Layouts>
                     );
                 })}

package/src/{useLoop.ts → useAutoPlay.ts}

@@ -1,24 +1,27 @@
 import * as React from 'react';
 import type { ICarouselController } from './useCarouselController';
+import type { ILockController } from './useLock';
 
-export function useLoop(opts: {
+export function useAutoPlay(opts: {
     autoPlay?: boolean;
     autoPlayInterval?: number;
     autoPlayReverse?: boolean;
     carouselController: ICarouselController;
+    lockController: ILockController;
 }) {
     const {
         autoPlay = false,
         autoPlayReverse = false,
         autoPlayInterval = 1000,
         carouselController,
+        lockController,
     } = opts;
     const timer = React.useRef<NodeJS.Timer>();
     React.useEffect(() => {
         if (timer.current) {
             clearInterval(timer.current);
         }
-        if (autoPlay) {
+        if (autoPlay && !lockController.isLock()) {
             timer.current = setInterval(() => {
                 autoPlayReverse
                     ? carouselController.prev()
@@ -28,5 +31,11 @@ export function useLoop(opts: {
         return () => {
             !!timer.current && clearInterval(timer.current);
         };
-    }, [autoPlay, autoPlayReverse, autoPlayInterval, carouselController]);
+    }, [
+        autoPlay,
+        autoPlayReverse,
+        autoPlayInterval,
+        carouselController,
+        lockController,
+    ]);
 }

package/src/useCarouselController.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
-import { _withTiming } from './Carousel';
 import type Animated from 'react-native-reanimated';
-import { useSharedValue } from 'react-native-reanimated';
+import { runOnJS, withTiming } from 'react-native-reanimated';
+import type { ILockController } from './useLock';
 
 interface IOpts {
     width: number;
     handlerOffsetX: Animated.SharedValue<number>;
+    lockController: ILockController;
+    timingConfig: Animated.WithTimingConfig;
+    disable?: boolean;
 }
 
 export interface ICarouselController {
@@ -14,49 +17,69 @@ export interface ICarouselController {
 }
 
 export function useCarouselController(opts: IOpts): ICarouselController {
-    const lock = useSharedValue<boolean>(false);
-    const { width, handlerOffsetX } = opts;
+    const {
+        width,
+        handlerOffsetX,
+        timingConfig,
+        lockController,
+        disable = false,
+    } = opts;
 
     const closeLock = React.useCallback(
         (isFinished: boolean) => {
             if (isFinished) {
-                lock.value = false;
+                lockController.unLock();
             }
         },
-        [lock]
+        [lockController]
     );
-    const openLock = React.useCallback(() => {
-        lock.value = true;
-    }, [lock]);
 
     const next = React.useCallback(
         (callback?: (isFinished: boolean) => void) => {
-            if (lock.value) return;
-            openLock();
-            handlerOffsetX.value = _withTiming(
+            if (disable) return;
+            if (lockController.isLock()) return;
+            lockController.lock();
+            handlerOffsetX.value = withTiming(
                 handlerOffsetX.value - width,
+                timingConfig,
                 (isFinished: boolean) => {
-                    callback?.(isFinished);
-                    closeLock(isFinished);
+                    !!callback && runOnJS(callback)(isFinished);
+                    runOnJS(closeLock)(isFinished);
                 }
             );
         },
-        [width, openLock, closeLock, lock, handlerOffsetX]
+        [
+            width,
+            lockController,
+            timingConfig,
+            closeLock,
+            handlerOffsetX,
+            disable,
+        ]
     );
 
     const prev = React.useCallback(
         (callback?: (isFinished: boolean) => void) => {
-            if (lock.value) return;
-            openLock();
-            handlerOffsetX.value = _withTiming(
+            if (disable) return;
+            if (lockController.isLock()) return;
+            lockController.lock();
+            handlerOffsetX.value = withTiming(
                 handlerOffsetX.value + width,
+                timingConfig,
                 (isFinished: boolean) => {
-                    callback?.(isFinished);
-                    closeLock(isFinished);
+                    !!callback && runOnJS(callback)(isFinished);
+                    runOnJS(closeLock)(isFinished);
                 }
             );
         },
-        [width, openLock, closeLock, lock, handlerOffsetX]
+        [
+            width,
+            lockController,
+            timingConfig,
+            closeLock,
+            handlerOffsetX,
+            disable,
+        ]
     );
 
     return {

package/src/useLock.ts

@@ -0,0 +1,31 @@
+import { useSharedValue } from 'react-native-reanimated';
+export interface ILockController {
+    lock(): void;
+    unLock(): void;
+    isLock(): boolean;
+}
+
+/**
+ * Cannot operate while animation is locking
+ */
+export function useLockController(): ILockController {
+    // This value is true if the animation is executing
+    const _lock = useSharedValue<boolean>(false);
+    function lock() {
+        'worklet';
+        _lock.value = true;
+    }
+    function unLock() {
+        'worklet';
+        _lock.value = false;
+    }
+    function isLock() {
+        'worklet';
+        return _lock.value;
+    }
+    return {
+        lock,
+        unLock,
+        isLock,
+    };
+}

package/lib/commonjs/fillNum.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fillNum = fillNum;
-
-/**
- * This is used to supplement the accuracy of Javascript calculations
- */
-function fillNum(width, num) {
-  'worklet';
-
-  const remainder = num % width;
-
-  if (remainder !== 0) {
-    const sub = width - Math.abs(remainder);
-
-    if (num < 0) {
-      return num - sub;
-    }
-
-    if (num > 0) {
-      return num + sub;
-    }
-  }
-
-  return num;
-}
-//# sourceMappingURL=fillNum.js.map

package/lib/commonjs/fillNum.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["fillNum.ts"],"names":["fillNum","width","num","remainder","sub","Math","abs"],"mappings":";;;;;;;AAAA;AACA;AACA;AACO,SAASA,OAAT,CAAiBC,KAAjB,EAAgCC,GAAhC,EAA6C;AAChD;;AACA,QAAMC,SAAS,GAAGD,GAAG,GAAGD,KAAxB;;AACA,MAAIE,SAAS,KAAK,CAAlB,EAAqB;AACjB,UAAMC,GAAG,GAAGH,KAAK,GAAGI,IAAI,CAACC,GAAL,CAASH,SAAT,CAApB;;AACA,QAAID,GAAG,GAAG,CAAV,EAAa;AACT,aAAOA,GAAG,GAAGE,GAAb;AACH;;AACD,QAAIF,GAAG,GAAG,CAAV,EAAa;AACT,aAAOA,GAAG,GAAGE,GAAb;AACH;AACJ;;AACD,SAAOF,GAAP;AACH","sourcesContent":["/**\n * This is used to supplement the accuracy of Javascript calculations\n */\nexport function fillNum(width: number, num: number) {\n    'worklet';\n    const remainder = num % width;\n    if (remainder !== 0) {\n        const sub = width - Math.abs(remainder);\n        if (num < 0) {\n            return num - sub;\n        }\n        if (num > 0) {\n            return num + sub;\n        }\n    }\n    return num;\n}\n"]}

package/lib/commonjs/useLoop.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useLoop.ts"],"names":["useLoop","opts","autoPlay","autoPlayReverse","autoPlayInterval","carouselController","timer","React","useRef","useEffect","current","clearInterval","setInterval","prev","next"],"mappings":";;;;;;;AAAA;;;;;;AAGO,SAASA,OAAT,CAAiBC,IAAjB,EAKJ;AACC,QAAM;AACFC,IAAAA,QAAQ,GAAG,KADT;AAEFC,IAAAA,eAAe,GAAG,KAFhB;AAGFC,IAAAA,gBAAgB,GAAG,IAHjB;AAIFC,IAAAA;AAJE,MAKFJ,IALJ;AAMA,QAAMK,KAAK,GAAGC,KAAK,CAACC,MAAN,EAAd;AACAD,EAAAA,KAAK,CAACE,SAAN,CAAgB,MAAM;AAClB,QAAIH,KAAK,CAACI,OAAV,EAAmB;AACfC,MAAAA,aAAa,CAACL,KAAK,CAACI,OAAP,CAAb;AACH;;AACD,QAAIR,QAAJ,EAAc;AACVI,MAAAA,KAAK,CAACI,OAAN,GAAgBE,WAAW,CAAC,MAAM;AAC9BT,QAAAA,eAAe,GACTE,kBAAkB,CAACQ,IAAnB,EADS,GAETR,kBAAkB,CAACS,IAAnB,EAFN;AAGH,OAJ0B,EAIxBV,gBAJwB,CAA3B;AAKH;;AACD,WAAO,MAAM;AACT,OAAC,CAACE,KAAK,CAACI,OAAR,IAAmBC,aAAa,CAACL,KAAK,CAACI,OAAP,CAAhC;AACH,KAFD;AAGH,GAdD,EAcG,CAACR,QAAD,EAAWC,eAAX,EAA4BC,gBAA5B,EAA8CC,kBAA9C,CAdH;AAeH","sourcesContent":["import * as React from 'react';\nimport type { ICarouselController } from './useCarouselController';\n\nexport function useLoop(opts: {\n    autoPlay?: boolean;\n    autoPlayInterval?: number;\n    autoPlayReverse?: boolean;\n    carouselController: ICarouselController;\n}) {\n    const {\n        autoPlay = false,\n        autoPlayReverse = false,\n        autoPlayInterval = 1000,\n        carouselController,\n    } = opts;\n    const timer = React.useRef<NodeJS.Timer>();\n    React.useEffect(() => {\n        if (timer.current) {\n            clearInterval(timer.current);\n        }\n        if (autoPlay) {\n            timer.current = setInterval(() => {\n                autoPlayReverse\n                    ? carouselController.prev()\n                    : carouselController.next();\n            }, autoPlayInterval);\n        }\n        return () => {\n            !!timer.current && clearInterval(timer.current);\n        };\n    }, [autoPlay, autoPlayReverse, autoPlayInterval, carouselController]);\n}\n"]}

package/lib/module/fillNum.js

@@ -1,23 +0,0 @@
-/**
- * This is used to supplement the accuracy of Javascript calculations
- */
-export function fillNum(width, num) {
-  'worklet';
-
-  const remainder = num % width;
-
-  if (remainder !== 0) {
-    const sub = width - Math.abs(remainder);
-
-    if (num < 0) {
-      return num - sub;
-    }
-
-    if (num > 0) {
-      return num + sub;
-    }
-  }
-
-  return num;
-}
-//# sourceMappingURL=fillNum.js.map

package/lib/module/fillNum.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["fillNum.ts"],"names":["fillNum","width","num","remainder","sub","Math","abs"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,SAASA,OAAT,CAAiBC,KAAjB,EAAgCC,GAAhC,EAA6C;AAChD;;AACA,QAAMC,SAAS,GAAGD,GAAG,GAAGD,KAAxB;;AACA,MAAIE,SAAS,KAAK,CAAlB,EAAqB;AACjB,UAAMC,GAAG,GAAGH,KAAK,GAAGI,IAAI,CAACC,GAAL,CAASH,SAAT,CAApB;;AACA,QAAID,GAAG,GAAG,CAAV,EAAa;AACT,aAAOA,GAAG,GAAGE,GAAb;AACH;;AACD,QAAIF,GAAG,GAAG,CAAV,EAAa;AACT,aAAOA,GAAG,GAAGE,GAAb;AACH;AACJ;;AACD,SAAOF,GAAP;AACH","sourcesContent":["/**\n * This is used to supplement the accuracy of Javascript calculations\n */\nexport function fillNum(width: number, num: number) {\n    'worklet';\n    const remainder = num % width;\n    if (remainder !== 0) {\n        const sub = width - Math.abs(remainder);\n        if (num < 0) {\n            return num - sub;\n        }\n        if (num > 0) {\n            return num + sub;\n        }\n    }\n    return num;\n}\n"]}

package/lib/module/useLoop.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["useLoop.ts"],"names":["React","useLoop","opts","autoPlay","autoPlayReverse","autoPlayInterval","carouselController","timer","useRef","useEffect","current","clearInterval","setInterval","prev","next"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAGA,OAAO,SAASC,OAAT,CAAiBC,IAAjB,EAKJ;AACC,QAAM;AACFC,IAAAA,QAAQ,GAAG,KADT;AAEFC,IAAAA,eAAe,GAAG,KAFhB;AAGFC,IAAAA,gBAAgB,GAAG,IAHjB;AAIFC,IAAAA;AAJE,MAKFJ,IALJ;AAMA,QAAMK,KAAK,GAAGP,KAAK,CAACQ,MAAN,EAAd;AACAR,EAAAA,KAAK,CAACS,SAAN,CAAgB,MAAM;AAClB,QAAIF,KAAK,CAACG,OAAV,EAAmB;AACfC,MAAAA,aAAa,CAACJ,KAAK,CAACG,OAAP,CAAb;AACH;;AACD,QAAIP,QAAJ,EAAc;AACVI,MAAAA,KAAK,CAACG,OAAN,GAAgBE,WAAW,CAAC,MAAM;AAC9BR,QAAAA,eAAe,GACTE,kBAAkB,CAACO,IAAnB,EADS,GAETP,kBAAkB,CAACQ,IAAnB,EAFN;AAGH,OAJ0B,EAIxBT,gBAJwB,CAA3B;AAKH;;AACD,WAAO,MAAM;AACT,OAAC,CAACE,KAAK,CAACG,OAAR,IAAmBC,aAAa,CAACJ,KAAK,CAACG,OAAP,CAAhC;AACH,KAFD;AAGH,GAdD,EAcG,CAACP,QAAD,EAAWC,eAAX,EAA4BC,gBAA5B,EAA8CC,kBAA9C,CAdH;AAeH","sourcesContent":["import * as React from 'react';\nimport type { ICarouselController } from './useCarouselController';\n\nexport function useLoop(opts: {\n    autoPlay?: boolean;\n    autoPlayInterval?: number;\n    autoPlayReverse?: boolean;\n    carouselController: ICarouselController;\n}) {\n    const {\n        autoPlay = false,\n        autoPlayReverse = false,\n        autoPlayInterval = 1000,\n        carouselController,\n    } = opts;\n    const timer = React.useRef<NodeJS.Timer>();\n    React.useEffect(() => {\n        if (timer.current) {\n            clearInterval(timer.current);\n        }\n        if (autoPlay) {\n            timer.current = setInterval(() => {\n                autoPlayReverse\n                    ? carouselController.prev()\n                    : carouselController.next();\n            }, autoPlayInterval);\n        }\n        return () => {\n            !!timer.current && clearInterval(timer.current);\n        };\n    }, [autoPlay, autoPlayReverse, autoPlayInterval, carouselController]);\n}\n"]}

package/lib/typescript/fillNum.d.ts

@@ -1,4 +0,0 @@
-/**
- * This is used to supplement the accuracy of Javascript calculations
- */
-export declare function fillNum(width: number, num: number): number;

package/src/fillNum.ts

@@ -1,17 +0,0 @@
-/**
- * This is used to supplement the accuracy of Javascript calculations
- */
-export function fillNum(width: number, num: number) {
-    'worklet';
-    const remainder = num % width;
-    if (remainder !== 0) {
-        const sub = width - Math.abs(remainder);
-        if (num < 0) {
-            return num - sub;
-        }
-        if (num > 0) {
-            return num + sub;
-        }
-    }
-    return num;
-}