@legendapp/list 3.0.0-beta.45 → 3.0.0-beta.46

package/react-native.mjs

@@ -1,7 +1,7 @@
 import * as React2 from 'react';
 import React2__default, { useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useContext } from 'react';
 import * as ReactNative from 'react-native';
-import { Animated, View as View$1, Text as Text$1, Platform, StyleSheet as StyleSheet$1, RefreshControl, Dimensions } from 'react-native';
+import { Animated, View as View$1, Text as Text$1, Platform as Platform$1, StyleSheet as StyleSheet$1, RefreshControl, Dimensions } from 'react-native';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 // src/components/LegendList.tsx
@@ -327,12 +327,7 @@ var PositionViewAnimated = typedMemo(function PositionViewAnimated2({
   const position$ = useValue$(`containerPosition${id}`, {
     getValue: (v) => v != null ? v : POSITION_OUT_OF_VIEW
   });
-  let position;
-  if (Platform.OS === "ios" || Platform.OS === "android") {
-    position = horizontal ? { transform: [{ translateX: position$ }] } : { transform: [{ translateY: position$ }] };
-  } else {
-    position = horizontal ? { left: position$ } : { top: position$ };
-  }
+  const position = horizontal ? { left: position$ } : { top: position$ };
   return /* @__PURE__ */ React2.createElement(Animated.View, { ref: refView, style: [style, position], ...rest });
 });
 var PositionViewSticky = typedMemo(function PositionViewSticky2({
@@ -358,17 +353,17 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
     () => getStickyPushLimit(ctx.state, index, itemKey),
     [ctx.state, index, itemKey, _totalSize]
   );
-  const transform = React2.useMemo(() => {
+  const stickyPosition = React2.useMemo(() => {
     var _a3;
     if (animatedScrollY) {
       const stickyConfigOffset = (_a3 = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a3 : 0;
       const stickyStart = position + headerSize + stylePaddingTop - stickyConfigOffset;
-      let stickyPosition;
+      let nextStickyPosition;
       if (pushLimit !== void 0) {
         if (pushLimit <= position) {
-          stickyPosition = pushLimit;
+          nextStickyPosition = pushLimit;
         } else {
-          stickyPosition = animatedScrollY.interpolate({
+          nextStickyPosition = animatedScrollY.interpolate({
             extrapolateLeft: "clamp",
             extrapolateRight: "clamp",
             inputRange: [stickyStart, stickyStart + (pushLimit - position)],
@@ -376,17 +371,20 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
           });
         }
       } else {
-        stickyPosition = animatedScrollY.interpolate({
+        nextStickyPosition = animatedScrollY.interpolate({
           extrapolateLeft: "clamp",
           extrapolateRight: "extend",
           inputRange: [stickyStart, stickyStart + 5e3],
           outputRange: [position, position + 5e3]
         });
       }
-      return horizontal ? [{ translateX: stickyPosition }] : [{ translateY: stickyPosition }];
+      return nextStickyPosition;
     }
-  }, [animatedScrollY, headerSize, horizontal, position, pushLimit, stylePaddingTop, stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset]);
-  const viewStyle = React2.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
+  }, [animatedScrollY, headerSize, position, pushLimit, stylePaddingTop, stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset]);
+  const viewStyle = React2.useMemo(
+    () => [style, { zIndex: index + 1e3 }, horizontal ? { left: stickyPosition } : { top: stickyPosition }],
+    [horizontal, index, stickyPosition, style]
+  );
   const renderStickyHeaderBackdrop = React2.useMemo(() => {
     if (!(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)) {
       return null;
@@ -642,8 +640,8 @@ function useOnLayoutSync({
   }
   return { onLayout };
 }
-var Platform2 = Platform;
-var PlatformAdjustBreaksScroll = Platform2.OS === "android";
+var Platform = Platform$1;
+var PlatformAdjustBreaksScroll = Platform.OS === "android";
 
 // src/utils/isInMVCPActiveMode.native.ts
 function isInMVCPActiveMode(state) {
@@ -764,7 +762,7 @@ var Container = typedMemo(function Container2({
       updateItemSizeFn(currentItemKey, layout);
       itemLayoutRef.current.didLayout = true;
     };
-    const shouldDeferWebShrinkLayoutUpdate = Platform2.OS === "web" && !isInMVCPActiveMode(ctx.state) && prevSize !== void 0 && size + 1 < prevSize;
+    const shouldDeferWebShrinkLayoutUpdate = Platform.OS === "web" && !isInMVCPActiveMode(ctx.state) && prevSize !== void 0 && size + 1 < prevSize;
     if (shouldDeferWebShrinkLayoutUpdate) {
       const token = pendingShrinkToken + 1;
       itemLayoutRef.current.pendingShrinkToken = token;
@@ -1034,7 +1032,7 @@ var ListComponent = typedMemo(function ListComponent2({
       }
     ),
     ListFooterComponent && /* @__PURE__ */ React2.createElement(LayoutView, { onLayoutChange: onLayoutFooterInternal, style: ListFooterComponentStyle }, getComponent(ListFooterComponent)),
-    Platform2.OS === "web" && /* @__PURE__ */ React2.createElement(WebAnchoredEndSpace, { horizontal }),
+    Platform.OS === "web" && /* @__PURE__ */ React2.createElement(WebAnchoredEndSpace, { horizontal }),
     IS_DEV && ENABLE_DEVMODE
   );
 });
@@ -1072,7 +1070,7 @@ function useDevChecksImpl(props) {
     const state = ctx.state;
     const dataLength = state.props.data.length;
     const useWindowScrollResolved = state.props.useWindowScroll;
-    if (Platform2.OS !== "web" || useWindowScrollResolved || dataLength < WEB_UNBOUNDED_HEIGHT_MIN_DATA_LENGTH) {
+    if (Platform.OS !== "web" || useWindowScrollResolved || dataLength < WEB_UNBOUNDED_HEIGHT_MIN_DATA_LENGTH) {
       return;
     }
     const warnIfUnboundedOuterSize = () => {
@@ -1478,7 +1476,7 @@ function finishInitialScroll(ctx, options) {
   }
   const complete = () => {
     var _a4, _b2, _c2, _d, _e;
-    const shouldReleaseDeferredPublicOnScroll = Platform2.OS === "web" && ((_a4 = state.initialScrollSession) == null ? void 0 : _a4.kind) === "bootstrap";
+    const shouldReleaseDeferredPublicOnScroll = Platform.OS === "web" && ((_a4 = state.initialScrollSession) == null ? void 0 : _a4.kind) === "bootstrap";
     const finalScrollOffset = (_d = (_c2 = (_b2 = options == null ? void 0 : options.resolvedOffset) != null ? _b2 : state.scrollPending) != null ? _c2 : state.scroll) != null ? _d : 0;
     initialScrollWatchdog.clear(state);
     if ((options == null ? void 0 : options.preserveTarget) && state.initialScroll) {
@@ -1670,7 +1668,7 @@ function clampScrollOffset(ctx, offset, scrollTarget) {
   const state = ctx.state;
   const contentSize = getContentSize(ctx);
   let clampedOffset = offset;
-  if (Number.isFinite(contentSize) && Number.isFinite(state.scrollLength) && (Platform2.OS !== "android" || state.lastLayout)) {
+  if (Number.isFinite(contentSize) && Number.isFinite(state.scrollLength) && (Platform.OS !== "android" || state.lastLayout)) {
     const baseMaxOffset = Math.max(0, contentSize - state.scrollLength);
     const viewOffset = scrollTarget == null ? void 0 : scrollTarget.viewOffset;
     const extraEndOffset = typeof viewOffset === "number" && viewOffset < 0 ? -viewOffset : 0;
@@ -1837,7 +1835,7 @@ function checkFinishedScrollFallback(ctx) {
         );
         const completionState = getResolvedScrollCompletionState(ctx, isStillScrollingTo);
         const canFinishAfterSilentNativeDispatch = silentInitialDispatch && completionState.isAtResolvedTarget && numChecks >= 1;
-        const shouldRetrySilentInitialNativeScroll = Platform2.OS === "android" && canFinishAfterSilentNativeDispatch && !initialScrollCompletion.didRetrySilentInitialScroll(state);
+        const shouldRetrySilentInitialNativeScroll = Platform.OS === "android" && canFinishAfterSilentNativeDispatch && !initialScrollCompletion.didRetrySilentInitialScroll(state);
         if (shouldRetrySilentInitialNativeScroll) {
           const targetOffset = (_b = (_a3 = getInitialScrollWatchdogTargetOffset(state)) != null ? _a3 : isStillScrollingTo.targetOffset) != null ? _b : 0;
           const jiggleOffset = targetOffset >= SILENT_INITIAL_SCROLL_TARGET_EPSILON ? targetOffset - SILENT_INITIAL_SCROLL_TARGET_EPSILON : targetOffset + SILENT_INITIAL_SCROLL_TARGET_EPSILON;
@@ -1955,7 +1953,7 @@ function scrollTo(ctx, params) {
   }
   state.scrollPending = targetOffset;
   syncInitialScrollNativeWatchdog(state, { isInitialScroll, requestedOffset: offset, targetOffset });
-  if (forceScroll || !isInitialScroll || Platform2.OS === "android") {
+  if (forceScroll || !isInitialScroll || Platform.OS === "android") {
     doScrollTo(ctx, { animated, horizontal, isInitialScroll, offset });
   } else {
     state.scroll = offset;
@@ -2432,7 +2430,7 @@ function startBootstrapInitialScrollOnMount(ctx, options) {
   } else {
     startBootstrapInitialScrollSession(state, {
       scroll: offset,
-      seedContentOffset: Platform2.OS === "web" ? 0 : offset,
+      seedContentOffset: Platform.OS === "web" ? 0 : offset,
       targetIndexSeed: target.index
     });
     ensureBootstrapInitialScrollFrameTicker(ctx);
@@ -2629,7 +2627,7 @@ function evaluateBootstrapInitialScroll(ctx) {
     queueBootstrapInitialScrollReevaluation(state);
     return;
   }
-  if (Platform2.OS !== "web" && Platform2.OS !== "android" && Math.abs(bootstrapInitialScroll.seedContentOffset - resolvedOffset) <= 1 && Math.abs(getObservedBootstrapInitialScrollOffset(state) - resolvedOffset) <= 1) {
+  if (Platform.OS !== "web" && Platform.OS !== "android" && Math.abs(bootstrapInitialScroll.seedContentOffset - resolvedOffset) <= 1 && Math.abs(getObservedBootstrapInitialScrollOffset(state) - resolvedOffset) <= 1) {
     finishBootstrapInitialScrollWithoutScroll(ctx, resolvedOffset);
   } else {
     clearBootstrapInitialScrollSession(state);
@@ -2637,7 +2635,7 @@ function evaluateBootstrapInitialScroll(ctx) {
       forceScroll: true,
       resolvedOffset,
       target: initialScroll,
-      waitForCompletionFrame: Platform2.OS === "web"
+      waitForCompletionFrame: Platform.OS === "web"
     });
   }
 }
@@ -2664,7 +2662,7 @@ function abortBootstrapInitialScroll(ctx) {
       forceScroll: true,
       resolvedOffset: bootstrapInitialScroll.scroll,
       target: initialScroll,
-      waitForCompletionFrame: Platform2.OS === "web"
+      waitForCompletionFrame: Platform.OS === "web"
     });
   } else {
     finishBootstrapInitialScrollWithoutScroll(
@@ -2752,7 +2750,7 @@ function handleInitialScrollDataChange(ctx, options) {
 function requestAdjust(ctx, positionDiff, dataChanged) {
   const state = ctx.state;
   if (Math.abs(positionDiff) > 0.1) {
-    const needsScrollWorkaround = Platform2.OS === "android" && !IsNewArchitecture && dataChanged && state.scroll <= positionDiff;
+    const needsScrollWorkaround = Platform.OS === "android" && !IsNewArchitecture && dataChanged && state.scroll <= positionDiff;
     const doit = () => {
       if (needsScrollWorkaround) {
         scrollTo(ctx, {
@@ -2771,7 +2769,7 @@ function requestAdjust(ctx, positionDiff, dataChanged) {
     const readyToRender = peek$(ctx, "readyToRender");
     if (readyToRender) {
       doit();
-      if (Platform2.OS !== "web") {
+      if (Platform.OS !== "web") {
         const threshold = state.scroll - positionDiff / 2;
         if (!state.ignoreScrollFromMVCP) {
           state.ignoreScrollFromMVCP = {};
@@ -2826,7 +2824,7 @@ function resolveAnchorLock(state, enableMVCPAnchorLock, mvcpData, now) {
   return lock;
 }
 function updateAnchorLock(state, params) {
-  if (Platform2.OS === "web") {
+  if (Platform.OS === "web") {
     const { anchorId, anchorPosition, dataChanged, now, positionDiff } = params;
     const enableMVCPAnchorLock = !!dataChanged || !!state.mvcpAnchorLock;
     const mvcpData = state.props.maintainVisibleContentPosition.data;
@@ -2848,7 +2846,7 @@ function updateAnchorLock(state, params) {
   }
 }
 function shouldQueueNativeMVCPAdjust(dataChanged, state, positionDiff, prevTotalSize, prevScroll, scrollTarget) {
-  if (!dataChanged || Platform2.OS === "web" || !state.props.maintainVisibleContentPosition.data || scrollTarget !== void 0 || positionDiff >= -MVCP_POSITION_EPSILON) {
+  if (!dataChanged || Platform.OS === "web" || !state.props.maintainVisibleContentPosition.data || scrollTarget !== void 0 || positionDiff >= -MVCP_POSITION_EPSILON) {
     return false;
   }
   const distanceFromEnd = prevTotalSize - prevScroll - state.scrollLength;
@@ -2947,7 +2945,7 @@ function prepareMVCP(ctx, dataChanged) {
   const {
     maintainVisibleContentPosition: { data: mvcpData, size: mvcpScroll, shouldRestorePosition }
   } = props;
-  const isWeb = Platform2.OS === "web";
+  const isWeb = Platform.OS === "web";
   const now = Date.now();
   const enableMVCPAnchorLock = isWeb && (!!dataChanged || !!state.mvcpAnchorLock);
   const scrollingTo = state.scrollingTo;
@@ -3362,7 +3360,7 @@ function updateItemPositions(ctx, dataChanged, { startIndex, scrollBottomBuffere
   const layoutConfig = overrideItemLayout ? { span: 1 } : void 0;
   const lastScrollDelta = state.lastScrollDelta;
   const velocity = getScrollVelocity(state);
-  const shouldOptimize = !forceFullUpdate && !dataChanged && (optimizeForVisibleWindow || Math.abs(velocity) > 0 || Platform2.OS === "web" && state.scrollLength > 0 && lastScrollDelta > state.scrollLength);
+  const shouldOptimize = !forceFullUpdate && !dataChanged && (optimizeForVisibleWindow || Math.abs(velocity) > 0 || Platform.OS === "web" && state.scrollLength > 0 && lastScrollDelta > state.scrollLength);
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = !getEstimatedItemSize;
   const preferCachedSize = !doMVCP || dataChanged || state.scrollAdjustHandler.getAdjust() !== 0 || ((_b = peek$(ctx, "scrollAdjustPending")) != null ? _b : 0) !== 0;
@@ -3701,6 +3699,7 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
   const numContainers = peek$(ctx, "numContainers");
   const state = ctx.state;
   const { stickyContainerPool, containerItemTypes } = state;
+  const shouldAvoidAssignedContainerReuse = state.props.recycleItems && !!state.props.positionComponentInternal;
   const result = [];
   const availableContainers = [];
   const pendingRemovalSet = new Set(pendingRemoval);
@@ -3757,18 +3756,20 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
       }
     }
   }
-  for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
-    if (stickyContainerPool.has(u)) {
-      continue;
-    }
-    const key = peek$(ctx, `containerItemKey${u}`);
-    if (key === void 0) continue;
-    const index = state.indexByKey.get(key);
-    const isOutOfView = index < startBuffered || index > endBuffered;
-    if (isOutOfView) {
-      const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
-      if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
-        availableContainers.push({ distance, index: u });
+  if (!shouldAvoidAssignedContainerReuse) {
+    for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
+      if (stickyContainerPool.has(u)) {
+        continue;
+      }
+      const key = peek$(ctx, `containerItemKey${u}`);
+      if (key === void 0) continue;
+      const index = state.indexByKey.get(key);
+      const isOutOfView = index < startBuffered || index > endBuffered;
+      if (isOutOfView) {
+        const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
+        if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
+          availableContainers.push({ distance, index: u });
+        }
       }
     }
   }
@@ -3973,7 +3974,7 @@ function calculateItemsInView(ctx, params = {}) {
       if (top === null && bottom === null) {
         state.scrollForNextCalculateItemsInView = void 0;
       } else if ((top === null || scrollTopBuffered > top) && (bottom === null || scrollBottomBuffered < bottom)) {
-        if (Platform2.OS !== "web" || !isInMVCPActiveMode(state)) {
+        if (Platform.OS !== "web" || !isInMVCPActiveMode(state)) {
           return;
         }
       }
@@ -4247,7 +4248,7 @@ function calculateItemsInView(ctx, params = {}) {
         }
       }
     }
-    if (Platform2.OS === "web" && didChangePositions) {
+    if (Platform.OS === "web" && didChangePositions) {
       set$(ctx, "lastPositionUpdate", Date.now());
     }
     if (suppressInitialScrollSideEffects) {
@@ -4561,7 +4562,7 @@ function updateScroll(ctx, newScroll, forceUpdate) {
       (_a4 = state.triggerCalculateItemsInView) == null ? void 0 : _a4.call(state, { doMVCP: scrollingTo !== void 0 });
       checkThresholds(ctx);
     };
-    if (Platform2.OS === "web" && scrollLength > 0 && scrollingTo === void 0 && scrollDelta > scrollLength) {
+    if (Platform.OS === "web" && scrollLength > 0 && scrollingTo === void 0 && scrollDelta > scrollLength) {
       flushSync(runCalculateItems);
     } else {
       runCalculateItems();
@@ -4594,7 +4595,7 @@ function trackInitialScrollNativeProgress(state, newScroll) {
 }
 function shouldDeferPublicOnScroll(state) {
   var _a3;
-  return Platform2.OS === "web" && !!state.initialScroll && ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "bootstrap" && !state.didFinishInitialScroll;
+  return Platform.OS === "web" && !!state.initialScroll && ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "bootstrap" && !state.didFinishInitialScroll;
 }
 function cloneScrollEvent(event) {
   return {
@@ -4744,7 +4745,7 @@ function maybeUpdateAnchoredEndSpace(ctx) {
 // src/core/updateItemSize.ts
 function runOrScheduleMVCPRecalculate(ctx) {
   const state = ctx.state;
-  if (Platform2.OS === "web") {
+  if (Platform.OS === "web") {
     if (!state.mvcpAnchorLock) {
       if (state.queuedMVCPRecalculate !== void 0) {
         cancelAnimationFrame(state.queuedMVCPRecalculate);
@@ -4870,7 +4871,7 @@ function updateOneItemSize(ctx, itemKey, sizeObj) {
   const index = indexByKey.get(itemKey);
   const prevSize = getItemSize(ctx, itemKey, index, data[index]);
   const rawSize = horizontal ? sizeObj.width : sizeObj.height;
-  const size = Platform2.OS === "web" ? Math.round(rawSize) : roundSize(rawSize);
+  const size = Platform.OS === "web" ? Math.round(rawSize) : roundSize(rawSize);
   const prevSizeKnown = sizesKnown.get(itemKey);
   sizesKnown.set(itemKey, size);
   if (!getEstimatedItemSize && !getFixedItemSize && size > 0) {
@@ -5494,7 +5495,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     dataVersion,
     keyExtractor
   ]);
-  const useWindowScrollResolved = Platform2.OS === "web" && !!useWindowScroll && !renderScrollComponent;
+  const useWindowScrollResolved = Platform.OS === "web" && !!useWindowScroll && !renderScrollComponent;
   const refState = useRef(void 0);
   const hasOverrideItemLayout = !!overrideItemLayout;
   const prevHasOverrideItemLayout = useRef(hasOverrideItemLayout);
@@ -5590,7 +5591,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }
   const throttledOnScroll = useThrottledOnScroll(onScrollProp != null ? onScrollProp : noopOnScroll, scrollEventThrottle != null ? scrollEventThrottle : 0);
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? throttledOnScroll : onScrollProp;
-  const anchoredEndSpaceResolved = Platform2.OS === "web" && anchoredEndSpace ? { ...anchoredEndSpace, includeInEndInset: true } : anchoredEndSpace;
+  const anchoredEndSpaceResolved = Platform.OS === "web" && anchoredEndSpace ? { ...anchoredEndSpace, includeInEndInset: true } : anchoredEndSpace;
   state.props = {
     alignItemsAtEnd,
     alwaysRender,
@@ -5650,7 +5651,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     setPaddingTop(ctx, { stylePaddingTop: stylePaddingTopState });
     refState.current.props.stylePaddingBottom = stylePaddingBottomState;
     let paddingDiff = stylePaddingTopState - prevPaddingTop;
-    if (shouldAdjustPadding && maintainVisibleContentPositionConfig.size && paddingDiff && prevPaddingTop !== void 0 && Platform2.OS === "ios") {
+    if (shouldAdjustPadding && maintainVisibleContentPositionConfig.size && paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
       if (state.scroll < 0) {
         paddingDiff += state.scroll;
       }
@@ -5672,7 +5673,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return void 0;
     }
     const resolvedOffset = (_a4 = initialScroll.contentOffset) != null ? _a4 : resolveInitialScrollOffset(ctx, initialScroll);
-    return usesBootstrapInitialScroll && ((_b2 = state.initialScrollSession) == null ? void 0 : _b2.kind) === "bootstrap" && Platform2.OS === "web" ? void 0 : resolvedOffset;
+    return usesBootstrapInitialScroll && ((_b2 = state.initialScrollSession) == null ? void 0 : _b2.kind) === "bootstrap" && Platform.OS === "web" ? void 0 : resolvedOffset;
   }, [usesBootstrapInitialScroll]);
   useLayoutEffect(() => {
     initializeInitialScrollOnMount(ctx, {
@@ -5827,7 +5828,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   });
   useImperativeHandle(forwardedRef, () => createImperativeHandle(ctx), []);
   useEffect(() => {
-    if (Platform2.OS !== "web" || usesBootstrapInitialScroll) {
+    if (Platform.OS !== "web" || usesBootstrapInitialScroll) {
       return;
     }
     advanceCurrentInitialScrollSession(ctx);

package/react-native.web.js

@@ -4251,6 +4251,7 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
   const numContainers = peek$(ctx, "numContainers");
   const state = ctx.state;
   const { stickyContainerPool, containerItemTypes } = state;
+  const shouldAvoidAssignedContainerReuse = state.props.recycleItems && !!state.props.positionComponentInternal;
   const result = [];
   const availableContainers = [];
   const pendingRemovalSet = new Set(pendingRemoval);
@@ -4307,18 +4308,20 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
       }
     }
   }
-  for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
-    if (stickyContainerPool.has(u)) {
-      continue;
-    }
-    const key = peek$(ctx, `containerItemKey${u}`);
-    if (key === void 0) continue;
-    const index = state.indexByKey.get(key);
-    const isOutOfView = index < startBuffered || index > endBuffered;
-    if (isOutOfView) {
-      const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
-      if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
-        availableContainers.push({ distance, index: u });
+  if (!shouldAvoidAssignedContainerReuse) {
+    for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
+      if (stickyContainerPool.has(u)) {
+        continue;
+      }
+      const key = peek$(ctx, `containerItemKey${u}`);
+      if (key === void 0) continue;
+      const index = state.indexByKey.get(key);
+      const isOutOfView = index < startBuffered || index > endBuffered;
+      if (isOutOfView) {
+        const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
+        if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
+          availableContainers.push({ distance, index: u });
+        }
       }
     }
   }

package/react-native.web.mjs

@@ -4230,6 +4230,7 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
   const numContainers = peek$(ctx, "numContainers");
   const state = ctx.state;
   const { stickyContainerPool, containerItemTypes } = state;
+  const shouldAvoidAssignedContainerReuse = state.props.recycleItems && !!state.props.positionComponentInternal;
   const result = [];
   const availableContainers = [];
   const pendingRemovalSet = new Set(pendingRemoval);
@@ -4286,18 +4287,20 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
       }
     }
   }
-  for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
-    if (stickyContainerPool.has(u)) {
-      continue;
-    }
-    const key = peek$(ctx, `containerItemKey${u}`);
-    if (key === void 0) continue;
-    const index = state.indexByKey.get(key);
-    const isOutOfView = index < startBuffered || index > endBuffered;
-    if (isOutOfView) {
-      const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
-      if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
-        availableContainers.push({ distance, index: u });
+  if (!shouldAvoidAssignedContainerReuse) {
+    for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
+      if (stickyContainerPool.has(u)) {
+        continue;
+      }
+      const key = peek$(ctx, `containerItemKey${u}`);
+      if (key === void 0) continue;
+      const index = state.indexByKey.get(key);
+      const isOutOfView = index < startBuffered || index > endBuffered;
+      if (isOutOfView) {
+        const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
+        if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
+          availableContainers.push({ distance, index: u });
+        }
       }
     }
   }

package/react.js

@@ -4251,6 +4251,7 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
   const numContainers = peek$(ctx, "numContainers");
   const state = ctx.state;
   const { stickyContainerPool, containerItemTypes } = state;
+  const shouldAvoidAssignedContainerReuse = state.props.recycleItems && !!state.props.positionComponentInternal;
   const result = [];
   const availableContainers = [];
   const pendingRemovalSet = new Set(pendingRemoval);
@@ -4307,18 +4308,20 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
       }
     }
   }
-  for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
-    if (stickyContainerPool.has(u)) {
-      continue;
-    }
-    const key = peek$(ctx, `containerItemKey${u}`);
-    if (key === void 0) continue;
-    const index = state.indexByKey.get(key);
-    const isOutOfView = index < startBuffered || index > endBuffered;
-    if (isOutOfView) {
-      const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
-      if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
-        availableContainers.push({ distance, index: u });
+  if (!shouldAvoidAssignedContainerReuse) {
+    for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
+      if (stickyContainerPool.has(u)) {
+        continue;
+      }
+      const key = peek$(ctx, `containerItemKey${u}`);
+      if (key === void 0) continue;
+      const index = state.indexByKey.get(key);
+      const isOutOfView = index < startBuffered || index > endBuffered;
+      if (isOutOfView) {
+        const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
+        if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
+          availableContainers.push({ distance, index: u });
+        }
       }
     }
   }

package/react.mjs

@@ -4230,6 +4230,7 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
   const numContainers = peek$(ctx, "numContainers");
   const state = ctx.state;
   const { stickyContainerPool, containerItemTypes } = state;
+  const shouldAvoidAssignedContainerReuse = state.props.recycleItems && !!state.props.positionComponentInternal;
   const result = [];
   const availableContainers = [];
   const pendingRemovalSet = new Set(pendingRemoval);
@@ -4286,18 +4287,20 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
       }
     }
   }
-  for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
-    if (stickyContainerPool.has(u)) {
-      continue;
-    }
-    const key = peek$(ctx, `containerItemKey${u}`);
-    if (key === void 0) continue;
-    const index = state.indexByKey.get(key);
-    const isOutOfView = index < startBuffered || index > endBuffered;
-    if (isOutOfView) {
-      const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
-      if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
-        availableContainers.push({ distance, index: u });
+  if (!shouldAvoidAssignedContainerReuse) {
+    for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
+      if (stickyContainerPool.has(u)) {
+        continue;
+      }
+      const key = peek$(ctx, `containerItemKey${u}`);
+      if (key === void 0) continue;
+      const index = state.indexByKey.get(key);
+      const isOutOfView = index < startBuffered || index > endBuffered;
+      if (isOutOfView) {
+        const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
+        if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
+          availableContainers.push({ distance, index: u });
+        }
       }
     }
   }

package/reanimated.js

@@ -89,15 +89,15 @@ var ReanimatedPositionViewSticky = typedMemo(function ReanimatedPositionViewStic
   );
   const stickyOffset = (_a = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a : 0;
   const stickyStart = position + headerSize + stylePaddingTop - stickyOffset;
-  const transformStyle = Reanimated.useAnimatedStyle(() => {
+  const stickyPositionStyle = Reanimated.useAnimatedStyle(() => {
     const delta = Math.max(0, stickyScrollOffset.value - stickyStart);
     const stickyPosition = position + delta;
     const resolvedPosition = pushLimit !== void 0 ? Math.min(stickyPosition, pushLimit) : stickyPosition;
-    return horizontal ? { transform: [{ translateX: resolvedPosition }] } : { transform: [{ translateY: resolvedPosition }] };
+    return horizontal ? { left: resolvedPosition } : { top: resolvedPosition };
   }, [horizontal, position, pushLimit, stickyStart]);
   const viewStyle = React__namespace.useMemo(
-    () => [style, { zIndex: index + 1e3 }, transformStyle],
-    [index, style, transformStyle]
+    () => [style, { zIndex: index + 1e3 }, stickyPositionStyle],
+    [index, stickyPositionStyle, style]
   );
   return /* @__PURE__ */ React__namespace.createElement(Reanimated__default.default.View, { ref: refView, style: viewStyle, ...rest }, /* @__PURE__ */ React__namespace.createElement(StickyOverlay, { stickyHeaderConfig }), children);
 });

package/reanimated.mjs

@@ -65,15 +65,15 @@ var ReanimatedPositionViewSticky = typedMemo(function ReanimatedPositionViewStic
   );
   const stickyOffset = (_a = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a : 0;
   const stickyStart = position + headerSize + stylePaddingTop - stickyOffset;
-  const transformStyle = useAnimatedStyle(() => {
+  const stickyPositionStyle = useAnimatedStyle(() => {
     const delta = Math.max(0, stickyScrollOffset.value - stickyStart);
     const stickyPosition = position + delta;
     const resolvedPosition = pushLimit !== void 0 ? Math.min(stickyPosition, pushLimit) : stickyPosition;
-    return horizontal ? { transform: [{ translateX: resolvedPosition }] } : { transform: [{ translateY: resolvedPosition }] };
+    return horizontal ? { left: resolvedPosition } : { top: resolvedPosition };
   }, [horizontal, position, pushLimit, stickyStart]);
   const viewStyle = React.useMemo(
-    () => [style, { zIndex: index + 1e3 }, transformStyle],
-    [index, style, transformStyle]
+    () => [style, { zIndex: index + 1e3 }, stickyPositionStyle],
+    [index, stickyPositionStyle, style]
   );
   return /* @__PURE__ */ React.createElement(Reanimated.View, { ref: refView, style: viewStyle, ...rest }, /* @__PURE__ */ React.createElement(StickyOverlay, { stickyHeaderConfig }), children);
 });