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

package/src/components/ScrollViewGesture.test.tsx

@@ -0,0 +1,155 @@
+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/ScrollViewGesture.tsx

@@ -8,9 +8,7 @@ import type {
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   cancelAnimation,
-  measure,
   useAnimatedReaction,
-  useAnimatedRef,
   useDerivedValue,
   useSharedValue,
   withDecay,
@@ -56,7 +54,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       fixedDirection,
     },
     common: { size, resolvedSize, sizePhase, sizeExplicit },
-    layout: { updateContainerSize },
+    layout: { containerSize, updateContainerSize },
   } = useGlobalState();
 
   const {
@@ -77,7 +75,6 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   const validStart = useSharedValue(false);
   const scrollEndTranslation = useSharedValue(0);
   const scrollEndVelocity = useSharedValue(0);
-  const containerRef = useAnimatedRef<Animated.View>();
   const maxScrollDistancePerSwipeIsSet = typeof maxScrollDistancePerSwipe === "number";
   const minScrollDistancePerSwipeIsSet = typeof minScrollDistancePerSwipe === "number";
   const sizeReady = useDerivedValue(() => {
@@ -92,18 +89,19 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     if (size <= 0) return 0;
 
     if (!loop && !overscrollEnabled) {
-      const measurement = measure(containerRef);
-      const containerWidth = measurement?.width || 0;
+      const containerMainAxisSize = vertical
+        ? containerSize.value.height
+        : containerSize.value.width;
 
-      // If the item's total width is less than the container's width, then there is no need to scroll.
-      if (dataLength * size < containerWidth) return 0;
+      // If the item's total size is less than the container's size, then there is no need to scroll.
+      if (containerMainAxisSize <= 0 || dataLength * size < containerMainAxisSize) return 0;
 
       // Disable the "overscroll" effect
-      return dataLength * size - containerWidth;
+      return dataLength * size - containerMainAxisSize;
     }
 
     return dataLength * size;
-  }, [loop, size, dataLength, overscrollEnabled]);
+  }, [loop, size, dataLength, overscrollEnabled, vertical, containerSize]);
 
   const withSpring = React.useCallback(
     (toValue: number, onFinished?: () => void) => {
@@ -515,7 +513,6 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   return (
     <GestureDetector gesture={gesture}>
       <Animated.View
-        ref={containerRef}
         testID={testID}
         style={style}
         onTouchStart={onTouchBegin}

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

@@ -0,0 +1,131 @@
+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/hooks/useOnProgressChange.test.tsx

@@ -6,19 +6,23 @@ import { useOnProgressChange } from "./useOnProgressChange";
 
 // Mock Reanimated and Easing
 jest.mock("react-native-reanimated", () => {
+  const React = jest.requireActual("react");
   let reactionCallback: ((value: any) => void) | null = null;
+  let reactionRegistrationCount = 0;
 
   return {
     useSharedValue: jest.fn((initialValue) => ({
       value: initialValue,
     })),
-    useAnimatedReaction: jest.fn((deps, cb) => {
-      reactionCallback = cb;
-      const depsResult = deps();
-      cb(depsResult);
-      return () => {
-        reactionCallback = null;
-      };
+    useAnimatedReaction: jest.fn((prepare, react, dependencies) => {
+      React.useEffect(() => {
+        reactionRegistrationCount += 1;
+        reactionCallback = react;
+        react(prepare());
+        return () => {
+          if (reactionCallback === react) reactionCallback = null;
+        };
+      }, dependencies);
     }),
     Easing: {
       bezier: () => ({
@@ -29,6 +33,10 @@ jest.mock("react-native-reanimated", () => {
     __triggerReaction: (value: any) => {
       if (reactionCallback) reactionCallback(value);
     },
+    __getReactionRegistrationCount: () => reactionRegistrationCount,
+    __resetReactionRegistrationCount: () => {
+      reactionRegistrationCount = 0;
+    },
   };
 });
 
@@ -49,11 +57,14 @@ describe("useOnProgressChange", () => {
   const mockOffsetX = useSharedValue(0);
   const mockSizeReady = useSharedValue(true);
   const mockOnProgressChange = jest.fn();
-  const { __triggerReaction } = jest.requireMock("react-native-reanimated");
+  const { __getReactionRegistrationCount, __resetReactionRegistrationCount, __triggerReaction } =
+    jest.requireMock("react-native-reanimated");
 
   beforeEach(() => {
     jest.clearAllMocks();
+    __resetReactionRegistrationCount();
     mockOffsetX.value = 0;
+    mockSizeReady.value = true;
   });
 
   it("should handle progress change with function callback", () => {
@@ -204,4 +215,56 @@ describe("useOnProgressChange", () => {
     __triggerReaction({ offset: mockOffsetX.value, ready: mockSizeNotReady.value });
     expect(mockOnProgressChange).not.toHaveBeenCalled();
   });
+
+  it("should re-register the reaction when the offset shared value changes", () => {
+    const replacementOffsetX = useSharedValue(-300);
+    const { rerender } = renderHook(
+      ({ offsetX }) =>
+        useOnProgressChange({
+          size: 300,
+          sizeReady: mockSizeReady,
+          autoFillData: false,
+          loop: false,
+          offsetX,
+          rawDataLength: 5,
+          onProgressChange: mockOnProgressChange,
+        }),
+      { initialProps: { offsetX: mockOffsetX } }
+    );
+
+    const initialRegistrationCount = __getReactionRegistrationCount();
+    rerender({ offsetX: mockOffsetX });
+    expect(__getReactionRegistrationCount()).toBe(initialRegistrationCount);
+
+    rerender({ offsetX: replacementOffsetX });
+
+    expect(__getReactionRegistrationCount()).toBe(initialRegistrationCount + 1);
+    expect(mockOnProgressChange).toHaveBeenLastCalledWith(-300, 1);
+  });
+
+  it("should re-register the reaction when the size-ready shared value changes", () => {
+    const initialSizeReady = useSharedValue(false);
+    const replacementSizeReady = useSharedValue(true);
+    const { rerender } = renderHook(
+      ({ sizeReady }) =>
+        useOnProgressChange({
+          size: 300,
+          sizeReady,
+          autoFillData: false,
+          loop: false,
+          offsetX: mockOffsetX,
+          rawDataLength: 5,
+          onProgressChange: mockOnProgressChange,
+        }),
+      { initialProps: { sizeReady: initialSizeReady } }
+    );
+
+    const initialRegistrationCount = __getReactionRegistrationCount();
+    expect(mockOnProgressChange).not.toHaveBeenCalled();
+
+    rerender({ sizeReady: replacementSizeReady });
+
+    expect(__getReactionRegistrationCount()).toBe(initialRegistrationCount + 1);
+    expect(mockOnProgressChange).toHaveBeenCalledWith(0, 0);
+  });
 });

package/src/hooks/useOnProgressChange.ts

@@ -53,6 +53,6 @@ export function useOnProgressChange(
         }
       }
     },
-    [loop, autoFillData, rawDataLength, onProgressChange, size]
+    [loop, autoFillData, rawDataLength, onProgressChange, size, offsetX, sizeReady]
   );
 }

package/src/hooks/usePropsErrorBoundary.test.tsx

@@ -0,0 +1,57 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+import { usePropsErrorBoundary } from "./usePropsErrorBoundary";
+
+import type { TCarouselProps } from "../types";
+
+function createProps(overrides: Partial<TCarouselProps<number>> = {}): TCarouselProps<number> & {
+  dataLength: number;
+} {
+  return {
+    data: [0, 1, 2],
+    dataLength: 3,
+    renderItem: () => null,
+    ...overrides,
+  } as TCarouselProps<number> & { dataLength: number };
+}
+
+describe("usePropsErrorBoundary", () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("accepts percentage and flex container sizing without contradictory warnings", () => {
+    const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    renderHook(() =>
+      usePropsErrorBoundary(
+        createProps({
+          style: { width: "100%", height: 190 },
+          itemWidth: 280,
+        })
+      )
+    );
+    renderHook(() =>
+      usePropsErrorBoundary(
+        createProps({
+          vertical: true,
+          style: { flex: 1 },
+          itemHeight: 190,
+        })
+      )
+    );
+
+    expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("Horizontal mode"));
+    expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("`itemWidth` sets"));
+    expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("Vertical mode"));
+    expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("`itemHeight` sets"));
+
+    warnSpy.mockClear();
+    renderHook(() => usePropsErrorBoundary(createProps({ style: { flex: 0, height: 190 } })));
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Horizontal mode"));
+
+    warnSpy.mockClear();
+    renderHook(() => usePropsErrorBoundary(createProps({ vertical: true })));
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Vertical mode"));
+  });
+});

package/src/hooks/usePropsErrorBoundary.ts

@@ -16,7 +16,7 @@ export function usePropsErrorBoundary(props: TCarouselProps & { dataLength: numb
     if (__DEV__) {
       const { style, vertical, width, height, itemWidth, itemHeight, contentContainerStyle } =
         props;
-      const { width: styleWidth, height: styleHeight } = StyleSheet.flatten(style) || {};
+      const { width: styleWidth, height: styleHeight, flex } = StyleSheet.flatten(style) || {};
 
       // Deprecation warnings for width/height props
       if (typeof width === "number" && !warnedRefs.width) {
@@ -42,10 +42,11 @@ export function usePropsErrorBoundary(props: TCarouselProps & { dataLength: numb
       }
 
       // Updated missing size warnings
+      const hasFlexibleContainerSize = typeof flex === "number" && flex > 0;
       const hasHorizontalContainerSize =
-        typeof styleWidth === "number" || typeof width === "number";
+        styleWidth != null || typeof width === "number" || hasFlexibleContainerSize;
       const hasVerticalContainerSize =
-        typeof styleHeight === "number" || typeof height === "number";
+        styleHeight != null || typeof height === "number" || hasFlexibleContainerSize;
 
       if (!vertical && !hasHorizontalContainerSize && !warnedRefs.horizontal) {
         console.warn(

package/src/hooks/useVisibleRanges.test.tsx

@@ -67,6 +67,35 @@ describe("useVisibleRanges", () => {
         `);
   });
 
+  it.each([
+    { total: 1, windowSize: 1, currentIndex: 0 },
+    { total: 2, windowSize: 5, currentIndex: 1 },
+    { total: 3, windowSize: 3, currentIndex: 2 },
+    { total: 4, windowSize: 5, currentIndex: 1 },
+  ])(
+    "should display every item when windowSize=$windowSize is at least total=$total in loop mode",
+    ({ total, windowSize, currentIndex }) => {
+      const ranges = renderHook(() => {
+        const translation = useSharedValue(-currentIndex * viewSize);
+        return useVisibleRanges({
+          total,
+          translation,
+          viewSize,
+          windowSize,
+          loop: true,
+        });
+      }).result.current.value;
+
+      const visibleIndexes = Array.from({ length: total }, (_, index) => index).filter(
+        (index) =>
+          (index >= ranges.negativeRange[0] && index <= ranges.negativeRange[1]) ||
+          (index >= ranges.positiveRange[0] && index <= ranges.positiveRange[1])
+      );
+
+      expect(visibleIndexes).toEqual(Array.from({ length: total }, (_, index) => index));
+    }
+  );
+
   it("should shows the increased range of the list when the loop is false and swiped the carousel.", async () => {
     const slide0hook = renderHook(() => {
       const translation = useSharedValue(-0 * viewSize);