react-native-reanimated-carousel 4.0.0-alpha.5 → 4.0.0-alpha.6

package/lib/module/hooks/useVisibleRanges.js

@@ -4,16 +4,27 @@ export function useVisibleRanges(options) {
     total = 0,
     viewSize,
     translation,
-    windowSize: _windowSize = 0
+    windowSize: _windowSize = 0,
+    loop
   } = options;
   const windowSize = total <= _windowSize ? total : _windowSize;
   const ranges = useDerivedValue(() => {
     const positiveCount = Math.round(windowSize / 2);
     const negativeCount = windowSize - positiveCount;
-    let curIndex = Math.round(-translation.value / viewSize);
-    curIndex = curIndex < 0 ? curIndex % total + total : curIndex;
-    const negativeRange = [(curIndex - negativeCount + total) % total, (curIndex - 1 + total) % total];
-    const positiveRange = [(curIndex + total) % total, (curIndex + positiveCount + total) % total];
+    let currentIndex = Math.round(-translation.value / viewSize);
+    currentIndex = currentIndex < 0 ? currentIndex % total + total : currentIndex;
+
+    if (!loop) {
+      // Adjusting negative range if the carousel is not loopable.
+      // So, It will be only displayed the positive items.
+      return {
+        negativeRange: [0 + currentIndex - (windowSize - 1), 0 + currentIndex],
+        positiveRange: [0 + currentIndex, windowSize - 1 + currentIndex]
+      };
+    }
+
+    const negativeRange = [(currentIndex - negativeCount + total) % total, (currentIndex - 1 + total) % total];
+    const positiveRange = [(currentIndex + total) % total, (currentIndex + positiveCount + total) % total];
 
     if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
       negativeRange[1] = total - 1;
@@ -29,7 +40,7 @@ export function useVisibleRanges(options) {
       negativeRange,
       positiveRange
     };
-  }, [total, windowSize, translation]);
+  }, [loop, total, windowSize, translation]);
   return ranges;
 }
 //# sourceMappingURL=useVisibleRanges.js.map

