@leonsilicon/react-native-reanimated-carousel 0.0.0

package/src/hooks/useInitProps.test.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import { Text } from "react-native";
+
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useInitProps } from "./useInitProps";
+
+import type { TCarouselProps } from "../types";
+
+describe("useInitProps", () => {
+  const defaultData = [1, 2, 3, 4];
+  const defaultProps: TCarouselProps<number> = {
+    data: defaultData,
+    width: 300,
+    height: 200,
+    renderItem: ({ item: _item }) => <Text>Item</Text>,
+  };
+
+  it("should initialize with default values", () => {
+    const { result } = renderHook(() => useInitProps(defaultProps));
+
+    expect(result.current).toEqual(
+      expect.objectContaining({
+        defaultIndex: 0,
+        loop: true,
+        autoPlayInterval: 1000,
+        scrollAnimationDuration: 500,
+        width: 300,
+        height: 200,
+        enabled: true,
+        autoFillData: true,
+        pagingEnabled: true,
+        snapEnabled: true,
+        overscrollEnabled: true,
+        data: defaultData,
+        rawData: defaultData,
+        dataLength: 4,
+        rawDataLength: 4,
+      })
+    );
+  });
+
+  it("should handle custom values", () => {
+    const customProps: TCarouselProps<number> = {
+      ...defaultProps,
+      defaultIndex: 2,
+      loop: false,
+      autoPlayInterval: 2000,
+      scrollAnimationDuration: 300,
+      enabled: false,
+      autoFillData: false,
+      pagingEnabled: false,
+      snapEnabled: false,
+      overscrollEnabled: false,
+    };
+
+    const { result } = renderHook(() => useInitProps(customProps));
+
+    expect(result.current).toEqual(
+      expect.objectContaining({
+        ...customProps,
+        data: defaultData,
+        rawData: defaultData,
+        dataLength: 4,
+        rawDataLength: 4,
+      })
+    );
+  });
+  it("should handle stack mode configuration", () => {
+    const stackProps: TCarouselProps<number> = {
+      ...defaultProps,
+      mode: "horizontal-stack",
+      modeConfig: {
+        showLength: 3,
+      },
+    };
+
+    const { result } = renderHook(() => useInitProps(stackProps));
+
+    expect(result.current.modeConfig).toBeDefined();
+    if (result.current.modeConfig && "showLength" in result.current.modeConfig)
+      expect(result.current.modeConfig.showLength).toBe(3); // dataLength - 1
+  });
+
+  it("should handle empty data array", () => {
+    const props: TCarouselProps<number> = {
+      ...defaultProps,
+      data: [],
+    };
+
+    const { result } = renderHook(() => useInitProps(props));
+
+    expect(result.current.dataLength).toBe(0);
+    expect(result.current.rawDataLength).toBe(0);
+  });
+
+  it("should round width and height values", () => {
+    const props: TCarouselProps<number> = {
+      ...defaultProps,
+      width: 300.6,
+      height: 200.4,
+    };
+
+    const { result } = renderHook(() => useInitProps(props));
+
+    expect(result.current.width).toBe(301);
+    expect(result.current.height).toBe(200);
+  });
+
+  it("should handle enableSnap property", () => {
+    const props: TCarouselProps<number> = {
+      ...defaultProps,
+      enableSnap: false,
+    };
+
+    const { result } = renderHook(() => useInitProps(props));
+
+    expect(result.current.snapEnabled).toBe(false);
+  });
+  it("should handle vertical-stack mode", () => {
+    const props: TCarouselProps<number> = {
+      ...defaultProps,
+      mode: "vertical-stack",
+      modeConfig: {
+        showLength: 3,
+      },
+    };
+
+    const { result } = renderHook(() => useInitProps(props));
+    expect(result.current.modeConfig).toBeDefined();
+    if (result.current.modeConfig && "showLength" in result.current.modeConfig)
+      expect(result.current.modeConfig.showLength).toBe(3); // dataLength - 1
+  });
+});

