react-native-reanimated-carousel 5.0.0-beta.6 → 5.0.0-beta.8

package/src/hooks/useVisibleRanges.test.tsx

@@ -1,347 +0,0 @@
-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": [
-                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.each([
-    { total: 1, windowSize: 1, currentIndex: 0 },
-    { total: 2, windowSize: 5, currentIndex: 1 },
-    { total: 3, windowSize: 3, currentIndex: 2 },
-    { total: 4, windowSize: 5, currentIndex: 1 },
-  ])(
-    "should display every item when windowSize=$windowSize is at least total=$total in loop mode",
-    ({ total, windowSize, currentIndex }) => {
-      const ranges = renderHook(() => {
-        const translation = useSharedValue(-currentIndex * viewSize);
-        return useVisibleRanges({
-          total,
-          translation,
-          viewSize,
-          windowSize,
-          loop: true,
-        });
-      }).result.current.value;
-
-      const visibleIndexes = Array.from({ length: total }, (_, index) => index).filter(
-        (index) =>
-          (index >= ranges.negativeRange[0] && index <= ranges.negativeRange[1]) ||
-          (index >= ranges.positiveRange[0] && index <= ranges.positiveRange[1])
-      );
-
-      expect(visibleIndexes).toEqual(Array.from({ length: total }, (_, index) => index));
-    }
-  );
-
-  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
-      });
-    });
-  });
-});

package/src/layouts/parallax.test.ts

