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

package/src/hooks/useVisibleRanges.tsx

@@ -1,10 +1,15 @@
+import { useRef } from "react";
 import type Animated from "react-native-reanimated";
 import { useDerivedValue } from "react-native-reanimated";
 
-export type IVisibleRanges = Animated.SharedValue<{
-  negativeRange: number[]
-  positiveRange: number[]
-}>;
+type Range = [number, number];
+
+export interface VisibleRanges {
+  negativeRange: Range
+  positiveRange: Range
+}
+
+export type IVisibleRanges = Animated.SharedValue<VisibleRanges>;
 
 export function useVisibleRanges(options: {
   total: number
@@ -17,11 +22,12 @@ export function useVisibleRanges(options: {
     total = 0,
     viewSize,
     translation,
-    windowSize: _windowSize = 0,
+    windowSize: _windowSize,
     loop,
   } = options;
 
-  const windowSize = total <= _windowSize ? total : _windowSize;
+  const windowSize = _windowSize ?? total;
+  const cachedRanges = useRef<VisibleRanges>(null!);
 
   const ranges = useDerivedValue(() => {
     const positiveCount = Math.round(windowSize / 2);
@@ -30,36 +36,62 @@ export function useVisibleRanges(options: {
     let currentIndex = Math.round(-translation.value / viewSize);
     currentIndex = currentIndex < 0 ? (currentIndex % total) + total : currentIndex;
 
+    let newRanges: VisibleRanges;
+
     if (!loop) {
       // Adjusting negative range if the carousel is not loopable.
       // So, It will be only displayed the positive items.
-      return {
+      newRanges = {
         negativeRange: [0 + currentIndex - (windowSize - 1), 0 + currentIndex],
-        positiveRange: [0 + currentIndex, windowSize - 1 + currentIndex],
+        positiveRange: [0 + currentIndex, currentIndex + (windowSize - 1)],
       };
     }
+    else {
+      const negativeRange: Range = [
+        (currentIndex - negativeCount + total) % total,
+        (currentIndex - 1 + total) % total,
+      ];
 
-    const negativeRange = [
-      (currentIndex - negativeCount + total) % total,
-      (currentIndex - 1 + total) % total,
-    ];
+      const positiveRange: Range = [
+        (currentIndex + total) % total,
+        (currentIndex + positiveCount + total) % total,
+      ];
 
-    const positiveRange = [
-      (currentIndex + total) % total,
-      (currentIndex + positiveCount + total) % total,
-    ];
+      if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
+        negativeRange[1] = total - 1;
+        positiveRange[0] = 0;
+      }
+      if (positiveRange[0] > positiveRange[1]) {
+        negativeRange[1] = total - 1;
+        positiveRange[0] = 0;
+      }
 
-    if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
-      negativeRange[1] = total - 1;
-      positiveRange[0] = 0;
-    }
-    if (positiveRange[0] > positiveRange[1]) {
-      negativeRange[1] = total - 1;
-      positiveRange[0] = 0;
+      // console.log({ negativeRange, positiveRange ,total,windowSize,a:total <= _windowSize})
+      newRanges = { negativeRange, positiveRange };
     }
 
-    return { negativeRange, positiveRange };
+    if (
+      isArraysEqual(
+        cachedRanges.current?.negativeRange ?? [],
+        newRanges.negativeRange,
+      )
+      && isArraysEqual(
+        cachedRanges.current?.positiveRange ?? [],
+        newRanges.positiveRange,
+      )
+    )
+      return cachedRanges.current;
+
+    cachedRanges.current = newRanges;
+    return cachedRanges.current;
   }, [loop, total, windowSize, translation]);
 
   return ranges;
 }
+
+function isArraysEqual(a: number[], b: number[]): boolean {
+  "worklet";
+  if (a.length !== b.length) return false;
+
+  return a.every((value, index) => value === b[index]);
+}

package/src/utils/handleroffset-direction.test.ts

@@ -0,0 +1,52 @@
+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);
+  });
+});

package/src/utils/handleroffset-direction.ts

@@ -1,15 +1,18 @@
 import type { SharedValue } from "react-native-reanimated";
 
-export function handlerOffsetDirection(handlerOffset: SharedValue<number>): -1 | 1 {
+import type { TCarouselProps } from "../types";
+
+export function handlerOffsetDirection(handlerOffset: SharedValue<number>, fixedDirection?: TCarouselProps["fixedDirection"]): -1 | 1 {
   "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) as -1 | 1;
+  if (fixedDirection === "negative")
+    return -1;
+
+  if (fixedDirection === "positive")
+    return 1;
+
+  if (handlerOffset.value === 0)
+    return -1;
 
-  return direction;
+  return Math.sign(handlerOffset.value) as -1 | 1;
 }