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

package/src/components/CarouselLayout.tsx

@@ -15,6 +15,34 @@ import { ScrollViewGesture } from "./ScrollViewGesture";
 
 export type TAnimationStyle = (value: number) => ViewStyle;
 
+export function resolveCarouselLayoutStyle(params: {
+  flattenedStyle: Partial<ViewStyle>;
+  vertical: boolean;
+  measuredSize: number;
+  sizeExplicit: boolean;
+  legacyWidth?: number;
+  legacyHeight?: number;
+}) {
+  "worklet";
+
+  const { flattenedStyle, vertical, measuredSize, sizeExplicit, legacyWidth, legacyHeight } =
+    params;
+  const { width, height } = flattenedStyle;
+  const hasLegacyMainAxisSize = vertical
+    ? typeof legacyHeight === "number" && legacyHeight > 0
+    : typeof legacyWidth === "number" && legacyWidth > 0;
+  const shouldUseMeasuredMainAxisSize = sizeExplicit || hasLegacyMainAxisSize;
+  const resolvedMainAxisSize = measuredSize || "100%";
+
+  return {
+    width:
+      width ?? (vertical ? "100%" : shouldUseMeasuredMainAxisSize ? resolvedMainAxisSize : "100%"),
+    height:
+      height ??
+      (vertical ? (shouldUseMeasuredMainAxisSize ? resolvedMainAxisSize : "100%") : "100%"),
+  };
+}
+
 export const CarouselLayout = React.forwardRef<ICarouselInstance>((_props, ref) => {
   const { props, common } = useGlobalState();
 
@@ -46,9 +74,11 @@ export const CarouselLayout = React.forwardRef<ICarouselInstance>((_props, ref)
     onProgressChange,
     customAnimation,
     defaultIndex,
+    width: legacyWidth,
+    height: legacyHeight,
   } = props;
 
-  const { size, handlerOffset, resolvedSize, sizePhase } = common;
+  const { size, handlerOffset, resolvedSize, sizePhase, sizeExplicit } = common;
   const layoutConfig = useLayoutConfig({ ...props, size });
 
   const isSizeReady = useDerivedValue(() => {
@@ -157,18 +187,31 @@ export const CarouselLayout = React.forwardRef<ICarouselInstance>((_props, ref)
   const flattenedStyle = StyleSheet.flatten(style) || {};
 
   const layoutStyle = useAnimatedStyle(() => {
-    const { width, height } = flattenedStyle;
     const measuredSize = resolvedSize.value ?? 0;
-
-    const computedWidth = width ?? (vertical ? "100%" : measuredSize || "100%");
-    const computedHeight = height ?? (vertical ? measuredSize || "100%" : "100%");
+    const { width, height } = resolveCarouselLayoutStyle({
+      flattenedStyle,
+      vertical: !!vertical,
+      measuredSize,
+      sizeExplicit,
+      legacyWidth,
+      legacyHeight,
+    });
 
     return {
-      width: computedWidth,
-      height: computedHeight,
+      width,
+      height,
       opacity: isSizeReady.value ? 1 : 0,
     };
-  }, [flattenedStyle, isSizeReady, vertical, resolvedSize, sizePhase]);
+  }, [
+    flattenedStyle,
+    isSizeReady,
+    vertical,
+    resolvedSize,
+    sizePhase,
+    sizeExplicit,
+    legacyWidth,
+    legacyHeight,
+  ]);
 
   return (
     <GestureHandlerRootView testID={testID} style={[styles.layoutContainer, style]}>

package/src/components/ItemLayout.tsx

@@ -19,6 +19,20 @@ import { sanitizeAnimationStyle } from "../utils/sanitize-animation-style";
 
 export type TAnimationStyle = NonNullable<TCarouselProps["customAnimation"]>;
 
+export function resolveItemMainAxisSize(params: {
+  explicitSize?: number;
+  effectivePageSize?: number;
+  measuredSize: number | null;
+}) {
+  "worklet";
+
+  const { explicitSize, effectivePageSize, measuredSize } = params;
+
+  return typeof explicitSize === "number"
+    ? explicitSize
+    : (effectivePageSize ?? measuredSize ?? "100%");
+}
+
 export const ItemLayout: React.FC<{
   index: number;
   handlerOffset: SharedValue<number>;
@@ -71,15 +85,25 @@ export const ItemLayout: React.FC<{
     const widthCandidate = vertical ? width : (explicitItemSize ?? explicitAxisSize);
     const heightCandidate = vertical ? (explicitItemSize ?? explicitAxisSize) : height;
 
-    const computedWidth =
-      typeof widthCandidate === "number"
+    const computedWidth = vertical
+      ? typeof widthCandidate === "number"
         ? widthCandidate
-        : (measuredSize.value.width ?? (vertical ? "100%" : (effectivePageSize ?? "100%")));
-
-    const computedHeight =
-      typeof heightCandidate === "number"
+        : (measuredSize.value.width ?? "100%")
+      : resolveItemMainAxisSize({
+          explicitSize: widthCandidate,
+          effectivePageSize,
+          measuredSize: measuredSize.value.width,
+        });
+
+    const computedHeight = vertical
+      ? resolveItemMainAxisSize({
+          explicitSize: heightCandidate,
+          effectivePageSize,
+          measuredSize: measuredSize.value.height,
+        })
+      : typeof heightCandidate === "number"
         ? heightCandidate
-        : (measuredSize.value.height ?? (vertical ? (effectivePageSize ?? "100%") : "100%"));
+        : (measuredSize.value.height ?? "100%");
 
     return {
       width: computedWidth,

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", () => {

package/src/hooks/useCarouselController.tsx

@@ -352,34 +352,32 @@ export function useCarouselController(options: IOpts): ICarouselController {
       if (!canSliding()) return;
 
       onScrollStart?.();
-      // direction -> 1 | -1
-      let direction: -1 | 1;
-      if (fixedDirection === "positive") direction = 1;
-      else if (fixedDirection === "negative") direction = -1;
-      else if (!loop) {
-        const currentPage = currentFixedPage();
-        direction = i >= currentPage ? -1 : 1;
-      } else {
-        direction = handlerOffsetDirection(handlerOffset);
-      }
-
-      // target offset
-      const offset = i * size * direction;
-      // page width size * page count
-      const totalSize = dataInfo.length * size;
-
-      let isCloseToNextLoop = false;
+      let finalOffset: number;
 
-      if (loop) {
-        isCloseToNextLoop = Math.abs(handlerOffset.value % totalSize) / totalSize >= 0.5;
+      if (!loop) {
+        // Non-loop mode always uses direct page-to-offset mapping.
+        // This avoids sign flips when moving to lower indices.
+        finalOffset = -i * size;
+      } else {
+        // direction -> 1 | -1
+        let direction: -1 | 1;
+        if (fixedDirection === "positive") direction = 1;
+        else if (fixedDirection === "negative") direction = -1;
+        else direction = handlerOffsetDirection(handlerOffset);
+
+        // target offset
+        const offset = i * size * direction;
+        // page width size * page count
+        const totalSize = dataInfo.length * size;
+        const isCloseToNextLoop = Math.abs(handlerOffset.value % totalSize) / totalSize >= 0.5;
+
+        finalOffset =
+          (Math.floor(Math.abs(handlerOffset.value / totalSize)) + (isCloseToNextLoop ? 1 : 0)) *
+            totalSize *
+            direction +
+          offset;
       }
 
-      const finalOffset =
-        (Math.floor(Math.abs(handlerOffset.value / totalSize)) + (isCloseToNextLoop ? 1 : 0)) *
-          totalSize *
-          direction +
-        offset;
-
       if (animated) {
         index.value = i;
         handlerOffset.value = scrollWithTiming(finalOffset, onFinished);

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);

package/src/hooks/useVisibleRanges.tsx

@@ -50,7 +50,12 @@ export function useVisibleRanges(options: {
 
     let newRanges: VisibleRanges;
 
-    if (!loop) {
+    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));