@@ -1,239 +0,0 @@
-import { parallaxLayout } from "./parallax";
-
-// Mock react-native-reanimated
-jest.mock("react-native-reanimated", () => ({
-  interpolate: jest.fn((value, inputRange, outputRange) => {
-    // Simple linear interpolation mock for testing
-    const inputMin = inputRange[0];
-    const inputMax = inputRange[inputRange.length - 1];
-    const outputMin = outputRange[0];
-    const outputMax = outputRange[outputRange.length - 1];
-
-    if (value <= inputMin) return outputMin;
-    if (value >= inputMax) return outputMax;
-
-    // Linear interpolation
-    const progress = (value - inputMin) / (inputMax - inputMin);
-    return outputMin + progress * (outputMax - outputMin);
-  }),
-  Extrapolation: {
-    CLAMP: "clamp",
-  },
-}));
-
-describe("parallaxLayout", () => {
-  const baseConfig = {
-    size: 300,
-    vertical: false,
-  };
-
-  it("should create layout function with default config", () => {
-    const layout = parallaxLayout(baseConfig);
-    expect(typeof layout).toBe("function");
-  });
-
-  it("should return transform object for horizontal layout", () => {
-    const layout = parallaxLayout(baseConfig);
-    const result = layout(0);
-
-    expect(result).toHaveProperty("transform");
-    expect(result).toHaveProperty("zIndex");
-    expect(result.transform).toHaveLength(2);
-    expect(result.transform[0]).toHaveProperty("translateX");
-    expect(result.transform[1]).toHaveProperty("scale");
-  });
-
-  it("should return transform object for vertical layout", () => {
-    const verticalConfig = { ...baseConfig, vertical: true };
-    const layout = parallaxLayout(verticalConfig);
-    const result = layout(0);
-
-    expect(result).toHaveProperty("transform");
-    expect(result).toHaveProperty("zIndex");
-    expect(result.transform).toHaveLength(2);
-    expect(result.transform[0]).toHaveProperty("translateY");
-    expect(result.transform[1]).toHaveProperty("scale");
-  });
-
-  it("should handle center position (value = 0)", () => {
-    const layout = parallaxLayout(baseConfig);
-    const result = layout(0);
-
-    // At center position, translateX should be 0
-    expect(result.transform[0].translateX).toBe(0);
-    // Scale should be a number (parallax logic applied)
-    expect(typeof result.transform[1].scale).toBe("number");
-  });
-
-  it("should handle left position (value = -1)", () => {
-    const layout = parallaxLayout(baseConfig);
-    const result = layout(-1);
-
-    // At left position, translateX should be -size + parallaxScrollingOffset
-    expect(result.transform[0].translateX).toBe(-200); // -300 + 100
-    // Scale should be a number
-    expect(typeof result.transform[1].scale).toBe("number");
-  });
-
-  it("should handle right position (value = 1)", () => {
-    const layout = parallaxLayout(baseConfig);
-    const result = layout(1);
-
-    // At right position, translateX should be size - parallaxScrollingOffset
-    expect(result.transform[0].translateX).toBe(200); // 300 - 100
-    // Scale should be a number
-    expect(typeof result.transform[1].scale).toBe("number");
-  });
-
-  it("should handle custom parallaxScrollingOffset", () => {
-    const modeConfig = { parallaxScrollingOffset: 50 };
-    const layout = parallaxLayout(baseConfig, modeConfig);
-
-    const leftResult = layout(-1);
-    const rightResult = layout(1);
-
-    expect(leftResult.transform[0].translateX).toBe(-250); // -300 + 50
-    expect(rightResult.transform[0].translateX).toBe(250); // 300 - 50
-  });
-
-  it("should handle custom parallaxScrollingScale", () => {
-    const modeConfig = { parallaxScrollingScale: 0.9 };
-    const layout = parallaxLayout(baseConfig, modeConfig);
-
-    const centerResult = layout(0);
-    const sideResult = layout(-1);
-
-    // Verify the structure and that scale values are calculated
-    expect(typeof centerResult.transform[1].scale).toBe("number");
-    expect(typeof sideResult.transform[1].scale).toBe("number");
-    expect(centerResult.transform[1].scale).toBeGreaterThan(0);
-    expect(sideResult.transform[1].scale).toBeGreaterThan(0);
-  });
-
-  it("should handle custom parallaxAdjacentItemScale", () => {
-    const modeConfig = {
-      parallaxScrollingScale: 0.9,
-      parallaxAdjacentItemScale: 0.7,
-    };
-    const layout = parallaxLayout(baseConfig, modeConfig);
-
-    const centerResult = layout(0);
-    const sideResult = layout(-1);
-
-    // Verify the structure and that scale values are calculated
-    expect(typeof centerResult.transform[1].scale).toBe("number");
-    expect(typeof sideResult.transform[1].scale).toBe("number");
-    expect(centerResult.transform[1].scale).toBeGreaterThan(0);
-    expect(sideResult.transform[1].scale).toBeGreaterThan(0);
-  });
-
-  it("should handle vertical layout with custom config", () => {
-    const verticalConfig = { ...baseConfig, vertical: true };
-    const modeConfig = { parallaxScrollingOffset: 80 };
-    const layout = parallaxLayout(verticalConfig, modeConfig);
-
-    const leftResult = layout(-1);
-    const centerResult = layout(0);
-    const rightResult = layout(1);
-
-    expect(leftResult.transform[0].translateY).toBe(-220); // -300 + 80
-    expect(centerResult.transform[0].translateY).toBe(0);
-    expect(rightResult.transform[0].translateY).toBe(220); // 300 - 80
-  });
-
-  it("should handle edge case values", () => {
-    const layout = parallaxLayout(baseConfig);
-
-    // Test with values beyond the normal range
-    const farLeftResult = layout(-2);
-    const farRightResult = layout(2);
-
-    expect(typeof farLeftResult.transform[0].translateX).toBe("number");
-    expect(typeof farLeftResult.transform[1].scale).toBe("number");
-    expect(typeof farRightResult.transform[0].translateX).toBe("number");
-    expect(typeof farRightResult.transform[1].scale).toBe("number");
-  });
-
-  it("should handle fractional values", () => {
-    const layout = parallaxLayout(baseConfig);
-
-    const halfwayResult = layout(0.5);
-    const quarterResult = layout(-0.25);
-
-    expect(typeof halfwayResult.transform[0].translateX).toBe("number");
-    expect(typeof halfwayResult.transform[1].scale).toBe("number");
-    expect(typeof quarterResult.transform[0].translateX).toBe("number");
-    expect(typeof quarterResult.transform[1].scale).toBe("number");
-  });
-
-  it("should handle zero size", () => {
-    const zeroSizeConfig = { ...baseConfig, size: 0 };
-    const layout = parallaxLayout(zeroSizeConfig);
-    const result = layout(0);
-
-    expect(result).toHaveProperty("transform");
-    expect(result).toHaveProperty("zIndex");
-  });
-
-  it("should handle negative size", () => {
-    const negativeSizeConfig = { ...baseConfig, size: -100 };
-    const layout = parallaxLayout(negativeSizeConfig);
-    const result = layout(0);
-
-    expect(result).toHaveProperty("transform");
-    expect(result).toHaveProperty("zIndex");
-  });
-
-  it("should handle all config properties at once", () => {
-    const fullModeConfig = {
-      parallaxScrollingOffset: 75,
-      parallaxScrollingScale: 0.85,
-      parallaxAdjacentItemScale: 0.6,
-    };
-    const layout = parallaxLayout(baseConfig, fullModeConfig);
-
-    const centerResult = layout(0);
-    const sideResult = layout(-1);
-
-    // Verify the structure and that values are calculated correctly
-    expect(typeof centerResult.transform[1].scale).toBe("number");
-    expect(typeof sideResult.transform[1].scale).toBe("number");
-    expect(sideResult.transform[0].translateX).toBe(-225); // -300 + 75
-  });
-
-  it("should handle empty mode config", () => {
-    const layout = parallaxLayout(baseConfig, {});
-    const result = layout(0);
-
-    // At center (value = 0), scale should be a number (default parallax behavior)
-    expect(typeof result.transform[1].scale).toBe("number");
-    expect(result.transform[1].scale).toBeGreaterThan(0);
-    expect(result.transform[1].scale).toBeLessThanOrEqual(1);
-  });
-
-  it("should handle undefined mode config", () => {
-    const layout = parallaxLayout(baseConfig, undefined);
-    const result = layout(0);
-
-    // At center (value = 0), scale should be a number (default parallax behavior)
-    expect(typeof result.transform[1].scale).toBe("number");
-    expect(result.transform[1].scale).toBeGreaterThan(0);
-    expect(result.transform[1].scale).toBeLessThanOrEqual(1);
-  });
-
-  it("should maintain consistent zIndex calculation", () => {
-    const layout = parallaxLayout(baseConfig);
-
-    const leftResult = layout(-1);
-    const centerResult = layout(0);
-    const rightResult = layout(1);
-
-    expect(typeof leftResult.zIndex).toBe("number");
-    expect(typeof centerResult.zIndex).toBe("number");
-    expect(typeof rightResult.zIndex).toBe("number");
-
-    // Center should have highest zIndex
-    expect(centerResult.zIndex).toBeGreaterThanOrEqual(leftResult.zIndex);
-    expect(centerResult.zIndex).toBeGreaterThanOrEqual(rightResult.zIndex);
-  });
-});