react-native-system-ui 0.0.4 → 0.0.6

package/dist/cjs/components/swiper/Swiper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.SwiperItem = void 0;
 function _react() {
   const data = _interopRequireWildcard(require("react"));
   _react = function () {
@@ -19,775 +19,319 @@ function _reactNative() {
   return data;
 }
 var _number = require("../../utils/number");
-var _validate = require("../../utils/validate");
-var _SwiperItem = _interopRequireDefault(require("./SwiperItem"));
 var _SwiperPagIndicator = _interopRequireDefault(require("./SwiperPagIndicator"));
-var _utils = require("./utils");
-var _useSwiperWeb = require("./useSwiperWeb");
 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); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const SwiperItem = exports.SwiperItem = /*#__PURE__*/(0, _react().forwardRef)((props, ref) => {
+  const {
+    style,
+    children,
+    testID
+  } = props;
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    ref: ref,
+    style: [styles.item, style],
+    testID: testID
+  }, children);
+});
+SwiperItem.displayName = 'SwiperItem';
+const DEFAULT_AUTOPLAY_INTERVAL = 3000;
+const LOOP_RENDER_ALL_THRESHOLD = 10;
 const SwiperImpl = (props, ref) => {
   const {
+    data,
+    renderItem,
+    children,
     initialSwipe = 0,
     touchable = true,
-    autoplay = false,
     loop = true,
+    autoplay = false,
     vertical = false,
-    duration = 300,
-    enabled = true,
-    rubberband = true,
     onChange,
-    indicator,
+    indicator = true,
     indicatorProps,
-    slideSize = 100,
-    trackOffset = 0,
-    autoHeight = false,
-    stuckAtBoundary = false,
-    preventScroll = true,
     style,
-    children,
-    data,
-    renderItem,
     testID
   } = props;
-  const initialSwipeValue = (0, _utils.getInitialSwipeValue)(initialSwipe);
-  const durationMs = (0, _utils.getDurationMs)(duration);
-  const slideSizePct = (0, _utils.getSlideSizePct)(slideSize);
-  const trackOffsetPct = (0, _utils.getTrackOffsetPct)(trackOffset);
+  const flatListRef = (0, _react().useRef)(null);
+  const autoplayTimerRef = (0, _react().useRef)(null);
+  const isInteractingRef = (0, _react().useRef)(false);
+  const isAnimatingRef = (0, _react().useRef)(false);
+  const queuedIndexRef = (0, _react().useRef)(null);
+  const isMomentumRef = (0, _react().useRef)(false);
+  const isWeb = _reactNative().Platform.OS === 'web';
   const {
     width: windowWidth,
     height: windowHeight
   } = (0, _reactNative().useWindowDimensions)();
-  const viewportWidth = windowWidth || _utils.FALLBACK_WIDTH;
-  const viewportHeight = windowHeight || _utils.FALLBACK_HEIGHT;
-  const [containerLayout, setContainerLayout] = (0, _react().useState)({
+  const [layout, setLayout] = (0, _react().useState)({
     width: 0,
     height: 0
   });
-  const flatListRef = (0, _react().useRef)(null);
-  const autoplayTimerRef = (0, _react().useRef)(null);
-  const isDraggingRef = (0, _react().useRef)(false);
-  const isScrollingRef = (0, _react().useRef)(false);
-  const nativeMomentumRef = (0, _react().useRef)(false);
-  const prevIndexRef = (0, _react().useRef)(initialSwipeValue);
-  const currentDisplayIndexRef = (0, _react().useRef)(initialSwipeValue);
-  const desiredIndexRef = (0, _react().useRef)(initialSwipeValue);
-  const isWeb = _reactNative().Platform.OS === 'web';
-  const nativeQueuedScrollRef = (0, _react().useRef)(null);
-  const nativeScrollSeqRef = (0, _react().useRef)(0);
-  const nativeScrollEndTimerRef = (0, _react().useRef)(null);
-  const scrollToIndexSafe = (0, _react().useCallback)((index, animated) => {
-    try {
-      flatListRef.current?.scrollToIndex({
-        index,
-        animated
-      });
-    } catch {}
-  }, []);
-  const clearNativeScrollEndTimer = (0, _react().useCallback)(() => {
-    if (nativeScrollEndTimerRef.current) {
-      clearTimeout(nativeScrollEndTimerRef.current);
-      nativeScrollEndTimerRef.current = null;
-    }
-  }, []);
-  const validChildren = children ? _react().Children.toArray(children).filter(child => {
-    if (! /*#__PURE__*/(0, _react().isValidElement)(child)) return false;
-    if (child.type === _SwiperItem.default) return true;
-    const type = child.type;
-    return type.displayName === 'SwiperItem';
-  }) : [];
-  const itemsData = data ? data : validChildren.length > 0 ? validChildren.map((_, idx) => ({
-    type: 'child',
-    index: idx
-  })) : [];
-  const count = itemsData.length;
-  const slideRatio = slideSizePct / 100;
-  const offsetRatio = trackOffsetPct / 100;
-  const shouldLoop = loop && count > 1 && slideRatio * (count - 1) >= 1;
-  const loopData = !shouldLoop || count <= 1 ? itemsData : [...itemsData.slice(-1), ...itemsData, ...itemsData.slice(0, 1)];
-  const displayData = shouldLoop ? loopData : itemsData;
-  const displayCount = displayData.length;
-  const getDisplayIndex = (0, _react().useCallback)(index => {
-    if (!shouldLoop) return index;
-    if (index === 0) return count - 1;
-    if (index === displayCount - 1) return 0;
-    return index - 1;
-  }, [shouldLoop, count, displayCount]);
-  const handleContainerLayout = (0, _react().useCallback)(e => {
+  const handleLayout = (0, _react().useCallback)(event => {
     const {
       width,
       height
-    } = e.nativeEvent.layout;
-    setContainerLayout(prev => prev.width === width && prev.height === height ? prev : {
+    } = event.nativeEvent.layout;
+    setLayout(prev => prev.width === width && prev.height === height ? prev : {
       width,
       height
     });
   }, []);
-  const containerWidth = containerLayout.width || viewportWidth;
-  const containerHeight = containerLayout.height || viewportHeight;
-  const crossAxisMeasured = vertical ? containerLayout.width : containerLayout.height;
-  const crossAxisSize = crossAxisMeasured > 0 ? crossAxisMeasured : undefined;
-  const slideSizeValue = (vertical ? containerHeight : containerWidth) * slideRatio;
-  const itemSizeStyle = {
-    [vertical ? 'height' : 'width']: slideSizeValue
-  };
-  if (crossAxisSize != null && !(autoHeight && !vertical)) {
-    itemSizeStyle[vertical ? 'width' : 'height'] = crossAxisSize;
-  }
-  const mainAxisMeasured = vertical ? containerLayout.height : containerLayout.width;
-  const trackOffsetPx = mainAxisMeasured > 0 ? mainAxisMeasured * offsetRatio : 0;
-  const nativeTrackContentPaddingStyle = !trackOffsetPx ? undefined : vertical ? {
-    paddingTop: trackOffsetPx,
-    paddingBottom: trackOffsetPx
-  } : {
-    paddingLeft: trackOffsetPx,
-    paddingRight: trackOffsetPx
-  };
-  const stuckAtBoundaryEnabled = !!stuckAtBoundary && !shouldLoop && count > 1 && slideRatio < 1;
-  const mainAxisSize = vertical ? containerHeight : containerWidth;
-  const nonLoopMinOffset = stuckAtBoundaryEnabled ? trackOffsetPx : 0;
-  const nonLoopMaxOffset = stuckAtBoundaryEnabled ? Math.max(nonLoopMinOffset, trackOffsetPx + count * slideSizeValue - mainAxisSize, 0) : Math.max(0, (count - 1) * slideSizeValue);
-  const nonLoopSnapOffsets = (() => {
-    if (!stuckAtBoundaryEnabled || count <= 1) return null;
-    const offsets = new Array(count);
-    for (let i = 0; i < count; i += 1) offsets[i] = i === 0 ? nonLoopMinOffset : i === count - 1 ? nonLoopMaxOffset : slideSizeValue * i;
-    return offsets;
-  })();
-  const getInitialIndex = (0, _react().useCallback)(() => {
-    const initial = (0, _number.clamp)(initialSwipeValue, 0, count - 1);
-    return shouldLoop ? initial + 1 : initial;
-  }, [initialSwipeValue, count, shouldLoop]);
-  const [current, setCurrent] = (0, _react().useState)(() => getInitialIndex());
-  const [indicatorIndex, setIndicatorIndex] = (0, _react().useState)(() => getDisplayIndex(getInitialIndex()));
-  const setCurrentSafe = (0, _react().useCallback)(next => {
-    setCurrent(prev => prev === next ? prev : next);
+  const childItems = (0, _react().useMemo)(() => {
+    if (!children) return [];
+    return _react().Children.toArray(children).filter(child => /*#__PURE__*/(0, _react().isValidElement)(child));
+  }, [children]);
+  const usingData = Array.isArray(data);
+  const baseItems = (0, _react().useMemo)(() => usingData ? data : childItems, [usingData, data, childItems]);
+  const count = baseItems.length;
+  const shouldLoop = loop && count > 1;
+  const displayData = (0, _react().useMemo)(() => {
+    if (!shouldLoop) return baseItems;
+    const head = baseItems[count - 1];
+    const tail = baseItems[0];
+    return [head, ...baseItems, tail];
+  }, [baseItems, shouldLoop, count]);
+  const displayCount = displayData.length;
+  const loopRenderAll = shouldLoop && displayCount <= LOOP_RENDER_ALL_THRESHOLD;
+  const getRealIndex = (0, _react().useCallback)(displayIndex => {
+    if (!shouldLoop) return (0, _number.clamp)(displayIndex, 0, count - 1);
+    if (displayIndex === 0) return count - 1;
+    if (displayIndex === displayCount - 1) return 0;
+    return displayIndex - 1;
+  }, [shouldLoop, count, displayCount]);
+  const getDisplayIndex = (0, _react().useCallback)(realIndex => {
+    if (!shouldLoop) return (0, _number.clamp)(realIndex, 0, count - 1);
+    return (0, _number.clamp)(realIndex, 0, count - 1) + 1;
+  }, [shouldLoop, count]);
+  const initialRealIndex = (0, _number.clamp)(initialSwipe, 0, Math.max(0, count - 1));
+  const initialDisplayIndex = getDisplayIndex(initialRealIndex);
+  const currentIndexRef = (0, _react().useRef)(initialRealIndex);
+  const [currentIndex, setCurrentIndex] = (0, _react().useState)(initialRealIndex);
+  const layoutReady = layout.width > 0 && layout.height > 0;
+  const mainSize = vertical ? layout.height || windowHeight || 1 : layout.width || windowWidth || 1;
+  const crossSize = vertical ? layout.width || windowWidth || 1 : layout.height || windowHeight || 1;
+  const itemStyle = (0, _react().useMemo)(() => ({
+    width: vertical ? crossSize : mainSize,
+    height: vertical ? mainSize : crossSize
+  }), [vertical, mainSize, crossSize]);
+  const clearAutoplay = (0, _react().useCallback)(() => {
+    if (autoplayTimerRef.current) {
+      clearTimeout(autoplayTimerRef.current);
+      autoplayTimerRef.current = null;
+    }
   }, []);
-  const [enabledState, setEnabledState] = (0, _react().useState)(enabled);
-  const autoHeightEnabled = autoHeight && !vertical;
-  const [autoHeightValue, setAutoHeightValue] = (0, _react().useState)(undefined);
-  const measuredHeightsRef = (0, _react().useRef)({});
-  const swipeToRef = (0, _react().useRef)(() => {});
-  const onDragStartRef = (0, _react().useRef)(() => {});
-  const onDragEndRef = (0, _react().useRef)(() => {});
-  const {
-    webOffsetRef,
-    webTranslateXAnim,
-    webTranslateYAnim,
-    webTrackTransform,
-    panResponder,
-    stopWebSnapAnim,
-    cancelWebRaf,
-    webSnapAnimRef
-  } = (0, _useSwiperWeb.useSwiperWeb)({
-    isWeb,
-    enabledState,
-    touchable,
-    vertical,
-    count,
-    shouldLoop,
-    displayCount,
-    slideSizeValue,
-    nonLoopMinOffset,
-    nonLoopMaxOffset,
-    durationMs,
-    preventScroll,
-    trackOffsetPx,
-    swipeToRef,
-    onDragStart: () => onDragStartRef.current(),
-    onDragEnd: () => onDragEndRef.current()
-  });
-  (0, _react().useEffect)(() => {
-    return () => {
-      cancelWebRaf();
-      stopWebSnapAnim();
-      clearNativeScrollEndTimer();
-    };
-  }, [cancelWebRaf, stopWebSnapAnim, clearNativeScrollEndTimer]);
-  const finishNativeScroll = (0, _react().useCallback)(() => {
-    clearNativeScrollEndTimer();
-    isScrollingRef.current = false;
-    nativeMomentumRef.current = false;
-    const queued = nativeQueuedScrollRef.current;
-    if (queued && flatListRef.current) {
-      nativeQueuedScrollRef.current = null;
-      const nextRealIndex = getDisplayIndex(queued.index);
-      (0, _utils.runAfterFrames)(1, () => {
-        swipeToRef.current(nextRealIndex, queued.animated);
+  const updateIndex = (0, _react().useCallback)(next => {
+    const clamped = (0, _number.clamp)(next, 0, Math.max(0, count - 1));
+    if (currentIndexRef.current === clamped) return;
+    currentIndexRef.current = clamped;
+    setCurrentIndex(clamped);
+    onChange?.(clamped);
+  }, [count, onChange]);
+  const scrollToDisplayIndex = (0, _react().useCallback)((displayIndex, animated) => {
+    try {
+      flatListRef.current?.scrollToIndex({
+        index: displayIndex,
+        animated
       });
-    }
-  }, [clearNativeScrollEndTimer, getDisplayIndex]);
-  const scheduleNativeScrollFallback = (0, _react().useCallback)(() => {
-    clearNativeScrollEndTimer();
-    const seq = nativeScrollSeqRef.current + 1;
-    nativeScrollSeqRef.current = seq;
-    const timeout = Math.max(700, durationMs + 500);
-    nativeScrollEndTimerRef.current = setTimeout(() => {
-      if (nativeScrollSeqRef.current !== seq) return;
-      if (isDraggingRef.current) return;
-      if (!isScrollingRef.current) return;
-      finishNativeScroll();
-    }, timeout);
-  }, [clearNativeScrollEndTimer, durationMs, finishNativeScroll]);
-  (0, _react().useEffect)(() => {
-    setEnabledState(enabled);
-  }, [enabled]);
-  const currentRef = (0, _react().useRef)(current);
-  (0, _react().useEffect)(() => {
-    currentRef.current = current;
-    desiredIndexRef.current = getDisplayIndex(current);
-  }, [current, getDisplayIndex]);
-  const handleItemLayout = (0, _react().useCallback)((displayIndex, e) => {
-    if (!autoHeightEnabled) return;
-    const height = e.nativeEvent.layout.height;
-    if (!height) return;
-    const realIndex = getDisplayIndex(displayIndex);
-    const prevHeight = measuredHeightsRef.current[realIndex];
-    if (prevHeight != null && Math.abs(prevHeight - height) < 0.5) return;
-    measuredHeightsRef.current[realIndex] = height;
-    const activeRealIndex = getDisplayIndex(currentRef.current);
-    if (realIndex === activeRealIndex) {
-      setAutoHeightValue(height);
-    }
-  }, [autoHeightEnabled, getDisplayIndex]);
-  (0, _react().useEffect)(() => {
-    if (!autoHeightEnabled) return;
-    measuredHeightsRef.current = {};
-    setAutoHeightValue(undefined);
-  }, [autoHeightEnabled, slideSizeValue, count]);
-  (0, _react().useEffect)(() => {
-    if (!autoHeightEnabled) return;
-    const activeRealIndex = getDisplayIndex(current);
-    const height = measuredHeightsRef.current[activeRealIndex];
-    if (height == null) return;
-    setAutoHeightValue(height);
-  }, [autoHeightEnabled, current, getDisplayIndex]);
-  const containerAutoHeightStyle = autoHeightEnabled && autoHeightValue != null ? {
-    height: autoHeightValue
-  } : undefined;
-  const nativeLastAlignedMainAxisRef = (0, _react().useRef)(0);
-  (0, _react().useEffect)(() => {
-    if (isWeb) return;
-    if (count === 0) return;
-    if (!flatListRef.current) return;
-    if (isDraggingRef.current || isScrollingRef.current) return;
-    const mainAxisMeasured = vertical ? containerLayout.height : containerLayout.width;
-    if (mainAxisMeasured <= 0) return;
-    const lastAligned = nativeLastAlignedMainAxisRef.current;
-    if (lastAligned > 0 && Math.abs(mainAxisMeasured - lastAligned) < 0.5) return;
-    nativeLastAlignedMainAxisRef.current = mainAxisMeasured;
-    (0, _utils.runAfterFrames)(2, () => {
-      scrollToIndexSafe(currentRef.current, false);
-    });
-  }, [isWeb, count, vertical, containerLayout.height, containerLayout.width]);
+    } catch {}
+  }, []);
   const swipeTo = (0, _react().useCallback)((index, animated = true) => {
     if (count === 0) return;
+    if (animated && isAnimatingRef.current) {
+      queuedIndexRef.current = index;
+      return;
+    }
     const targetRealIndex = (0, _number.clamp)(index, 0, count - 1);
-    const fromRealIndex = desiredIndexRef.current;
-    desiredIndexRef.current = targetRealIndex;
-    const currentIndex = currentRef.current;
-    let targetIndex;
-    let needsJump = false;
-    let jumpOffset = null;
-    let jumpDisplayIndex = null;
-    if (shouldLoop) {
-      if (fromRealIndex === count - 1 && targetRealIndex === 0) {
-        targetIndex = displayCount - 1;
-        needsJump = true;
-        jumpOffset = -1 * slideSizeValue;
-        jumpDisplayIndex = 1;
-      } else if (fromRealIndex === 0 && targetRealIndex === count - 1) {
-        targetIndex = 0;
-        needsJump = true;
-        jumpOffset = -count * slideSizeValue;
-        jumpDisplayIndex = count;
-      } else {
-        targetIndex = targetRealIndex + 1;
+    let targetDisplayIndex = getDisplayIndex(targetRealIndex);
+    let resolvedAnimated = animated;
+    if (isWeb && shouldLoop && animated) {
+      const currentRealIndex = currentIndexRef.current;
+      if (currentRealIndex === count - 1 && targetRealIndex === 0 || currentRealIndex === 0 && targetRealIndex === count - 1) {
+        resolvedAnimated = false;
       }
-    } else {
-      targetIndex = targetRealIndex;
     }
-    if (isWeb) {
-      if (!needsJump && targetIndex === currentIndex) {
-        if (autoplay && enabledState) startAutoplay();
-        return;
-      }
-      stopWebSnapAnim();
-      const offset = shouldLoop ? -targetIndex * slideSizeValue : -1 * (nonLoopSnapOffsets?.[targetIndex] ?? slideSizeValue * targetIndex);
-      webOffsetRef.current = offset;
-      if (needsJump) {
-        if (animated) {
-          const animValue = vertical ? webTranslateYAnim : webTranslateXAnim;
-          const anim = _reactNative().Animated.timing(animValue, {
-            toValue: offset,
-            duration: durationMs,
-            easing: _reactNative().Easing.out(_reactNative().Easing.cubic),
-            useNativeDriver: false
-          });
-          webSnapAnimRef.current = anim;
-          anim.start(({
-            finished
-          }) => {
-            webSnapAnimRef.current = null;
-            if (autoplay && enabledState) startAutoplay();
-            if (!finished || jumpOffset === null || jumpDisplayIndex === null) return;
-            webOffsetRef.current = jumpOffset;
-            if (vertical) {
-              webTranslateYAnim.setValue(jumpOffset);
-            } else {
-              webTranslateXAnim.setValue(jumpOffset);
-            }
-            setCurrentSafe(jumpDisplayIndex);
-          });
-          setCurrentSafe(targetIndex);
-        } else {
-          if (vertical) {
-            webTranslateYAnim.setValue(jumpOffset);
-          } else {
-            webTranslateXAnim.setValue(jumpOffset);
-          }
-          webOffsetRef.current = jumpOffset;
-          setCurrentSafe(jumpDisplayIndex);
-          if (autoplay && enabledState) startAutoplay();
-        }
-      } else {
-        const animValue = vertical ? webTranslateYAnim : webTranslateXAnim;
-        if (animated) {
-          const anim = _reactNative().Animated.timing(animValue, {
-            toValue: offset,
-            duration: durationMs,
-            easing: _reactNative().Easing.out(_reactNative().Easing.cubic),
-            useNativeDriver: false
-          });
-          webSnapAnimRef.current = anim;
-          anim.start(() => {
-            webSnapAnimRef.current = null;
-            if (autoplay && enabledState) startAutoplay();
-          });
-        } else {
-          animValue.setValue(offset);
-          if (autoplay && enabledState) startAutoplay();
-        }
-        setCurrentSafe(targetIndex);
+    if (shouldLoop && resolvedAnimated) {
+      const currentDisplayIndex = getDisplayIndex(currentIndexRef.current);
+      if (currentDisplayIndex === count && targetRealIndex === 0) {
+        targetDisplayIndex = displayCount - 1;
+      } else if (currentDisplayIndex === 1 && targetRealIndex === count - 1) {
+        targetDisplayIndex = 0;
       }
-    } else if (flatListRef.current) {
-      if (!needsJump && targetIndex === currentIndex) {
-        finishNativeScroll();
-        if (autoplay && enabledState) startAutoplay();
-        return;
-      }
-      if (isDraggingRef.current && animated) {
-        nativeQueuedScrollRef.current = {
-          index: targetIndex,
-          animated
-        };
-        return;
-      }
-      if (isScrollingRef.current && animated) {
-        nativeQueuedScrollRef.current = {
-          index: targetIndex,
-          animated
-        };
-        scheduleNativeScrollFallback();
-        scrollToIndexSafe(targetIndex, true);
-        return;
-      }
-      isScrollingRef.current = true;
-      if (animated) {
-        scheduleNativeScrollFallback();
-      } else {
-        clearNativeScrollEndTimer();
-      }
-      scrollToIndexSafe(targetIndex, animated);
-      if (!animated) {
-        setCurrentSafe(targetIndex);
-        if (autoplay && enabledState) startAutoplay();
-      }
-      if (needsJump && jumpDisplayIndex != null && !animated) {
-        (0, _utils.runAfterFrames)(2, () => {
-          flatListRef.current?.scrollToIndex({
-            index: jumpDisplayIndex,
-            animated: false
-          });
-          setCurrentSafe(jumpDisplayIndex);
-        });
+    }
+    const currentRealIndex = currentIndexRef.current;
+    const currentDisplayIndex = getDisplayIndex(currentRealIndex);
+    if (targetRealIndex === currentRealIndex && targetDisplayIndex === currentDisplayIndex) {
+      if (queuedIndexRef.current != null) {
+        const next = queuedIndexRef.current;
+        queuedIndexRef.current = null;
+        swipeTo(next, true);
       }
-      if (!animated) {
-        (0, _utils.runAfterFrames)(1, () => {
-          finishNativeScroll();
-        });
+      return;
+    }
+    if (resolvedAnimated) {
+      isAnimatingRef.current = true;
+    }
+    scrollToDisplayIndex(targetDisplayIndex, resolvedAnimated);
+    if (!resolvedAnimated) {
+      updateIndex(targetRealIndex);
+      if (queuedIndexRef.current != null) {
+        const next = queuedIndexRef.current;
+        queuedIndexRef.current = null;
+        swipeTo(next, true);
       }
     }
-  }, [count, shouldLoop, isWeb, slideSizeValue, vertical, webTranslateXAnim, webTranslateYAnim, nonLoopSnapOffsets, displayCount, stopWebSnapAnim, setCurrentSafe, durationMs, clearNativeScrollEndTimer, finishNativeScroll, scheduleNativeScrollFallback]);
-  (0, _react().useEffect)(() => {
-    swipeToRef.current = swipeTo;
-  }, [swipeTo]);
+  }, [count, getDisplayIndex, scrollToDisplayIndex, shouldLoop, displayCount, updateIndex, isWeb]);
+  const resolveAutoplayInterval = (0, _react().useCallback)(() => {
+    if (typeof autoplay === 'number') return Math.max(0, autoplay);
+    if (autoplay) return DEFAULT_AUTOPLAY_INTERVAL;
+    return 0;
+  }, [autoplay]);
+  const scheduleAutoplay = (0, _react().useCallback)(() => {
+    const interval = resolveAutoplayInterval();
+    if (!interval || count <= 1) return;
+    if (isInteractingRef.current && !isWeb) return;
+    clearAutoplay();
+    autoplayTimerRef.current = setTimeout(() => {
+      if (isInteractingRef.current && !isWeb) return;
+      const nextIndex = shouldLoop ? (currentIndexRef.current + 1) % count : (0, _number.clamp)(currentIndexRef.current + 1, 0, count - 1);
+      swipeTo(nextIndex, true);
+    }, interval);
+  }, [resolveAutoplayInterval, count, clearAutoplay, shouldLoop, swipeTo]);
   const swipeNext = (0, _react().useCallback)(() => {
     if (count === 0) return;
-    const baseIndex = desiredIndexRef.current;
-    swipeTo(baseIndex === count - 1 ? 0 : baseIndex + 1);
-  }, [count, swipeTo]);
+    const next = shouldLoop ? (currentIndexRef.current + 1) % count : (0, _number.clamp)(currentIndexRef.current + 1, 0, count - 1);
+    swipeTo(next, true);
+  }, [count, shouldLoop, swipeTo]);
   const swipePrev = (0, _react().useCallback)(() => {
     if (count === 0) return;
-    const baseIndex = desiredIndexRef.current;
-    swipeTo(baseIndex === 0 ? count - 1 : baseIndex - 1);
-  }, [count, swipeTo]);
-  const stopAutoplay = (0, _react().useCallback)(() => {
-    if (autoplayTimerRef.current) {
-      clearTimeout(autoplayTimerRef.current);
-      autoplayTimerRef.current = null;
-    }
-  }, []);
-  const startAutoplay = (0, _react().useCallback)(delay => {
-    if (!autoplay || count <= 1 || !enabledState) return;
-    if (isDraggingRef.current || isScrollingRef.current) return;
-    stopAutoplay();
-    const interval = (0, _validate.isFiniteNumber)(autoplay) && Math.max(0, autoplay) || 5000;
-    autoplayTimerRef.current = setTimeout(() => {
-      if (isDraggingRef.current || isScrollingRef.current) return;
-      swipeNext();
-      startAutoplay();
-    }, delay ?? interval);
-  }, [autoplay, count, enabledState, swipeNext, stopAutoplay]);
-  const handleNativeScrollEndByOffset = (0, _react().useCallback)(offset => {
-    if (count === 0) return;
-    clearNativeScrollEndTimer();
-    isScrollingRef.current = false;
-    nativeMomentumRef.current = false;
-    if (!slideSizeValue) return;
-    let index = Math.round(offset / slideSizeValue);
-    if (shouldLoop) {
-      if (index === 0) {
-        (0, _utils.runAfterFrames)(2, () => {
-          flatListRef.current?.scrollToIndex({
-            index: count,
-            animated: false
-          });
-        });
-        index = count;
-      } else if (index === displayCount - 1) {
-        (0, _utils.runAfterFrames)(2, () => {
-          flatListRef.current?.scrollToIndex({
-            index: 1,
-            animated: false
-          });
-        });
-        index = 1;
-      }
-    } else {
-      index = (0, _number.clamp)(index, 0, count - 1);
-    }
-    setCurrentSafe(index);
-    desiredIndexRef.current = getDisplayIndex(index);
-    const queued = nativeQueuedScrollRef.current;
-    if (queued && flatListRef.current) {
-      nativeQueuedScrollRef.current = null;
-      const nextDisplayIndex = getDisplayIndex(queued.index);
-      (0, _utils.runAfterFrames)(1, () => {
-        swipeTo(nextDisplayIndex, queued.animated);
-      });
-    } else if (autoplay && enabledState) {
-      startAutoplay();
-    }
-  }, [clearNativeScrollEndTimer, count, displayCount, getDisplayIndex, setCurrentSafe, shouldLoop, slideSizeValue, swipeTo, autoplay, enabledState, startAutoplay]);
-  const handleScrollEnd = (0, _react().useCallback)(event => {
-    if (count === 0) return;
-    const {
-      contentOffset
-    } = event.nativeEvent;
-    handleNativeScrollEndByOffset(vertical ? contentOffset.y : contentOffset.x);
-  }, [count, handleNativeScrollEndByOffset, vertical]);
+    const next = shouldLoop ? (currentIndexRef.current - 1 + count) % count : (0, _number.clamp)(currentIndexRef.current - 1, 0, count - 1);
+    swipeTo(next, true);
+  }, [count, shouldLoop, swipeTo]);
+  const flushQueuedSwipe = () => {
+    if (queuedIndexRef.current == null) return;
+    const next = queuedIndexRef.current;
+    queuedIndexRef.current = null;
+    swipeTo(next, true);
+  };
+  (0, _react().useImperativeHandle)(ref, () => ({
+    swipeTo,
+    swipeNext,
+    swipePrev,
+    getCurrentIndex: () => currentIndexRef.current
+  }), [swipeTo, swipeNext, swipePrev]);
+  (0, _react().useEffect)(() => {
+    if (!layoutReady || count === 0) return;
+    scrollToDisplayIndex(initialDisplayIndex, false);
+  }, [layoutReady, count, initialDisplayIndex, scrollToDisplayIndex]);
+  (0, _react().useEffect)(() => {
+    scheduleAutoplay();
+    return clearAutoplay;
+  }, [scheduleAutoplay, clearAutoplay, currentIndex]);
   const handleScrollBeginDrag = () => {
-    isDraggingRef.current = true;
-    isScrollingRef.current = true;
-    stopAutoplay();
+    isInteractingRef.current = true;
+    clearAutoplay();
   };
-  const handleScrollEndDrag = event => {
-    isDraggingRef.current = false;
-    const {
-      contentOffset
-    } = event.nativeEvent;
-    (0, _utils.runAfterFrames)(1, () => {
-      if (nativeMomentumRef.current) return;
-      handleNativeScrollEndByOffset(vertical ? contentOffset.y : contentOffset.x);
-    });
+  const handleScroll = event => {
+    if (!isWeb || count <= 1) return;
+    const offset = vertical ? event.nativeEvent.contentOffset.y : event.nativeEvent.contentOffset.x;
+    const displayIndex = Math.round(offset / mainSize);
+    const nextDisplayIndex = shouldLoop ? (0, _number.clamp)(displayIndex, 0, displayCount - 1) : (0, _number.clamp)(displayIndex, 0, count - 1);
+    updateIndex(getRealIndex(nextDisplayIndex));
+    const alignedOffset = Math.round(offset / mainSize) * mainSize;
+    if (Math.abs(offset - alignedOffset) < 0.5) {
+      isAnimatingRef.current = false;
+      isInteractingRef.current = false;
+      isMomentumRef.current = false;
+      scheduleAutoplay();
+      flushQueuedSwipe();
+    }
   };
   const handleMomentumScrollBegin = () => {
-    nativeMomentumRef.current = true;
-    isScrollingRef.current = true;
+    isMomentumRef.current = true;
   };
-  const indicatorRafIdRef = (0, _react().useRef)(null);
-  const indicatorPendingRef = (0, _react().useRef)(null);
-  const canUseRaf = typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function';
-  const flushIndicator = () => {
-    const next = indicatorPendingRef.current;
-    if (next == null) return;
-    indicatorPendingRef.current = null;
-    setIndicatorIndex(prev => prev === next ? prev : next);
+  const handleScrollEndDrag = event => {
+    if (isMomentumRef.current) return;
+    handleScrollEnd(event);
   };
-  const scheduleIndicator = next => {
-    indicatorPendingRef.current = next;
-    if (indicatorRafIdRef.current != null) return;
-    if (canUseRaf) {
-      indicatorRafIdRef.current = requestAnimationFrame(() => {
-        indicatorRafIdRef.current = null;
-        flushIndicator();
-      });
-      return;
+  const handleScrollEnd = event => {
+    if (count === 0) return;
+    const offset = vertical ? event.nativeEvent.contentOffset.y : event.nativeEvent.contentOffset.x;
+    const displayIndex = Math.round(offset / mainSize);
+    let nextDisplayIndex = displayIndex;
+    if (shouldLoop) {
+      if (displayIndex === 0) nextDisplayIndex = count;
+      if (displayIndex === displayCount - 1) nextDisplayIndex = 1;
     }
-    indicatorRafIdRef.current = setTimeout(() => {
-      indicatorRafIdRef.current = null;
-      flushIndicator();
-    }, 16);
-  };
-  (0, _react().useEffect)(() => {
-    setIndicatorIndex(prev => {
-      const next = getDisplayIndex(current);
-      return prev === next ? prev : next;
-    });
-  }, [current, getDisplayIndex]);
-  (0, _react().useEffect)(() => {
-    return () => {
-      if (indicatorRafIdRef.current != null) {
-        if (canUseRaf) {
-          cancelAnimationFrame(indicatorRafIdRef.current);
-        } else {
-          clearTimeout(indicatorRafIdRef.current);
-        }
-        indicatorRafIdRef.current = null;
-      }
-      indicatorPendingRef.current = null;
-    };
-  }, []);
-  const handleScroll = (0, _react().useCallback)(event => {
-    if (isWeb || count <= 1 || !slideSizeValue) return;
-    const {
-      contentOffset
-    } = event.nativeEvent;
-    const offset = vertical ? contentOffset.y : contentOffset.x;
-    const displayIndex = shouldLoop ? (0, _number.clamp)(Math.round(offset / slideSizeValue), 0, displayCount - 1) : (0, _number.clamp)(Math.round(offset / slideSizeValue), 0, count - 1);
-    scheduleIndicator(getDisplayIndex(displayIndex));
-  }, [count, displayCount, getDisplayIndex, isWeb, scheduleIndicator, shouldLoop, slideSizeValue, vertical]);
-  (0, _react().useEffect)(() => {
-    onDragStartRef.current = () => {
-      isDraggingRef.current = true;
-      stopAutoplay();
-    };
-    onDragEndRef.current = () => {
-      isDraggingRef.current = false;
-    };
-  }, [stopAutoplay]);
-  (0, _react().useEffect)(() => {
-    startAutoplay();
-    return stopAutoplay;
-  }, [startAutoplay, stopAutoplay]);
-  (0, _react().useImperativeHandle)(ref, () => ({
-    activeIndex: getDisplayIndex(current),
-    swipeTo: (index, animated = true) => {
-      swipeTo(index, animated);
-    },
-    swipeNext,
-    swipePrev,
-    enable: () => {
-      setEnabledState(true);
-    },
-    disable: () => {
-      setEnabledState(false);
-    },
-    getCurrentIndex: () => getDisplayIndex(current),
-    getPrevIndex: () => prevIndexRef.current,
-    goToFirstIndex: () => {
-      swipeTo(0);
-    },
-    goToLastIndex: () => {
-      swipeTo(count - 1);
+    if (nextDisplayIndex !== displayIndex) {
+      scrollToDisplayIndex(nextDisplayIndex, false);
     }
-  }), [current, count, getDisplayIndex, swipeTo, swipeNext, swipePrev]);
+    updateIndex(getRealIndex(nextDisplayIndex));
+    isInteractingRef.current = false;
+    isAnimatingRef.current = false;
+    isMomentumRef.current = false;
+    scheduleAutoplay();
+    flushQueuedSwipe();
+  };
   const renderIndicator = () => {
     if (indicator === false || count <= 1) return null;
-    if (typeof indicator === 'function') return indicator(count, indicatorIndex);
+    if (typeof indicator === 'function') return indicator(count, currentIndex);
     return /*#__PURE__*/_react().default.createElement(_SwiperPagIndicator.default, _extends({}, indicatorProps, {
       total: count,
-      current: indicatorIndex,
+      current: currentIndex,
       vertical: vertical
     }));
   };
-  (0, _react().useEffect)(() => {
-    if (!onChange || count <= 0) return;
-    const nextDisplay = getDisplayIndex(current);
-    if (nextDisplay === currentDisplayIndexRef.current) return;
-    prevIndexRef.current = currentDisplayIndexRef.current;
-    currentDisplayIndexRef.current = nextDisplay;
-    onChange(nextDisplay);
-  }, [current, onChange, count, getDisplayIndex]);
-  const renderChildItem = (0, _react().useCallback)(({
-    item,
-    index
-  }) => {
-    const marker = item;
-    if (marker.type !== 'child') return null;
-    const childIndex = typeof marker.index === 'number' ? marker.index : -1;
-    const child = validChildren[childIndex];
-    if (!child) return null;
-    if (!autoHeightEnabled) {
-      const element = child;
-      return /*#__PURE__*/(0, _react().cloneElement)(element, {
-        style: [element.props.style, itemSizeStyle]
-      });
-    }
-    const element = child;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: itemSizeStyle,
-      onLayout: e => handleItemLayout(index, e),
-      collapsable: false
-    }, /*#__PURE__*/(0, _react().cloneElement)(element, {
-      style: [element.props.style, styles.autoHeightChild]
-    }));
-  }, [validChildren, itemSizeStyle, autoHeightEnabled, handleItemLayout]);
-  const renderDataItem = (0, _react().useCallback)(info => {
-    if (!renderItem) return null;
-    const item = renderItem(info);
-    if (!item) return null;
-    const itemIndex = info.index;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: itemSizeStyle,
-      onLayout: autoHeightEnabled ? e => handleItemLayout(itemIndex, e) : undefined,
-      collapsable: false
-    }, item);
-  }, [renderItem, itemSizeStyle, autoHeightEnabled, handleItemLayout]);
-  const getItemKey = (0, _react().useCallback)((_item, index) => {
-    if (shouldLoop && count > 1) {
-      if (index === 0) return `loop-last-${count - 1}`;
-      if (index === displayCount - 1) return `loop-first-0`;
-      return `item-${index - 1}`;
-    }
-    return `item-${index}`;
-  }, [shouldLoop, count, displayCount]);
-  const getItemLayout = (0, _react().useCallback)((_, index) => {
-    const offset = !shouldLoop && nonLoopSnapOffsets ? nonLoopSnapOffsets[index] ?? slideSizeValue * index : slideSizeValue * index;
-    return {
-      length: slideSizeValue,
-      offset,
-      index
-    };
-  }, [nonLoopSnapOffsets, shouldLoop, slideSizeValue]);
-  const snapToOffsets = (() => {
-    if (slideSizePct === 100 && trackOffsetPct === 0) return undefined;
-    if (!shouldLoop && nonLoopSnapOffsets) return nonLoopSnapOffsets;
-    return displayData.map((_, index) => slideSizeValue * index);
-  })();
-  (0, _react().useEffect)(() => {
-    if (!isWeb) return;
-    const initialIndex = getInitialIndex();
-    const initialOffset = shouldLoop ? -initialIndex * slideSizeValue : -1 * (nonLoopSnapOffsets?.[initialIndex] ?? slideSizeValue * initialIndex);
-    webOffsetRef.current = initialOffset;
-    if (vertical) webTranslateYAnim.setValue(initialOffset);else webTranslateXAnim.setValue(initialOffset);
-  }, [isWeb, getInitialIndex, nonLoopSnapOffsets, shouldLoop, slideSizeValue, vertical, webTranslateXAnim, webTranslateYAnim]);
-  (0, _react().useEffect)(() => {
-    if (!isWeb || count === 0) return;
-    const offset = shouldLoop ? -currentRef.current * slideSizeValue : -1 * (nonLoopSnapOffsets?.[currentRef.current] ?? slideSizeValue * currentRef.current);
-    webOffsetRef.current = offset;
-    if (vertical) webTranslateYAnim.setValue(offset);else webTranslateXAnim.setValue(offset);
-  }, [isWeb, count, nonLoopSnapOffsets, shouldLoop, slideSizeValue, vertical, webTranslateXAnim, webTranslateYAnim]);
-  if (count === 0) {
-    return null;
-  }
-  if (isWeb) {
+  const renderSlide = (0, _react().useCallback)(info => {
+    const content = usingData ? renderItem?.(info) ?? null : info.item;
+    if (!content) return null;
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [styles.container, webContainerStyle, containerAutoHeightStyle, style],
-      testID: testID,
-      onLayout: handleContainerLayout
-    }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: {
-        overflow: 'hidden',
-        width: '100%',
-        height: '100%'
-      }
-    }, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, _extends({}, panResponder?.panHandlers || {}, {
-      style: [{
-        flexDirection: vertical ? 'column' : 'row',
-        width: vertical ? '100%' : displayCount * slideSizeValue,
-        height: vertical ? displayCount * slideSizeValue : '100%',
-        transform: webTrackTransform
-      }]
-    }), displayData.map((item, index) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      key: getItemKey(item, index),
-      style: [itemSizeStyle, styles.webSlideWrapper]
-    }, data && renderDataItem({
-      item,
-      index
-    }) || renderChildItem({
-      item,
-      index
-    }))))), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      pointerEvents: "none",
-      style: styles.indicatorOverlay
-    }, renderIndicator()));
-  }
+      style: [styles.slide, itemStyle]
+    }, content);
+  }, [usingData, renderItem, itemStyle]);
+  if (count === 0) return null;
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.container, containerAutoHeightStyle, style],
-    testID: testID,
-    onLayout: handleContainerLayout,
-    collapsable: false
+    style: [styles.container, style],
+    onLayout: handleLayout,
+    testID: testID
   }, /*#__PURE__*/_react().default.createElement(_reactNative().FlatList, {
     ref: flatListRef,
     data: displayData,
-    keyExtractor: getItemKey,
-    renderItem: data ? renderDataItem : renderChildItem,
-    getItemLayout: getItemLayout,
+    renderItem: renderSlide,
+    keyExtractor: (_item, index) => `swiper-${index}`,
     horizontal: !vertical,
-    removeClippedSubviews: !isWeb,
-    initialNumToRender: Math.min(displayCount, 3),
-    maxToRenderPerBatch: 3,
-    windowSize: 5,
-    updateCellsBatchingPeriod: 16,
-    snapToInterval: slideSizePct === 100 && trackOffsetPct === 0 && slideSizeValue || undefined,
-    snapToOffsets: snapToOffsets,
-    snapToAlignment: "start",
+    getItemLayout: (_, index) => ({
+      length: mainSize,
+      offset: mainSize * index,
+      index
+    }),
+    initialScrollIndex: layoutReady ? initialDisplayIndex : undefined,
+    scrollEnabled: touchable && count > 1,
+    removeClippedSubviews: !shouldLoop || !loopRenderAll,
+    disableVirtualization: shouldLoop && loopRenderAll,
+    initialNumToRender: shouldLoop ? loopRenderAll ? displayCount : 3 : 3,
+    maxToRenderPerBatch: shouldLoop ? loopRenderAll ? displayCount : 3 : 3,
+    windowSize: shouldLoop ? loopRenderAll ? displayCount : 7 : 5,
+    pagingEnabled: true,
+    snapToInterval: mainSize,
     decelerationRate: "fast",
-    scrollEnabled: enabledState && touchable && count > 1,
-    pagingEnabled: false,
-    nestedScrollEnabled: preventScroll === false,
-    directionalLockEnabled: preventScroll !== false,
-    collapsable: false,
     showsHorizontalScrollIndicator: false,
     showsVerticalScrollIndicator: false,
-    bounces: rubberband && !shouldLoop,
-    scrollEventThrottle: 16,
     onScrollBeginDrag: handleScrollBeginDrag,
+    onScroll: handleScroll,
+    scrollEventThrottle: 16,
     onScrollEndDrag: handleScrollEndDrag,
     onMomentumScrollBegin: handleMomentumScrollBegin,
     onMomentumScrollEnd: handleScrollEnd,
-    onScroll: handleScroll,
-    initialScrollIndex: getInitialIndex(),
     onScrollToIndexFailed: info => {
-      nativeMomentumRef.current = false;
-      isScrollingRef.current = false;
-      (0, _utils.runAfterFrames)(2, () => {
-        try {
-          isScrollingRef.current = true;
-          scrollToIndexSafe(info.index, false);
-          setCurrentSafe(info.index);
-        } finally {
-          isScrollingRef.current = false;
-          const queued = nativeQueuedScrollRef.current;
-          if (queued && flatListRef.current) {
-            nativeQueuedScrollRef.current = null;
-            const nextDisplayIndex = getDisplayIndex(queued.index);
-            (0, _utils.runAfterFrames)(1, () => {
-              swipeTo(nextDisplayIndex, queued.animated);
-            });
-          }
-        }
-      });
-    },
-    style: isWeb && {
-      cursor: 'grab'
-    } || undefined,
-    contentContainerStyle: [isWeb && {
-      userSelect: 'none'
-    } || undefined, !isWeb && nativeTrackContentPaddingStyle || undefined],
-    testID: `${testID}-flatlist`
+      scrollToDisplayIndex(info.index, false);
+      isAnimatingRef.current = false;
+      isInteractingRef.current = false;
+      updateIndex(getRealIndex(info.index));
+      scheduleAutoplay();
+      flushQueuedSwipe();
+    }
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     pointerEvents: "none",
     style: styles.indicatorOverlay
@@ -800,13 +344,11 @@ const styles = _reactNative().StyleSheet.create({
     position: 'relative',
     overflow: 'hidden'
   },
-  autoHeightChild: {
-    flex: 0,
-    width: '100%'
+  slide: {
+    flex: 1
   },
-  webSlideWrapper: {
-    flexShrink: 0,
-    flexGrow: 0
+  item: {
+    flex: 1
   },
   indicatorOverlay: {
     position: 'absolute',
@@ -814,13 +356,8 @@ const styles = _reactNative().StyleSheet.create({
     right: 0,
     top: 0,
     bottom: 0,
-    zIndex: 100,
-    elevation: 100
+    zIndex: 10,
+    elevation: 10
   }
 });
-const webContainerStyle = _reactNative().Platform.OS === 'web' ? {
-  cursor: 'grab',
-  userSelect: 'none',
-  WebkitUserSelect: 'none'
-} : undefined;
 var _default = exports.default = Swiper;