package/lib/module/hooks/useVisibleRanges.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useVisibleRanges.tsx"],"names":["useDerivedValue","useVisibleRanges","options","total","viewSize","translation","windowSize","_windowSize","ranges","positiveCount","Math","round","negativeCount","curIndex","value","negativeRange","positiveRange"],"mappings":"AACA,SAASA,eAAT,QAAgC,yBAAhC;AAOA,OAAO,SAASC,gBAAT,CAA0BC,OAA1B,EAKY;AACjB,QAAM;AACJC,IAAAA,KAAK,GAAG,CADJ;AAEJC,IAAAA,QAFI;AAGJC,IAAAA,WAHI;AAIJC,IAAAA,UAAU,EAAEC,WAAW,GAAG;AAJtB,MAKFL,OALJ;AAOA,QAAMI,UAAU,GAAGH,KAAK,IAAII,WAAT,GAAuBJ,KAAvB,GAA+BI,WAAlD;AAEA,QAAMC,MAAM,GAAGR,eAAe,CAAC,MAAM;AACnC,UAAMS,aAAa,GAAGC,IAAI,CAACC,KAAL,CAAWL,UAAU,GAAG,CAAxB,CAAtB;AACA,UAAMM,aAAa,GAAGN,UAAU,GAAGG,aAAnC;AACA,QAAII,QAAQ,GAAGH,IAAI,CAACC,KAAL,CAAW,CAACN,WAAW,CAACS,KAAb,GAAqBV,QAAhC,CAAf;AACAS,IAAAA,QAAQ,GAAGA,QAAQ,GAAG,CAAX,GAAgBA,QAAQ,GAAGV,KAAZ,GAAqBA,KAApC,GAA4CU,QAAvD;AACA,UAAME,aAAa,GAAG,CACpB,CAACF,QAAQ,GAAGD,aAAX,GAA2BT,KAA5B,IAAqCA,KADjB,EAEpB,CAACU,QAAQ,GAAG,CAAX,GAAeV,KAAhB,IAAyBA,KAFL,CAAtB;AAIA,UAAMa,aAAa,GAAG,CACpB,CAACH,QAAQ,GAAGV,KAAZ,IAAqBA,KADD,EAEpB,CAACU,QAAQ,GAAGJ,aAAX,GAA2BN,KAA5B,IAAqCA,KAFjB,CAAtB;;AAIA,QAAIY,aAAa,CAAC,CAAD,CAAb,GAAmBZ,KAAnB,IAA4BY,aAAa,CAAC,CAAD,CAAb,GAAmBA,aAAa,CAAC,CAAD,CAAhE,EAAqE;AACnEA,MAAAA,aAAa,CAAC,CAAD,CAAb,GAAmBZ,KAAK,GAAG,CAA3B;AACAa,MAAAA,aAAa,CAAC,CAAD,CAAb,GAAmB,CAAnB;AACD;;AACD,QAAIA,aAAa,CAAC,CAAD,CAAb,GAAmBA,aAAa,CAAC,CAAD,CAApC,EAAyC;AACvCD,MAAAA,aAAa,CAAC,CAAD,CAAb,GAAmBZ,KAAK,GAAG,CAA3B;AACAa,MAAAA,aAAa,CAAC,CAAD,CAAb,GAAmB,CAAnB;AACD;;AACD,WAAO;AAAED,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,KAAP;AACD,GAtB6B,EAsB3B,CAACb,KAAD,EAAQG,UAAR,EAAoBD,WAApB,CAtB2B,CAA9B;AAwBA,SAAOG,MAAP;AACD","sourcesContent":["import type Animated from \"react-native-reanimated\";\nimport { useDerivedValue } from \"react-native-reanimated\";\n\nexport type IVisibleRanges = Animated.SharedValue<{\n  negativeRange: number[]\n  positiveRange: number[]\n}>;\n\nexport function useVisibleRanges(options: {\n  total: number\n  viewSize: number\n  windowSize?: number\n  translation: Animated.SharedValue<number>\n}): IVisibleRanges {\n  const {\n    total = 0,\n    viewSize,\n    translation,\n    windowSize: _windowSize = 0,\n  } = options;\n\n  const windowSize = total <= _windowSize ? total : _windowSize;\n\n  const ranges = useDerivedValue(() => {\n    const positiveCount = Math.round(windowSize / 2);\n    const negativeCount = windowSize - positiveCount;\n    let curIndex = Math.round(-translation.value / viewSize);\n    curIndex = curIndex < 0 ? (curIndex % total) + total : curIndex;\n    const negativeRange = [\n      (curIndex - negativeCount + total) % total,\n      (curIndex - 1 + total) % total,\n    ];\n    const positiveRange = [\n      (curIndex + total) % total,\n      (curIndex + positiveCount + total) % total,\n    ];\n    if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {\n      negativeRange[1] = total - 1;\n      positiveRange[0] = 0;\n    }\n    if (positiveRange[0] > positiveRange[1]) {\n      negativeRange[1] = total - 1;\n      positiveRange[0] = 0;\n    }\n    return { negativeRange, positiveRange };\n  }, [total, windowSize, translation]);\n\n  return ranges;\n}\n"]}
+{"version":3,"sources":["useVisibleRanges.tsx"],"names":["useDerivedValue","useVisibleRanges","options","total","viewSize","translation","windowSize","_windowSize","loop","ranges","positiveCount","Math","round","negativeCount","currentIndex","value","negativeRange","positiveRange"],"mappings":"AACA,SAASA,eAAT,QAAgC,yBAAhC;AAOA,OAAO,SAASC,gBAAT,CAA0BC,OAA1B,EAMY;AACjB,QAAM;AACJC,IAAAA,KAAK,GAAG,CADJ;AAEJC,IAAAA,QAFI;AAGJC,IAAAA,WAHI;AAIJC,IAAAA,UAAU,EAAEC,WAAW,GAAG,CAJtB;AAKJC,IAAAA;AALI,MAMFN,OANJ;AAQA,QAAMI,UAAU,GAAGH,KAAK,IAAII,WAAT,GAAuBJ,KAAvB,GAA+BI,WAAlD;AAEA,QAAME,MAAM,GAAGT,eAAe,CAAC,MAAM;AACnC,UAAMU,aAAa,GAAGC,IAAI,CAACC,KAAL,CAAWN,UAAU,GAAG,CAAxB,CAAtB;AACA,UAAMO,aAAa,GAAGP,UAAU,GAAGI,aAAnC;AAEA,QAAII,YAAY,GAAGH,IAAI,CAACC,KAAL,CAAW,CAACP,WAAW,CAACU,KAAb,GAAqBX,QAAhC,CAAnB;AACAU,IAAAA,YAAY,GAAGA,YAAY,GAAG,CAAf,GAAoBA,YAAY,GAAGX,KAAhB,GAAyBA,KAA5C,GAAoDW,YAAnE;;AAEA,QAAI,CAACN,IAAL,EAAW;AACT;AACA;AACA,aAAO;AACLQ,QAAAA,aAAa,EAAE,CAAC,IAAIF,YAAJ,IAAoBR,UAAU,GAAG,CAAjC,CAAD,EAAsC,IAAIQ,YAA1C,CADV;AAELG,QAAAA,aAAa,EAAE,CAAC,IAAIH,YAAL,EAAmBR,UAAU,GAAG,CAAb,GAAiBQ,YAApC;AAFV,OAAP;AAID;;AAED,UAAME,aAAa,GAAG,CACpB,CAACF,YAAY,GAAGD,aAAf,GAA+BV,KAAhC,IAAyCA,KADrB,EAEpB,CAACW,YAAY,GAAG,CAAf,GAAmBX,KAApB,IAA6BA,KAFT,CAAtB;AAKA,UAAMc,aAAa,GAAG,CACpB,CAACH,YAAY,GAAGX,KAAhB,IAAyBA,KADL,EAEpB,CAACW,YAAY,GAAGJ,aAAf,GAA+BP,KAAhC,IAAyCA,KAFrB,CAAtB;;AAKA,QAAIa,aAAa,CAAC,CAAD,CAAb,GAAmBb,KAAnB,IAA4Ba,aAAa,CAAC,CAAD,CAAb,GAAmBA,aAAa,CAAC,CAAD,CAAhE,EAAqE;AACnEA,MAAAA,aAAa,CAAC,CAAD,CAAb,GAAmBb,KAAK,GAAG,CAA3B;AACAc,MAAAA,aAAa,CAAC,CAAD,CAAb,GAAmB,CAAnB;AACD;;AACD,QAAIA,aAAa,CAAC,CAAD,CAAb,GAAmBA,aAAa,CAAC,CAAD,CAApC,EAAyC;AACvCD,MAAAA,aAAa,CAAC,CAAD,CAAb,GAAmBb,KAAK,GAAG,CAA3B;AACAc,MAAAA,aAAa,CAAC,CAAD,CAAb,GAAmB,CAAnB;AACD;;AAED,WAAO;AAAED,MAAAA,aAAF;AAAiBC,MAAAA;AAAjB,KAAP;AACD,GApC6B,EAoC3B,CAACT,IAAD,EAAOL,KAAP,EAAcG,UAAd,EAA0BD,WAA1B,CApC2B,CAA9B;AAsCA,SAAOI,MAAP;AACD","sourcesContent":["import type Animated from \"react-native-reanimated\";\nimport { useDerivedValue } from \"react-native-reanimated\";\n\nexport type IVisibleRanges = Animated.SharedValue<{\n  negativeRange: number[]\n  positiveRange: number[]\n}>;\n\nexport function useVisibleRanges(options: {\n  total: number\n  viewSize: number\n  windowSize?: number\n  translation: Animated.SharedValue<number>\n  loop?: boolean\n}): IVisibleRanges {\n  const {\n    total = 0,\n    viewSize,\n    translation,\n    windowSize: _windowSize = 0,\n    loop,\n  } = options;\n\n  const windowSize = total <= _windowSize ? total : _windowSize;\n\n  const ranges = useDerivedValue(() => {\n    const positiveCount = Math.round(windowSize / 2);\n    const negativeCount = windowSize - positiveCount;\n\n    let currentIndex = Math.round(-translation.value / viewSize);\n    currentIndex = currentIndex < 0 ? (currentIndex % total) + total : currentIndex;\n\n    if (!loop) {\n      // Adjusting negative range if the carousel is not loopable.\n      // So, It will be only displayed the positive items.\n      return {\n        negativeRange: [0 + currentIndex - (windowSize - 1), 0 + currentIndex],\n        positiveRange: [0 + currentIndex, windowSize - 1 + currentIndex],\n      };\n    }\n\n    const negativeRange = [\n      (currentIndex - negativeCount + total) % total,\n      (currentIndex - 1 + total) % total,\n    ];\n\n    const positiveRange = [\n      (currentIndex + total) % total,\n      (currentIndex + positiveCount + total) % total,\n    ];\n\n    if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {\n      negativeRange[1] = total - 1;\n      positiveRange[0] = 0;\n    }\n    if (positiveRange[0] > positiveRange[1]) {\n      negativeRange[1] = total - 1;\n      positiveRange[0] = 0;\n    }\n\n    return { negativeRange, positiveRange };\n  }, [loop, total, windowSize, translation]);\n\n  return ranges;\n}\n"]}

