@legendapp/list 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 3.3.0
+
+- Feat: Add `dataKey` so apps can tell the list when the current array represents a different dataset, such as switching conversations or feeds without remounting `LegendList`.
+- Feat: `experimental_adaptiveRender.onChange` now receives a reason (`initial`, `ready`, or `scroll`) so item components can tell why the render mode changed.
+- Fix: Large user scroll jumps render the visible rows first and fill the normal draw distance on the next frame, making long jumps less likely to land on a blank range.
+- Fix: `maintainScrollAtEnd` reruns a pending keep-at-end request after the current one settles, so a footer resize and a new message arriving together keep chat-style lists pinned to the end.
+- Fix: Replacing data after clearing the list, or changing `dataKey` for a non-empty replacement, resets layout readiness and uses the latest initial scroll target for the new dataset.
+
 ## 3.2.0
 
 - Feat: Add `onFirstVisibleItemChanged` so apps can track the item at the top of the viewport without setting up full viewability callbacks.

package/animated.d.ts

@@ -92,6 +92,7 @@ interface NativeSyntheticEvent<T> {
 type ViewStyle = Record<string, unknown>;
 type StyleProp<T> = T | T[] | null | undefined | false;
 type AdaptiveRender = "normal" | "light";
+type AdaptiveRenderChangeReason = "initial" | "ready" | "scroll";
 interface AdaptiveRenderConfig {
     /**
      * Mode to use before the list is ready to render.
@@ -116,7 +117,7 @@ interface AdaptiveRenderConfig {
     /**
      * Called when the list-level adaptive render changes.
      */
-    onChange?: (mode: AdaptiveRender) => void;
+    onChange?: (mode: AdaptiveRender, reason: AdaptiveRenderChangeReason) => void;
 }
 type BaseScrollViewProps<TScrollView> = Omit<TScrollView, "contentOffset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children" | "onScroll">;
 interface DataModeProps<ItemT, TItemType extends string | undefined> {
@@ -158,6 +159,11 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Style applied to each column's wrapper view.
      */
     columnWrapperStyle?: ColumnWrapperStyle;
+    /**
+     * Identity token for the dataset represented by `data`.
+     * Change this when replacing the current dataset with a different logical dataset.
+     */
+    dataKey?: Key;
     /**
      * Version token that forces the list to treat data as updated even when the array reference is stable.
      * Increment or change this when mutating the data array in place.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,

package/react-native.d.ts

@@ -92,6 +92,7 @@ interface NativeSyntheticEvent<T> {
 type ViewStyle = Record<string, unknown>;
 type StyleProp<T> = T | T[] | null | undefined | false;
 type AdaptiveRender = "normal" | "light";
+type AdaptiveRenderChangeReason = "initial" | "ready" | "scroll";
 interface AdaptiveRenderConfig {
     /**
      * Mode to use before the list is ready to render.
@@ -116,7 +117,7 @@ interface AdaptiveRenderConfig {
     /**
      * Called when the list-level adaptive render changes.
      */
-    onChange?: (mode: AdaptiveRender) => void;
+    onChange?: (mode: AdaptiveRender, reason: AdaptiveRenderChangeReason) => void;
 }
 type BaseScrollViewProps<TScrollView> = Omit<TScrollView, "contentOffset" | "maintainVisibleContentPosition" | "stickyHeaderIndices" | "removeClippedSubviews" | "children" | "onScroll">;
 interface DataModeProps<ItemT, TItemType extends string | undefined> {
@@ -158,6 +159,11 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Style applied to each column's wrapper view.
      */
     columnWrapperStyle?: ColumnWrapperStyle;
+    /**
+     * Identity token for the dataset represented by `data`.
+     * Change this when replacing the current dataset with a different logical dataset.
+     */
+    dataKey?: Key;
     /**
      * Version token that forces the list to treat data as updated even when the array reference is stable.
      * Increment or change this when mutating the data array in place.
@@ -764,4 +770,4 @@ declare function useSyncLayout(): () => void;
 
 declare const LegendList: LegendListComponent;
 
-export { type AdaptiveRender, type AdaptiveRenderConfig, type AlwaysRenderConfig, type ColumnWrapperStyle, type Insets, type LayoutRectangle, LegendList, type LegendListAverageItemSize, type LegendListComponent, type LegendListMetrics, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type LegendListState, type MaintainScrollAtEndOnOptions, type MaintainScrollAtEndOptions, type MaintainVisibleContentPositionConfig, type NativeScrollEvent, type NativeSyntheticEvent, type OnViewableItemsChanged, type OnViewableItemsChangedInfo, type ScrollIndexWithOffset, type ScrollIndexWithOffsetAndContentOffset, type ScrollIndexWithOffsetPosition, type StickyHeaderConfig, type StyleProp, type ViewAmountToken, type ViewStyle, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, useAdaptiveRender, useAdaptiveRenderChange, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };
+export { type AdaptiveRender, type AdaptiveRenderChangeReason, type AdaptiveRenderConfig, type AlwaysRenderConfig, type ColumnWrapperStyle, type Insets, type LayoutRectangle, LegendList, type LegendListAverageItemSize, type LegendListComponent, type LegendListMetrics, type LegendListProps, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type LegendListState, type MaintainScrollAtEndOnOptions, type MaintainScrollAtEndOptions, type MaintainVisibleContentPositionConfig, type NativeScrollEvent, type NativeSyntheticEvent, type OnViewableItemsChanged, type OnViewableItemsChangedInfo, type ScrollIndexWithOffset, type ScrollIndexWithOffsetAndContentOffset, type ScrollIndexWithOffsetPosition, type StickyHeaderConfig, type StyleProp, type ViewAmountToken, type ViewStyle, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, useAdaptiveRender, useAdaptiveRenderChange, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };

package/react-native.js

@@ -1116,32 +1116,34 @@ function scheduleAdaptiveRenderExit(ctx, exitDelay) {
   const state = ctx.state;
   clearAdaptiveRenderExitTimeout(ctx);
   if (exitDelay <= 0) {
-    setAdaptiveRender(ctx, "normal");
+    setAdaptiveRender(ctx, "normal", "scroll");
   } else {
     const timeout = setTimeout(() => {
       state.timeouts.delete(timeout);
       state.timeoutAdaptiveRender = void 0;
-      setAdaptiveRender(ctx, "normal");
+      setAdaptiveRender(ctx, "normal", "scroll");
     }, exitDelay);
     state.timeoutAdaptiveRender = timeout;
     state.timeouts.add(timeout);
   }
 }
-function setAdaptiveRender(ctx, mode) {
+function setAdaptiveRender(ctx, mode, reason) {
   var _a3, _b;
   const previousMode = peek$(ctx, "adaptiveRender");
   if (previousMode !== mode) {
     set$(ctx, "adaptiveRender", mode);
-    (_b = (_a3 = ctx.state.props.adaptiveRender) == null ? void 0 : _a3.onChange) == null ? void 0 : _b.call(_a3, mode);
+    (_b = (_a3 = ctx.state.props.adaptiveRender) == null ? void 0 : _a3.onChange) == null ? void 0 : _b.call(_a3, mode, reason);
   }
 }
 function resetAdaptiveRender(ctx) {
+  var _a3, _b;
   clearAdaptiveRenderExitTimeout(ctx);
-  if (peek$(ctx, "adaptiveRender") !== "normal") {
-    setAdaptiveRender(ctx, "normal");
+  const mode = (_b = (_a3 = ctx.state.props.adaptiveRender) == null ? void 0 : _a3.initialMode) != null ? _b : "normal";
+  if (peek$(ctx, "adaptiveRender") !== mode) {
+    setAdaptiveRender(ctx, mode, "initial");
   }
 }
-function updateAdaptiveRender(ctx, scrollVelocity) {
+function updateAdaptiveRender(ctx, scrollVelocity, options) {
   var _a3, _b, _c;
   const state = ctx.state;
   const adaptiveRender = state.props.adaptiveRender;
@@ -1153,11 +1155,11 @@ function updateAdaptiveRender(ctx, scrollVelocity) {
       const exitVelocity = (_b = adaptiveRender.exitVelocity) != null ? _b : isWeb ? DEFAULT_WEB_ADAPTIVE_RENDER_EXIT_VELOCITY : DEFAULT_ADAPTIVE_RENDER_EXIT_VELOCITY;
       const exitDelay = (_c = adaptiveRender.exitDelay) != null ? _c : isWeb ? DEFAULT_WEB_ADAPTIVE_RENDER_EXIT_DELAY : DEFAULT_ADAPTIVE_RENDER_EXIT_DELAY;
       const threshold = currentMode === "light" ? exitVelocity : enterVelocity;
-      const nextMode = Math.abs(scrollVelocity) > threshold ? "light" : "normal";
+      const nextMode = (options == null ? void 0 : options.forceLight) || Math.abs(scrollVelocity) > threshold ? "light" : "normal";
       const previousMode = state.timeoutAdaptiveRender !== void 0 ? "normal" : currentMode;
       if (nextMode !== previousMode) {
         if (nextMode === "light") {
-          setAdaptiveRender(ctx, "light");
+          setAdaptiveRender(ctx, "light", "scroll");
           scheduleAdaptiveRenderExit(ctx, exitDelay);
         } else if (currentMode === "light") {
           scheduleAdaptiveRenderExit(ctx, exitDelay);
@@ -1170,16 +1172,43 @@ function updateAdaptiveRender(ctx, scrollVelocity) {
 }
 
 // src/utils/getEffectiveDrawDistance.ts
-var INITIAL_DRAW_DISTANCE = 100;
-function getEffectiveDrawDistance(ctx) {
+var INITIAL_DRAW_DISTANCE = 50;
+function getEffectiveDrawDistance(ctx, mode) {
   var _a3;
   const drawDistance = ctx.state.props.drawDistance;
   const initialScroll = ctx.state.initialScroll;
   const needsFullInitialDrawDistance = initialScroll !== void 0 && ((_a3 = initialScroll.viewPosition) != null ? _a3 : 0) > 0;
-  return peek$(ctx, "readyToRender") || needsFullInitialDrawDistance ? drawDistance : Math.min(drawDistance, INITIAL_DRAW_DISTANCE);
+  const shouldCapDrawDistance = mode === "visible-first" || mode !== "full" && !peek$(ctx, "readyToRender") && !needsFullInitialDrawDistance;
+  return shouldCapDrawDistance ? Math.min(drawDistance, INITIAL_DRAW_DISTANCE) : drawDistance;
+}
+function scheduleFullDrawDistancePrewarm(ctx) {
+  const { state } = ctx;
+  if (state.props.drawDistance <= INITIAL_DRAW_DISTANCE || state.queuedFullDrawDistancePrewarm !== void 0) {
+    return;
+  }
+  state.queuedFullDrawDistancePrewarm = requestAnimationFrame(() => {
+    var _a3;
+    state.queuedFullDrawDistancePrewarm = void 0;
+    (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state);
+  });
 }
 
 // src/utils/setInitialRenderState.ts
+function resetInitialRenderState(ctx, {
+  resetLayout,
+  resetInitialScroll
+}) {
+  const { state } = ctx;
+  if (resetLayout) {
+    state.didContainersLayout = false;
+    state.queuedInitialLayout = false;
+  }
+  if (resetInitialScroll) {
+    state.didFinishInitialScroll = false;
+  }
+  set$(ctx, "readyToRender", false);
+  resetAdaptiveRender(ctx);
+}
 function setInitialRenderState(ctx, {
   didLayout,
   didInitialScroll
@@ -1198,15 +1227,15 @@ function setInitialRenderState(ctx, {
   const isReadyToRender = Boolean(state.didContainersLayout && state.didFinishInitialScroll);
   if (isReadyToRender && !peek$(ctx, "readyToRender")) {
     set$(ctx, "readyToRender", true);
-    setAdaptiveRender(ctx, "normal");
+    setAdaptiveRender(ctx, "normal", "ready");
     if (state.props.drawDistance > INITIAL_DRAW_DISTANCE) {
-      requestAnimationFrame(() => {
-        var _a3;
-        (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state);
-      });
+      scheduleFullDrawDistancePrewarm(ctx);
     }
-    if (onLoad) {
-      onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
+    if (!state.didLoad) {
+      state.didLoad = true;
+      if (onLoad) {
+        onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
+      }
     }
   }
 }
@@ -1735,8 +1764,8 @@ function doMaintainScrollAtEnd(ctx) {
     state.pendingMaintainScrollAtEnd = shouldMaintainScrollAtEnd;
     return false;
   }
-  state.pendingMaintainScrollAtEnd = false;
   if (shouldMaintainScrollAtEnd) {
+    state.pendingMaintainScrollAtEnd = false;
     const contentSize = getContentSize(ctx);
     if (contentSize < state.scrollLength) {
       state.scroll = 0;
@@ -1767,6 +1796,9 @@ function doMaintainScrollAtEnd(ctx) {
             () => {
               if (state.maintainingScrollAtEnd === activeState) {
                 state.maintainingScrollAtEnd = void 0;
+                if (state.pendingMaintainScrollAtEnd) {
+                  doMaintainScrollAtEnd(ctx);
+                }
               }
             },
             maintainScrollAtEnd.animated ? 500 : 0
@@ -1775,9 +1807,12 @@ function doMaintainScrollAtEnd(ctx) {
           state.maintainingScrollAtEnd = void 0;
         }
       });
+    } else {
+      state.pendingMaintainScrollAtEnd = true;
     }
     return true;
   }
+  state.pendingMaintainScrollAtEnd = false;
   return false;
 }
 
@@ -2201,8 +2236,6 @@ function updateScroll(ctx, newScroll, forceUpdate, options) {
   if (scrollHistory.length > 5) {
     scrollHistory.shift();
   }
-  const scrollVelocity = getScrollVelocity(state);
-  updateAdaptiveRender(ctx, scrollVelocity);
   if (ignoreScrollFromMVCP && !scrollingTo) {
     const { lt, gt } = ignoreScrollFromMVCP;
     if (lt && newScroll < lt || gt && newScroll > gt) {
@@ -2217,6 +2250,9 @@ function updateScroll(ctx, newScroll, forceUpdate, options) {
   const scrollDelta = Math.abs(newScroll - prevScroll);
   const didResolvePendingNativeMVCPAdjust = resolvePendingNativeMVCPAdjust(ctx, newScroll);
   const scrollLength = state.scrollLength;
+  const isLargeUserScrollJump = scrollLength > 0 && scrollingTo === void 0 && scrollDelta > scrollLength && !state.pendingNativeMVCPAdjust;
+  const scrollVelocity = getScrollVelocity(state);
+  updateAdaptiveRender(ctx, scrollVelocity, { forceLight: isLargeUserScrollJump });
   const lastCalculated = state.scrollLastCalculate;
   const useAggressiveItemRecalculation = isInMVCPActiveMode(state);
   const shouldUpdate = useAggressiveItemRecalculation || didResolvePendingNativeMVCPAdjust || forceUpdate || lastCalculated === void 0 || Math.abs(state.scroll - lastCalculated) > 2;
@@ -2226,10 +2262,17 @@ function updateScroll(ctx, newScroll, forceUpdate, options) {
     state.lastScrollDelta = scrollDelta;
     const runCalculateItems = () => {
       var _a4;
-      (_a4 = state.triggerCalculateItemsInView) == null ? void 0 : _a4.call(state, { doMVCP: scrollingTo !== void 0, scrollVelocity });
+      const calculateItemsParams = {
+        doMVCP: scrollingTo !== void 0,
+        scrollVelocity
+      };
+      if (isLargeUserScrollJump) {
+        calculateItemsParams.drawDistanceMode = "visible-first";
+      }
+      (_a4 = state.triggerCalculateItemsInView) == null ? void 0 : _a4.call(state, calculateItemsParams);
       checkThresholds(ctx);
     };
-    if (scrollLength > 0 && scrollingTo === void 0 && scrollDelta > scrollLength && !state.pendingNativeMVCPAdjust) {
+    if (isLargeUserScrollJump) {
       state.mvcpAnchorLock = void 0;
       state.pendingNativeMVCPAdjust = void 0;
       state.userScrollAnchorReset = { keys: /* @__PURE__ */ new Set() };
@@ -2238,6 +2281,7 @@ function updateScroll(ctx, newScroll, forceUpdate, options) {
         state.queuedMVCPRecalculate = void 0;
       }
       flushSync(runCalculateItems);
+      scheduleFullDrawDistancePrewarm(ctx);
     } else {
       runCalculateItems();
     }
