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

package/src/components/Carousel.test.tsx

@@ -13,6 +13,25 @@ import Carousel from "./Carousel";
 
 import type { TCarouselProps } from "../types";
 
+// Suppress the "measure() cannot be used with Jest" warning from Reanimated.
+// The measure export is non-configurable so it cannot be spied on or mocked
+// at the module level. The code in ScrollViewGesture already handles the null
+// return gracefully (measurement?.width || 0).  We filter at the Reanimated
+// logger level which is more reliable than intercepting console.warn.
+{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const cfg = (global as any).__reanimatedLoggerConfig as
+    | { logFunction: (data: { level: number; message: string }) => void }
+    | undefined;
+  if (cfg) {
+    const _origLog = cfg.logFunction;
+    cfg.logFunction = (data) => {
+      if (data.message.includes("measure() cannot be used with Jest")) return;
+      _origLog(data);
+    };
+  }
+}
+
 jest.setTimeout(1000 * 12);
 
 const mockPan = jest.fn();
@@ -832,6 +851,73 @@ describe("Test the real swipe behavior of Carousel to ensure it's working as exp
     pushExpect(1);
   });
 
+  it("`overscrollEnabled` false should clamp right overdrag at the first page in non-loop mode", async () => {
+    const handlerOffset = { current: 0 };
+    const maxObservedPositiveOffset = { current: 0 };
+
+    const Wrapper: FC<Partial<TCarouselProps<string>>> = React.forwardRef((customProps, ref) => {
+      const progressAnimVal = useSharedValue(0);
+      const mockHandlerOffset = useSharedValue(handlerOffset.current);
+      const defaultRenderItem = ({
+        item,
+        index,
+      }: {
+        item: string;
+        index: number;
+      }) => (
+        <Animated.View
+          testID={`carousel-item-${index}`}
+          style={{ width: slideWidth, height: slideHeight }}
+        >
+          {item}
+        </Animated.View>
+      );
+      const { renderItem = defaultRenderItem, ...defaultProps } = createDefaultProps(
+        progressAnimVal,
+        customProps
+      );
+
+      useDerivedValue(() => {
+        handlerOffset.current = mockHandlerOffset.value;
+        maxObservedPositiveOffset.current = Math.max(
+          maxObservedPositiveOffset.current,
+          mockHandlerOffset.value
+        );
+      }, [mockHandlerOffset]);
+
+      return (
+        <Carousel
+          {...defaultProps}
+          defaultScrollOffsetValue={mockHandlerOffset}
+          renderItem={renderItem}
+          ref={ref}
+        />
+      );
+    });
+
+    const { getByTestId } = render(
+      <Wrapper
+        loop={false}
+        overscrollEnabled={false}
+        pagingEnabled={false}
+        style={{ width: slideWidth, height: slideHeight }}
+      />
+    );
+    await verifyInitialRender(getByTestId);
+
+    fireGestureHandler<PanGesture>(getByGestureTestId(gestureTestId), [
+      { state: State.BEGAN, translationX: 0, velocityX: slideWidth },
+    ]);
+
+    fireGestureHandler<PanGesture>(getByGestureTestId(gestureTestId), [
+      { state: State.ACTIVE, translationX: slideWidth * 0.6, velocityX: slideWidth },
+    ]);
+
+    await waitFor(() => {
+      expect(maxObservedPositiveOffset.current).toBe(0);
+    });
+  });
+
   it("should keep correct page after left overscroll at first page when calling next() or scrollTo()", async () => {
     const handlerOffset = { current: 0 };
     let nextSlide: ((opts?: { animated?: boolean }) => void) | undefined;

package/src/components/ItemLayout.tsx

@@ -15,6 +15,7 @@ import type { IVisibleRanges } from "../hooks/useVisibleRanges";
 import type { ILayoutConfig } from "../layouts/stack";
 import { useGlobalState } from "../store";
 import type { TCarouselProps } from "../types";
+import { sanitizeAnimationStyle } from "../utils/sanitize-animation-style";
 
 export type TAnimationStyle = NonNullable<TCarouselProps["customAnimation"]>;
 
@@ -116,7 +117,7 @@ export const ItemLayout: React.FC<{
   }, [x, size]);
   const animatedStyle = useAnimatedStyle<ViewStyle>(() => {
     const safeSize = size || 1;
-    return animationStyle(x.value / safeSize, index);
+    return sanitizeAnimationStyle(animationStyle(x.value / safeSize, index));
   }, [animationStyle, index, x, size]);
 
   // TODO: For dynamic dimension in the future

package/src/components/Pagination/Basic/PaginationItem.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from "react";
 import React, { useState } from "react";
-import type { ViewStyle } from "react-native";
+import type { AccessibilityRole, AccessibilityState, ViewStyle } from "react-native";
 import { Pressable, View } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import Animated, {
@@ -16,6 +16,13 @@ export type DotStyle = Omit<ViewStyle, "width" | "height"> & {
   height?: number;
 };
 
+export type PaginationItemAccessibilityOverrides = {
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityRole?: AccessibilityRole;
+  accessibilityState?: AccessibilityState;
+};
+
 export const PaginationItem: React.FC<
   PropsWithChildren<{
     index: number;
@@ -27,6 +34,9 @@ export const PaginationItem: React.FC<
     activeDotStyle?: DotStyle;
     onPress: () => void;
     accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityRole?: AccessibilityRole;
+    accessibilityState?: AccessibilityState;
   }>
 > = (props) => {
   const {
@@ -40,6 +50,9 @@ export const PaginationItem: React.FC<
     children,
     onPress,
     accessibilityLabel,
+    accessibilityHint,
+    accessibilityRole,
+    accessibilityState,
   } = props;
 
   const defaultDotSize = 10;
@@ -62,6 +75,11 @@ export const PaginationItem: React.FC<
   const height = sizes.height;
 
   const [isSelected, setIsSelected] = useState(false);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? `Slide ${index + 1} of ${count}`;
+  const resolvedAccessibilityHint =
+    accessibilityHint ?? (isSelected ? "" : `Go to ${resolvedAccessibilityLabel}`);
+  const resolvedAccessibilityRole = accessibilityRole ?? "button";
+  const resolvedAccessibilityState = accessibilityState ?? { selected: isSelected };
 
   useAnimatedReaction(
     () => animValue.value,
@@ -93,10 +111,10 @@ export const PaginationItem: React.FC<
   return (
     <Pressable
       onPress={onPress}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="button"
-      accessibilityHint={isSelected ? "" : `Go to ${accessibilityLabel}`}
-      accessibilityState={{ selected: isSelected }}
+      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityRole={resolvedAccessibilityRole}
+      accessibilityHint={resolvedAccessibilityHint}
+      accessibilityState={resolvedAccessibilityState}
     >
       <View
         style={[

package/src/components/Pagination/Basic/index.tsx

@@ -2,7 +2,7 @@ import { type StyleProp, View, type ViewStyle } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 
 import React from "react";
-import type { DotStyle } from "./PaginationItem";
+import type { DotStyle, PaginationItemAccessibilityOverrides } from "./PaginationItem";
 import { PaginationItem } from "./PaginationItem";
 
 export interface BasicProps<T> {
@@ -16,6 +16,14 @@ export interface BasicProps<T> {
   size?: number;
   onPress?: (index: number) => void;
   carouselName?: string;
+  /**
+   * Optional accessibility overrides for each pagination item.
+   * Use this to fully control screen reader announcements per dot.
+   */
+  paginationItemAccessibility?: (
+    index: number,
+    length: number
+  ) => PaginationItemAccessibilityOverrides;
 }
 
 export const Basic = <T extends {}>(props: BasicProps<T>) => {
@@ -30,6 +38,7 @@ export const Basic = <T extends {}>(props: BasicProps<T>) => {
     renderItem,
     onPress,
     carouselName,
+    paginationItemAccessibility,
   } = props;
 
   if (
@@ -57,6 +66,11 @@ export const Basic = <T extends {}>(props: BasicProps<T>) => {
       ]}
     >
       {data.map((item, index) => {
+        const defaultAccessibilityLabel = carouselName
+          ? `Slide ${index + 1} of ${data.length} - ${carouselName}`
+          : `Slide ${index + 1} of ${data.length}`;
+        const accessibilityOverrides = paginationItemAccessibility?.(index, data.length) ?? {};
+
         return (
           <PaginationItem
             key={index}
@@ -68,7 +82,12 @@ export const Basic = <T extends {}>(props: BasicProps<T>) => {
             horizontal={!horizontal}
             activeDotStyle={activeDotStyle}
             onPress={() => onPress?.(index)}
-            accessibilityLabel={`Slide ${index + 1} of ${data.length} - ${carouselName}`}
+            accessibilityLabel={
+              accessibilityOverrides.accessibilityLabel ?? defaultAccessibilityLabel
+            }
+            accessibilityHint={accessibilityOverrides.accessibilityHint}
+            accessibilityRole={accessibilityOverrides.accessibilityRole}
+            accessibilityState={accessibilityOverrides.accessibilityState}
           >
             {renderItem?.(item, index)}
           </PaginationItem>

package/src/components/Pagination/Custom/PaginationItem.tsx

@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from "react";
 import React, { useState } from "react";
+import type { AccessibilityRole, AccessibilityState } from "react-native";
 import { Pressable } from "react-native";
 import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
@@ -16,6 +17,13 @@ import { scheduleOnRN } from "react-native-worklets";
 
 type AnimatedDefaultStyle = ViewStyle | ImageStyle | TextStyle;
 
+export type PaginationItemAccessibilityOverrides = {
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityRole?: AccessibilityRole;
+  accessibilityState?: AccessibilityState;
+};
+
 export type DotStyle = Omit<ViewStyle, "width" | "height" | "backgroundColor" | "borderRadius"> & {
   width?: number;
   height?: number;
@@ -39,6 +47,9 @@ export const PaginationItem: React.FC<
       length: number
     ) => AnimatedDefaultStyle;
     accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityRole?: AccessibilityRole;
+    accessibilityState?: AccessibilityState;
   }>
 > = (props) => {
   const defaultDotSize = 10;
@@ -54,6 +65,9 @@ export const PaginationItem: React.FC<
     customReanimatedStyle,
     onPress,
     accessibilityLabel,
+    accessibilityHint,
+    accessibilityRole,
+    accessibilityState,
   } = props;
   const customReanimatedStyleRef = useSharedValue<AnimatedDefaultStyle>({});
   const handleCustomAnimation = (progress: number) => {
@@ -61,6 +75,11 @@ export const PaginationItem: React.FC<
   };
 
   const [isSelected, setIsSelected] = useState(false);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? `Slide ${index + 1} of ${count}`;
+  const resolvedAccessibilityHint =
+    accessibilityHint ?? (isSelected ? "" : `Go to ${resolvedAccessibilityLabel}`);
+  const resolvedAccessibilityRole = accessibilityRole ?? "button";
+  const resolvedAccessibilityState = accessibilityState ?? { selected: isSelected };
 
   useDerivedValue(() => {
     scheduleOnRN(handleCustomAnimation, animValue?.value);
@@ -121,10 +140,10 @@ export const PaginationItem: React.FC<
   return (
     <Pressable
       onPress={onPress}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="button"
-      accessibilityHint={isSelected ? "" : `Go to ${accessibilityLabel}`}
-      accessibilityState={{ selected: isSelected }}
+      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityRole={resolvedAccessibilityRole}
+      accessibilityHint={resolvedAccessibilityHint}
+      accessibilityState={resolvedAccessibilityState}
     >
       <Animated.View
         style={[

package/src/components/Pagination/Custom/index.tsx

@@ -3,7 +3,7 @@ import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { View } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 
-import type { DotStyle } from "./PaginationItem";
+import type { DotStyle, PaginationItemAccessibilityOverrides } from "./PaginationItem";
 import { PaginationItem } from "./PaginationItem";
 
 export interface ShapeProps<T extends {}> {
@@ -18,6 +18,14 @@ export interface ShapeProps<T extends {}> {
   onPress?: (index: number) => void;
   customReanimatedStyle?: (progress: number, index: number, length: number) => AnimatedDefaultStyle;
   carouselName?: string;
+  /**
+   * Optional accessibility overrides for each pagination item.
+   * Use this to fully control screen reader announcements per dot.
+   */
+  paginationItemAccessibility?: (
+    index: number,
+    length: number
+  ) => PaginationItemAccessibilityOverrides;
 }
 
 type AnimatedDefaultStyle = ViewStyle | ImageStyle | TextStyle;
@@ -35,6 +43,7 @@ export const Custom = <T extends {}>(props: ShapeProps<T>) => {
     onPress,
     customReanimatedStyle,
     carouselName,
+    paginationItemAccessibility,
   } = props;
 
   if (
@@ -69,6 +78,11 @@ export const Custom = <T extends {}>(props: ShapeProps<T>) => {
       ]}
     >
       {data.map((item, index) => {
+        const defaultAccessibilityLabel = carouselName
+          ? `Slide ${index + 1} of ${data.length} - ${carouselName}`
+          : `Slide ${index + 1} of ${data.length}`;
+        const accessibilityOverrides = paginationItemAccessibility?.(index, data.length) ?? {};
+
         return (
           <PaginationItem
             key={index}
@@ -81,7 +95,12 @@ export const Custom = <T extends {}>(props: ShapeProps<T>) => {
             activeDotStyle={activeDotStyle}
             customReanimatedStyle={customReanimatedStyle}
             onPress={() => onPress?.(index)}
-            accessibilityLabel={`Slide ${index + 1} of ${data.length} - ${carouselName}`}
+            accessibilityLabel={
+              accessibilityOverrides.accessibilityLabel ?? defaultAccessibilityLabel
+            }
+            accessibilityHint={accessibilityOverrides.accessibilityHint}
+            accessibilityRole={accessibilityOverrides.accessibilityRole}
+            accessibilityState={accessibilityOverrides.accessibilityState}
           >
             {renderItem?.(item, index)}
           </PaginationItem>

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

@@ -1,7 +1,6 @@
-import { fireEvent, render } from "@testing-library/react-native";
+import { act, fireEvent, render } from "@testing-library/react-native";
 import { View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
-import { act } from "react-test-renderer";
 
 import { Pagination } from ".";
 
@@ -9,6 +8,16 @@ 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 = () => {
@@ -41,7 +50,9 @@ describe("Pagination.Basic", () => {
     };
 
     const { UNSAFE_root } = render(<Test />);
-    await act(async () => {});
+    await act(async () => {
+      jest.advanceTimersByTime(100);
+    });
 
     const buttons = UNSAFE_root.findAll(
       (node) =>
@@ -58,9 +69,36 @@ describe("Pagination.Basic", () => {
 
     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", () => {
@@ -95,7 +133,9 @@ describe("Pagination.Custom", () => {
     };
 
     const { UNSAFE_root } = render(<Test />);
-    await act(async () => {});
+    await act(async () => {
+      jest.advanceTimersByTime(100);
+    });
 
     // @ts-expect-error
     const container = UNSAFE_root.findByType(View);
@@ -106,4 +146,33 @@ describe("Pagination.Custom", () => {
     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.tsx

@@ -22,6 +22,7 @@ import { Easing } from "../constants";
 import { usePanGestureProxy } from "../hooks/usePanGestureProxy";
 import { useGlobalState } from "../store";
 import type { WithTimingAnimation } from "../types";
+import { computeGestureTranslation } from "../utils/compute-gesture-translation";
 import { dealWithAnimation } from "../utils/deal-with-animation";
 
 interface Props {
@@ -207,8 +208,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       function withProcessTranslation(translation: number) {
         if (!loop && !overscrollEnabled) {
           const limit = getLimit();
-          const sign = Math.sign(translation);
-          return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
+          return Math.min(0, Math.max(-limit, translation));
         }
 
         return translation;
@@ -296,8 +296,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
 
     if (!loop && !overscrollEnabled) {
       const limit = getLimit();
-      const sign = Math.sign(translation);
-      return sign * Math.max(0, Math.min(limit, Math.abs(translation)));
+      return Math.min(0, Math.max(-limit, translation));
     }
 
     return translation;
@@ -370,18 +369,14 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       if (fixedDirection === "negative") panTranslation = -Math.abs(panTranslation);
       else if (fixedDirection === "positive") panTranslation = +Math.abs(panTranslation);
 
-      if (!loop) {
-        if (translation.value > 0 || translation.value < -max.value) {
-          const boundary = translation.value > 0 ? 0 : -max.value;
-          const fixed = boundary - panOffset.value;
-          const dynamic = panTranslation - fixed;
-          translation.value = boundary + dynamic * 0.5;
-          return;
-        }
-      }
-
-      const translationValue = panOffset.value + panTranslation;
-      translation.value = translationValue;
+      translation.value = computeGestureTranslation({
+        loop,
+        overscrollEnabled: overscrollEnabled ?? true,
+        currentTranslation: translation.value,
+        panOffset: panOffset.value,
+        panTranslation,
+        max: max.value,
+      });
     },
     [
       isHorizontal,

package/src/hooks/useCarouselController.test.tsx

@@ -228,6 +228,76 @@ describe("useCarouselController", () => {
     expect(mockHandlerOffset.value).toBe(-900); // size * 3
   });
 
+  it("should keep negative offsets when scrollTo() moves backward in non-loop mode", () => {
+    const { result } = renderHook(
+      () =>
+        useCarouselController({
+          ...defaultProps,
+          loop: false,
+        }),
+      { wrapper }
+    );
+
+    act(() => {
+      result.current.scrollTo({ index: 3, animated: false });
+    });
+    expect(mockHandlerOffset.value).toBe(-900);
+
+    act(() => {
+      result.current.scrollTo({ index: 2, animated: false });
+    });
+    expect(mockHandlerOffset.value).toBe(-600);
+
+    act(() => {
+      result.current.scrollTo({ index: 1, animated: false });
+    });
+    expect(mockHandlerOffset.value).toBe(-300);
+  });
+
+  it("should keep negative offsets when animated backward scrollTo() runs in non-loop mode", () => {
+    const onFinished = jest.fn();
+    const { result } = renderHook(
+      () =>
+        useCarouselController({
+          ...defaultProps,
+          loop: false,
+        }),
+      { wrapper }
+    );
+
+    act(() => {
+      result.current.scrollTo({ index: 3, animated: true });
+    });
+    expect(mockHandlerOffset.value).toBe(-900);
+
+    act(() => {
+      result.current.scrollTo({ index: 2, animated: true, onFinished });
+    });
+    expect(mockHandlerOffset.value).toBe(-600);
+    expect(onFinished).toHaveBeenCalled();
+  });
+
+  it("should map scrollTo({ index: 0 }) to zero offset from end in non-loop mode", () => {
+    const { result } = renderHook(
+      () =>
+        useCarouselController({
+          ...defaultProps,
+          loop: false,
+        }),
+      { wrapper }
+    );
+
+    act(() => {
+      result.current.scrollTo({ index: 4, animated: false });
+    });
+    expect(mockHandlerOffset.value).toBe(-1200);
+
+    act(() => {
+      result.current.scrollTo({ index: 0, animated: false });
+    });
+    expect(Math.abs(mockHandlerOffset.value)).toBe(0);
+  });
+
   it("should handle animation callbacks", () => {
     const onFinished = jest.fn();
     const { result } = renderHook(() => useCarouselController(defaultProps), { wrapper });
@@ -1004,13 +1074,31 @@ describe("useCarouselController edge cases and uncovered lines", () => {
     expect(typeof currentIndex).toBe("number");
   });
 
-  it("should handle fixed direction in scrollTo", () => {
+  it("should handle positive fixed direction in scrollTo", () => {
+    const { result } = renderHook(
+      () =>
+        useCarouselController({
+          ...defaultProps,
+          loop: true,
+          fixedDirection: "positive",
+        }),
+      { wrapper }
+    );
+
+    act(() => {
+      result.current.scrollTo({ index: 3, animated: false });
+    });
+
+    expect(mockHandlerOffset.value).toBe(900); // size * 3
+  });
+
+  it("should handle negative fixed direction in scrollTo", () => {
     const { result } = renderHook(
       () =>
         useCarouselController({
           ...defaultProps,
           loop: true,
-          fixedDirection: 1,
+          fixedDirection: "negative",
         }),
       { wrapper }
     );
@@ -1022,7 +1110,7 @@ describe("useCarouselController edge cases and uncovered lines", () => {
     expect(mockHandlerOffset.value).toBe(-900); // size * 3
   });
 
-  it("should handle complex loop calculations in scrollTo", () => {
+  it("should handle scrollTo when loop position is close to next cycle", () => {
     const { result } = renderHook(
       () =>
         useCarouselController({
@@ -1032,14 +1120,13 @@ describe("useCarouselController edge cases and uncovered lines", () => {
       { wrapper }
     );
 
-    // Set to a high offset to test loop boundary calculations
-    mockHandlerOffset.value = -1800; // 6 * size, beyond data length
+    mockHandlerOffset.value = -900; // 3 * size, more than half-way through current cycle
 
     act(() => {
       result.current.scrollTo({ index: 1, animated: false });
     });
 
-    expect(typeof mockHandlerOffset.value).toBe("number");
+    expect(mockHandlerOffset.value).toBe(-1800);
   });
 
   it("should get shared index correctly", () => {