@r0b0t3d/react-native-carousel 3.4.6 → 3.4.8

package/lib/commonjs/components/Carousel.js

@@ -4,35 +4,48 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactNative = require("react-native");
-
 var _reactNativeHooks = require("@r0b0t3d/react-native-hooks");
-
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-
+var _reactNativeWorklets = require("react-native-worklets");
 var _PageItem = _interopRequireDefault(require("./PageItem"));
-
 var _utils = require("../utils");
-
 var _useCarouselContext = require("./useCarouselContext");
-
 var _useInternalCarouselContext = require("./useInternalCarouselContext");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// ---------------------------------------------------------------------------
+// Carousel state machine
+// ---------------------------------------------------------------------------
+// Transitions:
+//
+//   IDLE ── onBeginDrag ──► DRAGGING
+//   DRAGGING ── onMomentumEnd ──► IDLE (or LOOP_JUMP at boundary)
+//   LOOP_JUMP ── onScroll (arrival) ──► IDLE
+//   LOOP_JUMP ── onBeginDrag (user overrides) ──► DRAGGING
+//
+// Page change (onPageChange / animatedPage) only fires at IDLE transitions.
+// Autoplay only advances when state === IDLE.
+// ---------------------------------------------------------------------------
+var CarouselState = /*#__PURE__*/function (CarouselState) {
+  CarouselState[CarouselState["IDLE"] = 0] = "IDLE";
+  CarouselState[CarouselState["DRAGGING"] = 1] = "DRAGGING";
+  CarouselState[CarouselState["LOOP_JUMP"] = 2] = "LOOP_JUMP";
+  return CarouselState;
+}(CarouselState || {}); // ---------------------------------------------------------------------------
+// Terminology
+// ---------------------------------------------------------------------------
+//   render index  – position in the padded pageItems array (includes loop
+//                   clones at head/tail). Used for scroll offsets.
+//   logical index – position in the original data array (0 .. data.length-1).
+//                   All consumer-facing callbacks receive logical indices.
+// ---------------------------------------------------------------------------
 const getScreenWidth = () => {
   return _reactNative.Dimensions.get('screen').width;
 };