package/src/hooks/useInitProps.ts

@@ -0,0 +1,111 @@
+import React from "react";
+
+import type { TCarouselProps } from "../types";
+import { computedFillDataWithAutoFillData } from "../utils/computed-with-auto-fill-data";
+
+type TGetRequiredProps<P extends keyof TCarouselProps> = Record<P, Required<TCarouselProps>[P]>;
+
+export type TInitializeCarouselProps<T> = TCarouselProps<T> &
+  TGetRequiredProps<
+    "defaultIndex" | "loop" | "scrollAnimationDuration" | "autoPlayInterval" | "autoFillData"
+  > & {
+    // Raw data that has not been processed
+    rawData: T[];
+    dataLength: number;
+    rawDataLength: number;
+    /**
+     * Axis-aware item-size getter — `getItemHeight` when vertical, otherwise
+     * `getItemWidth`. Undefined unless the user supplied the matching prop.
+     */
+    getItemSize?: (index: number) => number;
+    /** `true` when variable-size mode is active (`getItemSize` is set). */
+    variableSize: boolean;
+  };
+
+export function useInitProps<T>(props: TCarouselProps<T>): TInitializeCarouselProps<T> {
+  const {
+    defaultIndex = 0,
+    data: rawData = [],
+    loop = true,
+    autoPlayInterval: _autoPlayInterval = 1000,
+    scrollAnimationDuration = 500,
+    style = {},
+    autoFillData = true,
+    // switchers
+    enabled = true,
+    pagingEnabled = true,
+    overscrollEnabled = true,
+    snapEnabled = props.enableSnap ?? true,
+    width: _width,
+    height: _height,
+    itemWidth: _itemWidth,
+    itemHeight: _itemHeight,
+    getItemWidth,
+    getItemHeight,
+    vertical,
+  } = props;
+
+  const width = typeof _width === "number" ? Math.round(_width) : undefined;
+  const height = typeof _height === "number" ? Math.round(_height) : undefined;
+  const itemWidth = typeof _itemWidth === "number" && _itemWidth > 0 ? _itemWidth : undefined;
+  const itemHeight = typeof _itemHeight === "number" && _itemHeight > 0 ? _itemHeight : undefined;
+  const autoPlayInterval = Math.max(_autoPlayInterval, 0);
+
+  // Axis-aware variable-size getter. When `getItemWidth`/`getItemHeight` is
+  // provided for the active axis, variable-size mode is enabled downstream.
+  const getItemSize = vertical ? getItemHeight : getItemWidth;
+  const variableSize = typeof getItemSize === "function";
+
+  // autoFillData duplicates data assuming a single page size; it produces
+  // incorrect totals once items differ in size. Disable it silently in
+  // variable-size mode (`usePropsErrorBoundary` warns the user).
+  const effectiveAutoFillData = variableSize ? false : autoFillData;
+
+  const data = React.useMemo<T[]>(() => {
+    return computedFillDataWithAutoFillData<T>({
+      loop,
+      autoFillData: effectiveAutoFillData,
+      data: rawData,
+      dataLength: rawData.length,
+    });
+  }, [rawData, loop, effectiveAutoFillData]);
+
+  const dataLength = data.length;
+  const rawDataLength = rawData.length;
+
+  if (props.mode === "vertical-stack" || props.mode === "horizontal-stack") {
+    if (!props.modeConfig) props.modeConfig = {};
+
+    props.modeConfig.showLength = props.modeConfig?.showLength ?? dataLength - 1;
+  }
+
+  return {
+    ...props,
+    defaultIndex,
+    autoFillData: effectiveAutoFillData,
+    // Fill data with autoFillData
+    data,
+    // Length of fill data
+    dataLength,
+    // Raw data that has not been processed
+    rawData,
+    // Length of raw data
+    rawDataLength,
+    loop,
+    enabled,
+    autoPlayInterval,
+    scrollAnimationDuration,
+    style,
+    pagingEnabled,
+    snapEnabled,
+    overscrollEnabled,
+    width,
+    height,
+    itemWidth,
+    itemHeight,
+    getItemWidth,
+    getItemHeight,
+    getItemSize,
+    variableSize,
+  };
+}

