react-native-reanimated-carousel 5.0.0-beta.7 → 5.0.0

package/src/components/Pagination/Pagination.test.tsx

@@ -1,178 +0,0 @@
-import { act, fireEvent, render } from "@testing-library/react-native";
-import { View } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-
-import { Pagination } from ".";
-
-jest.mock("react-native-worklets", () => ({
-  scheduleOnRN: (fn: (...args: unknown[]) => void, ...args: unknown[]) => fn(...args),
-}));
-
-// Use fake timers so the reanimated mapper's mockedRequestAnimationFrame
-// (a setTimeout-based RAF) doesn't fire outside of act().
-beforeEach(() => {
-  jest.useFakeTimers();
-});
-
-afterEach(() => {
-  jest.useRealTimers();
-});
-
-describe("Pagination.Basic", () => {
-  it("throws when size/dot width/height are non-number", () => {
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return (
-        <Pagination.Basic
-          data={[1, 2]}
-          progress={progress}
-          // @ts-expect-error intentional invalid type
-          size={"12px"}
-        />
-      );
-    };
-
-    expect(() => render(<Test />)).toThrow("size/width/height must be a number");
-  });
-
-  it("renders dots and calls onPress", async () => {
-    const handlePress = jest.fn();
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return (
-        <Pagination.Basic
-          data={[1, 2, 3]}
-          progress={progress}
-          onPress={handlePress}
-          carouselName="Demo"
-        />
-      );
-    };
-
-    const { UNSAFE_root } = render(<Test />);
-    await act(async () => {
-      jest.advanceTimersByTime(100);
-    });
-
-    const buttons = UNSAFE_root.findAll(
-      (node) =>
-        node?.props?.accessibilityRole === "button" &&
-        typeof node?.props?.accessibilityLabel === "string" &&
-        node.props.accessibilityLabel.startsWith("Slide ")
-    );
-
-    const uniqueByLabel = Array.from(
-      new Map(buttons.map((b) => [b.props.accessibilityLabel, b])).values()
-    );
-
-    expect(uniqueByLabel).toHaveLength(3);
-
-    await act(async () => {
-      fireEvent.press(uniqueByLabel[1]);
-      jest.advanceTimersByTime(100);
-    });
-    expect(handlePress).toHaveBeenCalledWith(1);
-  });
-
-  it("does not include undefined in default accessibilityLabel when carouselName is omitted", async () => {
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return <Pagination.Basic data={[1, 2]} progress={progress} />;
-    };
-
-    const { UNSAFE_root } = render(<Test />);
-    await act(async () => {
-      jest.advanceTimersByTime(100);
-    });
-
-    const buttons = UNSAFE_root.findAll(
-      (node) =>
-        node?.props?.accessibilityRole === "button" &&
-        typeof node?.props?.accessibilityLabel === "string" &&
-        node.props.accessibilityLabel.startsWith("Slide ")
-    );
-
-    const uniqueByLabel = Array.from(
-      new Map(buttons.map((b) => [b.props.accessibilityLabel, b])).values()
-    );
-
-    expect(uniqueByLabel[0].props.accessibilityLabel).toBe("Slide 1 of 2");
-    expect(uniqueByLabel[0].props.accessibilityLabel).not.toContain("undefined");
-  });
-});
-
-describe("Pagination.Custom", () => {
-  it("throws when any size-related prop is non-number", () => {
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return (
-        <Pagination.Custom
-          data={[1]}
-          progress={progress}
-          // @ts-expect-error intentional invalid type
-          activeDotStyle={{ width: "10px" }}
-        />
-      );
-    };
-
-    expect(() => render(<Test />)).toThrow("size/width/height must be a number");
-  });
-
-  it("uses max item dimensions for container min sizes", async () => {
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return (
-        <Pagination.Custom
-          data={[1, 2]}
-          progress={progress}
-          size={12}
-          dotStyle={{ width: 14, height: 8 }}
-          activeDotStyle={{ width: 16, height: 20 }}
-        />
-      );
-    };
-
-    const { UNSAFE_root } = render(<Test />);
-    await act(async () => {
-      jest.advanceTimersByTime(100);
-    });
-
-    // @ts-expect-error
-    const container = UNSAFE_root.findByType(View);
-    const flattened = Array.isArray(container.props.style)
-      ? Object.assign({}, ...container.props.style.filter(Boolean))
-      : container.props.style;
-
-    expect(flattened.minWidth).toBe(16);
-    expect(flattened.minHeight).toBe(20);
-  });
-
-  it("allows overriding pagination item accessibility props", async () => {
-    const Test = () => {
-      const progress = useSharedValue(0);
-      return (
-        <Pagination.Custom
-          data={[1, 2]}
-          progress={progress}
-          paginationItemAccessibility={(index: number, length: number) => ({
-            accessibilityLabel: `Page ${index + 1}/${length}`,
-            accessibilityHint: `Jump to ${index + 1}`,
-            accessibilityRole: "link",
-          })}
-        />
-      );
-    };
-
-    const { UNSAFE_root } = render(<Test />);
-    await act(async () => {
-      jest.advanceTimersByTime(100);
-    });
-
-    const item = UNSAFE_root.find(
-      (node) =>
-        node?.props?.accessibilityLabel === "Page 1/2" && node?.props?.accessibilityRole === "link"
-    );
-
-    expect(item.props.accessibilityHint).toBe("Jump to 1");
-  });
-});