package/lib/module/hooks/useVisibleRanges.test.js

@@ -0,0 +1,157 @@
+import { useSharedValue } from "react-native-reanimated";
+import { renderHook } from "@testing-library/react-hooks";
+import { useVisibleRanges } from "./useVisibleRanges";
+const viewSize = 393;
+describe("useVisibleRanges", () => {
+  it("should only display the front of the list when loop is false", async () => {
+    const hook = renderHook(() => {
+      const translation = useSharedValue(-0);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false
+      });
+      return range;
+    });
+    const expected = hook.result.current.value;
+    expect(expected).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -3,
+                0,
+              ],
+              "positiveRange": [
+                0,
+                3,
+              ],
+            }
+        `);
+  });
+  it("should display the rear of the list and the front of the list when loop is true", async () => {
+    const hook = renderHook(() => {
+      const translation = useSharedValue(-0);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: true
+      });
+      return range;
+    });
+    const expected = hook.result.current.value;
+    expect(expected).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                8,
+                9,
+              ],
+              "positiveRange": [
+                0,
+                2,
+              ],
+            }
+        `);
+  });
+  it("should shows the increased range of the list when the loop is false and swiped the carousel.", async () => {
+    const slide0hook = renderHook(() => {
+      const translation = useSharedValue(-0 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false
+      });
+      return range;
+    }).result.current.value;
+    const slide1hook = renderHook(() => {
+      const translation = useSharedValue(-1 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false
+      });
+      return range;
+    }).result.current.value;
+    const slide2hook = renderHook(() => {
+      const translation = useSharedValue(-2 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false
+      });
+      return range;
+    }).result.current.value;
+    const slide3hook = renderHook(() => {
+      const translation = useSharedValue(-3 * viewSize);
+      const range = useVisibleRanges({
+        total: 10,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false
+      });
+      return range;
+    }).result.current.value; // [0,3] Display the 0,1,2,3 items.
+
+    expect(slide0hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -3,
+                0,
+              ],
+              "positiveRange": [
+                0,
+                3,
+              ],
+            }
+        `); // [1,4] Display the 1,2,3,4 items.
+
+    expect(slide1hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -2,
+                1,
+              ],
+              "positiveRange": [
+                1,
+                4,
+              ],
+            }
+        `); // [2,5] Display the 2,3,4,5 items.
+
+    expect(slide2hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                -1,
+                2,
+              ],
+              "positiveRange": [
+                2,
+                5,
+              ],
+            }
+        `); // [3.6] Display the 3,4,5,6 items.
+
+    expect(slide3hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                0,
+                3,
+              ],
+              "positiveRange": [
+                3,
+                6,
+              ],
+            }
+        `);
+  });
+});
+//# sourceMappingURL=useVisibleRanges.test.js.map

