@leonsilicon/react-native-reanimated-carousel 0.0.0

package/src/hooks/useVisibleRanges.tsx

@@ -0,0 +1,123 @@
+import { useRef } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import { useDerivedValue } from "react-native-reanimated";
+
+import type { SizeResolver } from "../utils/size-resolver";
+
+type Range = [number, number];
+
+export interface VisibleRanges {
+  negativeRange: Range;
+  positiveRange: Range;
+}
+
+export type IVisibleRanges = SharedValue<VisibleRanges>;
+
+export function useVisibleRanges(options: {
+  total: number;
+  viewSize: number;
+  windowSize?: number;
+  translation: SharedValue<number>;
+  loop?: boolean;
+  /**
+   * Optional resolver. When supplied the hook locates `currentIndex` via
+   * `resolver.indexAt(-translation)` instead of `round(-translation / viewSize)`,
+   * which is what makes variable-size virtualization work without blanks.
+   */
+  resolver?: SizeResolver;
+}): IVisibleRanges {
+  const { total = 0, viewSize, translation, windowSize: _windowSize, loop, resolver } = options;
+
+  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,
+      };
+    }
+
+    // When a resolver is supplied, "ready" means the prefix table has been
+    // built (total > 0). Otherwise we need a positive viewSize to divide by.
+    const resolverReady = !!resolver?.variable && resolver.total.value > 0;
+    const uniformReady = Number.isFinite(viewSize) && viewSize > 0;
+    if (!resolverReady && !uniformReady) {
+      return {
+        negativeRange: [0, 0] as Range,
+        positiveRange: [0, Math.min(total - 1, windowSize - 1)] as Range,
+      };
+    }
+
+    const positiveCount = Math.round(windowSize / 2);
+    const negativeCount = windowSize - positiveCount;
+
+    let currentIndex = resolverReady
+      ? resolver!.indexAt(-translation.value)
+      : Math.round(-translation.value / viewSize);
+    if (!Number.isFinite(currentIndex)) currentIndex = 0;
+
+    let newRanges: VisibleRanges;
+
+    if (!loop) {
+      // Clamp currentIndex to valid range [0, total-1] for non-loop mode
+      // When overdragging right, translation.value becomes positive, making currentIndex negative
+      currentIndex = Math.max(0, Math.min(total - 1, currentIndex));
+
+      // Adjusting negative range if the carousel is not loopable.
+      // So, It will be only displayed the positive items.
+      newRanges = {
+        negativeRange: [Math.max(0, currentIndex - (windowSize - 1)), currentIndex],
+        positiveRange: [currentIndex, Math.min(total - 1, currentIndex + (windowSize - 1))],
+      };
+    } else {
+      currentIndex = currentIndex < 0 ? (currentIndex % total) + total : currentIndex;
+
+      const negativeRange: Range = [
+        (currentIndex - negativeCount + total) % total,
+        (currentIndex - 1 + total) % total,
+      ];
+
+      const positiveRange: Range = [
+        (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;
+      }
+
+      // console.log({ negativeRange, positiveRange ,total,windowSize,a:total <= _windowSize})
+      newRanges = { negativeRange, positiveRange };
+    }
+
+    if (
+      cachedRanges.current &&
+      isArraysEqual(cachedRanges.current.negativeRange, newRanges.negativeRange) &&
+      isArraysEqual(cachedRanges.current.positiveRange, newRanges.positiveRange)
+    ) {
+      return cachedRanges.current;
+    }
+
+    cachedRanges.current = newRanges;
+    return newRanges;
+  }, [loop, total, windowSize, translation, viewSize, resolver]);
+
+  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/index.tsx

@@ -0,0 +1,13 @@
+import Carousel from "./components/Carousel";
+export { Pagination } from "./components/Pagination";
+
+export type {
+  TCarouselProps,
+  ICarouselInstance,
+  IComputedDirectionTypes,
+  CarouselRenderItem,
+} from "./types";
+export type { TAnimationStyle } from "./components/ItemLayout";
+export type { ILayoutConfig } from "./layouts/stack";
+
+export default Carousel;

package/src/layouts/index.tsx

