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

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/module/utils/handleroffset-direction.js

@@ -1,9 +1,9 @@
-export function handlerOffsetDirection(handlerOffset) {
+export function handlerOffsetDirection(handlerOffset, fixedDirection) {
   "worklet";
 
-  const isPositiveZero = Object.is(handlerOffset.value, +0);
-  const isNegativeZero = Object.is(handlerOffset.value, -0);
-  const direction = isPositiveZero ? 1 : isNegativeZero ? -1 : Math.sign(handlerOffset.value);
-  return direction;
+  if (fixedDirection === "negative") return -1;
+  if (fixedDirection === "positive") return 1;
+  if (handlerOffset.value === 0) return -1;
+  return Math.sign(handlerOffset.value);
 }
 //# sourceMappingURL=handleroffset-direction.js.map

package/lib/module/utils/handleroffset-direction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["handleroffset-direction.ts"],"names":["handlerOffsetDirection","handlerOffset","isPositiveZero","Object","is","value","isNegativeZero","direction","Math","sign"],"mappings":"AAEA,OAAO,SAASA,sBAAT,CAAgCC,aAAhC,EAA4E;AACjF;;AAEA,QAAMC,cAAc,GAAGC,MAAM,CAACC,EAAP,CAAUH,aAAa,CAACI,KAAxB,EAA+B,CAAC,CAAhC,CAAvB;AACA,QAAMC,cAAc,GAAGH,MAAM,CAACC,EAAP,CAAUH,aAAa,CAACI,KAAxB,EAA+B,CAAC,CAAhC,CAAvB;AACA,QAAME,SAAS,GAAGL,cAAc,GAC5B,CAD4B,GAE5BI,cAAc,GACZ,CAAC,CADW,GAEZE,IAAI,CAACC,IAAL,CAAUR,aAAa,CAACI,KAAxB,CAJN;AAMA,SAAOE,SAAP;AACD","sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nexport function handlerOffsetDirection(handlerOffset: SharedValue<number>): -1 | 1 {\n  \"worklet\";\n\n  const isPositiveZero = Object.is(handlerOffset.value, +0);\n  const isNegativeZero = Object.is(handlerOffset.value, -0);\n  const direction = isPositiveZero\n    ? 1\n    : isNegativeZero\n      ? -1\n      : Math.sign(handlerOffset.value) as -1 | 1;\n\n  return direction;\n}\n"]}
+{"version":3,"sources":["handleroffset-direction.ts"],"names":["handlerOffsetDirection","handlerOffset","fixedDirection","value","Math","sign"],"mappings":"AAIA,OAAO,SAASA,sBAAT,CAAgCC,aAAhC,EAAoEC,cAApE,EAA+H;AACpI;;AAEA,MAAIA,cAAc,KAAK,UAAvB,EACE,OAAO,CAAC,CAAR;AAEF,MAAIA,cAAc,KAAK,UAAvB,EACE,OAAO,CAAP;AAEF,MAAID,aAAa,CAACE,KAAd,KAAwB,CAA5B,EACE,OAAO,CAAC,CAAR;AAEF,SAAOC,IAAI,CAACC,IAAL,CAAUJ,aAAa,CAACE,KAAxB,CAAP;AACD","sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type { TCarouselProps } from \"../types\";\n\nexport function handlerOffsetDirection(handlerOffset: SharedValue<number>, fixedDirection?: TCarouselProps[\"fixedDirection\"]): -1 | 1 {\n  \"worklet\";\n\n  if (fixedDirection === \"negative\")\n    return -1;\n\n  if (fixedDirection === \"positive\")\n    return 1;\n\n  if (handlerOffset.value === 0)\n    return -1;\n\n  return Math.sign(handlerOffset.value) as -1 | 1;\n}\n"]}

package/lib/module/utils/handleroffset-direction.test.js