package/lib/module/hooks/useVisibleRanges.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useVisibleRanges.test.tsx"],"names":["useSharedValue","renderHook","useVisibleRanges","viewSize","describe","it","hook","translation","range","total","windowSize","loop","expected","result","current","value","expect","toMatchInlineSnapshot","slide0hook","slide1hook","slide2hook","slide3hook"],"mappings":"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","sourcesContent":["import { useSharedValue } from \"react-native-reanimated\";\n\nimport { renderHook } from \"@testing-library/react-hooks\";\n\nimport { useVisibleRanges } from \"./useVisibleRanges\";\n\nconst viewSize = 393;\n\ndescribe(\"useVisibleRanges\", () => {\n  it(\"should only display the front of the list when loop is false\", async () => {\n    const hook = renderHook(() => {\n      const translation = useSharedValue(-0);\n      const range = useVisibleRanges({\n        total: 10,\n        translation,\n        viewSize,\n        windowSize: 4,\n        loop: false,\n      });\n\n      return range;\n    });\n\n    const expected = hook.result.current.value;\n\n    expect(expected).toMatchInlineSnapshot(`\n            {\n              \"negativeRange\": [\n                -3,\n                0,\n              ],\n              \"positiveRange\": [\n                0,\n                3,\n              ],\n            }\n        `);\n  });\n\n  it(\"should display the rear of the list and the front of the list when loop is true\", async () => {\n    const hook = renderHook(() => {\n      const translation = useSharedValue(-0);\n      const range = useVisibleRanges({\n        total: 10,\n        translation,\n        viewSize,\n        windowSize: 4,\n        loop: true,\n      });\n\n      return range;\n    });\n\n    const expected = hook.result.current.value;\n\n    expect(expected).toMatchInlineSnapshot(`\n            {\n              \"negativeRange\": [\n                8,\n                9,\n              ],\n              \"positiveRange\": [\n                0,\n                2,\n              ],\n            }\n        `);\n  });\n\n  it(\"should shows the increased range of the list when the loop is false and swiped the carousel.\", async () => {\n    const slide0hook = renderHook(() => {\n      const translation = useSharedValue(-0 * viewSize);\n      const range = useVisibleRanges({\n        total: 10,\n        translation,\n        viewSize,\n        windowSize: 4,\n        loop: false,\n      });\n\n      return range;\n    }).result.current.value;\n\n    const slide1hook = renderHook(() => {\n      const translation = useSharedValue(-1 * viewSize);\n      const range = useVisibleRanges({\n        total: 10,\n        translation,\n        viewSize,\n        windowSize: 4,\n        loop: false,\n      });\n\n      return range;\n    }).result.current.value;\n\n    const slide2hook = renderHook(() => {\n      const translation = useSharedValue(-2 * viewSize);\n      const range = useVisibleRanges({\n        total: 10,\n        translation,\n        viewSize,\n        windowSize: 4,\n        loop: false,\n      });\n\n      return range;\n    }).result.current.value;\n\n    const slide3hook = renderHook(() => {\n      const translation = useSharedValue(-3 * viewSize);\n      const range = useVisibleRanges({\n        total: 10,\n        translation,\n        viewSize,\n        windowSize: 4,\n        loop: false,\n      });\n\n      return range;\n    }).result.current.value;\n\n    // [0,3] Display the 0,1,2,3 items.\n    expect(slide0hook).toMatchInlineSnapshot(`\n            {\n              \"negativeRange\": [\n                -3,\n                0,\n              ],\n              \"positiveRange\": [\n                0,\n                3,\n              ],\n            }\n        `);\n\n    // [1,4] Display the 1,2,3,4 items.\n    expect(slide1hook).toMatchInlineSnapshot(`\n            {\n              \"negativeRange\": [\n                -2,\n                1,\n              ],\n              \"positiveRange\": [\n                1,\n                4,\n              ],\n            }\n        `);\n\n    // [2,5] Display the 2,3,4,5 items.\n    expect(slide2hook).toMatchInlineSnapshot(`\n            {\n              \"negativeRange\": [\n                -1,\n                2,\n              ],\n              \"positiveRange\": [\n                2,\n                5,\n              ],\n            }\n        `);\n\n    // [3.6] Display the 3,4,5,6 items.\n    expect(slide3hook).toMatchInlineSnapshot(`\n            {\n              \"negativeRange\": [\n                0,\n                3,\n              ],\n              \"positiveRange\": [\n                3,\n                6,\n              ],\n            }\n        `);\n  });\n});\n"]}