package/src/components/ScrollViewGesture.test.tsx

@@ -1,155 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import type {
-  GestureStateChangeEvent,
-  GestureUpdateEvent,
-  PanGestureHandlerEventPayload,
-} from "react-native-gesture-handler";
-import type { SharedValue } from "react-native-reanimated";
-
-import { act, render } from "@testing-library/react-native";
-
-import { ScrollViewGesture } from "./ScrollViewGesture";
-
-import { usePanGestureProxy } from "../hooks/usePanGestureProxy";
-import { GlobalStateContext, type IContext } from "../store";
-
-jest.mock("../hooks/usePanGestureProxy", () => ({
-  usePanGestureProxy: jest.fn(() => ({})),
-}));
-
-const mockUsePanGestureProxy = jest.mocked(usePanGestureProxy);
-
-jest.mock("react-native-gesture-handler", () => {
-  const React = require("react");
-  const actual = jest.requireActual("react-native-gesture-handler");
-
-  return {
-    ...actual,
-    GestureDetector: ({ children }: { children: React.ReactNode }) => {
-      const child = React.Children.only(children);
-
-      // Simulate the upstream web path that reads `element.ref`.
-      // React 19 warns only when the child element actually carries a ref.
-      // @ts-expect-error React 19 removed `element.ref` from the element type.
-      void child.ref;
-
-      return child;
-    },
-  };
-});
-
-type RenderGestureOptions = {
-  vertical?: boolean;
-  size?: number;
-  dataLength?: number;
-  containerSize?: { width: number; height: number };
-};
-
-function renderGesture({
-  vertical = false,
-  size = 300,
-  dataLength = 3,
-  containerSize = { width: 300, height: 200 },
-}: RenderGestureOptions = {}) {
-  const translation = { value: 0 } as SharedValue<number>;
-  const contextValue = {
-    props: {
-      onConfigurePanGesture: undefined,
-      vertical,
-      pagingEnabled: true,
-      snapEnabled: true,
-      loop: false,
-      scrollAnimationDuration: 500,
-      withAnimation: undefined,
-      enabled: true,
-      dataLength,
-      overscrollEnabled: false,
-      maxScrollDistancePerSwipe: undefined,
-      minScrollDistancePerSwipe: undefined,
-      fixedDirection: undefined,
-    },
-    common: {
-      size,
-      validLength: dataLength,
-      handlerOffset: { value: 0 },
-      resolvedSize: { value: size },
-      sizePhase: { value: "ready" },
-      sizeExplicit: true,
-    },
-    layout: {
-      containerSize: { value: containerSize },
-      updateContainerSize: jest.fn(),
-      itemDimensions: { value: {} },
-      updateItemDimensions: jest.fn(),
-    },
-  } as unknown as IContext;
-
-  render(
-    <GlobalStateContext.Provider value={contextValue}>
-      <ScrollViewGesture size={size} translation={translation} style={containerSize}>
-        <View testID="content" />
-      </ScrollViewGesture>
-    </GlobalStateContext.Provider>
-  );
-
-  const gestureCallbacks =
-    mockUsePanGestureProxy.mock.calls[mockUsePanGestureProxy.mock.calls.length - 1]?.[0];
-
-  if (!gestureCallbacks) {
-    throw new Error("Expected ScrollViewGesture to configure the pan gesture");
-  }
-
-  return { gestureCallbacks, translation };
-}
-
-describe("issue #857 web regression", () => {
-  beforeEach(() => {
-    mockUsePanGestureProxy.mockClear();
-  });
-
-  it("does not emit the React 19 element.ref warning from the gesture path", () => {
-    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
-
-    try {
-      renderGesture();
-
-      const react19RefWarnings = errorSpy.mock.calls.filter(([message]) =>
-        String(message).includes("Accessing element.ref was removed in React 19")
-      );
-
-      expect(react19RefWarnings).toHaveLength(0);
-    } finally {
-      errorSpy.mockRestore();
-    }
-  });
-
-  it.each([
-    ["horizontal", false, 300, 3, { width: 300, height: 200 }, -600],
-    ["vertical", true, 300, 3, { width: 300, height: 200 }, -700],
-    ["unmeasured container", false, 300, 3, { width: 0, height: 0 }, 0],
-    ["content smaller than its container", false, 100, 2, { width: 300, height: 200 }, 0],
-  ] as const)(
-    "uses the %s main-axis container size for the non-loop boundary",
-    (_name, vertical, size, dataLength, containerSize, expectedTranslation) => {
-      const { gestureCallbacks, translation } = renderGesture({
-        vertical,
-        size,
-        dataLength,
-        containerSize,
-      });
-
-      act(() => {
-        gestureCallbacks.onGestureStart(
-          {} as GestureStateChangeEvent<PanGestureHandlerEventPayload>
-        );
-        gestureCallbacks.onGestureUpdate({
-          translationX: -1000,
-          translationY: -1000,
-        } as GestureUpdateEvent<PanGestureHandlerEventPayload>);
-      });
-
-      expect(translation.value).toBeCloseTo(expectedTranslation);
-    }
-  );
-});

