@leonsilicon/react-native-reanimated-carousel 0.0.0

package/src/utils/compute-offset-if-size-changed.ts

@@ -0,0 +1,14 @@
+export function computeOffsetIfSizeChanged(params: {
+  handlerOffset: number;
+  prevSize: number;
+  size: number;
+}) {
+  "worklet";
+  const { handlerOffset, prevSize, size } = params;
+
+  if (!prevSize) {
+    return handlerOffset;
+  }
+
+  return (handlerOffset / prevSize) * size;
+}

package/src/utils/compute-offset-if-sizes-changed.test.ts

@@ -0,0 +1,74 @@
+import { computeOffsetIfSizesChanged } from "./compute-offset-if-sizes-changed";
+import { buildPrefixSum } from "./size-resolver";
+
+describe("computeOffsetIfSizesChanged", () => {
+  it("returns the same offset when the prefix table is identical", () => {
+    const prefix = buildPrefixSum(5, () => 100).prefix;
+    const result = computeOffsetIfSizesChanged({
+      handlerOffset: -200,
+      prevPrefix: prefix,
+      nextPrefix: prefix,
+    });
+    expect(result).toBe(-200);
+  });
+
+  it("re-maps a boundary offset to the same item in the new table", () => {
+    const prev = buildPrefixSum(4, () => 100).prefix; // [0,100,200,300,400]
+    const next = buildPrefixSum(4, () => 200).prefix; // [0,200,400,600,800]
+    // -200 sat at the start of item 2 in the old table → start of item 2 in
+    // the new table is -400.
+    const result = computeOffsetIfSizesChanged({
+      handlerOffset: -200,
+      prevPrefix: prev,
+      nextPrefix: next,
+    });
+    expect(result).toBe(-400);
+  });
+
+  it("preserves mid-item fractional progress across resizes", () => {
+    const prev = buildPrefixSum(4, () => 100).prefix; // [0,100,200,300,400]
+    const next = buildPrefixSum(4, () => 200).prefix; // [0,200,400,600,800]
+    // -150 = halfway through item 1 in old (size 100). In new (size 200),
+    // halfway through item 1 = -200 - 100 = -300.
+    const result = computeOffsetIfSizesChanged({
+      handlerOffset: -150,
+      prevPrefix: prev,
+      nextPrefix: next,
+    });
+    expect(result).toBe(-300);
+  });
+
+  it("clamps to last item when target index exceeds new table", () => {
+    const prev = buildPrefixSum(5, () => 100).prefix; // [0,100,200,300,400,500]
+    const next = buildPrefixSum(3, () => 100).prefix; // [0,100,200,300]
+    // -450 sat in item 4 of old. Item 4 doesn't exist in new → clamp to 2.
+    const result = computeOffsetIfSizesChanged({
+      handlerOffset: -450,
+      prevPrefix: prev,
+      nextPrefix: next,
+    });
+    expect(result).toBeLessThan(0);
+    expect(result).toBeGreaterThanOrEqual(-300);
+  });
+
+  it("returns 0 when next table is empty", () => {
+    const prev = buildPrefixSum(3, () => 100).prefix;
+    const result = computeOffsetIfSizesChanged({
+      handlerOffset: -150,
+      prevPrefix: prev,
+      nextPrefix: [0],
+    });
+    expect(result).toBe(-150); // degenerate case short-circuits to passthrough
+  });
+
+  it("respects sign when handlerOffset is positive", () => {
+    const prev = buildPrefixSum(4, () => 100).prefix;
+    const next = buildPrefixSum(4, () => 200).prefix;
+    const result = computeOffsetIfSizesChanged({
+      handlerOffset: 200,
+      prevPrefix: prev,
+      nextPrefix: next,
+    });
+    expect(result).toBe(400);
+  });
+});

package/src/utils/compute-offset-if-sizes-changed.ts