-
 function Carousel({
   style,
   data,
@@ -53,26 +66,36 @@ function Carousel({
   onPageChange,
   scrollViewProps = {},
   keyExtractor,
-  onItemPress
+  onItemPress,
+  disableItemPress = false,
+  scrollViewRef: externalScrollViewRef
 }) {
-  const currentPage = (0, _reactNativeReanimated.useSharedValue)(0);
+  // ---- shared values (UI-thread state) ------------------------------------
+
+  const currentRenderPage = (0, _reactNativeReanimated.useSharedValue)(0);
+  const currentLogicalPage = (0, _reactNativeReanimated.useSharedValue)(0);
   const animatedScroll = (0, _reactNativeReanimated.useSharedValue)(0);
+  const carouselState = (0, _reactNativeReanimated.useSharedValue)(CarouselState.IDLE);
+  // Destination render page for a loop jump. Used to detect arrival via
+  // onScroll and release the jump lock.
+  const jumpDestination = (0, _reactNativeReanimated.useSharedValue)(-1);
+  // Suppresses parallax/opacity animations during instant scrolls on
+  // Android where the scroll isn't truly synchronous.
   const freeze = (0, _reactNativeReanimated.useSharedValue)(false);
-  const [isDragging, setDragging] = (0, _react.useState)(false);
-  const expectedPosition = (0, _reactNativeReanimated.useSharedValue)(-1);
-  const pageMapper = (0, _react.useRef)({});
+  // When false, autoplay is suppressed (app backgrounded).
+  const appActive = (0, _reactNativeReanimated.useSharedValue)(true);
+  const internalAnimatedRef = (0, _reactNativeReanimated.useAnimatedRef)();
   const {
     currentPage: animatedPage,
     totalPage
   } = (0, _useCarouselContext.useCarouselContext)();
-  (0, _react.useEffect)(() => {
-    animatedScroll.value = currentPage.value * sliderWidth;
-  }, []);
+
+  // ---- derived values -----------------------------------------------------
+
   const horizontalPadding = (0, _react.useMemo)(() => {
     const padding = (sliderWidth - itemWidth) / 2;
     return firstItemAlignment === 'center' || loop ? padding : spaceHeadTail;
   }, [sliderWidth, itemWidth, firstItemAlignment, loop, spaceHeadTail]);
-  const scrollViewRef = (0, _reactNativeReanimated.useAnimatedRef)();
   const offsets = (0, _react.useMemo)(() => {
     return (0, _utils.generateOffsets)({
       sliderWidth,
@@ -80,89 +103,122 @@ function Carousel({
       itemCount: data.length + (loop ? additionalPagesPerSide * 2 : 0),
       horizontalPadding
     });
-  }, [sliderWidth, itemWidth, data, horizontalPadding]);
+  }, [sliderWidth, itemWidth, data.length, loop, additionalPagesPerSide, horizontalPadding]);
   const pageItems = (0, _react.useMemo)(() => {
-    if (!data) {
+    if (!data || data.length === 0) {
       return [];
     }
-
-    totalPage.value = data.length;
-
     if (loop) {
       const headItems = data.slice(data.length - additionalPagesPerSide, data.length);
       const tailItems = data.slice(0, additionalPagesPerSide);
-      const newItems = [...headItems, ...data, ...tailItems];
+      return [...headItems, ...data, ...tailItems];
+    }
+    return data;
+  }, [data, loop, additionalPagesPerSide]);
 
-      for (let i = 0; i < newItems.length; i++) {
-        pageMapper.current[i] = (data.length - additionalPagesPerSide + i) % data.length;
-      }
+  // ---- side effects -------------------------------------------------------
 
-      return newItems;
-    } else {
-      for (let i = 0; i < data.length; i++) {
-        pageMapper.current[i] = i;
-      }
+  (0, _react.useEffect)(() => {
+    totalPage.value = data.length;
+  }, [data.length, totalPage]);
 
-      return data;
+  // When the carousel layout or data changes (orientation, split-screen,
+  // toggling loop, data shrinking), reposition so the current logical
+  // page stays visible at its new render index and scroll offset.
+  (0, _react.useEffect)(() => {
+    if (data.length === 0 || offsets.length === 0) return;
+
+    // Clamp logical page in case data shrank below current position.
+    const clampedLogical = Math.min(currentLogicalPage.value, data.length - 1);
+    const renderIdx = loop ? clampedLogical + additionalPagesPerSide : clampedLogical;
+
+    // Defensive: ensure render index is within bounds.
+    const safeRenderIdx = Math.max(0, Math.min(renderIdx, offsets.length - 1));
+    const safeLogicalIdx = (0, _utils.getLogicalPage)(safeRenderIdx, data.length, additionalPagesPerSide, loop);
+    currentRenderPage.value = safeRenderIdx;
+    currentLogicalPage.value = safeLogicalIdx;
+    animatedPage.value = safeLogicalIdx;
+    (0, _reactNativeWorklets.scheduleOnUI)(idx => {
+      'worklet';
+
+      (0, _reactNativeReanimated.scrollTo)(internalAnimatedRef, offsets[idx], 0, false);
+    }, safeRenderIdx);
+    animatedScroll.value = offsets[safeRenderIdx] ?? 0;
+    // Fire onPageChange if logical page actually changed (e.g. data shrank).
+    if (safeLogicalIdx !== currentLogicalPage.value) {
+      (0, _reactNativeWorklets.scheduleOnRN)(handlePageChange, safeLogicalIdx);
     }
-  }, [data, loop]);
-  const getActualPage = (0, _react.useCallback)(page => {
-    return pageMapper.current[page];
-  }, []);
-  const getRef = (0, _react.useCallback)(() => {
-    if (!scrollViewRef.current) return;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.length, sliderWidth, itemWidth, loop, additionalPagesPerSide]);
+
+  // ---- app-state listener (pause autoplay when backgrounded) --------------
+
+  (0, _react.useEffect)(() => {
+    const sub = _reactNative.AppState.addEventListener('change', state => {
+      appActive.value = state === 'active';
+    });
+    return () => sub.remove();
+  }, [appActive]);
+
+  // ---- page-change callback (JS thread) -----------------------------------
 
-    if (scrollViewRef.current.scrollTo) {
-      return scrollViewRef.current;
+  const handlePageChange = (0, _react.useCallback)(logicalPage => {
+    animatedPage.value = logicalPage;
+    if (onPageChange) {
+      onPageChange(logicalPage);
     }
+  }, [onPageChange, animatedPage]);
 
-    return scrollViewRef.current.getNode();
-  }, []);
+  // ---- scroll helpers -----------------------------------------------------
+
+  // Safe accessor: returns offset for a render index, clamping to valid
+  // range and falling back to 0 if offsets is empty.
+  const renderOffset = (0, _react.useCallback)(renderIdx => {
+    if (offsets.length === 0) return 0;
+    const clamped = Math.max(0, Math.min(renderIdx, offsets.length - 1));
+    return offsets[clamped];
+  }, [offsets]);
   const handleScrollTo = (0, _react.useCallback)((page, animated = true) => {
-    if (getRef()) {
-      getRef().scrollTo({
-        x: offsets[page],
-        y: 0,
-        animated
-      });
-    }
-  }, [getRef, offsets]);
-  const jumpTo = (0, _react.useCallback)((page, delay = 200) => {
-    expectedPosition.value = page;
+    (0, _reactNativeWorklets.scheduleOnUI)((pageIndex, isAnimated) => {
+      'worklet';
 
-    if (_reactNative.Platform.OS === 'android') {
-      freeze.value = true;
-    }
+      (0, _reactNativeReanimated.scrollTo)(internalAnimatedRef, offsets[pageIndex], 0, isAnimated);
+    }, page, animated);
+  }, [offsets, internalAnimatedRef]);
+
+  // ---- navigation ---------------------------------------------------------
 
-    setTimeout(() => {
-      animatedScroll.value = offsets[page];
-      handleScrollTo(page, false);
-    }, delay);
-  }, [handleScrollTo, animatedScroll, freeze]);
   const goNext = (0, _react.useCallback)(() => {
-    const next = currentPage.value + 1;
-    handleScrollTo(next);
-  }, [handleScrollTo]);
+    if (carouselState.value !== CarouselState.IDLE || data.length === 0) return;
+    const next = currentRenderPage.value + 1;
+    if (next < offsets.length) {
+      currentRenderPage.value = next;
+      handleScrollTo(next);
+    }
+  }, [handleScrollTo, offsets.length, data.length]);
   const goPrev = (0, _react.useCallback)(() => {
-    const prev = currentPage.value - 1;
-    handleScrollTo(prev);
+    if (carouselState.value !== CarouselState.IDLE || data.length === 0) return;
+    const prev = currentRenderPage.value - 1;
+    if (prev >= 0) {
+      currentRenderPage.value = prev;
+      handleScrollTo(prev);
+    }
   }, [handleScrollTo]);
   const snapToItem = (0, _react.useCallback)((index, animated = true) => {
+    if (data.length === 0) return;
     if (index < 0 || index >= data.length) {
       console.error(`Index not valid ${index}`);
       return;
     }
+    const renderIndex = loop ? index + additionalPagesPerSide : index;
+    const clamped = Math.max(0, Math.min(renderIndex, offsets.length - 1));
+    currentRenderPage.value = clamped;
+    currentLogicalPage.value = index;
+    handleScrollTo(clamped, animated);
+  }, [loop, additionalPagesPerSide, offsets.length, handleScrollTo, data.length]);
 