@@ -0,0 +1,12 @@
+import { normalLayout } from "./normal";
+import { parallaxLayout } from "./parallax";
+import { horizontalStackLayout, verticalStackLayout } from "./stack";
+
+export type TMode = "parallax" | "horizontal-stack" | "vertical-stack";
+
+export const Layouts = {
+  normal: normalLayout,
+  parallax: parallaxLayout,
+  horizontalStack: horizontalStackLayout,
+  verticalStack: verticalStackLayout,
+};

package/src/layouts/normal.ts

@@ -0,0 +1,32 @@
+import { interpolate } from "react-native-reanimated";
+
+import type { SizeResolver } from "../utils/size-resolver";
+
+export function normalLayout(opts: {
+  size: number;
+  vertical: boolean;
+  /** When supplied, per-item translations use `resolver.itemSize(index)`. */
+  sizeResolver?: SizeResolver;
+}) {
+  const { size, vertical, sizeResolver } = opts;
+
+  return (value: number, index: number) => {
+    "worklet";
+    // Use the per-item size in variable mode so non-uniform items keep their
+    // animation `value` semantics (-1 means one item-width to the left).
+    const itemSize = sizeResolver?.variable ? sizeResolver.itemSize(index) : size;
+    const translate = interpolate(value, [-1, 0, 1], [-itemSize, 0, itemSize]);
+
+    return {
+      transform: [
+        vertical
+          ? {
+              translateY: translate,
+            }
+          : {
+              translateX: translate,
+            },
+      ],
+    };
+  };
+}

package/src/layouts/parallax.test.ts

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

package/src/layouts/parallax.ts

@@ -0,0 +1,83 @@
+import { Extrapolation, interpolate } from "react-native-reanimated";
+
+import type { IComputedDirectionTypes } from "../types";
+import type { SizeResolver } from "../utils/size-resolver";
+
+interface TBaseConfig {
+  size: number;
+  vertical: boolean;
+  /** When supplied, per-item translations and zIndex use the resolver. */
+  sizeResolver?: SizeResolver;
+}
+
+export interface ILayoutConfig {
+  /**
+   * control prev/next item offset.
+   * @default 100
+   */
+  parallaxScrollingOffset?: number;
+  /**
+   * control prev/current/next item offset.
+   * @default 0.8
+   */
+  parallaxScrollingScale?: number;
+  /**
+   * control prev/next item offset.
+   * @default Math.pow(parallaxScrollingScale, 2)
+   */
+  parallaxAdjacentItemScale?: number;
+}
+
+export type TParallaxModeProps = IComputedDirectionTypes<{
+  /**
+   * Carousel Animated transitions.
+   */
+  mode?: "parallax";
+  modeConfig?: ILayoutConfig;
+}>;
+
+export function parallaxLayout(baseConfig: TBaseConfig, modeConfig: ILayoutConfig = {}) {
+  const { size, vertical, sizeResolver } = baseConfig;
+  const {
+    parallaxScrollingOffset = 100,
+    parallaxScrollingScale = 0.8,
+    parallaxAdjacentItemScale = parallaxScrollingScale ** 2,
+  } = modeConfig;
+
+  return (value: number, index: number) => {
+    "worklet";
+    const itemSize = sizeResolver?.variable ? sizeResolver.itemSize(index) : size;
+    const translate = interpolate(
+      value,
+      [-1, 0, 1],
+      [-itemSize + parallaxScrollingOffset, 0, itemSize - parallaxScrollingOffset]
+    );
+
+    const zIndex = Math.round(
+      interpolate(value, [-1, 0, 1], [0, itemSize, 0], Extrapolation.CLAMP)
+    );
+
+    const scale = interpolate(
+      value,
+      [-1, 0, 1],
+      [parallaxAdjacentItemScale, parallaxScrollingScale, parallaxAdjacentItemScale],
+      Extrapolation.CLAMP
+    );
+
+    return {
+      transform: [
+        vertical
+          ? {
+              translateY: translate,
+            }
+          : {
+              translateX: translate,
+            },
+        {
+          scale,
+        },
+      ],
+      zIndex,
+    };
+  };
+}