@@ -0,0 +1,44 @@
+import { binarySearchPrefix } from "./size-resolver";
+
+/**
+ * Variable-size analogue of `compute-offset-if-size-changed.ts`. Given the
+ * previous and next prefix-sum tables and the current `handlerOffset`, returns
+ * a new handlerOffset such that the same logical item index stays in view.
+ *
+ * Both `prevPrefix` and `nextPrefix` must include the leading 0 sentinel, so
+ * `prefix.length === itemCount + 1` and `prefix[itemCount]` is the total span.
+ */
+export function computeOffsetIfSizesChanged(params: {
+  handlerOffset: number;
+  prevPrefix: number[];
+  nextPrefix: number[];
+}): number {
+  "worklet";
+  const { handlerOffset, prevPrefix, nextPrefix } = params;
+
+  if (prevPrefix.length <= 1 || nextPrefix.length <= 1) return handlerOffset;
+
+  // Translation is stored as a negative offset (scroll right = more negative),
+  // so the absolute position of the current item is -handlerOffset.
+  const absOffset = -handlerOffset;
+  const sign = handlerOffset <= 0 ? -1 : 1;
+
+  // Locate which item the previous prefix table mapped this offset to, plus
+  // the fractional progress through that item. Carrying fractional progress
+  // forward keeps mid-scroll resizes smooth instead of snapping to a boundary.
+  const prevItemIndex = binarySearchPrefix(prevPrefix, Math.abs(absOffset));
+  const clampedPrev = Math.max(0, Math.min(prevPrefix.length - 2, prevItemIndex));
+  const prevStart = prevPrefix[clampedPrev];
+  const prevSize = prevPrefix[clampedPrev + 1] - prevStart;
+  const fractional = prevSize > 0 ? (Math.abs(absOffset) - prevStart) / prevSize : 0;
+
+  // Re-map to the new table. If the item no longer exists in the new prefix,
+  // clamp to the last available index.
+  const targetIndex = Math.min(clampedPrev, nextPrefix.length - 2);
+  if (targetIndex < 0) return 0;
+  const nextStart = nextPrefix[targetIndex];
+  const nextSize = nextPrefix[targetIndex + 1] - nextStart;
+  const newAbs = nextStart + fractional * nextSize;
+
+  return sign * newAbs;
+}

package/src/utils/computed-with-auto-fill-data.test.ts