@@ -0,0 +1,41 @@
+import { useSharedValue } from "react-native-reanimated";
+import { renderHook } from "@testing-library/react-hooks";
+import { handlerOffsetDirection } from "./handleroffset-direction";
+describe("handlerOffsetDirection", () => {
+  it("should return -1 when default value equals to zero", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(0);
+      return handlerOffsetDirection(handlerOffsetAnimVal);
+    });
+    expect(result.result.current).toBe(-1);
+  });
+  it("should return 1 when default value is greater than zero", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(1);
+      return handlerOffsetDirection(handlerOffsetAnimVal);
+    });
+    expect(result.result.current).toBe(1);
+  });
+  it("should return -1 when default value is less than zero", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(-1);
+      return handlerOffsetDirection(handlerOffsetAnimVal);
+    });
+    expect(result.result.current).toBe(-1);
+  });
+  it("should return 1 when default value equals to zero and fixedDirection is negative", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(-1);
+      return handlerOffsetDirection(handlerOffsetAnimVal, "positive");
+    });
+    expect(result.result.current).toBe(1);
+  });
+  it("should return -1 when default value is greater than zero and fixedDirection is negative", () => {
+    const result = renderHook(() => {
+      const handlerOffsetAnimVal = useSharedValue(1);
+      return handlerOffsetDirection(handlerOffsetAnimVal, "negative");
+    });
+    expect(result.result.current).toBe(-1);
+  });
+});
+//# sourceMappingURL=handleroffset-direction.test.js.map

package/lib/module/utils/handleroffset-direction.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["handleroffset-direction.test.ts"],"names":["useSharedValue","renderHook","handlerOffsetDirection","describe","it","result","handlerOffsetAnimVal","expect","current","toBe"],"mappings":"AAAA,SAASA,cAAT,QAA+B,yBAA/B;AAEA,SAASC,UAAT,QAA2B,8BAA3B;AAEA,SAASC,sBAAT,QAAuC,2BAAvC;AAEAC,QAAQ,CAAC,wBAAD,EAA2B,MAAM;AACvCC,EAAAA,EAAE,CAAC,oDAAD,EAAuD,MAAM;AAC7D,UAAMC,MAAM,GAAGJ,UAAU,CAAC,MAAM;AAC9B,YAAMK,oBAAoB,GAAGN,cAAc,CAAC,CAAD,CAA3C;AACA,aAAOE,sBAAsB,CAACI,oBAAD,CAA7B;AACD,KAHwB,CAAzB;AAKAC,IAAAA,MAAM,CAACF,MAAM,CAACA,MAAP,CAAcG,OAAf,CAAN,CAA8BC,IAA9B,CAAmC,CAAC,CAApC;AACD,GAPC,CAAF;AASAL,EAAAA,EAAE,CAAC,yDAAD,EAA4D,MAAM;AAClE,UAAMC,MAAM,GAAGJ,UAAU,CAAC,MAAM;AAC9B,YAAMK,oBAAoB,GAAGN,cAAc,CAAC,CAAD,CAA3C;AACA,aAAOE,sBAAsB,CAACI,oBAAD,CAA7B;AACD,KAHwB,CAAzB;AAKAC,IAAAA,MAAM,CAACF,MAAM,CAACA,MAAP,CAAcG,OAAf,CAAN,CAA8BC,IAA9B,CAAmC,CAAnC;AACD,GAPC,CAAF;AASAL,EAAAA,EAAE,CAAC,uDAAD,EAA0D,MAAM;AAChE,UAAMC,MAAM,GAAGJ,UAAU,CAAC,MAAM;AAC9B,YAAMK,oBAAoB,GAAGN,cAAc,CAAC,CAAC,CAAF,CAA3C;AACA,aAAOE,sBAAsB,CAACI,oBAAD,CAA7B;AACD,KAHwB,CAAzB;AAKAC,IAAAA,MAAM,CAACF,MAAM,CAACA,MAAP,CAAcG,OAAf,CAAN,CAA8BC,IAA9B,CAAmC,CAAC,CAApC;AACD,GAPC,CAAF;AASAL,EAAAA,EAAE,CAAC,kFAAD,EAAqF,MAAM;AAC3F,UAAMC,MAAM,GAAGJ,UAAU,CAAC,MAAM;AAC9B,YAAMK,oBAAoB,GAAGN,cAAc,CAAC,CAAC,CAAF,CAA3C;AACA,aAAOE,sBAAsB,CAACI,oBAAD,EAAuB,UAAvB,CAA7B;AACD,KAHwB,CAAzB;AAKAC,IAAAA,MAAM,CAACF,MAAM,CAACA,MAAP,CAAcG,OAAf,CAAN,CAA8BC,IAA9B,CAAmC,CAAnC;AACD,GAPC,CAAF;AASAL,EAAAA,EAAE,CAAC,yFAAD,EAA4F,MAAM;AAClG,UAAMC,MAAM,GAAGJ,UAAU,CAAC,MAAM;AAC9B,YAAMK,oBAAoB,GAAGN,cAAc,CAAC,CAAD,CAA3C;AACA,aAAOE,sBAAsB,CAACI,oBAAD,EAAuB,UAAvB,CAA7B;AACD,KAHwB,CAAzB;AAKAC,IAAAA,MAAM,CAACF,MAAM,CAACA,MAAP,CAAcG,OAAf,CAAN,CAA8BC,IAA9B,CAAmC,CAAC,CAApC;AACD,GAPC,CAAF;AAQD,CA7CO,CAAR","sourcesContent":["import { useSharedValue } from \"react-native-reanimated\";\n\nimport { renderHook } from \"@testing-library/react-hooks\";\n\nimport { handlerOffsetDirection } from \"./handleroffset-direction\";\n\ndescribe(\"handlerOffsetDirection\", () => {\n  it(\"should return -1 when default value equals to zero\", () => {\n    const result = renderHook(() => {\n      const handlerOffsetAnimVal = useSharedValue(0);\n      return handlerOffsetDirection(handlerOffsetAnimVal);\n    });\n\n    expect(result.result.current).toBe(-1);\n  });\n\n  it(\"should return 1 when default value is greater than zero\", () => {\n    const result = renderHook(() => {\n      const handlerOffsetAnimVal = useSharedValue(1);\n      return handlerOffsetDirection(handlerOffsetAnimVal);\n    });\n\n    expect(result.result.current).toBe(1);\n  });\n\n  it(\"should return -1 when default value is less than zero\", () => {\n    const result = renderHook(() => {\n      const handlerOffsetAnimVal = useSharedValue(-1);\n      return handlerOffsetDirection(handlerOffsetAnimVal);\n    });\n\n    expect(result.result.current).toBe(-1);\n  });\n\n  it(\"should return 1 when default value equals to zero and fixedDirection is negative\", () => {\n    const result = renderHook(() => {\n      const handlerOffsetAnimVal = useSharedValue(-1);\n      return handlerOffsetDirection(handlerOffsetAnimVal, \"positive\");\n    });\n\n    expect(result.result.current).toBe(1);\n  });\n\n  it(\"should return -1 when default value is greater than zero and fixedDirection is negative\", () => {\n    const result = renderHook(() => {\n      const handlerOffsetAnimVal = useSharedValue(1);\n      return handlerOffsetDirection(handlerOffsetAnimVal, \"negative\");\n    });\n\n    expect(result.result.current).toBe(-1);\n  });\n});\n"]}

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

