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

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.tsx

@@ -11,6 +11,83 @@ export interface VisibleRanges {
 
 export type IVisibleRanges = SharedValue<VisibleRanges>;
 
+function normalizeWindowSize(total: number, windowSize?: number) {
+  "worklet";
+
+  return typeof windowSize === "number" && Number.isFinite(windowSize) && windowSize > 0
+    ? windowSize
+    : total;
+}
+
+function normalizeLoopIndex(currentIndex: number, total: number) {
+  "worklet";
+
+  return currentIndex < 0 ? (currentIndex % total) + total : currentIndex;
+}
+
+export function computeVisibleRanges(params: {
+  total: number;
+  windowSize?: number;
+  currentIndex: number;
+  loop?: boolean;
+}): VisibleRanges {
+  "worklet";
+
+  const { total = 0, loop } = params;
+  const windowSize = normalizeWindowSize(total, params.windowSize);
+
+  if (total <= 0) {
+    return {
+      negativeRange: [0, 0],
+      positiveRange: [0, -1],
+    };
+  }
+
+  if (loop && windowSize >= total) {
+    return {
+      negativeRange: [0, 0],
+      positiveRange: [0, total - 1],
+    };
+  }
+
+  const positiveCount = Math.round(windowSize / 2);
+  const negativeCount = windowSize - positiveCount;
+
+  let currentIndex = params.currentIndex;
+  if (!Number.isFinite(currentIndex)) currentIndex = 0;
+
+  if (!loop) {
+    currentIndex = Math.max(0, Math.min(total - 1, currentIndex));
+    return {
+      negativeRange: [Math.max(0, currentIndex - (windowSize - 1)), currentIndex],
+      positiveRange: [currentIndex, Math.min(total - 1, currentIndex + (windowSize - 1))],
+    };
+  }
+
+  currentIndex = normalizeLoopIndex(currentIndex, total);
+
+  const negativeRange: Range = [
+    (currentIndex - negativeCount + total) % total,
+    (currentIndex - 1 + total) % total,
+  ];
+
+  const positiveRange: Range = [
+    (currentIndex + total) % total,
+    (currentIndex + positiveCount + total) % total,
+  ];
+
+  if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
+    negativeRange[1] = total - 1;
+    positiveRange[0] = 0;
+  }
+  if (positiveRange[0] > positiveRange[1]) {
+    negativeRange[1] = total - 1;
+    positiveRange[0] = 0;
+  }
+
+  return { negativeRange, positiveRange };
+}
+
 export function useVisibleRanges(options: {
   total: number;
   viewSize: number;
@@ -20,18 +97,12 @@ export function useVisibleRanges(options: {
 }): IVisibleRanges {
   const { total = 0, viewSize, translation, windowSize: _windowSize, loop } = options;
 
-  const windowSize =
-    typeof _windowSize === "number" && Number.isFinite(_windowSize) && _windowSize > 0
-      ? _windowSize
-      : total;
+  const windowSize = normalizeWindowSize(total, _windowSize);
   const cachedRanges = useRef<VisibleRanges | null>(null);
 
   const ranges = useDerivedValue(() => {
     if (total <= 0) {
-      return {
-        negativeRange: [0, 0] as Range,
-        positiveRange: [0, -1] as Range,
-      };
+      return computeVisibleRanges({ total, currentIndex: 0, windowSize, loop });
     }
 
     // Prevent division by zero when viewSize is not yet measured
@@ -42,55 +113,10 @@ export function useVisibleRanges(options: {
       };
     }
 
-    const positiveCount = Math.round(windowSize / 2);
-    const negativeCount = windowSize - positiveCount;
-
     let currentIndex = Math.round(-translation.value / viewSize);
     if (!Number.isFinite(currentIndex)) currentIndex = 0;
 
-    let newRanges: VisibleRanges;
-
-    if (loop && windowSize >= total) {
-      newRanges = {
-        negativeRange: [0, 0],
-        positiveRange: [0, total - 1],
-      };
-    } else if (!loop) {
-      // Clamp currentIndex to valid range [0, total-1] for non-loop mode
-      // When overdragging right, translation.value becomes positive, making currentIndex negative
-      currentIndex = Math.max(0, Math.min(total - 1, currentIndex));
-
-      // Adjusting negative range if the carousel is not loopable.
-      // So, It will be only displayed the positive items.
-      newRanges = {
-        negativeRange: [Math.max(0, currentIndex - (windowSize - 1)), currentIndex],
-        positiveRange: [currentIndex, Math.min(total - 1, currentIndex + (windowSize - 1))],
-      };
-    } else {
-      currentIndex = currentIndex < 0 ? (currentIndex % total) + total : currentIndex;
-
-      const negativeRange: Range = [
-        (currentIndex - negativeCount + total) % total,
-        (currentIndex - 1 + total) % total,
-      ];
-
-      const positiveRange: Range = [
-        (currentIndex + total) % total,
-        (currentIndex + positiveCount + total) % total,
-      ];
-
-      if (negativeRange[0] < total && negativeRange[0] > negativeRange[1]) {
-        negativeRange[1] = total - 1;
-        positiveRange[0] = 0;
-      }
-      if (positiveRange[0] > positiveRange[1]) {
-        negativeRange[1] = total - 1;
-        positiveRange[0] = 0;
-      }
-
-      // console.log({ negativeRange, positiveRange ,total,windowSize,a:total <= _windowSize})
-      newRanges = { negativeRange, positiveRange };
-    }
+    const newRanges = computeVisibleRanges({ total, windowSize, currentIndex, loop });
 
     if (
       cachedRanges.current &&

package/src/types.ts

@@ -242,7 +242,7 @@ export type TCarouselProps<T = any> = {
   customConfig?: CustomConfig | (() => CustomConfig);
   /**
    * Custom animations.
-   * Must use `worklet`, Details: https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/worklets/
+   * Must be worklet-compatible. See https://docs.swmansion.com/react-native-reanimated/docs/guides/worklets/
    * @test_coverage ✅ tested in Carousel.test.tsx > should apply the custom animation
    */
   customAnimation?: (value: number, index: number) => ViewStyle;