package/src/components/issue-899-parallax-reverse-loop.test.tsx

@@ -1,131 +0,0 @@
-import React from "react";
-import { StyleSheet } from "react-native";
-import type { PanGesture } from "react-native-gesture-handler";
-import { Gesture, State } from "react-native-gesture-handler";
-import Animated, { useDerivedValue, useSharedValue } from "react-native-reanimated";
-
-import { act, render, waitFor } from "@testing-library/react-native";
-import { fireGestureHandler, getByGestureTestId } from "react-native-gesture-handler/jest-utils";
-
-import Carousel from "./Carousel";
-
-{
-  const cfg = (global as any).__reanimatedLoggerConfig as
-    | { logFunction: (data: { level: number; message: string }) => void }
-    | undefined;
-  if (cfg) {
-    const originalLog = cfg.logFunction;
-    cfg.logFunction = (data) => {
-      if (data.message.includes("measure() cannot be used with Jest")) return;
-      originalLog(data);
-    };
-  }
-}
-
-const slideWidth = 300;
-const slideHeight = 200;
-const gestureTestId = "rnrc-gesture-handler";
-const realPan = Gesture.Pan();
-
-jest.spyOn(Gesture, "Pan").mockImplementation(() => realPan.withTestId(gestureTestId));
-
-describe("issue #899 parallax reverse loop regression", () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-    jest.useRealTimers();
-    jest.clearAllTimers();
-  });
-
-  it("preserves renderItem styles and props when looping backward from index 0 in parallax mode", async () => {
-    const progress = { current: 0 };
-    const data = Array.from({ length: 30 }, (_, index) => ({
-      id: `item-${index}`,
-      color: index === 29 ? "#111111" : `rgb(${index}, ${index}, ${index})`,
-    }));
-
-    const Wrapper = () => {
-      const progressAnimVal = useSharedValue(progress.current);
-
-      useDerivedValue(() => {
-        progress.current = progressAnimVal.value;
-      }, [progressAnimVal]);
-
-      return (
-        <Carousel
-          data={data}
-          defaultIndex={0}
-          loop
-          mode="parallax"
-          windowSize={5}
-          style={{ width: slideWidth, height: slideHeight }}
-          onProgressChange={(_, absoluteProgress) => {
-            progressAnimVal.value = absoluteProgress;
-          }}
-          renderItem={({ item, index }) => (
-            <Animated.View
-              testID={`issue-899-item-${index}`}
-              accessibilityLabel={`issue-899-label-${index}`}
-              style={{
-                width: slideWidth,
-                height: slideHeight,
-                backgroundColor: item.color,
-              }}
-            />
-          )}
-        />
-      );
-    };
-
-    const { getByTestId, queryByTestId } = render(<Wrapper />);
-
-    await waitFor(() => {
-      expect(getByTestId("issue-899-item-0")).toBeTruthy();
-    });
-
-    const prerenderedWrappedItem = getByTestId("issue-899-item-29");
-    const prerenderedWrappedStyle = StyleSheet.flatten(prerenderedWrappedItem.props.style);
-
-    expect(prerenderedWrappedItem.props.accessibilityLabel).toBe("issue-899-label-29");
-    expect(prerenderedWrappedStyle.backgroundColor).toBe("#111111");
-
-    fireGestureHandler<PanGesture>(getByGestureTestId(gestureTestId), [
-      { state: State.BEGAN, translationX: 0, velocityX: slideWidth },
-    ]);
-
-    fireGestureHandler<PanGesture>(getByGestureTestId(gestureTestId), [
-      { state: State.ACTIVE, translationX: slideWidth * 0.7, velocityX: slideWidth },
-    ]);
-
-    expect(queryByTestId("issue-899-item-29")).toBeTruthy();
-
-    await waitFor(() => {
-      expect(queryByTestId("issue-899-item-29")).toBeTruthy();
-    });
-
-    const activeWrappedItem = getByTestId("issue-899-item-29");
-    const activeWrappedStyle = StyleSheet.flatten(activeWrappedItem.props.style);
-
-    expect(activeWrappedItem.props.accessibilityLabel).toBe("issue-899-label-29");
-    expect(activeWrappedStyle.backgroundColor).toBe("#111111");
-
-    fireGestureHandler<PanGesture>(getByGestureTestId(gestureTestId), [
-      { state: State.END, translationX: slideWidth, velocityX: slideWidth },
-    ]);
-
-    await waitFor(() => {
-      expect(progress.current).toBe(29);
-    });
-
-    const wrappedItem = getByTestId("issue-899-item-29");
-    const flattenedStyle = StyleSheet.flatten(wrappedItem.props.style);
-
-    expect(wrappedItem.props.accessibilityLabel).toBe("issue-899-label-29");
-    expect(flattenedStyle.backgroundColor).toBe("#111111");
-  });
-});