@@ -0,0 +1,298 @@
+import {
+  computedFillDataWithAutoFillData,
+  computedOffsetXValueWithAutoFillData,
+  computedRealIndexWithAutoFillData,
+  convertToSharedIndex,
+} from "./computed-with-auto-fill-data";
+
+import { DATA_LENGTH } from "../constants";
+
+const { SINGLE_ITEM, DOUBLE_ITEM } = DATA_LENGTH;
+
+describe("computed-with-auto-fill-data utilities", () => {
+  describe("computedFillDataWithAutoFillData", () => {
+    it("should handle single item", () => {
+      const data = [1];
+      const result = computedFillDataWithAutoFillData({
+        data,
+        loop: true,
+        autoFillData: true,
+        dataLength: SINGLE_ITEM,
+      });
+
+      expect(result).toEqual([1, 1, 1]);
+    });
+
+    it("should handle double items", () => {
+      const data = [1, 2];
+      const result = computedFillDataWithAutoFillData({
+        data,
+        loop: true,
+        autoFillData: true,
+        dataLength: DOUBLE_ITEM,
+      });
+
+      expect(result).toEqual([1, 2, 1, 2]);
+    });
+
+    it("should return original data when autoFillData is false", () => {
+      const data = [1, 2, 3];
+      const result = computedFillDataWithAutoFillData({
+        data,
+        loop: true,
+        autoFillData: false,
+        dataLength: 3,
+      });
+
+      expect(result).toEqual(data);
+    });
+
+    it("should return original data when loop is false", () => {
+      const data = [1, 2, 3];
+      const result = computedFillDataWithAutoFillData({
+        data,
+        loop: false,
+        autoFillData: true,
+        dataLength: 3,
+      });
+
+      expect(result).toEqual(data);
+    });
+
+    it("should handle empty data array", () => {
+      const data: any[] = [];
+      const result = computedFillDataWithAutoFillData({
+        data,
+        loop: true,
+        autoFillData: true,
+        dataLength: 0,
+      });
+
+      expect(result).toEqual([]);
+    });
+
+    it("should handle data length greater than 2", () => {
+      const data = [1, 2, 3, 4, 5];
+      const result = computedFillDataWithAutoFillData({
+        data,
+        loop: true,
+        autoFillData: true,
+        dataLength: 5,
+      });
+
+      expect(result).toEqual(data);
+    });
+
+    it("should handle both loop and autoFillData false", () => {
+      const data = [1];
+      const result = computedFillDataWithAutoFillData({
+        data,
+        loop: false,
+        autoFillData: false,
+        dataLength: SINGLE_ITEM,
+      });
+
+      expect(result).toEqual(data);
+    });
+  });
+
+  describe("computedOffsetXValueWithAutoFillData", () => {
+    const size = 300;
+
+    it("should handle single item", () => {
+      const result = computedOffsetXValueWithAutoFillData({
+        value: size * 2,
+        size,
+        rawDataLength: SINGLE_ITEM,
+        loop: true,
+        autoFillData: true,
+      });
+
+      expect(result).toBe(0); // value % size
+    });
+
+    it("should handle double items", () => {
+      const result = computedOffsetXValueWithAutoFillData({
+        value: size * 3,
+        size,
+        rawDataLength: DOUBLE_ITEM,
+        loop: true,
+        autoFillData: true,
+      });
+
+      expect(result).toBe(size * 1); // value % (size * 2)
+    });
+
+    it("should return original value when autoFillData is false", () => {
+      const value = size * 2;
+      const result = computedOffsetXValueWithAutoFillData({
+        value,
+        size,
+        rawDataLength: 3,
+        loop: true,
+        autoFillData: false,
+      });
+
+      expect(result).toBe(value);
+    });
+
+    it("should return original value when loop is false", () => {
+      const value = size * 2;
+      const result = computedOffsetXValueWithAutoFillData({
+        value,
+        size,
+        rawDataLength: 3,
+        loop: false,
+        autoFillData: true,
+      });
+
+      expect(result).toBe(value);
+    });
+
+    it("should handle zero value", () => {
+      const result = computedOffsetXValueWithAutoFillData({
+        value: 0,
+        size,
+        rawDataLength: SINGLE_ITEM,
+        loop: true,
+        autoFillData: true,
+      });
+
+      expect(result).toBe(0);
+    });
+
+    it("should handle negative values", () => {
+      const result = computedOffsetXValueWithAutoFillData({
+        value: -size,
+        size,
+        rawDataLength: SINGLE_ITEM,
+        loop: true,
+        autoFillData: true,
+      });
+
+      // JavaScript's modulo can return -0 for negative numbers
+      expect(result).toBe(-0); // -size % size = -0
+    });
+
+    it("should handle fractional values", () => {
+      const result = computedOffsetXValueWithAutoFillData({
+        value: size * 1.5,
+        size,
+        rawDataLength: DOUBLE_ITEM,
+        loop: true,
+        autoFillData: true,
+      });
+
+      expect(result).toBe(size * 1.5); // This should work with modulo
+    });
+
+    it("should handle both conditions false", () => {
+      const value = size * 3;
+      const result = computedOffsetXValueWithAutoFillData({
+        value,
+        size,
+        rawDataLength: 3,
+        loop: false,
+        autoFillData: false,
+      });
+
+      expect(result).toBe(value);
+    });
+  });
+
+  describe("computedRealIndexWithAutoFillData", () => {
+    it("should handle single item", () => {
+      const result = computedRealIndexWithAutoFillData({
+        index: 2,
+        dataLength: SINGLE_ITEM,
+        loop: true,
+        autoFillData: true,
+      });
+
+      expect(result).toBe(0); // index % 1
+    });
+
+    it("should handle double items", () => {
+      const result = computedRealIndexWithAutoFillData({
+        index: 3,
+        dataLength: DOUBLE_ITEM,
+        loop: true,
+        autoFillData: true,
+      });
+
+      expect(result).toBe(1); // index % 2
+    });
+
+    it("should return original index when autoFillData is false", () => {
+      const index = 2;
+      const result = computedRealIndexWithAutoFillData({
+        index,
+        dataLength: 3,
+        loop: true,
+        autoFillData: false,
+      });
+
+      expect(result).toBe(index);
+    });
+
+    it("should return original index when loop is false", () => {
+      const index = 2;
+      const result = computedRealIndexWithAutoFillData({
+        index,
+        dataLength: 3,
+        loop: false,
+        autoFillData: true,
+      });
+
+      expect(result).toBe(index);
+    });
+  });
+
+  describe("convertToSharedIndex", () => {
+    it("should handle single item", () => {
+      const result = convertToSharedIndex({
+        index: 2,
+        rawDataLength: SINGLE_ITEM,
+        loop: true,
+        autoFillData: true,
+      });
+
+      expect(result).toBe(0);
+    });
+
+    it("should handle double items", () => {
+      const result = convertToSharedIndex({
+        index: 3,
+        rawDataLength: DOUBLE_ITEM,
+        loop: true,
+        autoFillData: true,
+      });
+
+      expect(result).toBe(1); // index % 2
+    });
+
+    it("should return original index when autoFillData is false", () => {
+      const index = 2;
+      const result = convertToSharedIndex({
+        index,
+        rawDataLength: 3,
+        loop: true,
+        autoFillData: false,
+      });
+
+      expect(result).toBe(index);
+    });
+
+    it("should return original index when loop is false", () => {
+      const index = 2;
+      const result = convertToSharedIndex({
+        index,
+        rawDataLength: 3,
+        loop: false,
+        autoFillData: true,
+      });
+
+      expect(result).toBe(index);
+    });
+  });
+});