package/lib/typescript/hooks/useLayoutConfig.d.ts

@@ -1,5 +1,5 @@
 import type { TInitializeCarouselProps } from "./useInitProps";
-import type { TAnimationStyle } from "../layouts/BaseLayout";
+import type { TAnimationStyle } from "../components/BaseLayout";
 declare type TLayoutConfigOpts<T> = TInitializeCarouselProps<T> & {
     size: number;
 };

package/lib/typescript/hooks/useOffsetX.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/hooks/usePanGestureProxy.d.ts

@@ -0,0 +1,9 @@
+import type { GestureStateChangeEvent, GestureUpdateEvent, PanGesture, PanGestureHandlerEventPayload } from "react-native-gesture-handler";
+import type { GestureConfig } from "./useUpdateGestureConfig";
+export declare const usePanGestureProxy: (customization: {
+    onConfigurePanGesture?: ((gesture: PanGesture) => void) | undefined;
+    onGestureBegin: (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
+    onGestureUpdate: (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
+    onGestureEnd: (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>, success: boolean) => void;
+    options?: GestureConfig | undefined;
+}) => import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;

package/lib/typescript/hooks/usePanGestureProxy.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/hooks/useUpdateGestureConfig.d.ts

@@ -1,4 +1,5 @@
 import type { PanGesture } from "react-native-gesture-handler";
-export declare const useUpdateGestureConfig: (gesture: PanGesture, config: {
+export interface GestureConfig {
     enabled?: boolean;
-}) => void;
+}
+export declare const useUpdateGestureConfig: (gesture: PanGesture, config: GestureConfig) => void;

package/lib/typescript/hooks/useVisibleRanges.d.ts

@@ -8,4 +8,5 @@ export declare function useVisibleRanges(options: {
     viewSize: number;
     windowSize?: number;
     translation: Animated.SharedValue<number>;
+    loop?: boolean;
 }): IVisibleRanges;

package/lib/typescript/hooks/useVisibleRanges.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/types.d.ts

@@ -141,6 +141,11 @@ export declare type TCarouselProps<T = any> = {
        * props.vertical = false => maxScrollDistancePerSwipeX
        * */
     maxScrollDistancePerSwipe?: number;
+    /**
+       * @experimental This API will be changed in the future.
+       * If positive, the carousel will scroll to the positive direction and vice versa.
+       * */
+    fixedDirection?: "positive" | "negative";
     /**
         * Custom carousel config.
         */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "4.0.0-alpha.5",
+    "version": "4.0.0-alpha.6",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
     "module": "lib/module/index",
@@ -63,6 +63,7 @@
         "del-cli": "^5.0.0",
         "eslint": "^8.26.0",
         "eslint-config-prettier": "^7.0.0",
+        "eslint-plugin-jest": "^27.6.0",
         "eslint-plugin-prettier": "^3.1.3",
         "gifify": "^2.4.3",
         "husky": "^4.2.5",

package/src/{layouts → components}/BaseLayout.tsx

@@ -8,13 +8,13 @@ import Animated, {
   useDerivedValue,
 } from "react-native-reanimated";
 
-import type { ILayoutConfig } from "./stack";
+import { LazyView } from "./LazyView";
 
-import { LazyView } from "../components/LazyView";
 import { useCheckMounted } from "../hooks/useCheckMounted";
 import type { IOpts } from "../hooks/useOffsetX";
 import { useOffsetX } from "../hooks/useOffsetX";
 import type { IVisibleRanges } from "../hooks/useVisibleRanges";
+import type { ILayoutConfig } from "../layouts/stack";
 import { CTX } from "../store";
 
 export type TAnimationStyle = (value: number) => AnimatedStyleProp<ViewStyle>;
@@ -30,7 +30,7 @@ export const BaseLayout: React.FC<{
 }> = (props) => {
   const mounted = useCheckMounted();
   const { handlerOffset, index, children, visibleRanges, animationStyle }
-  = props;
+    = props;
 
   const context = React.useContext(CTX);
   const {
@@ -73,17 +73,19 @@ export const BaseLayout: React.FC<{
   const x = useOffsetX(offsetXConfig, visibleRanges);
   const animationValue = useDerivedValue(() => x.value / size, [x, size]);
   const animatedStyle = useAnimatedStyle(
-    () => animationStyle(x.value / size),
+    () => {
+      return animationStyle(x.value / size);
+    },
     [animationStyle],
   );
 
   const updateView = React.useCallback(
     (negativeRange: number[], positiveRange: number[]) => {
       mounted.current
-                && setShouldUpdate(
-                  (index >= negativeRange[0] && index <= negativeRange[1])
-                        || (index >= positiveRange[0] && index <= positiveRange[1]),
-                );
+        && setShouldUpdate(
+          (index >= negativeRange[0] && index <= negativeRange[1])
+          || (index >= positiveRange[0] && index <= positiveRange[1]),
+        );
     },
     [index, mounted],
   );

package/src/components/Carousel.tsx

@@ -3,6 +3,7 @@ import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { runOnJS, useDerivedValue } from "react-native-reanimated";
 
+import { BaseLayout } from "./BaseLayout";
 import { ScrollViewGesture } from "./ScrollViewGesture";
 
 import { useAutoPlay } from "../hooks/useAutoPlay";
@@ -13,7 +14,6 @@ import { useLayoutConfig } from "../hooks/useLayoutConfig";
 import { useOnProgressChange } from "../hooks/useOnProgressChange";
 import { usePropsErrorBoundary } from "../hooks/usePropsErrorBoundary";
 import { useVisibleRanges } from "../hooks/useVisibleRanges";
-import { BaseLayout } from "../layouts/BaseLayout";
 import { CTX } from "../store";
 import type { ICarouselInstance, TCarouselProps } from "../types";
 import { computedRealIndexWithAutoFillData } from "../utils/computed-with-auto-fill-data";
@@ -158,6 +158,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       viewSize: size,
       translation: handlerOffset,
       windowSize,
+      loop,
     });
 
     const layoutConfig = useLayoutConfig({ ...props, size });

package/src/components/ScrollViewGesture.tsx

@@ -1,11 +1,8 @@
 import type { PropsWithChildren } from "react";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 import type { GestureStateChangeEvent, PanGestureHandlerEventPayload } from "react-native-gesture-handler";
-import {
-  Gesture,
-  GestureDetector,
-} from "react-native-gesture-handler";
+import { GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   cancelAnimation,
   measure,
@@ -18,7 +15,7 @@ import Animated, {
 } from "react-native-reanimated";
 
 import { Easing } from "../constants";
-import { useUpdateGestureConfig } from "../hooks/useUpdateGestureConfig";
+import { usePanGestureProxy } from "../hooks/usePanGestureProxy";
 import { CTX } from "../store";
 import type { WithTimingAnimation } from "../types";
 import { dealWithAnimation } from "../utils/deal-with-animation";
@@ -42,13 +39,14 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       vertical,
       pagingEnabled,
       snapEnabled,
-      loop: infinite,
+      loop,
       scrollAnimationDuration,
       withAnimation,
       enabled,
       dataLength,
       overscrollEnabled,
       maxScrollDistancePerSwipe,
+      fixedDirection,
     },
   } = React.useContext(CTX);
 
@@ -78,7 +76,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   const getLimit = React.useCallback(() => {
     "worklet";
 
-    if (!infinite && !overscrollEnabled) {
+    if (!loop && !overscrollEnabled) {
       const { width: containerWidth = 0 } = measure(containerRef);
 
       // If the item's total width is less than the container's width, then there is no need to scroll.
@@ -90,7 +88,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     }
 
     return dataLength * size;
-  }, [infinite, size, dataLength, overscrollEnabled]);
+  }, [loop, size, dataLength, overscrollEnabled]);
 
   const withSpring = React.useCallback(
     (toValue: number, onFinished?: () => void) => {
@@ -141,7 +139,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
           const computed = offset < 0 ? Math.ceil : Math.floor;
           const page = computed(-translation.value / size);
 
-          if (infinite) {
+          if (loop) {
             const finalPage = page + offset;
             finalTranslation = withSpring(withProcessTranslation(-finalPage * size), onFinished);
           }
@@ -161,7 +159,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       translation.value = finalTranslation;
 
       function withProcessTranslation(translation: number) {
-        if (!infinite && !overscrollEnabled) {
+        if (!loop && !overscrollEnabled) {
           const limit = getLimit();
           const sign = Math.sign(translation);
           return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
@@ -174,7 +172,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       withSpring,
       size,
       maxPage,
-      infinite,
+      loop,
       snapEnabled,
       translation,
       pagingEnabled,
@@ -215,7 +213,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         activeDecay();
         return;
       }
-      if (!infinite) {
+      if (!loop) {
         translation.value = withSpring(0);
         return;
       }
@@ -226,7 +224,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         activeDecay();
         return;
       }
-      if (!infinite)
+      if (!loop)
         translation.value = withSpring(-((maxPage - 1) * size));
     }
   }, [
@@ -235,7 +233,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     maxPage,
     size,
     scrollEndTranslation.value,
-    infinite,
+    loop,
     activeDecay,
     withSpring,
   ]);
@@ -252,7 +250,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   function withProcessTranslation(translation: number) {
     "worklet";
 
-    if (!infinite && !overscrollEnabled) {
+    if (!loop && !overscrollEnabled) {
       const limit = getLimit();
       const sign = Math.sign(translation);
       return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
@@ -261,7 +259,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     return translation;
   }
 
-  const onGestureBegin = useCallback(() => {
+  const onGestureBegin = useCallback((_: PanGestureHandlerEventPayload) => {
     "worklet";
 
     touching.value = true;
@@ -269,7 +267,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     onScrollBegin && runOnJS(onScrollBegin)();
 
     max.value = (maxPage - 1) * size;
-    if (!infinite && !overscrollEnabled)
+    if (!loop && !overscrollEnabled)
       max.value = getLimit();
 
     panOffset.value = translation.value;
@@ -277,7 +275,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     max,
     size,
     maxPage,
-    infinite,
+    loop,
     touching,
     panOffset,
     validStart,
@@ -296,10 +294,18 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     }
     touching.value = true;
     const { translationX, translationY } = e;
-    const panTranslation = isHorizontal.value
+
+    let panTranslation = isHorizontal.value
       ? translationX
       : translationY;
-    if (!infinite) {
+
+    if (fixedDirection === "negative")
+      panTranslation = -Math.abs(panTranslation);
+
+    else if (fixedDirection === "positive")
+      panTranslation = +Math.abs(panTranslation);
+
+    if (!loop) {
       if ((translation.value > 0 || translation.value < -max.value)) {
         const boundary = translation.value > 0 ? 0 : -max.value;
         const fixed = boundary - panOffset.value;
@@ -315,24 +321,34 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     isHorizontal,
     max,
     panOffset,
-    infinite,
+    loop,
     overscrollEnabled,
+    fixedDirection,
     translation,
     validStart,
     touching,
   ]);
 
-  const onGestureFinish = useCallback((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+  const onGestureEnd = useCallback((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>, _success: boolean) => {
     "worklet";
 
     const { velocityX, velocityY, translationX, translationY } = e;
     scrollEndVelocity.value = isHorizontal.value
       ? velocityX
       : velocityY;
-    scrollEndTranslation.value = isHorizontal.value
+
+    let panTranslation = isHorizontal.value
       ? translationX
       : translationY;
 
+    if (fixedDirection === "negative")
+      panTranslation = -Math.abs(panTranslation);
+
+    else if (fixedDirection === "positive")
+      panTranslation = +Math.abs(panTranslation);
+
+    scrollEndTranslation.value = panTranslation;
+
     const totalTranslation = scrollEndVelocity.value + scrollEndTranslation.value;
 
     if (maxScrollDistancePerSwipeIsSet && Math.abs(totalTranslation) > maxScrollDistancePerSwipe) {
@@ -343,17 +359,18 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       endWithSpring(onScrollEnd);
     }
 
-    if (!infinite)
+    if (!loop)
       touching.value = false;
   }, [
     size,
-    infinite,
+    loop,
     touching,
     panOffset,
     translation,
     isHorizontal,
     scrollEndVelocity,
     scrollEndTranslation,
+    fixedDirection,
     maxScrollDistancePerSwipeIsSet,
     maxScrollDistancePerSwipe,
     endWithSpring,
@@ -361,25 +378,13 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     onScrollEnd,
   ]);
 
-  const gesture = useMemo(() => {
-    const gesture = Gesture.Pan()
-      .onBegin(onGestureBegin)
-      .onUpdate(onGestureUpdate)
-      .onEnd(onGestureFinish);
-
-    if (onConfigurePanGesture)
-      onConfigurePanGesture(gesture);
-
-    return gesture;
-  },
-  [
+  const gesture = usePanGestureProxy({
+    onConfigurePanGesture,
     onGestureBegin,
     onGestureUpdate,
-    onGestureFinish,
-    onConfigurePanGesture,
-  ]);
-
-  useUpdateGestureConfig(gesture, { enabled });
+    onGestureEnd,
+    options: { enabled },
+  });
 
   return (
     <GestureDetector gesture={gesture}>

package/src/hooks/useLayoutConfig.ts

@@ -2,8 +2,8 @@ import React from "react";
 
 import type { TInitializeCarouselProps } from "./useInitProps";
 
+import type { TAnimationStyle } from "../components/BaseLayout";
 import { Layouts } from "../layouts";
-import type { TAnimationStyle } from "../layouts/BaseLayout";
 
 type TLayoutConfigOpts<T> = TInitializeCarouselProps<T> & { size: number };