package/src/components/rnr-demo.test.tsx

@@ -1,53 +0,0 @@
-import { render } from "@testing-library/react-native";
-import type { FC } from "react";
-import React from "react";
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-
-describe("Carousel Animations", () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.runOnlyPendingTimers();
-    jest.useRealTimers();
-  });
-
-  it("animates opacity with timing", () => {
-    const TestComponent: FC<{ value: number }> = ({ value }) => {
-      const sharedValue = useSharedValue(value);
-
-      // Using withTiming to wrap the value change, so it can be tested
-      const animatedStyle = useAnimatedStyle(() => ({
-        opacity: withTiming(sharedValue.value, { duration: 500 }),
-      }));
-
-      // When the prop changes, update the shared value
-      React.useEffect(() => {
-        sharedValue.value = value;
-      }, [value, sharedValue]);
-
-      return <Animated.View testID="animated-view" style={animatedStyle} />;
-    };
-
-    const initialValue = 0;
-    const updatedValue = 1;
-
-    const { getByTestId, rerender } = render(<TestComponent value={initialValue} />);
-    const view = getByTestId("animated-view");
-
-    // Verify the initial state
-    expect(view).toHaveAnimatedStyle({ opacity: initialValue });
-
-    // Trigger the value change
-    rerender(<TestComponent value={updatedValue} />);
-
-    // Advance the animation to the middle point
-    jest.advanceTimersByTime(250);
-    expect(view).toHaveAnimatedStyle({ opacity: 0.5 }); // Animation middle value
-
-    // Advance the animation to the completion
-    jest.advanceTimersByTime(250);
-    expect(view).toHaveAnimatedStyle({ opacity: updatedValue }); // Animation completion
-  });
-});