package/src/utils/computed-with-auto-fill-data.ts

@@ -0,0 +1,92 @@
+import { DATA_LENGTH } from "../constants";
+
+const { SINGLE_ITEM, DOUBLE_ITEM } = DATA_LENGTH;
+
+function isAutoFillData(params: { autoFillData: boolean; loop: boolean }) {
+  "worklet";
+  return !!params.loop && !!params.autoFillData;
+}
+
+type BaseParams<T extends object> = {
+  autoFillData: boolean;
+  loop: boolean;
+} & T;
+
+export function convertToSharedIndex(params: BaseParams<{ index: number; rawDataLength: number }>) {
+  "worklet";
+  const { loop, rawDataLength, index, autoFillData } = params;
+
+  if (isAutoFillData({ loop, autoFillData })) {
+    switch (rawDataLength) {
+      case SINGLE_ITEM:
+        return 0;
+      case DOUBLE_ITEM:
+        return index % 2;
+    }
+  }
+
+  return index;
+}
+
+export function computedOffsetXValueWithAutoFillData(
+  params: BaseParams<{
+    rawDataLength: number;
+    value: number;
+    size: number;
+  }>
+) {
+  "worklet";
+
+  const { rawDataLength, value, size, loop, autoFillData } = params;
+
+  if (isAutoFillData({ loop, autoFillData })) {
+    switch (rawDataLength) {
+      case SINGLE_ITEM:
+        return value % size;
+      case DOUBLE_ITEM:
+        return value % (size * 2);
+    }
+  }
+
+  return value;
+}
+
+export function computedRealIndexWithAutoFillData(
+  params: BaseParams<{
+    index: number;
+    dataLength: number;
+  }>
+) {
+  const { index, dataLength, loop, autoFillData } = params;
+
+  if (isAutoFillData({ loop, autoFillData })) {
+    switch (dataLength) {
+      case SINGLE_ITEM:
+        return index % 1;
+      case DOUBLE_ITEM:
+        return index % 2;
+    }
+  }
+
+  return index;
+}
+
+export function computedFillDataWithAutoFillData<T>(
+  params: BaseParams<{
+    data: T[];
+    dataLength: number;
+  }>
+): T[] {
+  const { data, loop, autoFillData, dataLength } = params;
+
+  if (isAutoFillData({ loop, autoFillData })) {
+    switch (dataLength) {
+      case SINGLE_ITEM:
+        return [data[0], data[0], data[0]];
+      case DOUBLE_ITEM:
+        return [data[0], data[1], data[0], data[1]];
+    }
+  }
+
+  return data;
+}

package/src/utils/deal-with-animation.test.ts