@@ -2392,16 +2436,17 @@ function dispatchInitialScroll(ctx, params) {
     waitForInitialScrollCompletionFrame: waitForCompletionFrame
   });
 }
-function setInitialScrollTarget(state, target, options) {
+function setInitialScrollTarget(ctx, target, options) {
   var _a3;
+  const { state } = ctx;
   state.clearPreservedInitialScrollOnNextFinish = void 0;
   if (state.timeoutPreservedInitialScrollClear !== void 0) {
     clearTimeout(state.timeoutPreservedInitialScrollClear);
     state.timeoutPreservedInitialScrollClear = void 0;
   }
   state.initialScroll = target;
-  if ((options == null ? void 0 : options.resetDidFinish) && state.didFinishInitialScroll) {
-    state.didFinishInitialScroll = false;
+  if (options == null ? void 0 : options.resetDidFinish) {
+    resetInitialRenderState(ctx, { resetInitialScroll: true });
   }
   setInitialScrollSession(state, {
     kind: ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" ? "offset" : "bootstrap"
@@ -2455,7 +2500,7 @@ function advanceMeasuredInitialScroll(ctx, options) {
     return false;
   }
   if (didOffsetChange && ((_b = state.initialScrollSession) == null ? void 0 : _b.kind) !== "offset") {
-    setInitialScrollTarget(state, { ...initialScroll, contentOffset: resolvedOffset });
+    setInitialScrollTarget(ctx, { ...initialScroll, contentOffset: resolvedOffset });
   }
   const forceScroll = (_c = options == null ? void 0 : options.forceScroll) != null ? _c : !!queuedInitialLayout || isInitialScrollInProgress && didOffsetChange;
   dispatchInitialScroll(ctx, {
@@ -2728,7 +2773,6 @@ function areEquivalentBootstrapInitialScrollTargets(current, next) {
 }
 function clearPendingInitialScrollFooterLayout(ctx, options) {
   const { dataLength, stylePaddingBottom, target } = options;
-  const state = ctx.state;
   if (!shouldPreserveInitialScrollForFooterLayout(target)) {
     return;
   }
@@ -2738,7 +2782,7 @@ function clearPendingInitialScrollFooterLayout(ctx, options) {
     preserveForFooterLayout: void 0,
     stylePaddingBottom
   });
-  setInitialScrollTarget(state, clearedFooterTarget);
+  setInitialScrollTarget(ctx, clearedFooterTarget);
 }
 function clearFinishedViewportRetargetableInitialScroll(state) {
   clearPreservedInitialScrollTarget(state);
@@ -2885,7 +2929,7 @@ function handleBootstrapInitialScrollDataChange(ctx, options) {
       return;
     }
     if (!areEquivalentBootstrapInitialScrollTargets(initialScroll, updatedInitialScroll) || !!bootstrapInitialScroll || shouldResetDidFinish || didDataChange) {
-      setInitialScrollTarget(state, updatedInitialScroll, {
+      setInitialScrollTarget(ctx, updatedInitialScroll, {
         resetDidFinish: shouldResetDidFinish
       });
       rearmBootstrapInitialScroll(ctx, {
@@ -2900,7 +2944,7 @@ function handleBootstrapInitialScrollDataChange(ctx, options) {
     return;
   }
   if (bootstrapInitialScroll || shouldResetDidFinish) {
-    setInitialScrollTarget(state, initialScroll, {
+    setInitialScrollTarget(ctx, initialScroll, {
       resetDidFinish: shouldResetDidFinish
     });
     rearmBootstrapInitialScroll(ctx, {
@@ -2946,7 +2990,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
       });
     } else {
       const didFinishInitialScroll = !!state.didFinishInitialScroll;
-      setInitialScrollTarget(state, updatedInitialScroll, {
+      setInitialScrollTarget(ctx, updatedInitialScroll, {
         resetDidFinish: didFinishInitialScroll
       });
       rearmBootstrapInitialScroll(ctx, {
@@ -3135,7 +3179,7 @@ function initializeInitialScrollOnMount(ctx, options) {
   const resolvedInitialContentOffset = initialContentOffset != null ? initialContentOffset : 0;
   const preserveForFooterLayout = useBootstrapInitialScroll && initialScrollAtEnd && hasFooterComponent;
   if (initialScroll && (initialScroll.contentOffset === void 0 || !!initialScroll.preserveForFooterLayout !== preserveForFooterLayout && ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) !== "offset")) {
-    setInitialScrollTarget(state, {
+    setInitialScrollTarget(ctx, {
       ...initialScroll,
       contentOffset: resolvedInitialContentOffset,
       preserveForFooterLayout
@@ -3164,6 +3208,7 @@ function handleInitialScrollDataChange(ctx, options) {
   const {
     dataLength,
     didDataChange,
+    didStartFreshData,
     initialScrollAtEnd,
     latestInitialScroll,
     latestInitialScrollSessionKind,
@@ -3171,17 +3216,17 @@ function handleInitialScrollDataChange(ctx, options) {
     useBootstrapInitialScroll
   } = options;
   const state = ctx.state;
-  const previousDataLength = (_b = (_a3 = state.initialScrollSession) == null ? void 0 : _a3.previousDataLength) != null ? _b : 0;
-  const isFirstNonEmptyData = !state.hasHadNonEmptyData && dataLength > 0;
+  const previousInitialScrollDataLength = (_b = (_a3 = state.initialScrollSession) == null ? void 0 : _a3.previousDataLength) != null ? _b : 0;
+  const shouldUseLatestInitialScroll = dataLength > 0 && (!state.hasHadNonEmptyData || didStartFreshData);
   if (dataLength > 0) {
     state.hasHadNonEmptyData = true;
   }
-  if (isFirstNonEmptyData) {
+  if (shouldUseLatestInitialScroll) {
     if (latestInitialScroll) {
-      setInitialScrollTarget(state, latestInitialScroll);
+      setInitialScrollTarget(ctx, latestInitialScroll);
       setInitialScrollSession(state, {
         kind: latestInitialScrollSessionKind,
-        previousDataLength
+        previousDataLength: previousInitialScrollDataLength
       });
     } else {
       clearPreservedInitialScrollTarget(state);
@@ -3196,17 +3241,17 @@ function handleInitialScrollDataChange(ctx, options) {
       dataLength,
       didDataChange,
       initialScrollAtEnd,
-      previousDataLength,
+      previousDataLength: previousInitialScrollDataLength,
       stylePaddingBottom
     });
     return;
   }
-  const shouldReplayFinishedOffsetInitialScroll = previousDataLength === 0 && dataLength > 0 && !!state.initialScroll && ((_c = ctx.state.initialScrollSession) == null ? void 0 : _c.kind) === "offset" && !!state.didFinishInitialScroll;
-  if (previousDataLength !== 0 || dataLength === 0 || !state.initialScroll || !state.queuedInitialLayout || state.didFinishInitialScroll && !shouldReplayFinishedOffsetInitialScroll) {
+  const shouldReplayFinishedOffsetInitialScroll = previousInitialScrollDataLength === 0 && dataLength > 0 && !!state.initialScroll && ((_c = ctx.state.initialScrollSession) == null ? void 0 : _c.kind) === "offset" && !!state.didFinishInitialScroll;
+  if (previousInitialScrollDataLength !== 0 || dataLength === 0 || !state.initialScroll || !state.queuedInitialLayout || state.didFinishInitialScroll && !shouldReplayFinishedOffsetInitialScroll) {
     return;
   }
   if (shouldReplayFinishedOffsetInitialScroll) {
-    state.didFinishInitialScroll = false;
+    resetInitialRenderState(ctx, { resetInitialScroll: true });
   }
   advanceCurrentInitialScrollSession(ctx);
 }
@@ -4205,7 +4250,7 @@ function calculateItemsInView(ctx, params = {}) {
     const stickyHeaderIndicesSet = state.props.stickyHeaderIndicesSet || /* @__PURE__ */ new Set();
     const alwaysRenderArr = alwaysRenderIndicesArr || [];
     const alwaysRenderSet = alwaysRenderIndicesSet || /* @__PURE__ */ new Set();
-    const drawDistance = getEffectiveDrawDistance(ctx);
+    const drawDistance = getEffectiveDrawDistance(ctx, params.drawDistanceMode);
     const { dataChanged, doMVCP, forceFullItemPositions } = params;
     const bootstrapInitialScrollState = ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "bootstrap" ? state.initialScrollSession.bootstrap : void 0;
     const suppressInitialScrollSideEffects = !!bootstrapInitialScrollState;
@@ -6442,7 +6487,7 @@ var LegendList = typedMemo(
   })
 );
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const noopOnScroll = React2.useCallback((_event) => {
   }, []);
   if (props.recycleItems === void 0) {
@@ -6459,6 +6504,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     contentContainerStyle: contentContainerStyleProp,
     contentInset,
     data: dataProp = [],
+    dataKey,
     dataVersion,
     drawDistance = 250,
     contentInsetEndAdjustment,
@@ -6589,6 +6635,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     (_j = alwaysRender == null ? void 0 : alwaysRender.indices) == null ? void 0 : _j.join(","),
     (_k = alwaysRender == null ? void 0 : alwaysRender.keys) == null ? void 0 : _k.join(","),
     dataProp,
+    dataKey,
     dataVersion,
     keyExtractor
   ]);
@@ -6611,6 +6658,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         dataChangeNeedsScrollUpdate: false,
         didColumnsChange: false,
         didDataChange: false,
+        didLoad: false,
         enableScrollForNextCalculateItemsInView: true,
         endBuffered: -1,
         endNoBuffer: -1,
@@ -6640,6 +6688,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         positions: [],
         props: {},
         queuedCalculateItemsInView: 0,
+        queuedFullDrawDistancePrewarm: void 0,
         refScroller: { current: null },
         scroll: 0,
         scrollAdjustHandler: new ScrollAdjustHandler(ctx),
@@ -6682,10 +6731,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const didScrollAxisGapChange = !isFirstLocal && ctx.scrollAxisGap !== nextScrollAxisGap;
   ctx.scrollAxisGap = nextScrollAxisGap;
   state.didColumnsChange = numColumnsProp !== previousNumColumnsProp || didScrollAxisGapChange;
+  const previousDataLength = (_n = (_m = state.props.data) == null ? void 0 : _m.length) != null ? _n : 0;
   const didDataReferenceChangeLocal = state.props.data !== dataProp;
+  const didDataKeyChangeLocal = state.props.dataKey !== dataKey;
   const didDataVersionChangeLocal = state.props.dataVersion !== dataVersion;
-  const didDataChangeLocal = didDataVersionChangeLocal || didDataReferenceChangeLocal && checkStructuralDataChange(state, dataProp, state.props.data);
-  if (didDataChangeLocal && !initialScrollAtEnd && state.didFinishInitialScroll && ((_m = state.initialScroll) == null ? void 0 : _m.viewPosition) === 1 && state.props.data.length > 0) {
+  const didDataChangeLocal = didDataKeyChangeLocal || didDataVersionChangeLocal || didDataReferenceChangeLocal && checkStructuralDataChange(state, dataProp, state.props.data);
+  const shouldResetFreshDataLayout = !isFirstLocal && didDataChangeLocal && state.hasHadNonEmptyData && (didDataKeyChangeLocal || previousDataLength === 0) && dataProp.length > 0;
+  if (didDataChangeLocal && !initialScrollAtEnd && state.didFinishInitialScroll && ((_o = state.initialScroll) == null ? void 0 : _o.viewPosition) === 1 && state.props.data.length > 0) {
     clearPreservedInitialScrollTarget(state);
   }
   if (didDataChangeLocal) {
@@ -6697,7 +6749,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 = Platform.OS === "web" && anchoredEndSpace ? { ...anchoredEndSpace, includeInEndInset: true } : anchoredEndSpace;
-  const didAnchoredEndSpaceAnchorIndexChange = !isFirstLocal && !didDataChangeLocal && ((_n = state.props.anchoredEndSpace) == null ? void 0 : _n.anchorIndex) !== (anchoredEndSpaceResolved == null ? void 0 : anchoredEndSpaceResolved.anchorIndex);
+  const didAnchoredEndSpaceAnchorIndexChange = !isFirstLocal && !didDataChangeLocal && ((_p = state.props.anchoredEndSpace) == null ? void 0 : _p.anchorIndex) !== (anchoredEndSpaceResolved == null ? void 0 : anchoredEndSpaceResolved.anchorIndex);
   state.props = {
     adaptiveRender: experimental_adaptiveRender,
     alignItemsAtEnd,
@@ -6711,6 +6763,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     contentInset,
     contentInsetEndAdjustment: contentInsetEndAdjustmentResolved,
     data: dataProp,
+    dataKey,
     dataVersion,
     drawDistance,
     estimatedItemSize,
@@ -6751,13 +6804,19 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (!isFirstLocal && previousAdaptiveRender && !experimental_adaptiveRender) {
     resetAdaptiveRender(ctx);
   }
+  if (shouldResetFreshDataLayout) {
+    resetInitialRenderState(ctx, {
+      resetInitialScroll: !!initialScrollProp,
+      resetLayout: true
+    });
+  }
   const memoizedLastItemKeys = React2.useMemo(() => {
     if (!dataProp.length) return [];
     return Array.from(
       { length: Math.min(numColumnsProp, dataProp.length) },
       (_, i) => getId(state, dataProp.length - 1 - i)
     );
-  }, [dataProp, dataVersion, numColumnsProp]);
+  }, [dataProp, dataKey, dataVersion, numColumnsProp]);
   const initializeStateVars = (shouldAdjustPadding) => {
     set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
@@ -6817,13 +6876,22 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     handleInitialScrollDataChange(ctx, {
       dataLength: dataProp.length,
       didDataChange: didDataChangeLocal,
+      didStartFreshData: shouldResetFreshDataLayout,
       initialScrollAtEnd,
       latestInitialScroll: initialScrollProp,
       latestInitialScrollSessionKind: initialScrollUsesOffsetOnly ? "offset" : "bootstrap",
       stylePaddingBottom: stylePaddingBottomState,
       useBootstrapInitialScroll: usesBootstrapInitialScroll
     });
-  }, [dataProp.length, didDataChangeLocal, initialScrollAtEnd, stylePaddingBottomState, usesBootstrapInitialScroll]);
+  }, [
+    dataProp.length,
+    dataKey,
+    didDataChangeLocal,
+    shouldResetFreshDataLayout,
+    initialScrollAtEnd,
+    stylePaddingBottomState,
+    usesBootstrapInitialScroll
+  ]);
   React2.useLayoutEffect(() => {
     var _a4;
     if (didAnchoredEndSpaceAnchorIndexChange) {
@@ -6891,6 +6959,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   React2.useLayoutEffect(
     () => initializeStateVars(true),
     [
+      dataKey,
       dataVersion,
       memoizedLastItemKeys.join(","),
       numColumnsProp,
@@ -6917,7 +6986,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.didColumnsChange = false;
     state.didDataChange = false;
     state.isFirst = false;
-  }, [dataProp, dataVersion, numColumnsProp, nextScrollAxisGap]);
+  }, [dataProp, dataKey, dataVersion, numColumnsProp, nextScrollAxisGap]);
   React2.useLayoutEffect(() => {
     var _a4;
     set$(ctx, "extraData", extraData);
@@ -6970,6 +7039,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   React2.useImperativeHandle(forwardedRef, () => createImperativeHandle(ctx, scheduleImperativeScrollCommit), []);
   React2.useEffect(() => {
     return () => {
+      if (state.queuedFullDrawDistancePrewarm !== void 0) {
+        cancelAnimationFrame(state.queuedFullDrawDistancePrewarm);
+        state.queuedFullDrawDistancePrewarm = void 0;
+      }
       for (const timeout of state.timeouts) {
         clearTimeout(timeout);
       }
@@ -7022,7 +7095,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       onScroll: onScrollHandler,
       recycleItems,
       refreshControl: refreshControlElement ? stylePaddingTopState > 0 ? React2__namespace.cloneElement(refreshControlElement, {
-        progressViewOffset: ((_o = refreshControlElement.props.progressViewOffset) != null ? _o : 0) + stylePaddingTopState
+        progressViewOffset: ((_q = refreshControlElement.props.progressViewOffset) != null ? _q : 0) + stylePaddingTopState
       }) : refreshControlElement : onRefresh && /* @__PURE__ */ React2__namespace.createElement(
         ReactNative.RefreshControl,
         {
@@ -7033,7 +7106,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       ),
       refScrollView: combinedRef,
       renderScrollComponent,
-      scrollAdjustHandler: (_p = refState.current) == null ? void 0 : _p.scrollAdjustHandler,
+      scrollAdjustHandler: (_r = refState.current) == null ? void 0 : _r.scrollAdjustHandler,
       scrollEventThrottle: 0,
       snapToIndices,
       stickyHeaderIndices,