@leonsilicon/react-native-reanimated-carousel 0.0.0

package/src/hooks/useSizeResolver.test.tsx

@@ -0,0 +1,112 @@
+import { act, renderHook } from "@testing-library/react-hooks";
+import React from "react";
+import { useSharedValue } from "react-native-reanimated";
+
+import { useSizeResolver } from "./useSizeResolver";
+
+describe("useSizeResolver", () => {
+  it("returns a uniform resolver when getItemSize is undefined", () => {
+    const { result } = renderHook(() => {
+      const size = useSharedValue(120);
+      return useSizeResolver({
+        dataLength: 5,
+        getItemSize: undefined,
+        uniformSize: size,
+      });
+    });
+
+    expect(result.current.variable).toBe(false);
+    expect(result.current.itemSize(0)).toBe(120);
+    expect(result.current.offsetAt(3)).toBe(360);
+    expect(result.current.indexAt(120)).toBe(1);
+    expect(result.current.total.value).toBe(600);
+  });
+
+  it("returns a variable resolver when getItemSize is provided", () => {
+    const widths = [80, 150, 220, 100, 300];
+    const { result } = renderHook(() => {
+      const size = useSharedValue(0);
+      return useSizeResolver({
+        dataLength: widths.length,
+        getItemSize: (i: number) => widths[i],
+        uniformSize: size,
+      });
+    });
+
+    expect(result.current.variable).toBe(true);
+    expect(result.current.itemSize(2)).toBe(220);
+    expect(result.current.offsetAt(3)).toBe(450);
+    expect(result.current.indexAt(700)).toBe(4);
+    expect(result.current.total.value).toBe(850);
+  });
+
+  it("rebuilds the prefix table when getItemSize identity changes", () => {
+    let widths = [100, 100, 100];
+    const { result, rerender } = renderHook(
+      ({ getter }: { getter: (i: number) => number }) => {
+        const size = useSharedValue(0);
+        return useSizeResolver({
+          dataLength: widths.length,
+          getItemSize: getter,
+          uniformSize: size,
+        });
+      },
+      { initialProps: { getter: (i: number) => widths[i] } }
+    );
+
+    expect(result.current.total.value).toBe(300);
+
+    widths = [200, 200, 200];
+    rerender({ getter: (i: number) => widths[i] });
+
+    expect(result.current.total.value).toBe(600);
+    expect(result.current.offsetAt(2)).toBe(400);
+  });
+
+  it("rebuilds when dataLength changes", () => {
+    const widths = [100, 100, 100, 100, 100];
+    const getItemSize = (i: number) => widths[i];
+    const { result, rerender } = renderHook(
+      ({ length }: { length: number }) => {
+        const size = useSharedValue(0);
+        return useSizeResolver({
+          dataLength: length,
+          getItemSize,
+          uniformSize: size,
+        });
+      },
+      { initialProps: { length: 3 } }
+    );
+
+    expect(result.current.total.value).toBe(300);
+
+    rerender({ length: 5 });
+
+    expect(result.current.total.value).toBe(500);
+  });
+
+  it("reflects uniform-size changes in offsetAt immediately", () => {
+    const { result } = renderHook(() => {
+      const size = useSharedValue(100);
+      const resolver = useSizeResolver({
+        dataLength: 4,
+        getItemSize: undefined,
+        uniformSize: size,
+      });
+      return { size, resolver };
+    });
+
+    expect(result.current.resolver.total.value).toBe(400);
+    expect(result.current.resolver.offsetAt(2)).toBe(200);
+
+    act(() => {
+      result.current.size.value = 200;
+    });
+    // The uniform resolver reads `size.value` on every call, so `offsetAt`
+    // reflects the change immediately (no rerender needed). The mirrored
+    // `total` is updated by the animated reaction, which doesn't fire
+    // synchronously in jest — but that's fine; consumers should rely on
+    // `offsetAt`/`total` from worklets where the reaction runs eagerly.
+    expect(result.current.resolver.offsetAt(2)).toBe(400);
+  });
+});

package/src/hooks/useSizeResolver.ts