-    let pageIndex = index;
+  // ---- context wiring -----------------------------------------------------
 
-    if (loop) {
-      const indices = Object.keys(pageMapper.current).filter(idx => pageMapper.current[Number(idx)] === index).map(idx => Number(idx));
-      const toIndex = (0, _utils.findNearestPage)(currentPage.value, indices, 10);
-      pageIndex = indices[toIndex];
-    }
-
-    handleScrollTo(pageIndex, animated);
-  }, [handleScrollTo]);
   const {
     setCarouselHandlers
   } = (0, _useInternalCarouselContext.useInternalCarouselContext)();
@@ -175,128 +231,163 @@ function Carousel({
       });
     }
   }, [goNext, goPrev, snapToItem, setCarouselHandlers]);
-  const handlePageChange = (0, _react.useCallback)(page => {
-    const actualPage = getActualPage(page);
-    animatedPage.value = actualPage;
-
-    if (onPageChange) {
-      onPageChange(actualPage);
-    }
-
-    if (!loop) return;
-
-    if (page === pageItems.length - 1) {
-      jumpTo(additionalPagesPerSide * 2 - 1);
-    } else if (page === 0) {
-      jumpTo(pageItems.length - additionalPagesPerSide * 2);
-    }
-  }, [onPageChange, loop, getActualPage, jumpTo, pageItems]);
-  const refreshPage = (0, _react.useCallback)(offset => {
-    'worklet';
 
-    const pageNum = (0, _utils.findNearestPage)(offset, offsets, 20);
+  // ---- autoplay -----------------------------------------------------------
 
-    if (pageNum === -1) {
-      return;
+  // isDragging acts as a debounce — autoplay resumes 200ms after the
+  // user lifts their finger, preventing an immediate auto-advance.
+  const [autoplayPaused, setAutoplayPaused] = (0, _react.useState)(false);
+  (0, _reactNativeHooks.useInterval)(() => {
+    // Only advance when carousel is idle (not dragging, not in a
+    // loop jump) and the app is in the foreground.
+    if (carouselState.value === CarouselState.IDLE && appActive.value) {
+      goNext();
     }
+  }, !autoPlay || !loop || autoplayPaused ? -1 : duration);
 
-    if (pageNum !== currentPage.value) {
-      if (expectedPosition.value === pageNum) {
-        freeze.value = false;
-      }
+  // ---- initial page setup -------------------------------------------------
 
-      currentPage.value = pageNum;
-      (0, _reactNativeReanimated.runOnJS)(handlePageChange)(pageNum);
-    }
-  }, [isDragging, offsets, handlePageChange]);
-  (0, _reactNativeHooks.useInterval)(() => {
-    goNext();
-  }, !autoPlay || !loop || isDragging ? -1 : duration);
   (0, _react.useEffect)(() => {
+    if (data.length === 0) return;
     if (initialPage < 0 || initialPage >= data.length) {
       console.error(`Invalid initialPage ${initialPage}`);
       return;
     }
+    const renderIndex = loop ? initialPage + additionalPagesPerSide : initialPage;
+    const safeIdx = Math.max(0, Math.min(renderIndex, offsets.length - 1));
+    currentRenderPage.value = safeIdx;
+    currentLogicalPage.value = initialPage;
+    animatedPage.value = initialPage;
+    (0, _reactNativeWorklets.scheduleOnUI)(idx => {
+      'worklet';
+
+      (0, _reactNativeReanimated.scrollTo)(internalAnimatedRef, offsets[idx], 0, false);
+    }, safeIdx);
+    animatedScroll.value = offsets[safeIdx] ?? 0;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    let pageIndex = initialPage;
+  // ---- scroll handler (UI thread worklet) ---------------------------------
 
-    if (loop) {
-      pageIndex = initialPage + additionalPagesPerSide;
-    }
+  const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
+    onScroll: event => {
+      animatedScroll.value = event.contentOffset.x;
 
-    if (currentPage.value !== pageIndex) {
-      setTimeout(() => {
-        handleScrollTo(pageIndex, false);
+      // During a loop jump, detect when the scroll arrives at the
+      // destination and transition back to IDLE.
+      if (carouselState.value === CarouselState.LOOP_JUMP && jumpDestination.value !== -1) {
+        const nearest = (0, _utils.findNearestPage)(event.contentOffset.x, offsets);
+        if (nearest === jumpDestination.value) {
+          freeze.value = false;
+          carouselState.value = CarouselState.IDLE;
+          jumpDestination.value = -1;
+        }
+      }
+    },
+    onBeginDrag: _e => {
+      // User gesture always wins. Cancel any in-flight loop jump
+      // so the carousel doesn't fight the user's drag.
+      if (carouselState.value === CarouselState.LOOP_JUMP) {
+        jumpDestination.value = -1;
         freeze.value = false;
-      });
-    }
-  }, []);
-  const beginDrag = (0, _react.useCallback)(() => {
-    if (autoPlay) {
-      setDragging(true);
-    }
-  }, [autoPlay]);
-  const endDrag = (0, _react.useCallback)(() => {
-    if (autoPlay) {
-      setTimeout(() => setDragging(false), 200);
+      }
+      carouselState.value = CarouselState.DRAGGING;
+      (0, _reactNativeWorklets.scheduleOnRN)(setAutoplayPaused, true);
+    },
+    onEndDrag: _e => {
+      // Debounce autoplay resume — let momentum settle first.
+      (0, _reactNativeWorklets.scheduleOnRN)(setAutoplayPaused, false);
+    },
+    onMomentumEnd: event => {
+      // Only process page changes when dragging ended naturally.
+      // Loop jumps are handled in onScroll.
+      if (carouselState.value !== CarouselState.DRAGGING) {
+        return;
+      }
+      const offset = event.contentOffset.x;
+      if (isNaN(offset) || offsets.length === 0) {
+        carouselState.value = CarouselState.IDLE;
+        return;
+      }
+      const renderPage = (0, _utils.findNearestPage)(offset, offsets);
+
+      // Loop boundary — user scrolled into the cloned head/tail pages.
+      if (loop) {
+        const boundaryTarget = (0, _utils.getLoopBoundaryTarget)(renderPage, data.length, additionalPagesPerSide);
+        if (boundaryTarget !== -1) {
+          // Jump instantly to the matching real page.
+          // On Android, freeze animations during the jump to prevent
+          // a visual flash from the clones.
+          carouselState.value = CarouselState.LOOP_JUMP;
+          jumpDestination.value = boundaryTarget;
+          freeze.value = _reactNative.Platform.OS === 'android';
+          animatedScroll.value = offsets[boundaryTarget];
+          (0, _reactNativeReanimated.scrollTo)(internalAnimatedRef, offsets[boundaryTarget], 0, false);
+          currentRenderPage.value = boundaryTarget;
+          currentLogicalPage.value = (0, _utils.getLogicalPage)(boundaryTarget, data.length, additionalPagesPerSide, loop);
+          (0, _reactNativeWorklets.scheduleOnRN)(handlePageChange, currentLogicalPage.value);
+          return;
+        }
+      }
+
+      // Normal page change — no loop boundary involved.
+      carouselState.value = CarouselState.IDLE;
+      currentRenderPage.value = renderPage;
+      currentLogicalPage.value = (0, _utils.getLogicalPage)(renderPage, data.length, additionalPagesPerSide, loop);
+      (0, _reactNativeWorklets.scheduleOnRN)(handlePageChange, currentLogicalPage.value);
     }
-  }, [autoPlay]);
+  }, [offsets, loop, data.length, additionalPagesPerSide, handlePageChange, internalAnimatedRef]);
+
+  // ---- render helpers -----------------------------------------------------
+
   const getItemKey = (0, _react.useCallback)((item, index) => {
     if (keyExtractor) {
       return `${keyExtractor(item, index)}-${index}`;
     }
-
     if (item.id) {
       return `${item.id}-${index}`;
     }
-
-    console.error('You need implement keyExtractor');
-    return '';
+    return `carousel-item-${index}`;
   }, [keyExtractor]);
