react-native-reanimated-carousel 5.0.0-beta.3 → 5.0.0-beta.5

package/src/hooks/useCarouselController.tsx

@@ -352,34 +352,32 @@ export function useCarouselController(options: IOpts): ICarouselController {
       if (!canSliding()) return;
 
       onScrollStart?.();
-      // direction -> 1 | -1
-      let direction: -1 | 1;
-      if (fixedDirection === "positive") direction = 1;
-      else if (fixedDirection === "negative") direction = -1;
-      else if (!loop) {
-        const currentPage = currentFixedPage();
-        direction = i >= currentPage ? -1 : 1;
-      } else {
-        direction = handlerOffsetDirection(handlerOffset);
-      }
-
-      // target offset
-      const offset = i * size * direction;
-      // page width size * page count
-      const totalSize = dataInfo.length * size;
-
-      let isCloseToNextLoop = false;
+      let finalOffset: number;
 
-      if (loop) {
-        isCloseToNextLoop = Math.abs(handlerOffset.value % totalSize) / totalSize >= 0.5;
+      if (!loop) {
+        // Non-loop mode always uses direct page-to-offset mapping.
+        // This avoids sign flips when moving to lower indices.
+        finalOffset = -i * size;
+      } else {
+        // direction -> 1 | -1
+        let direction: -1 | 1;
+        if (fixedDirection === "positive") direction = 1;
+        else if (fixedDirection === "negative") direction = -1;
+        else direction = handlerOffsetDirection(handlerOffset);
+
+        // target offset
+        const offset = i * size * direction;
+        // page width size * page count
+        const totalSize = dataInfo.length * size;
+        const isCloseToNextLoop = Math.abs(handlerOffset.value % totalSize) / totalSize >= 0.5;
+
+        finalOffset =
+          (Math.floor(Math.abs(handlerOffset.value / totalSize)) + (isCloseToNextLoop ? 1 : 0)) *
+            totalSize *
+            direction +
+          offset;
       }
 
-      const finalOffset =
-        (Math.floor(Math.abs(handlerOffset.value / totalSize)) + (isCloseToNextLoop ? 1 : 0)) *
-          totalSize *
-          direction +
-        offset;
-
       if (animated) {
         index.value = i;
         handlerOffset.value = scrollWithTiming(finalOffset, onFinished);

package/src/hooks/useVisibleRanges.test.tsx

@@ -198,7 +198,46 @@ describe("useVisibleRanges", () => {
     });
   });
 
+  it("should return empty positive range when total is 0", () => {
+    const hook = renderHook(() => {
+      const translation = useSharedValue(0);
+      const range = useVisibleRanges({
+        total: 0,
+        translation,
+        viewSize,
+        windowSize: 4,
+        loop: false,
+      });
+      return range;
+    });
+
+    expect(hook.result.current.value).toEqual({
+      negativeRange: [0, 0],
+      positiveRange: [0, -1],
+    });
+  });
+
   describe("viewSize boundary conditions", () => {
+    it("should return safe defaults when viewSize is NaN", () => {
+      const hook = renderHook(() => {
+        const translation = useSharedValue(0);
+        const range = useVisibleRanges({
+          total: 6,
+          translation,
+          // Invalid runtime value should not break range calculation
+          viewSize: Number.NaN,
+          windowSize: 4,
+          loop: false,
+        });
+        return range;
+      });
+
+      expect(hook.result.current.value).toEqual({
+        negativeRange: [0, 0],
+        positiveRange: [0, 3],
+      });
+    });
+
     it("should return safe defaults when viewSize is 0", () => {
       const hook = renderHook(() => {
         const translation = useSharedValue(0);

package/src/hooks/useVisibleRanges.tsx

@@ -20,12 +20,22 @@ export function useVisibleRanges(options: {
 }): IVisibleRanges {
   const { total = 0, viewSize, translation, windowSize: _windowSize, loop } = options;
 
-  const windowSize = _windowSize ?? total;
+  const windowSize =
+    typeof _windowSize === "number" && Number.isFinite(_windowSize) && _windowSize > 0
+      ? _windowSize
+      : total;
   const cachedRanges = useRef<VisibleRanges | null>(null);
 
   const ranges = useDerivedValue(() => {
+    if (total <= 0) {
+      return {
+        negativeRange: [0, 0] as Range,
+        positiveRange: [0, -1] as Range,
+      };
+    }
+
     // Prevent division by zero when viewSize is not yet measured
-    if (viewSize <= 0) {
+    if (!Number.isFinite(viewSize) || viewSize <= 0) {
       return {
         negativeRange: [0, 0] as Range,
         positiveRange: [0, Math.min(total - 1, windowSize - 1)] as Range,
@@ -36,6 +46,7 @@ export function useVisibleRanges(options: {
     const negativeCount = windowSize - positiveCount;
 
     let currentIndex = Math.round(-translation.value / viewSize);
+    if (!Number.isFinite(currentIndex)) currentIndex = 0;
 
     let newRanges: VisibleRanges;
 
@@ -86,7 +97,7 @@ export function useVisibleRanges(options: {
 
     cachedRanges.current = newRanges;
     return newRanges;
-  }, [loop, total, windowSize, translation]);
+  }, [loop, total, windowSize, translation, viewSize]);
 
   return ranges;
 }

package/src/utils/compute-gesture-translation.test.ts

@@ -0,0 +1,70 @@
+import { computeGestureTranslation } from "./compute-gesture-translation";
+
+describe("computeGestureTranslation", () => {
+  it("should clamp right overdrag when overscrollEnabled is false", () => {
+    const next = computeGestureTranslation({
+      loop: false,
+      overscrollEnabled: false,
+      currentTranslation: 0,
+      panOffset: 0,
+      panTranslation: 120,
+      max: 500,
+    });
+
+    expect(next).toBe(0);
+  });
+
+  it("should keep damping behavior when overscrollEnabled is true and dragging past start", () => {
+    const next = computeGestureTranslation({
+      loop: false,
+      overscrollEnabled: true,
+      currentTranslation: 20,
+      panOffset: 0,
+      panTranslation: 120,
+      max: 500,
+    });
+
+    expect(next).toBe(60);
+  });
+
+  it("should apply damping when overscrollEnabled is true and dragging past end", () => {
+    const next = computeGestureTranslation({
+      loop: false,
+      overscrollEnabled: true,
+      currentTranslation: -600,
+      panOffset: -500,
+      panTranslation: -100,
+      max: 500,
+    });
+
+    // boundary = -max = -500, fixed = -500 - (-500) = 0, dynamic = -100 - 0 = -100
+    // result = -500 + (-100 * 0.5) = -550
+    expect(next).toBe(-550);
+  });
+
+  it("should pass through raw value in loop mode", () => {
+    const next = computeGestureTranslation({
+      loop: true,
+      overscrollEnabled: false,
+      currentTranslation: 0,
+      panOffset: 0,
+      panTranslation: 300,
+      max: 500,
+    });
+
+    expect(next).toBe(300);
+  });
+
+  it("should return raw value when within bounds and not looping", () => {
+    const next = computeGestureTranslation({
+      loop: false,
+      overscrollEnabled: true,
+      currentTranslation: -200,
+      panOffset: -100,
+      panTranslation: -50,
+      max: 500,
+    });
+
+    expect(next).toBe(-150);
+  });
+});

package/src/utils/compute-gesture-translation.ts

@@ -0,0 +1,29 @@
+export function computeGestureTranslation(options: {
+  loop: boolean;
+  overscrollEnabled: boolean;
+  currentTranslation: number;
+  panOffset: number;
+  panTranslation: number;
+  max: number;
+}): number {
+  "worklet";
+  const { loop, overscrollEnabled, currentTranslation, panOffset, panTranslation, max } = options;
+  const raw = panOffset + panTranslation;
+
+  if (loop) return raw;
+
+  if (!overscrollEnabled) {
+    // In non-loop mode with overscroll disabled, translation must stay in [-max, 0].
+    return Math.min(0, Math.max(-max, raw));
+  }
+
+  // Keep resistance behavior only when overscroll is enabled.
+  if (currentTranslation > 0 || currentTranslation < -max) {
+    const boundary = currentTranslation > 0 ? 0 : -max;
+    const fixed = boundary - panOffset;
+    const dynamic = panTranslation - fixed;
+    return boundary + dynamic * 0.5;
+  }
+
+  return raw;
+}

package/src/utils/sanitize-animation-style.test.ts

@@ -0,0 +1,40 @@
+import { sanitizeAnimationStyle } from "./sanitize-animation-style";
+
+describe("sanitizeAnimationStyle", () => {
+  it("rounds zIndex to an integer", () => {
+    const style = sanitizeAnimationStyle({
+      transform: [{ translateX: 12 }],
+      zIndex: 3.7,
+    });
+
+    expect(style.zIndex).toBe(4);
+  });
+
+  it("drops invalid zIndex values", () => {
+    const style = sanitizeAnimationStyle({
+      // invalid value from userland worklet should not flow to native styles
+      zIndex: Number.NaN,
+    });
+
+    expect(style).not.toHaveProperty("zIndex");
+  });
+
+  it("returns empty object for null/undefined input", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    expect(sanitizeAnimationStyle(null as any)).toEqual({});
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    expect(sanitizeAnimationStyle(undefined as any)).toEqual({});
+  });
+
+  it("strips non-number zIndex (e.g. string)", () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const style = sanitizeAnimationStyle({ opacity: 1, zIndex: "auto" as any });
+    expect(style).not.toHaveProperty("zIndex");
+    expect(style).toHaveProperty("opacity", 1);
+  });
+
+  it("preserves style without zIndex unchanged", () => {
+    const style = sanitizeAnimationStyle({ opacity: 0.5 });
+    expect(style).toEqual({ opacity: 0.5 });
+  });
+});

package/src/utils/sanitize-animation-style.ts

@@ -0,0 +1,20 @@
+import type { ViewStyle } from "react-native";
+
+type MutableViewStyle = ViewStyle & { zIndex?: unknown };
+
+export function sanitizeAnimationStyle(style: ViewStyle): ViewStyle {
+  "worklet";
+
+  if (!style || typeof style !== "object") return {};
+
+  const nextStyle: MutableViewStyle = { ...style };
+  const { zIndex, ...restStyle } = nextStyle;
+
+  if (typeof zIndex === "number") {
+    // Native layers are sensitive to invalid/non-integer zIndex values.
+    if (Number.isFinite(zIndex)) return { ...restStyle, zIndex: Math.round(zIndex) };
+    return restStyle;
+  }
+
+  return typeof zIndex === "undefined" ? nextStyle : restStyle;
+}