package/src/hooks/useLayoutConfig.test.tsx

@@ -0,0 +1,247 @@
+import React from "react";
+import { View } from "react-native";
+
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useLayoutConfig } from "./useLayoutConfig";
+
+describe("useLayoutConfig", () => {
+  const defaultProps = {
+    size: 300,
+    vertical: false,
+  };
+  it("should return normal layout by default", () => {
+    const { result } = renderHook(() =>
+      useLayoutConfig({
+        ...defaultProps,
+        data: [],
+        renderItem: () => <View />,
+        loop: false,
+        autoFillData: false,
+        defaultIndex: 0,
+        autoPlayInterval: 0,
+        scrollAnimationDuration: 0,
+        width: 0,
+        height: 0,
+        rawData: [],
+        dataLength: 0,
+        rawDataLength: 0,
+      })
+    );
+
+    expect(result.current).toBeDefined();
+    expect(typeof result.current).toBe("function");
+  });
+
+  it("should handle parallax mode", () => {
+    const props = {
+      ...defaultProps,
+      mode: "parallax" as const,
+      modeConfig: {
+        parallaxScrollingScale: 0.9,
+        parallaxScrollingOffset: 50,
+        parallaxAdjacentItemScale: 0.8,
+      },
+    };
+
+    const { result } = renderHook(() =>
+      useLayoutConfig({
+        ...props,
+        data: [],
+        renderItem: () => <View />,
+        loop: false,
+        autoFillData: false,
+        defaultIndex: 0,
+        autoPlayInterval: 0,
+        scrollAnimationDuration: 0,
+        width: 0,
+        height: 0,
+        rawData: [],
+        dataLength: 0,
+        rawDataLength: 0,
+      })
+    );
+    const style = result.current(0); // Test with offset 0
+
+    expect(style.transform).toBeDefined();
+    expect(style.transform).toContainEqual({ translateX: 0 });
+    expect(style.transform).toContainEqual({ scale: 0.9 });
+  });
+
+  it("should handle horizontal-stack mode", () => {
+    const props = {
+      ...defaultProps,
+      mode: "horizontal-stack" as const,
+      modeConfig: {
+        snapDirection: "left" as const,
+        showLength: 3,
+      },
+    };
+
+    const { result } = renderHook(() =>
+      useLayoutConfig({
+        ...props,
+        data: [],
+        renderItem: () => <View />,
+        loop: false,
+        autoFillData: false,
+        defaultIndex: 0,
+        autoPlayInterval: 0,
+        scrollAnimationDuration: 0,
+        width: 0,
+        height: 0,
+        rawData: [],
+        dataLength: 0,
+        rawDataLength: 0,
+      })
+    );
+    const style = result.current(0); // Test with offset 0
+
+    expect(style.transform).toBeDefined();
+    expect(style.zIndex).toBeDefined();
+    expect(style.opacity).toBeDefined();
+  });
+
+  it("should handle vertical-stack mode", () => {
+    const props = {
+      ...defaultProps,
+      mode: "vertical-stack" as const,
+      modeConfig: {
+        snapDirection: "left" as const,
+        showLength: 3,
+      },
+    };
+
+    const { result } = renderHook(() =>
+      useLayoutConfig({
+        ...props,
+        data: [],
+        renderItem: () => <View />,
+        loop: false,
+        autoFillData: false,
+        defaultIndex: 0,
+        autoPlayInterval: 0,
+        scrollAnimationDuration: 0,
+        width: 0,
+        height: 0,
+        rawData: [],
+        dataLength: 0,
+        rawDataLength: 0,
+      })
+    );
+    const style = result.current(0); // Test with offset 0
+
+    expect(style.transform).toBeDefined();
+    expect(style.zIndex).toBeDefined();
+    expect(style.opacity).toBeDefined();
+  });
+
+  it("should handle vertical orientation", () => {
+    const props = {
+      ...defaultProps,
+      vertical: true,
+    };
+
+    const { result } = renderHook(() =>
+      useLayoutConfig({
+        ...props,
+        data: [],
+        renderItem: () => <View />,
+        loop: false,
+        autoFillData: false,
+        defaultIndex: 0,
+        autoPlayInterval: 0,
+        scrollAnimationDuration: 0,
+        width: 0,
+        height: 0,
+        rawData: [],
+        dataLength: 0,
+        rawDataLength: 0,
+      })
+    );
+    const style = result.current(0); // Test with offset 0
+
+    expect(style.transform).toBeDefined();
+    expect(style.transform).toContainEqual({ translateY: 0 });
+  });
+
+  it("should handle different offsets", () => {
+    const { result } = renderHook(() =>
+      useLayoutConfig({
+        ...defaultProps,
+        data: [],
+        renderItem: () => <View />,
+        loop: false,
+        autoFillData: false,
+        defaultIndex: 0,
+        autoPlayInterval: 0,
+        scrollAnimationDuration: 0,
+        width: 0,
+        height: 0,
+        rawData: [],
+        dataLength: 0,
+        rawDataLength: 0,
+      })
+    );
+
+    const style1 = result.current(-1); // Previous item
+    const style2 = result.current(0); // Current item
+    const style3 = result.current(1); // Next item
+
+    expect(style1.transform).toContainEqual({ translateX: -300 });
+    expect(style2.transform).toContainEqual({ translateX: 0 });
+    expect(style3.transform).toContainEqual({ translateX: 300 });
+  });
+
+  it("should memoize layout function", () => {
+    const { result, rerender } = renderHook(() =>
+      useLayoutConfig({
+        ...defaultProps,
+        data: [],
+        renderItem: () => <View />,
+        loop: false,
+        autoFillData: false,
+        defaultIndex: 0,
+        autoPlayInterval: 0,
+        scrollAnimationDuration: 0,
+        width: 0,
+        height: 0,
+        rawData: [],
+        dataLength: 0,
+        rawDataLength: 0,
+      })
+    );
+    const firstResult = result.current;
+
+    rerender();
+    expect(result.current).toBe(firstResult);
+  });
+
+  it("should update layout when props change", () => {
+    const { result, rerender } = renderHook(
+      (props) =>
+        useLayoutConfig({
+          ...props,
+          data: [],
+          renderItem: () => <View />,
+          loop: false,
+          autoFillData: false,
+          defaultIndex: 0,
+          autoPlayInterval: 0,
+          scrollAnimationDuration: 0,
+          width: 0,
+          height: 0,
+          rawData: [],
+          dataLength: 0,
+          rawDataLength: 0,
+        }),
+      {
+        initialProps: defaultProps,
+      }
+    );
+    const firstResult = result.current;
+
+    rerender({ ...defaultProps, size: 400 });
+    expect(result.current).not.toBe(firstResult);
+  });
+});