-  const scrollHandler = (0, _reactNativeReanimated.useAnimatedScrollHandler)({
-    onScroll: event => {
-      animatedScroll.value = event.contentOffset.x;
-      refreshPage(animatedScroll.value);
-    },
-    onBeginDrag: _e => {
-      (0, _reactNativeReanimated.runOnJS)(beginDrag)();
-    },
-    onEndDrag: _e => {
-      (0, _reactNativeReanimated.runOnJS)(endDrag)();
-    }
-  }, [beginDrag, endDrag, refreshPage]);
-  const containerStyle = (0, _react.useCallback)(index => {
-    if (firstItemAlignment === 'start') {
+  const containerStyles = (0, _react.useMemo)(() => {
+    if (data.length === 0) return [];
+    return pageItems.map((_, i) => {
+      if (firstItemAlignment !== 'start') {
+        return {
+          paddingLeft: spaceBetween / 2,
+          paddingRight: spaceBetween / 2
+        };
+      }
+      const logicalIndex = loop ? (0, _utils.getLogicalPage)(i, data.length, additionalPagesPerSide, loop) : i;
       return {
-        paddingLeft: index === 0 ? 0 : spaceBetween / 2,
-        paddingRight: index === data.length - 1 ? 0 : spaceBetween / 2
+        paddingLeft: logicalIndex === 0 ? 0 : spaceBetween / 2,
+        paddingRight: logicalIndex === data.length - 1 ? 0 : spaceBetween / 2
       };
-    }
-
-    return {
-      paddingLeft: spaceBetween / 2,
-      paddingRight: spaceBetween / 2
-    };
-  }, [spaceBetween, firstItemAlignment]);
-  const handleItemPress = (0, _react.useCallback)((item, index) => () => {
-    handleScrollTo(index);
-
-    if (onItemPress) {
-      onItemPress(item, index);
-    }
-  }, [onItemPress, handlePageChange]);
-  const contentContainerStyle = (0, _react.useMemo)(() => {
-    return {
-      paddingHorizontal: horizontalPadding
-    };
-  }, [horizontalPadding]);
-
-  function renderPage(item, i) {
-    return /*#__PURE__*/_react.default.createElement(_PageItem.default, {
-      key: getItemKey(item, i),
-      containerStyle: containerStyle(i),
+    });
+  }, [pageItems, firstItemAlignment, spaceBetween, data.length, loop, additionalPagesPerSide]);
+  const itemPressHandlers = (0, _react.useMemo)(() => {
+    if (disableItemPress) return [];
+    return pageItems.map((item, i) => {
+      const logicalIndex = loop ? (0, _utils.getLogicalPage)(i, data.length, additionalPagesPerSide, loop) : i;
+      return () => {
+        handleScrollTo(i);
+        if (onItemPress) {
+          onItemPress(item, logicalIndex);
+        }
+      };
+    });
+  }, [pageItems, disableItemPress, loop, data.length, additionalPagesPerSide, handleScrollTo, onItemPress]);
+  const contentContainerStyle = (0, _react.useMemo)(() => ({
+    paddingHorizontal: horizontalPadding
+  }), [horizontalPadding]);
+  const renderPage = (0, _react.useCallback)((item, i) => {
+    // Compute the logical index so consumer callbacks (renderItem,
+    // onItemPress via `index` prop) receive logical, not render.
+    const logicalIndex = loop ? (0, _utils.getLogicalPage)(i, data.length, additionalPagesPerSide, loop) : i;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageItem.default, {
+      containerStyle: containerStyles[i],
       item: item,
-      index: i,
+      index: logicalIndex,
       offset: offsets[i],
       itemWidth: itemWidth,
       animatedValue: animatedScroll,
@@ -305,15 +396,21 @@ function Carousel({
       freeze: freeze,
       inactiveOpacity: inactiveOpacity,
       inactiveScale: inactiveScale,
-      onPress: handleItemPress(item, i)
-    });
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: style
-  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.ScrollView, _extends({}, scrollViewProps, {
-    ref: scrollViewRef,
-    style: styles.container,
+      onPress: itemPressHandlers[i]
+    }, getItemKey(item, i));
+  }, [loop, data.length, additionalPagesPerSide, getItemKey, containerStyles, offsets, itemWidth, animatedScroll, animation, renderItem, freeze, inactiveOpacity, inactiveScale, itemPressHandlers]);
+
+  // ---- render -------------------------------------------------------------
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.ScrollView, {
+    ...scrollViewProps,
+    ref: nativeRef => {
+      internalAnimatedRef(nativeRef);
+      if (externalScrollViewRef) {
+        externalScrollViewRef.current = nativeRef;
+      }
+    },
+    style: [styles.container, style],
     horizontal: true,
     disableScrollViewPanResponder: true,
     disableIntervalMomentum: true,
@@ -325,13 +422,11 @@ function Carousel({
     scrollEventThrottle: 4,
     onScroll: scrollHandler,
     bounces: false,
-    contentContainerStyle: contentContainerStyle
-  }), pageItems.map(renderPage)));
+    contentContainerStyle: contentContainerStyle,
+    children: pageItems.map(renderPage)
+  });
 }
-
-var _default = Carousel;
-exports.default = _default;
-
+var _default = exports.default = Carousel;
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1