@leonsilicon/react-native-reanimated-carousel 0.0.0

package/src/layouts/stack.test.ts

@@ -0,0 +1,252 @@
+import { horizontalStackLayout, useHorizontalStackLayout, verticalStackLayout } from "./stack";
+
+// 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",
+  },
+}));
+
+// Mock react
+jest.mock("react", () => ({
+  useMemo: jest.fn((fn) => fn()),
+}));
+
+// Mock Dimensions
+jest.mock("react-native", () => ({
+  Dimensions: {
+    get: jest.fn(() => ({ width: 375, height: 812 })),
+  },
+}));
+
+describe("horizontalStackLayout", () => {
+  it("should make the rotateZDeg works properly when it is passed in horizontal-stack mode through modeConfig", () => {
+    const screenWidth = 375;
+
+    const calculator = horizontalStackLayout({
+      showLength: 3,
+      snapDirection: "left",
+      moveSize: screenWidth,
+      stackInterval: 18,
+      scaleInterval: 0.04,
+      opacityInterval: 0.1,
+      rotateZDeg: 30,
+    });
+
+    const result1 = calculator(-0.5);
+    expect(result1).toHaveProperty("transform");
+    expect(result1).toHaveProperty("zIndex");
+    expect(result1).toHaveProperty("opacity");
+    expect(result1.transform).toHaveLength(3);
+
+    const result2 = calculator(-1);
+    expect(result2).toHaveProperty("transform");
+    expect(result2).toHaveProperty("zIndex");
+    expect(result2).toHaveProperty("opacity");
+    expect(result2.transform).toHaveLength(3);
+  });
+
+  it("should handle right snap direction", () => {
+    const calculator = horizontalStackLayout({
+      showLength: 3,
+      snapDirection: "right",
+      moveSize: 375,
+      stackInterval: 18,
+      scaleInterval: 0.04,
+      opacityInterval: 0.1,
+      rotateZDeg: 30,
+    });
+
+    const result = calculator(0);
+    expect(result).toHaveProperty("transform");
+    expect(result).toHaveProperty("zIndex");
+    expect(result).toHaveProperty("opacity");
+    expect(result.transform).toHaveLength(3);
+  });
+
+  it("should handle default config", () => {
+    const calculator = horizontalStackLayout();
+    const result = calculator(0);
+
+    expect(result).toHaveProperty("transform");
+    expect(result).toHaveProperty("zIndex");
+    expect(result).toHaveProperty("opacity");
+  });
+
+  it("should handle edge values", () => {
+    const calculator = horizontalStackLayout({
+      showLength: 5,
+      snapDirection: "left",
+    });
+
+    const extremeLeftResult = calculator(-2);
+    const extremeRightResult = calculator(4);
+
+    expect(extremeLeftResult).toHaveProperty("transform");
+    expect(extremeRightResult).toHaveProperty("transform");
+  });
+
+  it("should handle custom parameters", () => {
+    const calculator = horizontalStackLayout({
+      showLength: 4,
+      snapDirection: "right",
+      moveSize: 400,
+      stackInterval: 25,
+      scaleInterval: 0.06,
+      opacityInterval: 0.15,
+      rotateZDeg: 45,
+    });
+
+    const result = calculator(1);
+    expect(result).toHaveProperty("transform");
+    expect(result.transform).toHaveLength(3);
+    expect(result.transform?.[2]).toHaveProperty("rotateZ");
+  });
+});
+
+describe("verticalStackLayout", () => {
+  it("should handle left snap direction", () => {
+    const calculator = verticalStackLayout({
+      showLength: 3,
+      snapDirection: "left",
+      moveSize: 375,
+      stackInterval: 18,
+      scaleInterval: 0.04,
+      opacityInterval: 0.1,
+      rotateZDeg: 30,
+    });
+
+    const result = calculator(0);
+    expect(result).toHaveProperty("transform");
+    expect(result).toHaveProperty("zIndex");
+    expect(result).toHaveProperty("opacity");
+    expect(result.transform).toHaveLength(4); // includesTranslateY
+    expect(result.transform?.[3]).toHaveProperty("translateY");
+  });
+
+  it("should handle right snap direction", () => {
+    const calculator = verticalStackLayout({
+      showLength: 3,
+      snapDirection: "right",
+      moveSize: 375,
+      stackInterval: 18,
+      scaleInterval: 0.04,
+      opacityInterval: 0.1,
+      rotateZDeg: 30,
+    });
+
+    const result = calculator(0);
+    expect(result).toHaveProperty("transform");
+    expect(result.transform).toHaveLength(4);
+    expect(result.transform?.[3]).toHaveProperty("translateY");
+  });
+
+  it("should handle default config", () => {
+    const calculator = verticalStackLayout();
+    const result = calculator(0);
+
+    expect(result).toHaveProperty("transform");
+    expect(result).toHaveProperty("zIndex");
+    expect(result).toHaveProperty("opacity");
+    expect(result.transform).toHaveLength(4);
+  });
+
+  it("should handle different values", () => {
+    const calculator = verticalStackLayout({
+      showLength: 4,
+      snapDirection: "left",
+    });
+
+    const leftResult = calculator(-1);
+    const centerResult = calculator(0);
+    const rightResult = calculator(1);
+
+    expect(leftResult).toHaveProperty("transform");
+    expect(centerResult).toHaveProperty("transform");
+    expect(rightResult).toHaveProperty("transform");
+  });
+
+  it("should handle fractional values", () => {
+    const calculator = verticalStackLayout({
+      showLength: 3,
+      snapDirection: "right",
+    });
+
+    const result = calculator(0.5);
+    expect(result).toHaveProperty("transform");
+    expect(result.transform).toHaveLength(4);
+  });
+});
+
+describe("useHorizontalStackLayout", () => {
+  it("should return layout and config for left snap direction", () => {
+    const customAnimationConfig = {
+      snapDirection: "left" as const,
+      showLength: 3,
+    };
+
+    const result = useHorizontalStackLayout(customAnimationConfig);
+
+    expect(result).toHaveProperty("layout");
+    expect(result).toHaveProperty("config");
+    expect(typeof result.layout).toBe("function");
+    expect(result.config.type).toBe("positive");
+    expect(result.config.viewCount).toBe(3);
+  });
+
+  it("should return layout and config for right snap direction", () => {
+    const customAnimationConfig = {
+      snapDirection: "right" as const,
+      showLength: 4,
+    };
+
+    const result = useHorizontalStackLayout(customAnimationConfig);
+
+    expect(result).toHaveProperty("layout");
+    expect(result).toHaveProperty("config");
+    expect(result.config.type).toBe("negative");
+    expect(result.config.viewCount).toBe(4);
+  });
+
+  it("should handle default config", () => {
+    const result = useHorizontalStackLayout();
+
+    expect(result).toHaveProperty("layout");
+    expect(result).toHaveProperty("config");
+    expect(typeof result.layout).toBe("function");
+    expect(result.config.type).toBe("positive"); // Default snapDirection is "left"
+  });
+
+  it("should handle empty custom config", () => {
+    const result = useHorizontalStackLayout({}, {});
+
+    expect(result).toHaveProperty("layout");
+    expect(result).toHaveProperty("config");
+  });
+
+  it("should merge custom config correctly", () => {
+    const customAnimationConfig = {
+      snapDirection: "right" as const,
+      showLength: 2,
+    };
+
+    const result = useHorizontalStackLayout(customAnimationConfig);
+
+    expect(result.config.type).toBe("negative");
+    expect(result.config.viewCount).toBe(2);
+  });
+});