package/src/hooks/useLayoutConfig.ts

@@ -0,0 +1,30 @@
+import React from "react";
+
+import type { TInitializeCarouselProps } from "./useInitProps";
+
+import type { TAnimationStyle } from "../components/ItemLayout";
+import { Layouts } from "../layouts";
+import type { SizeResolver } from "../utils/size-resolver";
+
+type TLayoutConfigOpts<T> = TInitializeCarouselProps<T> & {
+  size: number;
+  sizeResolver?: SizeResolver;
+};
+
+export function useLayoutConfig<T>(opts: TLayoutConfigOpts<T>): TAnimationStyle {
+  const { size, vertical, sizeResolver } = opts as Required<TLayoutConfigOpts<T>>;
+
+  return React.useMemo(() => {
+    const baseConfig = { size, vertical, sizeResolver };
+    switch (opts.mode) {
+      case "parallax":
+        return Layouts.parallax(baseConfig, opts.modeConfig);
+      case "horizontal-stack":
+        return Layouts.horizontalStack(opts.modeConfig);
+      case "vertical-stack":
+        return Layouts.verticalStack(opts.modeConfig);
+      default:
+        return Layouts.normal(baseConfig);
+    }
+  }, [opts.mode, opts.modeConfig, size, vertical, sizeResolver]);
+}