@@ -0,0 +1,106 @@
+import React from "react";
+import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
+
+import {
+  buildPrefixSum,
+  createUniformSizeResolver,
+  createVariableSizeResolver,
+} from "../utils/size-resolver";
+import type { SizeResolver } from "../utils/size-resolver";
+
+interface Opts {
+  /** Number of items the resolver should cover. */
+  dataLength: number;
+  /** Active-axis per-item size getter, or `undefined` in uniform mode. */
+  getItemSize: ((index: number) => number) | undefined;
+  /**
+   * Uniform-mode scalar size (page width/height). Read on every worklet tick.
+   * `null` is treated as 0 — this lets us accept `common.resolvedSize` (which
+   * is `SharedValue<number | null>`) directly without a cast.
+   */
+  uniformSize: SharedValue<number | null>;
+}
+
+/**
+ * Builds a `SizeResolver` from props. In variable-size mode, computes the
+ * prefix-sum array on the JS thread and ferries it into SharedValues so the
+ * UI thread can look up offsets without a thread-hop. In uniform-size mode,
+ * returns a resolver that reads the existing scalar `size` SharedValue.
+ *
+ * The variable-mode resolver re-runs `getItemSize(i)` for every index whenever
+ * either `dataLength` or the getter identity changes. Memoize the getter to
+ * avoid spurious rebuilds — same convention as React deps.
+ */
+export function useSizeResolver(opts: Opts): SizeResolver {
+  const { dataLength, getItemSize, uniformSize } = opts;
+  const variable = typeof getItemSize === "function";
+
+  const dataLengthSv = useSharedValue(dataLength);
+  React.useEffect(() => {
+    dataLengthSv.value = dataLength;
+  }, [dataLength, dataLengthSv]);
+
+  // Variable-mode shared state. We create the SharedValues unconditionally so
+  // hook order stays stable across uniform/variable toggles.
+  const sizesSv = useSharedValue<number[]>([]);
+  const prefixSv = useSharedValue<number[]>([0]);
+  const totalSv = useSharedValue<number>(0);
+  const hintSv = useSharedValue<number>(0);
+  // Uniform-mode mirror of `uniformSize * dataLength` so consumers always read
+  // `total` consistently regardless of mode. We initialise to 0 (filled by the
+  // sync effect below) to avoid reading SharedValues during render.
+  const uniformTotalSv = useSharedValue<number>(0);
+
+  // Rebuild the prefix-sum table whenever inputs change.
+  const built = React.useMemo(() => {
+    if (!variable || !getItemSize || dataLength <= 0) return null;
+    return buildPrefixSum(dataLength, getItemSize);
+  }, [variable, getItemSize, dataLength]);
+
+  React.useEffect(() => {
+    if (!built) return;
+    sizesSv.value = built.sizes;
+    prefixSv.value = built.prefix;
+    totalSv.value = built.total;
+    // Reset the index-cache hint when the table changes — old indices may not
+    // map to the new prefix layout.
+    hintSv.value = 0;
+  }, [built, sizesSv, prefixSv, totalSv, hintSv]);
+
+  // Keep the uniform-mode `total` mirror in sync with the scalar size and
+  // dataLength. The animated reaction handles live updates from the UI thread
+  // (e.g. when onLayout writes a new size); the layout effect seeds the
+  // initial value synchronously so the first render sees a correct total.
+  useAnimatedReaction(
+    () => ({ size: uniformSize.value ?? 0, length: dataLengthSv.value }),
+    ({ size, length }) => {
+      if (variable) return;
+      uniformTotalSv.value = size * length;
+    },
+    [variable]
+  );
+
+  React.useLayoutEffect(() => {
+    if (variable) return;
+    const v = uniformSize.value ?? 0;
+    uniformTotalSv.value = v * dataLength;
+  }, [variable, uniformSize, dataLength, uniformTotalSv]);
+
+  return React.useMemo<SizeResolver>(() => {
+    if (variable) {
+      return createVariableSizeResolver({
+        sizes: sizesSv,
+        prefix: prefixSv,
+        total: totalSv,
+        count: dataLengthSv,
+        hint: hintSv,
+      });
+    }
+    return createUniformSizeResolver({
+      size: uniformSize,
+      count: dataLengthSv,
+      total: uniformTotalSv,
+    });
+  }, [variable, sizesSv, prefixSv, totalSv, hintSv, uniformSize, dataLengthSv, uniformTotalSv]);
+}