package/src/layouts/stack.ts

@@ -0,0 +1,306 @@
+import { useMemo } from "react";
+import type { TransformsStyle, ViewStyle } from "react-native";
+import { Dimensions } from "react-native";
+import { Extrapolation, interpolate } from "react-native-reanimated";
+
+import type { CustomConfig, IComputedDirectionTypes } from "../types";
+
+const screen = Dimensions.get("window");
+
+export interface ILayoutConfig {
+  showLength?: number;
+  moveSize?: number;
+  stackInterval?: number;
+  scaleInterval?: number;
+  opacityInterval?: number;
+  rotateZDeg?: number;
+  snapDirection?: "left" | "right";
+}
+
+export type TStackModeProps = IComputedDirectionTypes<{
+  /**
+   * Carousel Animated transitions.
+   */
+  mode?: "horizontal-stack" | "vertical-stack";
+  /**
+   * Stack animation style.
+   * @default
+   *     snapDirection: 'right',
+   *     moveSize: window.width,
+   *     stackInterval: 30,
+   *     scaleInterval: 0.08,
+   *     rotateZDeg: 135,
+   *     opacityInterval: 0.1,
+   */
+  modeConfig?: ILayoutConfig;
+}>;
+
+export function horizontalStackLayout(modeConfig: ILayoutConfig = {}) {
+  return (_value: number) => {
+    "worklet";
+
+    const {
+      showLength,
+      snapDirection = "left",
+      moveSize = screen.width,
+      stackInterval = 18,
+      scaleInterval = 0.04,
+      opacityInterval = 0.1,
+      rotateZDeg = 30,
+    } = modeConfig;
+
+    const { validLength, value, inputRange } = getCommonVariables({
+      showLength: showLength!,
+      value: _value,
+      snapDirection,
+    });
+    const { zIndex, opacity } = getCommonStyles({
+      validLength,
+      value,
+      opacityInterval,
+      snapDirection,
+    });
+
+    let translateX: number;
+    let scale: number;
+    let rotateZ: string;
+
+    if (snapDirection === "left") {
+      translateX = interpolate(
+        value,
+        inputRange,
+        [-moveSize, 0, validLength * stackInterval],
+        Extrapolation.CLAMP
+      );
+      scale = interpolate(
+        value,
+        inputRange,
+        [1, 1, 1 - validLength * scaleInterval],
+        Extrapolation.CLAMP
+      );
+      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;
+    } else if (snapDirection === "right") {
+      translateX = interpolate(
+        value,
+        inputRange,
+        [-validLength * stackInterval, 0, moveSize],
+        Extrapolation.CLAMP
+      );
+      scale = interpolate(
+        value,
+        inputRange,
+        [1 - validLength * scaleInterval, 1, 1],
+        Extrapolation.CLAMP
+      );
+      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;
+    }
+
+    const transform: TransformsStyle["transform"] = [
+      {
+        translateX: translateX!,
+      },
+      {
+        scale: scale!,
+      },
+      {
+        rotateZ: rotateZ!,
+      },
+    ];
+
+    const styles: ViewStyle = {
+      transform,
+      zIndex,
+      opacity,
+    };
+
+    return styles;
+  };
+}
+
+export function useHorizontalStackLayout(
+  customAnimationConfig: ILayoutConfig = {},
+  customConfig: CustomConfig = {}
+) {
+  const config = useMemo(
+    () => ({
+      type: customAnimationConfig.snapDirection === "right" ? "negative" : "positive",
+      viewCount: customAnimationConfig.showLength,
+      ...customConfig,
+    }),
+    [customAnimationConfig, customConfig]
+  );
+
+  return {
+    layout: horizontalStackLayout(customAnimationConfig),
+    config,
+  };
+}
+
+export function verticalStackLayout(modeConfig: ILayoutConfig = {}) {
+  return (_value: number) => {
+    "worklet";
+
+    const {
+      showLength,
+      snapDirection = "left",
+      moveSize = screen.width,
+      stackInterval = 18,
+      scaleInterval = 0.04,
+      opacityInterval = 0.1,
+      rotateZDeg = 30,
+    } = modeConfig;
+
+    const { validLength, value, inputRange } = getCommonVariables({
+      showLength: showLength!,
+      value: _value,
+      snapDirection,
+    });
+    const { zIndex, opacity } = getCommonStyles({
+      validLength,
+      value,
+      opacityInterval,
+      snapDirection,
+    });
+
+    let translateX: number;
+    let scale: number;
+    let rotateZ: string;
+    let translateY: number;
+
+    if (snapDirection === "left") {
+      translateX = interpolate(value, inputRange, [-moveSize, 0, 0], Extrapolation.CLAMP);
+      scale = interpolate(
+        value,
+        inputRange,
+        [1, 1, 1 - validLength * scaleInterval],
+        Extrapolation.CLAMP
+      );
+      rotateZ = `${interpolate(value, inputRange, [-rotateZDeg, 0, 0], Extrapolation.CLAMP)}deg`;
+      translateY = interpolate(
+        value,
+        inputRange,
+        [0, 0, validLength * stackInterval],
+        Extrapolation.CLAMP
+      );
+    } else if (snapDirection === "right") {
+      translateX = interpolate(value, inputRange, [0, 0, moveSize], Extrapolation.CLAMP);
+      scale = interpolate(
+        value,
+        inputRange,
+        [1 - validLength * scaleInterval, 1, 1],
+        Extrapolation.CLAMP
+      );
+      rotateZ = `${interpolate(value, inputRange, [0, 0, rotateZDeg], Extrapolation.CLAMP)}deg`;
+      translateY = interpolate(
+        value,
+        inputRange,
+        [validLength * stackInterval, 0, 0],
+        Extrapolation.CLAMP
+      );
+    }
+
+    const transform: TransformsStyle["transform"] = [
+      {
+        translateX: translateX!,
+      },
+      {
+        scale: scale!,
+      },
+      {
+        rotateZ: rotateZ!,
+      },
+      {
+        translateY: translateY!,
+      },
+    ];
+
+    const styles: ViewStyle = {
+      transform,
+      zIndex,
+      opacity,
+    };
+
+    return styles;
+  };
+}
+
+function getCommonVariables(opts: {
+  value: number;
+  showLength: number;
+  snapDirection: "left" | "right";
+}) {
+  "worklet";
+
+  const { showLength, value: _value, snapDirection } = opts;
+  function easeInOutCubic(v: number): number {
+    return v < 0.5 ? 4 * v * v * v : 1 - (-2 * v + 2) ** 3 / 2;
+  }
+  const page = Math.floor(Math.abs(_value));
+  const diff = Math.abs(_value) % 1;
+  const value = _value < 0 ? -(page + easeInOutCubic(diff)) : page + easeInOutCubic(diff);
+  const validLength = showLength! - 1;
+
+  let inputRange: [number, number, number];
+
+  if (snapDirection === "left") inputRange = [-1, 0, validLength];
+  else if (snapDirection === "right") inputRange = [-validLength, 0, 1];
+  else throw new Error("snapDirection must be set to either left or right");
+
+  return {
+    inputRange,
+    validLength,
+    value,
+  };
+}
+
+function getCommonStyles(opts: {
+  value: number;
+  validLength: number;
+  opacityInterval: number;
+  snapDirection: "left" | "right";
+}) {
+  "worklet";
+
+  const { snapDirection, validLength, value, opacityInterval } = opts;
+
+  let zIndex: number;
+  let opacity: number;
+
+  if (snapDirection === "left") {
+    zIndex =
+      Math.floor(
+        interpolate(
+          value,
+          [-1.5, -1, -1 + Number.MIN_VALUE, 0, validLength],
+          [Number.MIN_VALUE, validLength, validLength, validLength - 1, -1]
+        ) * 10000
+      ) / 100;
+
+    opacity = interpolate(
+      value,
+      [-1, 0, validLength - 1, validLength],
+      [0.25, 1, 1 - (validLength - 1) * opacityInterval, 0.25]
+    );
+  } else if (snapDirection === "right") {
+    zIndex =
+      Math.floor(
+        interpolate(
+          value,
+          [-validLength, 0, 1 - Number.MIN_VALUE, 1, 1.5],
+          [1, validLength - 1, validLength, validLength, Number.MIN_VALUE]
+        ) * 10000
+      ) / 100;
+    opacity = interpolate(
+      value,
+      [-validLength, 1 - validLength, 0, 1],
+      [0.25, 1 - (validLength - 1) * opacityInterval, 1, 0.25]
+    );
+  } else {
+    throw new Error("snapDirection must be set to either left or right");
+  }
+
+  return {
+    zIndex: Math.round(zIndex),
+    opacity,
+  };
+}