package/src/hooks/useOffsetX.test.ts

@@ -0,0 +1,110 @@
+import { useSharedValue } from "react-native-reanimated";
+
+import { renderHook } from "@testing-library/react-hooks";
+
+import { buildPrefixSum, createVariableSizeResolver } from "../utils/size-resolver";
+
+import type { IOpts } from "./useOffsetX";
+import { useOffsetX } from "./useOffsetX";
+import type { IVisibleRanges } from "./useVisibleRanges";
+
+describe("useSharedValue", () => {
+  it("should return the correct values", async () => {
+    const hook = renderHook(() => {
+      const range = useSharedValue({
+        negativeRange: [7, 9],
+        positiveRange: [0, 3],
+      }) as IVisibleRanges;
+      const inputs: Array<{
+        config: IOpts;
+        range: IVisibleRanges;
+      }> = Array.from({ length: 10 }).map((_, index) => ({
+        config: {
+          dataLength: 10,
+          handlerOffset: useSharedValue(-0),
+          index,
+          loop: false,
+          size: 393,
+        },
+        range,
+      }));
+
+      return inputs.map((input) => {
+        const { config, range } = input;
+
+        return useOffsetX(config, range);
+      });
+    });
+
+    const expected = hook.result.current.map((v) => v.value).slice();
+
+    expect(expected).toMatchInlineSnapshot(`
+            [
+              0,
+              393,
+              786,
+              1179,
+              9007199254740991,
+              9007199254740991,
+              9007199254740991,
+              2751,
+              3144,
+              3537,
+            ]
+        `);
+  });
+});
+
+describe("useOffsetX (variable size)", () => {
+  it("returns cumulative offsets in non-loop mode when resolver is supplied", () => {
+    const widths = [80, 150, 220, 100, 300, 100, 120, 200, 90, 180];
+    const built = buildPrefixSum(widths.length, (i) => widths[i]);
+
+    const hook = renderHook(() => {
+      const range = useSharedValue({
+        negativeRange: [7, 9],
+        positiveRange: [0, 3],
+      }) as IVisibleRanges;
+      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 });
+
+      const inputs: Array<{ config: IOpts; range: IVisibleRanges }> = Array.from({
+        length: 10,
+      }).map((_, index) => ({
+        config: {
+          dataLength: 10,
+          handlerOffset: useSharedValue(-0),
+          index,
+          loop: false,
+          size: 0, // unused once resolver is supplied
+          resolver,
+        },
+        range,
+      }));
+
+      return inputs.map(({ config, range }) => useOffsetX(config, range));
+    });
+
+    const expected = hook.result.current.map((v) => v.value);
+
+    // Items 0..3 are in the positive range, so they get their cumulative
+    // offsets. Items 4..6 are out of the visible window — sentinel.
+    // Items 7..9 are in the negative range, so they get their cumulative
+    // offsets too.
+    expect(expected).toEqual([
+      0,
+      80,
+      230,
+      450,
+      Number.MAX_SAFE_INTEGER,
+      Number.MAX_SAFE_INTEGER,
+      Number.MAX_SAFE_INTEGER,
+      built.prefix[7],
+      built.prefix[8],
+      built.prefix[9],
+    ]);
+  });
+});