@@ -0,0 +1,181 @@
+import { withSpring, withTiming } from "react-native-reanimated";
+
+import { dealWithAnimation } from "./deal-with-animation";
+
+// Mock Reanimated
+jest.mock("react-native-reanimated", () => ({
+  withSpring: jest.fn((value, _config, callback) => {
+    callback?.(true);
+    return value;
+  }),
+  withTiming: jest.fn((value, _config, callback) => {
+    callback?.(true);
+    return value;
+  }),
+}));
+
+describe("dealWithAnimation", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should handle spring animation", () => {
+    const callback = jest.fn();
+    const springConfig = {
+      damping: 20,
+      stiffness: 90,
+    };
+
+    const animation = dealWithAnimation({
+      type: "spring",
+      config: springConfig,
+    });
+
+    const result = animation(100, callback);
+
+    expect(withSpring).toHaveBeenCalledWith(100, springConfig, expect.any(Function));
+    expect(callback).toHaveBeenCalledWith(true);
+    expect(result).toBe(100);
+  });
+
+  it("should handle timing animation", () => {
+    const callback = jest.fn();
+    const timingConfig = {
+      duration: 300,
+    };
+
+    const animation = dealWithAnimation({
+      type: "timing",
+      config: timingConfig,
+    });
+
+    const result = animation(100, callback);
+
+    expect(withTiming).toHaveBeenCalledWith(100, timingConfig, expect.any(Function));
+    expect(callback).toHaveBeenCalledWith(true);
+    expect(result).toBe(100);
+  });
+
+  it("should pass animation config correctly", () => {
+    const springConfig = {
+      damping: 10,
+      mass: 1,
+      stiffness: 100,
+    };
+
+    const animation = dealWithAnimation({
+      type: "spring",
+      config: springConfig,
+    });
+
+    animation(100, jest.fn());
+
+    expect(withSpring).toHaveBeenCalledWith(
+      100,
+      expect.objectContaining(springConfig),
+      expect.any(Function)
+    );
+  });
+
+  it("should handle animation completion", () => {
+    const callback = jest.fn();
+    const animation = dealWithAnimation({
+      type: "timing",
+      config: { duration: 300 },
+    });
+
+    animation(100, callback);
+
+    expect(callback).toHaveBeenCalledWith(true);
+  });
+
+  it("should handle spring animation with different values", () => {
+    const callback = jest.fn();
+    const animation = dealWithAnimation({
+      type: "spring",
+      config: { damping: 15 },
+    });
+
+    animation(0, callback);
+    animation(-100, callback);
+    animation(500, callback);
+
+    expect(withSpring).toHaveBeenCalledWith(0, { damping: 15 }, expect.any(Function));
+    expect(withSpring).toHaveBeenCalledWith(-100, { damping: 15 }, expect.any(Function));
+    expect(withSpring).toHaveBeenCalledWith(500, { damping: 15 }, expect.any(Function));
+    expect(callback).toHaveBeenCalledTimes(3);
+  });
+
+  it("should handle timing animation with different values", () => {
+    const callback = jest.fn();
+    const animation = dealWithAnimation({
+      type: "timing",
+      config: { duration: 500 },
+    });
+
+    animation(0, callback);
+    animation(-50, callback);
+    animation(1000, callback);
+
+    expect(withTiming).toHaveBeenCalledWith(0, { duration: 500 }, expect.any(Function));
+    expect(withTiming).toHaveBeenCalledWith(-50, { duration: 500 }, expect.any(Function));
+    expect(withTiming).toHaveBeenCalledWith(1000, { duration: 500 }, expect.any(Function));
+    expect(callback).toHaveBeenCalledTimes(3);
+  });
+
+  it("should handle empty spring config", () => {
+    const callback = jest.fn();
+    const animation = dealWithAnimation({
+      type: "spring",
+      config: {},
+    });
+
+    animation(100, callback);
+
+    expect(withSpring).toHaveBeenCalledWith(100, {}, expect.any(Function));
+    expect(callback).toHaveBeenCalledWith(true);
+  });
+
+  it("should handle empty timing config", () => {
+    const callback = jest.fn();
+    const animation = dealWithAnimation({
+      type: "timing",
+      config: {},
+    });
+
+    animation(100, callback);
+
+    expect(withTiming).toHaveBeenCalledWith(100, {}, expect.any(Function));
+    expect(callback).toHaveBeenCalledWith(true);
+  });
+
+  it("should handle fractional values", () => {
+    const callback = jest.fn();
+    const animation = dealWithAnimation({
+      type: "spring",
+      config: { damping: 10 },
+    });
+
+    animation(50.5, callback);
+    animation(-25.75, callback);
+
+    expect(withSpring).toHaveBeenCalledWith(50.5, { damping: 10 }, expect.any(Function));
+    expect(withSpring).toHaveBeenCalledWith(-25.75, { damping: 10 }, expect.any(Function));
+  });
+
+  it("should create different animation functions for different configs", () => {
+    const animation1 = dealWithAnimation({
+      type: "spring",
+      config: { damping: 10 },
+    });
+
+    const animation2 = dealWithAnimation({
+      type: "timing",
+      config: { duration: 200 },
+    });
+
+    expect(animation1).not.toBe(animation2);
+    expect(typeof animation1).toBe("function");
+    expect(typeof animation2).toBe("function");
+  });
+});