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

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["useVisibleRanges.tsx"],"names":["useRef","useDerivedValue","useVisibleRanges","options","total","viewSize","translation","windowSize","_windowSize","loop","cachedRanges","ranges","positiveCount","Math","round","negativeCount","currentIndex","value","newRanges","negativeRange","positiveRange","isArraysEqual","current","a","b","length","every","index"],"mappings":"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","sourcesContent":["import { useRef } from \"react\";\nimport type Animated from \"react-native-reanimated\";\nimport { useDerivedValue } from \"react-native-reanimated\";\n\ntype Range = [number, number];\n\nexport interface VisibleRanges {\n  negativeRange: Range\n  positiveRange: Range\n}\n\nexport type IVisibleRanges = Animated.SharedValue<VisibleRanges>;\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,\n    loop,\n  } = options;\n\n  const windowSize = _windowSize ?? total;\n  const cachedRanges = useRef<VisibleRanges>(null!);\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    let newRanges: VisibleRanges;\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      newRanges = {\n        negativeRange: [0 + currentIndex - (windowSize - 1), 0 + currentIndex],\n        positiveRange: [0 + currentIndex, currentIndex + (windowSize - 1)],\n      };\n    }\n    else {\n      const negativeRange: Range = [\n        (currentIndex - negativeCount + total) % total,\n        (currentIndex - 1 + total) % total,\n      ];\n\n      const positiveRange: Range = [\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      // console.log({ negativeRange, positiveRange ,total,windowSize,a:total <= _windowSize})\n      newRanges = { negativeRange, positiveRange };\n    }\n\n    if (\n      isArraysEqual(\n        cachedRanges.current?.negativeRange ?? [],\n        newRanges.negativeRange,\n      )\n      && isArraysEqual(\n        cachedRanges.current?.positiveRange ?? [],\n        newRanges.positiveRange,\n      )\n    )\n      return cachedRanges.current;\n\n    cachedRanges.current = newRanges;\n    return cachedRanges.current;\n  }, [loop, total, windowSize, translation]);\n\n  return ranges;\n}\n\nfunction isArraysEqual(a: number[], b: number[]): boolean {\n  \"worklet\";\n  if (a.length !== b.length) return false;\n\n  return a.every((value, index) => value === b[index]);\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/components/ItemRenderer.d.ts

@@ -0,0 +1,22 @@
+import type { FC } from "react";
+import type { ViewStyle } from "react-native";
+import type Animated from "react-native-reanimated";
+import { type AnimatedStyleProp } from "react-native-reanimated";
+import type { TAnimationStyle } from "./BaseLayout";
+import type { CarouselRenderItem } from "../types";
+interface Props {
+    data: any[];
+    dataLength: number;
+    rawDataLength: number;
+    loop: boolean;
+    size: number;
+    windowSize?: number;
+    autoFillData: boolean;
+    offsetX: Animated.SharedValue<number>;
+    handlerOffset: Animated.SharedValue<number>;
+    layoutConfig: TAnimationStyle;
+    renderItem: CarouselRenderItem<any>;
+    customAnimation?: ((value: number) => AnimatedStyleProp<ViewStyle>);
+}
+export declare const ItemRenderer: FC<Props>;
+export {};

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/useVisibleRanges.d.ts

@@ -1,8 +1,10 @@
 import type Animated from "react-native-reanimated";
-export declare type IVisibleRanges = Animated.SharedValue<{
-    negativeRange: number[];
-    positiveRange: number[];
-}>;
+declare type Range = [number, number];
+export interface VisibleRanges {
+    negativeRange: Range;
+    positiveRange: Range;
+}
+export declare type IVisibleRanges = Animated.SharedValue<VisibleRanges>;
 export declare function useVisibleRanges(options: {
     total: number;
     viewSize: number;
@@ -10,3 +12,4 @@ export declare function useVisibleRanges(options: {
     translation: Animated.SharedValue<number>;
     loop?: boolean;
 }): IVisibleRanges;
+export {};

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.6",
+    "version": "4.0.0-alpha.8",
     "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.",
     "main": "lib/commonjs/index",
     "module": "lib/module/index",

package/src/components/BaseLayout.tsx

@@ -2,15 +2,10 @@ import React from "react";
 import type { ViewStyle } from "react-native";
 import type { AnimatedStyleProp } from "react-native-reanimated";
 import Animated, {
-  runOnJS,
-  useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
 } from "react-native-reanimated";
 
-import { LazyView } from "./LazyView";
-
-import { useCheckMounted } from "../hooks/useCheckMounted";
 import type { IOpts } from "../hooks/useOffsetX";
 import { useOffsetX } from "../hooks/useOffsetX";
 import type { IVisibleRanges } from "../hooks/useVisibleRanges";
@@ -28,7 +23,6 @@ export const BaseLayout: React.FC<{
     animationValue: Animated.SharedValue<number>
   }) => React.ReactElement
 }> = (props) => {
-  const mounted = useCheckMounted();
   const { handlerOffset, index, children, visibleRanges, animationStyle }
     = props;
 
@@ -46,7 +40,7 @@ export const BaseLayout: React.FC<{
     },
   } = context;
   const size = vertical ? height : width;
-  const [shouldUpdate, setShouldUpdate] = React.useState(false);
+
   let offsetXConfig: IOpts = {
     handlerOffset,
     index,
@@ -79,28 +73,6 @@ export const BaseLayout: React.FC<{
     [animationStyle],
   );
 
-  const updateView = React.useCallback(
-    (negativeRange: number[], positiveRange: number[]) => {
-      mounted.current
-        && setShouldUpdate(
-          (index >= negativeRange[0] && index <= negativeRange[1])
-          || (index >= positiveRange[0] && index <= positiveRange[1]),
-        );
-    },
-    [index, mounted],
-  );
-
-  useAnimatedReaction(
-    () => visibleRanges.value,
-    () => {
-      runOnJS(updateView)(
-        visibleRanges.value.negativeRange,
-        visibleRanges.value.positiveRange,
-      );
-    },
-    [visibleRanges.value],
-  );
-
   return (
     <Animated.View
       style={[
@@ -116,11 +88,9 @@ export const BaseLayout: React.FC<{
        * e.g.
        *  The testID of first item will be changed to __CAROUSEL_ITEM_0_READY__ from __CAROUSEL_ITEM_0_NOT_READY__ when the item is ready.
        * */
-      testID={`__CAROUSEL_ITEM_${index}_${shouldUpdate ? "READY" : "NOT_READY"}__`}
+      testID={`__CAROUSEL_ITEM_${index}__`}
     >
-      <LazyView shouldUpdate={shouldUpdate}>
-        {children({ animationValue })}
-      </LazyView>
+      {children({ animationValue })}
     </Animated.View>
   );
 };

package/src/components/Carousel.tsx

@@ -3,7 +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 { ItemRenderer } from "./ItemRenderer";
 import { ScrollViewGesture } from "./ScrollViewGesture";
 
 import { useAutoPlay } from "../hooks/useAutoPlay";
@@ -13,7 +13,6 @@ import { useInitProps } from "../hooks/useInitProps";
 import { useLayoutConfig } from "../hooks/useLayoutConfig";
 import { useOnProgressChange } from "../hooks/useOnProgressChange";
 import { usePropsErrorBoundary } from "../hooks/usePropsErrorBoundary";
-import { useVisibleRanges } from "../hooks/useVisibleRanges";
 import { CTX } from "../store";
 import type { ICarouselInstance, TCarouselProps } from "../types";
 import { computedRealIndexWithAutoFillData } from "../utils/computed-with-auto-fill-data";
@@ -30,8 +29,6 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       data,
       // Length of fill data
       dataLength,
-      // Raw data that has not been processed
-      rawData,
       // Length of raw data
       rawDataLength,
       mode,
@@ -45,6 +42,7 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       autoPlayInterval,
       scrollAnimationDuration,
       withAnimation,
+      fixedDirection,
       renderItem,
       onScrollEnd,
       onSnapToItem,
@@ -85,9 +83,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 }
@@ -153,55 +152,8 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
       [getCurrentIndex, next, prev, scrollTo],
     );
 
-    const visibleRanges = useVisibleRanges({
-      total: dataLength,
-      viewSize: size,
-      translation: handlerOffset,
-      windowSize,
-      loop,
-    });
-
     const layoutConfig = useLayoutConfig({ ...props, size });
 
-    const renderLayout = React.useCallback(
-      (item: any, i: number) => {
-        const realIndex = computedRealIndexWithAutoFillData({
-          index: i,
-          dataLength: rawDataLength,
-          loop,
-          autoFillData,
-        });
-
-        return (
-          <BaseLayout
-            key={i}
-            index={i}
-            handlerOffset={offsetX}
-            visibleRanges={visibleRanges}
-            animationStyle={customAnimation || layoutConfig}
-          >
-            {({ animationValue }) =>
-              renderItem({
-                item,
-                index: realIndex,
-                animationValue,
-              })
-            }
-          </BaseLayout>
-        );
-      },
-      [
-        loop,
-        rawData,
-        offsetX,
-        visibleRanges,
-        autoFillData,
-        renderItem,
-        layoutConfig,
-        customAnimation,
-      ],
-    );
-
     return (
       <GestureHandlerRootView>
         <CTX.Provider value={{ props, common: commonVariables }}>
@@ -226,7 +178,20 @@ const Carousel = React.forwardRef<ICarouselInstance, TCarouselProps<any>>(
             onTouchBegin={scrollViewGestureOnTouchBegin}
             onTouchEnd={scrollViewGestureOnTouchEnd}
           >
-            {data.map(renderLayout)}
+            <ItemRenderer
+              data={data}
+              dataLength={dataLength}
+              rawDataLength={rawDataLength}
+              loop={loop}
+              size={size}
+              windowSize={windowSize}
+              autoFillData={autoFillData}
+              offsetX={offsetX}
+              handlerOffset={handlerOffset}
+              layoutConfig={layoutConfig}
+              renderItem={renderItem}
+              customAnimation={customAnimation}
+            />
           </ScrollViewGesture>
         </CTX.Provider>
       </GestureHandlerRootView>

package/src/components/ItemRenderer.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import type { FC } from "react";
+import type { ViewStyle } from "react-native";
+import type Animated from "react-native-reanimated";
+import { useAnimatedReaction, type AnimatedStyleProp, runOnJS } from "react-native-reanimated";
+
+import type { TAnimationStyle } from "./BaseLayout";
+import { BaseLayout } from "./BaseLayout";
+
+import type { VisibleRanges } from "../hooks/useVisibleRanges";
+import { useVisibleRanges } from "../hooks/useVisibleRanges";
+import type { CarouselRenderItem } from "../types";
+import { computedRealIndexWithAutoFillData } from "../utils/computed-with-auto-fill-data";
+
+interface Props {
+  data: any[]
+  dataLength: number
+  rawDataLength: number
+  loop: boolean
+  size: number
+  windowSize?: number
+  autoFillData: boolean
+  offsetX: Animated.SharedValue<number>
+  handlerOffset: Animated.SharedValue<number>
+  layoutConfig: TAnimationStyle
+  renderItem: CarouselRenderItem<any>
+  customAnimation?: ((value: number) => AnimatedStyleProp<ViewStyle>)
+}
+
+export const ItemRenderer: FC<Props> = (props) => {
+  const {
+    data,
+    size,
+    windowSize,
+    handlerOffset,
+    offsetX,
+    dataLength,
+    rawDataLength,
+    loop,
+    autoFillData,
+    layoutConfig,
+    renderItem,
+    customAnimation,
+  } = props;
+
+  const visibleRanges = useVisibleRanges({
+    total: dataLength,
+    viewSize: size,
+    translation: handlerOffset,
+    windowSize,
+    loop,
+  });
+
+  const [displayedItems, setDisplayedItems] = React.useState<VisibleRanges>(null!);
+
+  useAnimatedReaction(
+    () => visibleRanges.value,
+    ranges => runOnJS(setDisplayedItems)(ranges),
+    [visibleRanges],
+  );
+
+  if (!displayedItems)
+    return null;
+
+  return (
+    <>
+      {
+        data.map((item, index) => {
+          const realIndex = computedRealIndexWithAutoFillData({
+            index,
+            dataLength: rawDataLength,
+            loop,
+            autoFillData,
+          });
+
+          const { negativeRange, positiveRange } = displayedItems;
+
+          const shouldRender = (index >= negativeRange[0] && index <= negativeRange[1])
+          || (index >= positiveRange[0] && index <= positiveRange[1]);
+
+          if (!shouldRender)
+            return null;
+
+          return (
+            <BaseLayout
+              key={index}
+              index={index}
+              handlerOffset={offsetX}
+              visibleRanges={visibleRanges}
+              animationStyle={customAnimation || layoutConfig}
+            >
+              {({ animationValue }) =>
+                renderItem({
+                  item,
+                  index: realIndex,
+                  animationValue,
+                })
+              }
+            </BaseLayout>
+          );
+        })
+      }
+    </>
+  );
+};

package/src/hooks/useCarouselController.tsx

@@ -21,9 +21,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
@@ -48,6 +49,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
     defaultIndex = 0,
     duration,
     autoFillData,
+    fixedDirection,
   } = options;
 
   const dataInfo = React.useMemo(
@@ -241,7 +243,7 @@ export function useCarouselController(options: IOpts): ICarouselController {
 
       onScrollBegin?.();
       // direction -> 1 | -1
-      const direction = handlerOffsetDirection(handlerOffset);
+      const direction = handlerOffsetDirection(handlerOffset, fixedDirection);
 
       // target offset
       const offset = i * size * direction;
@@ -252,16 +254,16 @@ export function useCarouselController(options: IOpts): ICarouselController {
 
       if (loop) {
         isCloseToNextLoop
-                    = Math.abs(handlerOffset.value % totalSize) / totalSize
-                    >= 0.5;
+          = Math.abs(handlerOffset.value % totalSize) / totalSize
+          >= 0.5;
       }
 
       const finalOffset
-                = (Math.floor(Math.abs(handlerOffset.value / totalSize))
-                    + (isCloseToNextLoop ? 1 : 0))
-                    * totalSize
-                    * direction
-                + offset;
+        = (Math.floor(Math.abs(handlerOffset.value / totalSize))
+          + (isCloseToNextLoop ? 1 : 0))
+        * totalSize
+        * direction
+        + offset;
 
       if (animated) {
         index.value = i;
@@ -274,13 +276,14 @@ export function useCarouselController(options: IOpts): ICarouselController {
       }
     },
     [
+      size,
+      loop,
       index,
-      canSliding,
-      onScrollBegin,
+      fixedDirection,
       handlerOffset,
-      size,
       dataInfo.length,
-      loop,
+      canSliding,
+      onScrollBegin,
       scrollWithTiming,
     ],
   );

package/src/hooks/useOffsetX.test.ts

@@ -12,7 +12,7 @@ describe("useSharedValue", () => {
       const range = useSharedValue({
         negativeRange: [7, 9],
         positiveRange: [0, 3],
-      });
+      }) as IVisibleRanges;
       const inputs: Array<{
         config: IOpts
         range: IVisibleRanges