package/src/hooks/useAutoPlay.test.ts

@@ -1,194 +0,0 @@
-import { act, renderHook } from "@testing-library/react-hooks";
-
-import { useAutoPlay } from "./useAutoPlay";
-
-describe("useAutoPlay", () => {
-  // Mock timer
-  beforeEach(() => {
-    jest.useFakeTimers();
-    jest.clearAllMocks();
-  });
-
-  afterEach(() => {
-    jest.clearAllTimers();
-    jest.useRealTimers();
-  });
-
-  // Mock carousel controller
-  const mockCarouselController = {
-    prev: jest.fn(),
-    next: jest.fn(),
-    getCurrentIndex: jest.fn(),
-    getSharedIndex: jest.fn(),
-    scrollTo: jest.fn(),
-  };
-
-  it("should start autoplay when autoPlay is true", () => {
-    renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(1);
-    expect(mockCarouselController.next).toHaveBeenCalledWith(
-      expect.objectContaining({
-        onFinished: expect.any(Function),
-      })
-    );
-  });
-
-  it("should not start autoplay when autoPlay is false", () => {
-    renderHook(() =>
-      useAutoPlay({
-        autoPlay: false,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.next).not.toHaveBeenCalled();
-  });
-
-  it("should play in reverse when autoPlayReverse is true", () => {
-    renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayReverse: true,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.prev).toHaveBeenCalledTimes(1);
-    expect(mockCarouselController.next).not.toHaveBeenCalled();
-  });
-
-  it("should clear timer on unmount", () => {
-    const { unmount } = renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    // Run the timer once to ensure it's set
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-
-    // Clear previous call records
-    mockCarouselController.next.mockClear();
-
-    // Then unmount the component and run the timer again
-    act(() => {
-      unmount();
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.next).not.toHaveBeenCalled();
-  });
-
-  it("should pause and resume autoplay", () => {
-    const { result } = renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    // Run the timer once to ensure it's set
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-
-    // Clear previous call records
-    mockCarouselController.next.mockClear();
-
-    // Pause autoplay
-    act(() => {
-      result.current.pause();
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.next).not.toHaveBeenCalled();
-
-    // Resume autoplay
-    act(() => {
-      result.current.start();
-      jest.runOnlyPendingTimers();
-    });
-
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(1);
-  });
-
-  it("should respect autoPlayInterval timing", () => {
-    renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayInterval: 2000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    // Advance less than interval
-    act(() => {
-      jest.advanceTimersByTime(1500);
-    });
-    expect(mockCarouselController.next).not.toHaveBeenCalled();
-
-    // Advance to complete interval
-    act(() => {
-      jest.advanceTimersByTime(500);
-    });
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(1);
-  });
-
-  it("should chain autoplay calls correctly", () => {
-    renderHook(() =>
-      useAutoPlay({
-        autoPlay: true,
-        autoPlayInterval: 1000,
-        carouselController: mockCarouselController,
-      })
-    );
-
-    // First interval
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(1);
-
-    // Trigger onFinished callback to start the next timer
-    const onFinished = mockCarouselController.next.mock.calls[0][0].onFinished;
-    act(() => {
-      onFinished();
-      jest.runOnlyPendingTimers();
-    });
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(2);
-
-    // Trigger onFinished callback to start the next timer
-    const onFinished2 = mockCarouselController.next.mock.calls[1][0].onFinished;
-    act(() => {
-      onFinished2();
-      jest.runOnlyPendingTimers();
-    });
-    expect(mockCarouselController.next).toHaveBeenCalledTimes(3);
-  });
-});