@@ -4,9 +4,10 @@ interface IOpts {
     loop: boolean;
     size: number;
     dataLength: number;
-    autoFillData: TCarouselProps["autoFillData"];
     handlerOffset: Animated.SharedValue<number>;
+    autoFillData: TCarouselProps["autoFillData"];
     withAnimation?: TCarouselProps["withAnimation"];
+    fixedDirection?: TCarouselProps["fixedDirection"];
     duration?: number;
     defaultIndex?: number;
     onScrollBegin?: () => void;

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/lib/typescript/utils/handleroffset-direction.d.ts

@@ -1,2 +1,3 @@
 import type { SharedValue } from "react-native-reanimated";
-export declare function handlerOffsetDirection(handlerOffset: SharedValue<number>): -1 | 1;
+import type { TCarouselProps } from "../types";
+export declare function handlerOffsetDirection(handlerOffset: SharedValue<number>, fixedDirection?: TCarouselProps["fixedDirection"]): -1 | 1;

package/lib/typescript/utils/handleroffset-direction.test.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-reanimated-carousel",
-    "version": "4.0.0-alpha.5",
+    "version": "4.0.0-alpha.7",
     "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";
@@ -45,6 +45,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       autoPlayInterval,
       scrollAnimationDuration,
       withAnimation,
+      fixedDirection,
       renderItem,
       onScrollEnd,
       onSnapToItem,
@@ -85,9 +86,10 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       handlerOffset,
       withAnimation,
       defaultIndex,
+      fixedDirection,
+      duration: scrollAnimationDuration,
       onScrollEnd: () => runOnJS(_onScrollEnd)(),
       onScrollBegin: () => !!onScrollBegin && runOnJS(onScrollBegin)(),
-      duration: scrollAnimationDuration,
     });
 
     const { next, prev, scrollTo, getSharedIndex, getCurrentIndex }
@@ -158,6 +160,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       viewSize: size,
       translation: handlerOffset,
       windowSize,
+      loop,
     });
 
     const layoutConfig = useLayoutConfig({ ...props, size });