package/src/hooks/useUpdateGestureConfig.test.ts

@@ -0,0 +1,89 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useUpdateGestureConfig } from "./useUpdateGestureConfig";
+
+describe("useUpdateGestureConfig", () => {
+  const mockGesture = {
+    enabled: jest.fn().mockReturnThis(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should update gesture enabled state", () => {
+    renderHook(() =>
+      useUpdateGestureConfig(mockGesture as any, {
+        enabled: true,
+      })
+    );
+
+    expect(mockGesture.enabled).toHaveBeenCalledWith(true);
+  });
+
+  it("should handle undefined enabled state", () => {
+    renderHook(() => useUpdateGestureConfig(mockGesture as any, {}));
+
+    expect(mockGesture.enabled).not.toHaveBeenCalled();
+  });
+
+  it("should update when enabled state changes", () => {
+    const { rerender } = renderHook((props) => useUpdateGestureConfig(mockGesture as any, props), {
+      initialProps: { enabled: true },
+    });
+
+    expect(mockGesture.enabled).toHaveBeenCalledWith(true);
+
+    rerender({ enabled: false });
+    expect(mockGesture.enabled).toHaveBeenCalledWith(false);
+  });
+
+  it("should not update when enabled state remains the same", () => {
+    const { rerender } = renderHook((props) => useUpdateGestureConfig(mockGesture as any, props), {
+      initialProps: { enabled: true },
+    });
+
+    mockGesture.enabled.mockClear();
+
+    rerender({ enabled: true });
+    expect(mockGesture.enabled).not.toHaveBeenCalled();
+  });
+
+  it("should handle gesture object changes", () => {
+    const newMockGesture = {
+      enabled: jest.fn().mockReturnThis(),
+    };
+
+    const { rerender } = renderHook(
+      ({ gesture, config }) => useUpdateGestureConfig(gesture as any, config),
+      {
+        initialProps: {
+          gesture: mockGesture,
+          config: { enabled: true },
+        },
+      }
+    );
+
+    expect(mockGesture.enabled).toHaveBeenCalledWith(true);
+
+    rerender({
+      gesture: newMockGesture,
+      config: { enabled: true },
+    });
+
+    expect(newMockGesture.enabled).toHaveBeenCalledWith(true);
+  });
+
+  it("should cleanup properly on unmount", () => {
+    const { unmount } = renderHook(() =>
+      useUpdateGestureConfig(mockGesture as any, {
+        enabled: true,
+      })
+    );
+
+    mockGesture.enabled.mockClear();
+    unmount();
+
+    expect(mockGesture.enabled).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/useUpdateGestureConfig.ts

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import type { PanGesture } from "react-native-gesture-handler";
+
+export interface GestureConfig {
+  enabled?: boolean;
+}
+
+export const useUpdateGestureConfig = (gesture: PanGesture, config: GestureConfig) => {
+  const { enabled } = config;
+
+  useEffect(() => {
+    if (typeof enabled !== "undefined") gesture.enabled(enabled);
+  }, [enabled, gesture]);
+};

package/src/hooks/useVisibleRanges.test.tsx

@@ -0,0 +1,366 @@
+import { useSharedValue } from "react-native-reanimated";
+
+import { renderHook } from "@testing-library/react-hooks";
+
+import { buildPrefixSum, createVariableSizeResolver } from "../utils/size-resolver";
+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": [
+                0,
+                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": [
+                0,
+                0,
+              ],
+              "positiveRange": [
+                0,
+                3,
+              ],
+            }
+        `);
+
+    // [1,4] Display the 1,2,3,4 items.
+    expect(slide1hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                0,
+                1,
+              ],
+              "positiveRange": [
+                1,
+                4,
+              ],
+            }
+        `);
+
+    // [2,5] Display the 2,3,4,5 items.
+    expect(slide2hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                0,
+                2,
+              ],
+              "positiveRange": [
+                2,
+                5,
+              ],
+            }
+        `);
+
+    // [3.6] Display the 3,4,5,6 items.
+    expect(slide3hook).toMatchInlineSnapshot(`
+            {
+              "negativeRange": [
+                0,
+                3,
+              ],
+              "positiveRange": [
+                3,
+                6,
+              ],
+            }
+        `);
+  });
+
+  it("should clamp ranges on right overdrag in non-loop mode", () => {
+    const hook = renderHook(() => {
+      // Simulate overdrag to the right at the first page (positive translation)
+      const translation = useSharedValue(viewSize * 0.25);
+      const range = useVisibleRanges({
+        total: 5,
+        translation,
+        viewSize,
+        windowSize: 3,
+        loop: false,
+      });
+
+      return range;
+    });
+
+    expect(hook.result.current.value).toEqual({
+      negativeRange: [0, 0],
+      positiveRange: [0, 2],
+    });
+  });
+
+  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);
+        const range = useVisibleRanges({
+          total: 10,
+          translation,
+          viewSize: 0,
+          windowSize: 4,
+          loop: false,
+        });
+        return range;
+      });
+
+      // Should not crash and return sensible defaults
+      expect(hook.result.current.value).toEqual({
+        negativeRange: [0, 0],
+        positiveRange: [0, 3], // Math.min(10-1, 4-1) = 3
+      });
+    });
+
+    it("should return safe defaults when viewSize is negative", () => {
+      const hook = renderHook(() => {
+        const translation = useSharedValue(0);
+        const range = useVisibleRanges({
+          total: 5,
+          translation,
+          viewSize: -100,
+          windowSize: 3,
+          loop: true,
+        });
+        return range;
+      });
+
+      expect(hook.result.current.value).toEqual({
+        negativeRange: [0, 0],
+        positiveRange: [0, 2], // Math.min(5-1, 3-1) = 2
+      });
+    });
+
+    it("should handle small total with viewSize 0", () => {
+      const hook = renderHook(() => {
+        const translation = useSharedValue(0);
+        const range = useVisibleRanges({
+          total: 2,
+          translation,
+          viewSize: 0,
+          windowSize: 5,
+          loop: false,
+        });
+        return range;
+      });
+
+      expect(hook.result.current.value).toEqual({
+        negativeRange: [0, 0],
+        positiveRange: [0, 1], // Math.min(2-1, 5-1) = 1
+      });
+    });
+
+    it("should handle loop mode with viewSize 0", () => {
+      const hook = renderHook(() => {
+        const translation = useSharedValue(0);
+        const range = useVisibleRanges({
+          total: 6,
+          translation,
+          viewSize: 0,
+          windowSize: 4,
+          loop: true,
+        });
+        return range;
+      });
+
+      expect(hook.result.current.value).toEqual({
+        negativeRange: [0, 0],
+        positiveRange: [0, 3], // Math.min(6-1, 4-1) = 3
+      });
+    });
+  });
+
+  describe("variable-size resolver", () => {
+    const widths = [80, 150, 220, 100, 300, 100, 120, 200, 90, 180];
+    const built = buildPrefixSum(widths.length, (i) => widths[i]);
+
+    const makeRange = (translationValue: number) =>
+      renderHook(() => {
+        const translation = useSharedValue(translationValue);
+        const sizes = useSharedValue(built.sizes);
+        const prefix = useSharedValue(built.prefix);
+        const total = useSharedValue(built.total);
+        const count = useSharedValue(widths.length);
+        const resolver = createVariableSizeResolver({ sizes, prefix, total, count });
+        return useVisibleRanges({
+          total: widths.length,
+          translation,
+          viewSize: 0,
+          windowSize: 4,
+          loop: false,
+          resolver,
+        });
+      }).result.current.value;
+
+    it("locates currentIndex via resolver.indexAt at the start", () => {
+      // translation = 0 → current item is index 0
+      expect(makeRange(0)).toEqual({
+        negativeRange: [0, 0],
+        positiveRange: [0, 3],
+      });
+    });
+
+    it("locates currentIndex when scrolled into item 2", () => {
+      // prefix[2] = 230. Scrolling -250 lands inside item 2.
+      expect(makeRange(-250)).toEqual({
+        negativeRange: [0, 2],
+        positiveRange: [2, 5],
+      });
+    });
+
+    it("locates currentIndex when scrolled past item 4", () => {
+      // prefix[5] = 850. Scrolling -870 lands inside item 5.
+      expect(makeRange(-870)).toEqual({
+        negativeRange: [2, 5],
+        positiveRange: [5, 8],
+      });
+    });
+  });
+});