@legendapp/list 3.0.0-beta.55 → 3.0.0-beta.56

package/index.native.mjs

@@ -1,5 +1,5 @@
 import * as React2 from 'react';
-import React2__default, { useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useContext } from 'react';
+import { useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useContext } from 'react';
 import * as ReactNative from 'react-native';
 import { Animated, Platform as Platform$1, View as View$1, Text as Text$1, StyleSheet as StyleSheet$1, RefreshControl, Dimensions, I18nManager } from 'react-native';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
@@ -1120,6 +1120,26 @@ function WebAnchoredEndSpace({ horizontal }) {
   const style = horizontal ? { height: "100%", width: anchoredEndSpaceSize || 0 } : { height: anchoredEndSpaceSize || 0 };
   return /* @__PURE__ */ React2.createElement("div", { style }, null);
 }
+function useLatestRef(value) {
+  const ref = React2.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/hooks/useStableRenderComponent.tsx
+function useStableRenderComponent(renderComponent, mapProps) {
+  const renderComponentRef = useLatestRef(renderComponent);
+  const mapPropsRef = useLatestRef(mapProps);
+  return React2.useMemo(
+    () => React2.forwardRef(
+      (props, ref) => {
+        var _a3, _b;
+        return (_b = (_a3 = renderComponentRef.current) == null ? void 0 : _a3.call(renderComponentRef, mapPropsRef.current(props, ref))) != null ? _b : null;
+      }
+    ),
+    [mapPropsRef, renderComponentRef]
+  );
+}
 var LayoutView = ({ onLayoutChange, refView, ...rest }) => {
   const localRef = useRef(null);
   const ref = refView != null ? refView : localRef;
@@ -1164,14 +1184,11 @@ var ListComponent = typedMemo(function ListComponent2({
     needsOtherAxisSize: ctx.state.needsOtherAxisSize,
     otherAxisSize
   });
-  const ScrollComponent = useMemo(() => {
-    if (!renderScrollComponent) {
-      return ListComponentScrollView;
-    }
-    return React2.forwardRef(
-      (props, ref) => renderScrollComponent({ ...props, ref })
-    );
-  }, [renderScrollComponent]);
+  const CustomScrollComponent = useStableRenderComponent(
+    renderScrollComponent,
+    (props, ref) => ({ ...props, ref })
+  );
+  const ScrollComponent = renderScrollComponent ? CustomScrollComponent : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
   useLayoutEffect(() => {
     if (!ListHeaderComponent) {
@@ -2652,11 +2669,51 @@ function getObservedBootstrapInitialScrollOffset(state) {
   const observedOffset = (_b = (_a3 = state.refScroller.current) == null ? void 0 : _a3.getCurrentScrollOffset) == null ? void 0 : _b.call(_a3);
   return typeof observedOffset === "number" && Number.isFinite(observedOffset) ? observedOffset : (_d = (_c = state.scrollPending) != null ? _c : state.scroll) != null ? _d : 0;
 }
+function getPreservedEndAnchorOffsetDiff(ctx) {
+  var _a3;
+  const state = ctx.state;
+  const initialScroll = state.initialScroll;
+  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || !initialScroll || initialScroll.viewPosition !== 1 || state.props.data.length === 0 || isOffsetInitialScrollSession(state)) {
+    return;
+  }
+  const currentOffset = typeof state.lastNativeScroll === "number" && Number.isFinite(state.lastNativeScroll) ? state.lastNativeScroll : getObservedBootstrapInitialScrollOffset(state);
+  return resolveInitialScrollOffset(ctx, initialScroll) - currentOffset;
+}
+function schedulePreservedEndAnchorCorrection(ctx) {
+  if (getPreservedEndAnchorOffsetDiff(ctx) === void 0) {
+    return false;
+  }
+  const correction = {};
+  schedulePreservedEndAnchorCorrectionFrame(ctx, correction);
+  return true;
+}
+function schedulePreservedEndAnchorCorrectionFrame(ctx, correction) {
+  const state = ctx.state;
+  state.preservedEndAnchorCorrection = correction;
+  requestAnimationFrame(() => {
+    var _a3;
+    const activeCorrection = state.preservedEndAnchorCorrection;
+    if (activeCorrection !== correction) {
+      return;
+    }
+    const offsetDiff = getPreservedEndAnchorOffsetDiff(ctx);
+    if (offsetDiff === void 0 || Math.abs(offsetDiff) <= DEFAULT_BOOTSTRAP_REVEAL_EPSILON) {
+      state.preservedEndAnchorCorrection = void 0;
+      return;
+    }
+    const hasObservedNativeScrollAfterRequest = !activeCorrection.lastRequestTime || ((_a3 = state.lastNativeScrollTime) != null ? _a3 : 0) > activeCorrection.lastRequestTime;
+    if (hasObservedNativeScrollAfterRequest) {
+      activeCorrection.lastRequestTime = Date.now();
+      requestAdjust(ctx, offsetDiff);
+    }
+    schedulePreservedEndAnchorCorrectionFrame(ctx, correction);
+  });
+}
 function clearFinishedBootstrapInitialScrollTargetIfMovedAway(ctx) {
   var _a3, _b;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
-  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || (initialScroll == null ? void 0 : initialScroll.viewPosition) !== 1) {
+  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || (initialScroll == null ? void 0 : initialScroll.viewPosition) !== 1 || state.preservedEndAnchorCorrection) {
     return;
   }
   if (didFinishedInitialScrollMoveAwayFromTarget(ctx, initialScroll)) {
@@ -2813,7 +2870,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
   }
 }
 function handleBootstrapInitialScrollLayoutChange(ctx) {
-  var _a3, _b, _c, _d;
+  var _a3, _b, _c;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
   const bootstrapInitialScroll = getBootstrapInitialScrollSession(state);
@@ -2824,7 +2881,9 @@ function handleBootstrapInitialScrollLayoutChange(ctx) {
       const currentOffset = scrollingTo ? (_b = scrollingTo.targetOffset) != null ? _b : scrollingTo.offset : getObservedBootstrapInitialScrollOffset(state);
       const offsetDiff = resolvedOffset - currentOffset;
       if (Math.abs(offsetDiff) > DEFAULT_BOOTSTRAP_REVEAL_EPSILON) {
-        if (scrollingTo) {
+        if (state.didFinishInitialScroll) {
+          schedulePreservedEndAnchorCorrection(ctx);
+        } else if (scrollingTo) {
           const existingWatchdog = initialScrollWatchdog.get(state);
           scrollingTo.offset = resolvedOffset;
           scrollingTo.targetOffset = resolvedOffset;
@@ -2837,14 +2896,8 @@ function handleBootstrapInitialScrollLayoutChange(ctx) {
             startScroll: (_c = existingWatchdog == null ? void 0 : existingWatchdog.startScroll) != null ? _c : state.scroll,
             targetOffset: resolvedOffset
           });
+          requestAdjust(ctx, offsetDiff);
         }
-        requestAdjust(ctx, offsetDiff);
-        if (state.didFinishInitialScroll) {
-          (_d = state.triggerCalculateItemsInView) == null ? void 0 : _d.call(state, { forceFullItemPositions: true });
-        }
-      }
-      if (state.didFinishInitialScroll) {
-        clearFinishedViewportRetargetableInitialScroll(state);
       }
     } else {
       rearmBootstrapInitialScroll(ctx, {
@@ -2961,7 +3014,10 @@ function retargetActiveInitialScrollAtEnd(ctx) {
   var _a3;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
-  if (!initialScroll || state.didFinishInitialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
+  if (state.didFinishInitialScroll) {
+    return schedulePreservedEndAnchorCorrection(ctx);
+  }
+  if (!initialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
     return false;
   }
   return advanceCurrentInitialScrollSession(ctx, { forceScroll: true });
@@ -4975,7 +5031,7 @@ function cloneScrollEvent(event) {
   };
 }
 function onScroll(ctx, event) {
-  var _a3, _b, _c, _d, _e;
+  var _a3, _b, _c, _d, _e, _f;
   const state = ctx.state;
   const { scrollProcessingEnabled } = state;
   if (scrollProcessingEnabled === false) {
@@ -4997,6 +5053,13 @@ function onScroll(ctx, event) {
   if (state.props.horizontal) {
     newScroll = toLogicalHorizontalOffset(state, newScroll, (_e = event.nativeEvent.contentSize) == null ? void 0 : _e.width);
   }
+  const isFinishedEndInitialScroll = state.didFinishInitialScroll && ((_f = state.initialScroll) == null ? void 0 : _f.viewPosition) === 1 && state.scroll > state.scrollLength;
+  const shouldIgnoreNegativeInsetChange = Platform.OS !== "web" && insetChanged && newScroll < 0 && isFinishedEndInitialScroll;
+  if (shouldIgnoreNegativeInsetChange) {
+    return;
+  }
+  state.lastNativeScroll = newScroll;
+  state.lastNativeScrollTime = Date.now();
   if (state.scrollingTo && state.scrollingTo.offset >= newScroll) {
     const maxOffset = clampScrollOffset(ctx, newScroll, state.scrollingTo);
     if (newScroll !== maxOffset && Math.abs(newScroll - maxOffset) > 1) {
@@ -5637,6 +5700,8 @@ function getAlwaysRenderIndices(config, data, keyExtractor, anchoredEndSpaceAnch
   indices.sort(sortAsc);
   return indices;
 }
+
+// src/utils/getRenderedItem.ts
 function getRenderedItem(ctx, key) {
   var _a3;
   const state = ctx.state;
@@ -5662,7 +5727,7 @@ function getRenderedItem(ctx, key) {
       item,
       type: getItemType ? (_a3 = getItemType(item, index)) != null ? _a3 : "" : ""
     };
-    renderedItem = React2__default.createElement(renderItem, itemProps);
+    renderedItem = renderItem(itemProps);
   }
   return { index, item: data[index], renderedItem };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "3.0.0-beta.55",
+  "version": "3.0.0-beta.56",
   "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

@@ -97,13 +97,11 @@ interface DataModeProps<ItemT, TItemType extends string | undefined> {
      */
     data: ReadonlyArray<ItemT>;
     /**
-     * Function or React component to render each item in the list.
-     * Can be either:
-     * - A function: (props: LegendListRenderItemProps<ItemT>) => ReactNode
-     * - A React component: React.ComponentType<LegendListRenderItemProps<ItemT>>
+     * Callback to render each item in the list.
+     * To use hooks in an item component, return that component from this callback.
      * @required when using data mode
      */
-    renderItem: ((props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode) | React.ComponentType<LegendListRenderItemProps<ItemT, TItemType>>;
+    renderItem: (props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode;
     children?: never;
 }
 interface ChildrenModeProps {

package/react-native.js

@@ -1141,6 +1141,26 @@ function WebAnchoredEndSpace({ horizontal }) {
   const style = horizontal ? { height: "100%", width: anchoredEndSpaceSize || 0 } : { height: anchoredEndSpaceSize || 0 };
   return /* @__PURE__ */ React2__namespace.createElement("div", { style }, null);
 }
+function useLatestRef(value) {
+  const ref = React2__namespace.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/hooks/useStableRenderComponent.tsx
+function useStableRenderComponent(renderComponent, mapProps) {
+  const renderComponentRef = useLatestRef(renderComponent);
+  const mapPropsRef = useLatestRef(mapProps);
+  return React2__namespace.useMemo(
+    () => React2__namespace.forwardRef(
+      (props, ref) => {
+        var _a3, _b;
+        return (_b = (_a3 = renderComponentRef.current) == null ? void 0 : _a3.call(renderComponentRef, mapPropsRef.current(props, ref))) != null ? _b : null;
+      }
+    ),
+    [mapPropsRef, renderComponentRef]
+  );
+}
 var LayoutView = ({ onLayoutChange, refView, ...rest }) => {
   const localRef = React2.useRef(null);
   const ref = refView != null ? refView : localRef;
@@ -1185,14 +1205,11 @@ var ListComponent = typedMemo(function ListComponent2({
     needsOtherAxisSize: ctx.state.needsOtherAxisSize,
     otherAxisSize
   });
-  const ScrollComponent = React2.useMemo(() => {
-    if (!renderScrollComponent) {
-      return ListComponentScrollView;
-    }
-    return React2__namespace.forwardRef(
-      (props, ref) => renderScrollComponent({ ...props, ref })
-    );
-  }, [renderScrollComponent]);
+  const CustomScrollComponent = useStableRenderComponent(
+    renderScrollComponent,
+    (props, ref) => ({ ...props, ref })
+  );
+  const ScrollComponent = renderScrollComponent ? CustomScrollComponent : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
   React2.useLayoutEffect(() => {
     if (!ListHeaderComponent) {
@@ -2673,11 +2690,51 @@ function getObservedBootstrapInitialScrollOffset(state) {
   const observedOffset = (_b = (_a3 = state.refScroller.current) == null ? void 0 : _a3.getCurrentScrollOffset) == null ? void 0 : _b.call(_a3);
   return typeof observedOffset === "number" && Number.isFinite(observedOffset) ? observedOffset : (_d = (_c = state.scrollPending) != null ? _c : state.scroll) != null ? _d : 0;
 }
+function getPreservedEndAnchorOffsetDiff(ctx) {
+  var _a3;
+  const state = ctx.state;
+  const initialScroll = state.initialScroll;
+  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || !initialScroll || initialScroll.viewPosition !== 1 || state.props.data.length === 0 || isOffsetInitialScrollSession(state)) {
+    return;
+  }
+  const currentOffset = typeof state.lastNativeScroll === "number" && Number.isFinite(state.lastNativeScroll) ? state.lastNativeScroll : getObservedBootstrapInitialScrollOffset(state);
+  return resolveInitialScrollOffset(ctx, initialScroll) - currentOffset;
+}
+function schedulePreservedEndAnchorCorrection(ctx) {
+  if (getPreservedEndAnchorOffsetDiff(ctx) === void 0) {
+    return false;
+  }
+  const correction = {};
+  schedulePreservedEndAnchorCorrectionFrame(ctx, correction);
+  return true;
+}
+function schedulePreservedEndAnchorCorrectionFrame(ctx, correction) {
+  const state = ctx.state;
+  state.preservedEndAnchorCorrection = correction;
+  requestAnimationFrame(() => {
+    var _a3;
+    const activeCorrection = state.preservedEndAnchorCorrection;
+    if (activeCorrection !== correction) {
+      return;
+    }
+    const offsetDiff = getPreservedEndAnchorOffsetDiff(ctx);
+    if (offsetDiff === void 0 || Math.abs(offsetDiff) <= DEFAULT_BOOTSTRAP_REVEAL_EPSILON) {
+      state.preservedEndAnchorCorrection = void 0;
+      return;
+    }
+    const hasObservedNativeScrollAfterRequest = !activeCorrection.lastRequestTime || ((_a3 = state.lastNativeScrollTime) != null ? _a3 : 0) > activeCorrection.lastRequestTime;
+    if (hasObservedNativeScrollAfterRequest) {
+      activeCorrection.lastRequestTime = Date.now();
+      requestAdjust(ctx, offsetDiff);
+    }
+    schedulePreservedEndAnchorCorrectionFrame(ctx, correction);
+  });
+}
 function clearFinishedBootstrapInitialScrollTargetIfMovedAway(ctx) {
   var _a3, _b;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
-  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || (initialScroll == null ? void 0 : initialScroll.viewPosition) !== 1) {
+  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || (initialScroll == null ? void 0 : initialScroll.viewPosition) !== 1 || state.preservedEndAnchorCorrection) {
     return;
   }
   if (didFinishedInitialScrollMoveAwayFromTarget(ctx, initialScroll)) {
@@ -2834,7 +2891,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
   }
 }
 function handleBootstrapInitialScrollLayoutChange(ctx) {
-  var _a3, _b, _c, _d;
+  var _a3, _b, _c;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
   const bootstrapInitialScroll = getBootstrapInitialScrollSession(state);
@@ -2845,7 +2902,9 @@ function handleBootstrapInitialScrollLayoutChange(ctx) {
       const currentOffset = scrollingTo ? (_b = scrollingTo.targetOffset) != null ? _b : scrollingTo.offset : getObservedBootstrapInitialScrollOffset(state);
       const offsetDiff = resolvedOffset - currentOffset;
       if (Math.abs(offsetDiff) > DEFAULT_BOOTSTRAP_REVEAL_EPSILON) {
-        if (scrollingTo) {
+        if (state.didFinishInitialScroll) {
+          schedulePreservedEndAnchorCorrection(ctx);
+        } else if (scrollingTo) {
           const existingWatchdog = initialScrollWatchdog.get(state);
           scrollingTo.offset = resolvedOffset;
           scrollingTo.targetOffset = resolvedOffset;
@@ -2858,14 +2917,8 @@ function handleBootstrapInitialScrollLayoutChange(ctx) {
             startScroll: (_c = existingWatchdog == null ? void 0 : existingWatchdog.startScroll) != null ? _c : state.scroll,
             targetOffset: resolvedOffset
           });
+          requestAdjust(ctx, offsetDiff);
         }
-        requestAdjust(ctx, offsetDiff);
-        if (state.didFinishInitialScroll) {
-          (_d = state.triggerCalculateItemsInView) == null ? void 0 : _d.call(state, { forceFullItemPositions: true });
-        }
-      }
-      if (state.didFinishInitialScroll) {
-        clearFinishedViewportRetargetableInitialScroll(state);
       }
     } else {
       rearmBootstrapInitialScroll(ctx, {
@@ -2982,7 +3035,10 @@ function retargetActiveInitialScrollAtEnd(ctx) {
   var _a3;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
-  if (!initialScroll || state.didFinishInitialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
+  if (state.didFinishInitialScroll) {
+    return schedulePreservedEndAnchorCorrection(ctx);
+  }
+  if (!initialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
     return false;
   }
   return advanceCurrentInitialScrollSession(ctx, { forceScroll: true });
@@ -4996,7 +5052,7 @@ function cloneScrollEvent(event) {
   };
 }
 function onScroll(ctx, event) {
-  var _a3, _b, _c, _d, _e;
+  var _a3, _b, _c, _d, _e, _f;
   const state = ctx.state;
   const { scrollProcessingEnabled } = state;
   if (scrollProcessingEnabled === false) {
@@ -5018,6 +5074,13 @@ function onScroll(ctx, event) {
   if (state.props.horizontal) {
     newScroll = toLogicalHorizontalOffset(state, newScroll, (_e = event.nativeEvent.contentSize) == null ? void 0 : _e.width);
   }
+  const isFinishedEndInitialScroll = state.didFinishInitialScroll && ((_f = state.initialScroll) == null ? void 0 : _f.viewPosition) === 1 && state.scroll > state.scrollLength;
+  const shouldIgnoreNegativeInsetChange = Platform.OS !== "web" && insetChanged && newScroll < 0 && isFinishedEndInitialScroll;
+  if (shouldIgnoreNegativeInsetChange) {
+    return;
+  }
+  state.lastNativeScroll = newScroll;
+  state.lastNativeScrollTime = Date.now();
   if (state.scrollingTo && state.scrollingTo.offset >= newScroll) {
     const maxOffset = clampScrollOffset(ctx, newScroll, state.scrollingTo);
     if (newScroll !== maxOffset && Math.abs(newScroll - maxOffset) > 1) {
@@ -5658,6 +5721,8 @@ function getAlwaysRenderIndices(config, data, keyExtractor, anchoredEndSpaceAnch
   indices.sort(sortAsc);
   return indices;
 }
+
+// src/utils/getRenderedItem.ts
 function getRenderedItem(ctx, key) {
   var _a3;
   const state = ctx.state;
@@ -5683,7 +5748,7 @@ function getRenderedItem(ctx, key) {
       item,
       type: getItemType ? (_a3 = getItemType(item, index)) != null ? _a3 : "" : ""
     };
-    renderedItem = React2__namespace.default.createElement(renderItem, itemProps);
+    renderedItem = renderItem(itemProps);
   }
   return { index, item: data[index], renderedItem };
 }
@@ -6393,6 +6458,8 @@ var internal = {
   typedMemo,
   useArr$,
   useCombinedRef,
+  useLatestRef,
+  useStableRenderComponent,
   useStateContext
 };
 

package/react-native.mjs

@@ -1,5 +1,5 @@
 import * as React2 from 'react';
-import React2__default, { useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useContext } from 'react';
+import { useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useContext } from 'react';
 import * as ReactNative from 'react-native';
 import { Animated, Platform as Platform$1, View as View$1, Text as Text$1, StyleSheet as StyleSheet$1, RefreshControl, Dimensions, I18nManager } from 'react-native';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
@@ -1120,6 +1120,26 @@ function WebAnchoredEndSpace({ horizontal }) {
   const style = horizontal ? { height: "100%", width: anchoredEndSpaceSize || 0 } : { height: anchoredEndSpaceSize || 0 };
   return /* @__PURE__ */ React2.createElement("div", { style }, null);
 }
+function useLatestRef(value) {
+  const ref = React2.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/hooks/useStableRenderComponent.tsx
+function useStableRenderComponent(renderComponent, mapProps) {
+  const renderComponentRef = useLatestRef(renderComponent);
+  const mapPropsRef = useLatestRef(mapProps);
+  return React2.useMemo(
+    () => React2.forwardRef(
+      (props, ref) => {
+        var _a3, _b;
+        return (_b = (_a3 = renderComponentRef.current) == null ? void 0 : _a3.call(renderComponentRef, mapPropsRef.current(props, ref))) != null ? _b : null;
+      }
+    ),
+    [mapPropsRef, renderComponentRef]
+  );
+}
 var LayoutView = ({ onLayoutChange, refView, ...rest }) => {
   const localRef = useRef(null);
   const ref = refView != null ? refView : localRef;
@@ -1164,14 +1184,11 @@ var ListComponent = typedMemo(function ListComponent2({
     needsOtherAxisSize: ctx.state.needsOtherAxisSize,
     otherAxisSize
   });
-  const ScrollComponent = useMemo(() => {
-    if (!renderScrollComponent) {
-      return ListComponentScrollView;
-    }
-    return React2.forwardRef(
-      (props, ref) => renderScrollComponent({ ...props, ref })
-    );
-  }, [renderScrollComponent]);
+  const CustomScrollComponent = useStableRenderComponent(
+    renderScrollComponent,
+    (props, ref) => ({ ...props, ref })
+  );
+  const ScrollComponent = renderScrollComponent ? CustomScrollComponent : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
   useLayoutEffect(() => {
     if (!ListHeaderComponent) {
@@ -2652,11 +2669,51 @@ function getObservedBootstrapInitialScrollOffset(state) {
   const observedOffset = (_b = (_a3 = state.refScroller.current) == null ? void 0 : _a3.getCurrentScrollOffset) == null ? void 0 : _b.call(_a3);
   return typeof observedOffset === "number" && Number.isFinite(observedOffset) ? observedOffset : (_d = (_c = state.scrollPending) != null ? _c : state.scroll) != null ? _d : 0;
 }
+function getPreservedEndAnchorOffsetDiff(ctx) {
+  var _a3;
+  const state = ctx.state;
+  const initialScroll = state.initialScroll;
+  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || !initialScroll || initialScroll.viewPosition !== 1 || state.props.data.length === 0 || isOffsetInitialScrollSession(state)) {
+    return;
+  }
+  const currentOffset = typeof state.lastNativeScroll === "number" && Number.isFinite(state.lastNativeScroll) ? state.lastNativeScroll : getObservedBootstrapInitialScrollOffset(state);
+  return resolveInitialScrollOffset(ctx, initialScroll) - currentOffset;
+}
+function schedulePreservedEndAnchorCorrection(ctx) {
+  if (getPreservedEndAnchorOffsetDiff(ctx) === void 0) {
+    return false;
+  }
+  const correction = {};
+  schedulePreservedEndAnchorCorrectionFrame(ctx, correction);
+  return true;
+}
+function schedulePreservedEndAnchorCorrectionFrame(ctx, correction) {
+  const state = ctx.state;
+  state.preservedEndAnchorCorrection = correction;
+  requestAnimationFrame(() => {
+    var _a3;
+    const activeCorrection = state.preservedEndAnchorCorrection;
+    if (activeCorrection !== correction) {
+      return;
+    }
+    const offsetDiff = getPreservedEndAnchorOffsetDiff(ctx);
+    if (offsetDiff === void 0 || Math.abs(offsetDiff) <= DEFAULT_BOOTSTRAP_REVEAL_EPSILON) {
+      state.preservedEndAnchorCorrection = void 0;
+      return;
+    }
+    const hasObservedNativeScrollAfterRequest = !activeCorrection.lastRequestTime || ((_a3 = state.lastNativeScrollTime) != null ? _a3 : 0) > activeCorrection.lastRequestTime;
+    if (hasObservedNativeScrollAfterRequest) {
+      activeCorrection.lastRequestTime = Date.now();
+      requestAdjust(ctx, offsetDiff);
+    }
+    schedulePreservedEndAnchorCorrectionFrame(ctx, correction);
+  });
+}
 function clearFinishedBootstrapInitialScrollTargetIfMovedAway(ctx) {
   var _a3, _b;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
-  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || (initialScroll == null ? void 0 : initialScroll.viewPosition) !== 1) {
+  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || (initialScroll == null ? void 0 : initialScroll.viewPosition) !== 1 || state.preservedEndAnchorCorrection) {
     return;
   }
   if (didFinishedInitialScrollMoveAwayFromTarget(ctx, initialScroll)) {
@@ -2813,7 +2870,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
   }
 }
 function handleBootstrapInitialScrollLayoutChange(ctx) {
-  var _a3, _b, _c, _d;
+  var _a3, _b, _c;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
   const bootstrapInitialScroll = getBootstrapInitialScrollSession(state);
@@ -2824,7 +2881,9 @@ function handleBootstrapInitialScrollLayoutChange(ctx) {
       const currentOffset = scrollingTo ? (_b = scrollingTo.targetOffset) != null ? _b : scrollingTo.offset : getObservedBootstrapInitialScrollOffset(state);
       const offsetDiff = resolvedOffset - currentOffset;
       if (Math.abs(offsetDiff) > DEFAULT_BOOTSTRAP_REVEAL_EPSILON) {
-        if (scrollingTo) {
+        if (state.didFinishInitialScroll) {
+          schedulePreservedEndAnchorCorrection(ctx);
+        } else if (scrollingTo) {
           const existingWatchdog = initialScrollWatchdog.get(state);
           scrollingTo.offset = resolvedOffset;
           scrollingTo.targetOffset = resolvedOffset;
@@ -2837,14 +2896,8 @@ function handleBootstrapInitialScrollLayoutChange(ctx) {
             startScroll: (_c = existingWatchdog == null ? void 0 : existingWatchdog.startScroll) != null ? _c : state.scroll,
             targetOffset: resolvedOffset
           });
+          requestAdjust(ctx, offsetDiff);
         }
-        requestAdjust(ctx, offsetDiff);
-        if (state.didFinishInitialScroll) {
-          (_d = state.triggerCalculateItemsInView) == null ? void 0 : _d.call(state, { forceFullItemPositions: true });
-        }
-      }
-      if (state.didFinishInitialScroll) {
-        clearFinishedViewportRetargetableInitialScroll(state);
       }
     } else {
       rearmBootstrapInitialScroll(ctx, {
@@ -2961,7 +3014,10 @@ function retargetActiveInitialScrollAtEnd(ctx) {
   var _a3;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
-  if (!initialScroll || state.didFinishInitialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
+  if (state.didFinishInitialScroll) {
+    return schedulePreservedEndAnchorCorrection(ctx);
+  }
+  if (!initialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
     return false;
   }
   return advanceCurrentInitialScrollSession(ctx, { forceScroll: true });
@@ -4975,7 +5031,7 @@ function cloneScrollEvent(event) {
   };
 }
 function onScroll(ctx, event) {
-  var _a3, _b, _c, _d, _e;
+  var _a3, _b, _c, _d, _e, _f;
   const state = ctx.state;
   const { scrollProcessingEnabled } = state;
   if (scrollProcessingEnabled === false) {
@@ -4997,6 +5053,13 @@ function onScroll(ctx, event) {
   if (state.props.horizontal) {
     newScroll = toLogicalHorizontalOffset(state, newScroll, (_e = event.nativeEvent.contentSize) == null ? void 0 : _e.width);
   }
+  const isFinishedEndInitialScroll = state.didFinishInitialScroll && ((_f = state.initialScroll) == null ? void 0 : _f.viewPosition) === 1 && state.scroll > state.scrollLength;
+  const shouldIgnoreNegativeInsetChange = Platform.OS !== "web" && insetChanged && newScroll < 0 && isFinishedEndInitialScroll;
+  if (shouldIgnoreNegativeInsetChange) {
+    return;
+  }
+  state.lastNativeScroll = newScroll;
+  state.lastNativeScrollTime = Date.now();
   if (state.scrollingTo && state.scrollingTo.offset >= newScroll) {
     const maxOffset = clampScrollOffset(ctx, newScroll, state.scrollingTo);
     if (newScroll !== maxOffset && Math.abs(newScroll - maxOffset) > 1) {
@@ -5637,6 +5700,8 @@ function getAlwaysRenderIndices(config, data, keyExtractor, anchoredEndSpaceAnch
   indices.sort(sortAsc);
   return indices;
 }
+
+// src/utils/getRenderedItem.ts
 function getRenderedItem(ctx, key) {
   var _a3;
   const state = ctx.state;
@@ -5662,7 +5727,7 @@ function getRenderedItem(ctx, key) {
       item,
       type: getItemType ? (_a3 = getItemType(item, index)) != null ? _a3 : "" : ""
     };
-    renderedItem = React2__default.createElement(renderItem, itemProps);
+    renderedItem = renderItem(itemProps);
   }
   return { index, item: data[index], renderedItem };
 }
@@ -6372,6 +6437,8 @@ var internal = {
   typedMemo,
   useArr$,
   useCombinedRef,
+  useLatestRef,
+  useStableRenderComponent,
   useStateContext
 };
 

package/react-native.web.d.ts

@@ -120,13 +120,11 @@ interface DataModeProps<ItemT, TItemType extends string | undefined> {
      */
     data: ReadonlyArray<ItemT>;
     /**
-     * Function or React component to render each item in the list.
-     * Can be either:
-     * - A function: (props: LegendListRenderItemProps<ItemT>) => ReactNode
-     * - A React component: React.ComponentType<LegendListRenderItemProps<ItemT>>
+     * Callback to render each item in the list.
+     * To use hooks in an item component, return that component from this callback.
      * @required when using data mode
      */
-    renderItem: ((props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode) | React.ComponentType<LegendListRenderItemProps<ItemT, TItemType>>;
+    renderItem: (props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode;
     children?: never;
 }
 interface ChildrenModeProps {