react-native-reanimated-carousel 5.0.0-beta.5 → 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/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));