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

package/animated.d.ts

@@ -91,13 +91,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/index.d.ts

@@ -116,7 +116,7 @@ type BootstrapOwnedInitialScrollSession = InternalInitialScrollSessionBase & {
 type InternalInitialScrollSession = OffsetInitialScrollSession | BootstrapOwnedInitialScrollSession;
 type LegendListPropsInternal = LegendListPropsBase$1<any, Record<string, any>, string | undefined> & {
     data: readonly any[];
-    renderItem: ((props: LegendListRenderItemProps$1<any, string | undefined>) => React.ReactNode) | React.ComponentType<LegendListRenderItemProps$1<any, string | undefined>>;
+    renderItem: (props: LegendListRenderItemProps$1<any, string | undefined>) => React.ReactNode;
 };
 interface PendingDataComparison {
     byIndex: Array<0 | 1 | 2 | undefined>;
@@ -147,6 +147,9 @@ interface InternalState$1 {
     endNoBuffer: number;
     endReachedSnapshot: ThresholdSnapshot$1 | undefined;
     firstFullyOnScreenIndex: number;
+    preservedEndAnchorCorrection?: {
+        lastRequestTime?: number;
+    };
     hasScrolled?: boolean;
     idCache: string[];
     idsInView: string[];
@@ -166,6 +169,8 @@ interface InternalState$1 {
     isStartReached: boolean | null;
     lastBatchingAction: number;
     lastLayout: LayoutRectangle$1 | undefined;
+    lastNativeScroll?: number;
+    lastNativeScrollTime?: number;
     lastScrollAdjustForHistory?: number;
     lastScrollDelta: number;
     loadStartTime: number;
@@ -419,13 +424,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$1<ItemT, TItemType>) => React.ReactNode) | React.ComponentType<LegendListRenderItemProps$1<ItemT, TItemType>>;
+    renderItem: (props: LegendListRenderItemProps$1<ItemT, TItemType>) => React.ReactNode;
     children?: never;
 }
 interface ChildrenModeProps {

package/index.js

@@ -1233,10 +1233,16 @@ var StyleSheet = {
   create: (styles) => styles,
   flatten: (style) => flattenStyles(style)
 };
+function useLatestRef(value) {
+  const ref = React3__namespace.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/utils/useRafCoalescer.ts
 function useRafCoalescer(callback) {
-  const callbackRef = React3.useRef(callback);
+  const callbackRef = useLatestRef(callback);
   const rafIdRef = React3.useRef(void 0);
-  callbackRef.current = callback;
   const coalescer = React3.useMemo(
     () => ({
       cancel() {
@@ -1798,6 +1804,19 @@ function WebAnchoredEndSpace({ horizontal }) {
   const style = horizontal ? { height: "100%", width: anchoredEndSpaceSize || 0 } : { height: anchoredEndSpaceSize || 0 };
   return /* @__PURE__ */ React3__namespace.createElement("div", { style }, null);
 }
+function useStableRenderComponent(renderComponent, mapProps) {
+  const renderComponentRef = useLatestRef(renderComponent);
+  const mapPropsRef = useLatestRef(mapProps);
+  return React3__namespace.useMemo(
+    () => React3__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, children, ...rest }) => {
   const localRef = React3.useRef(null);
   const ref = refView != null ? refView : localRef;
@@ -1842,14 +1861,11 @@ var ListComponent = typedMemo(function ListComponent2({
     needsOtherAxisSize: ctx.state.needsOtherAxisSize,
     otherAxisSize
   });
-  const ScrollComponent = React3.useMemo(() => {
-    if (!renderScrollComponent) {
-      return ListComponentScrollView;
-    }
-    return React3__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;
   React3.useLayoutEffect(() => {
     if (!ListHeaderComponent) {
@@ -3209,11 +3225,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)) {
@@ -3370,7 +3426,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);
@@ -3381,7 +3437,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;
@@ -3394,14 +3452,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, {
@@ -3652,7 +3704,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 });
@@ -5655,7 +5710,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) {
@@ -5677,6 +5732,9 @@ function onScroll(ctx, event) {
   if (state.props.horizontal) {
     newScroll = toLogicalHorizontalOffset(state, newScroll, (_e = event.nativeEvent.contentSize) == null ? void 0 : _e.width);
   }
+  state.didFinishInitialScroll && ((_f = state.initialScroll) == null ? void 0 : _f.viewPosition) === 1 && state.scroll > state.scrollLength;
+  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) {
@@ -6302,6 +6360,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;
@@ -6327,7 +6387,7 @@ function getRenderedItem(ctx, key) {
       item,
       type: getItemType ? (_a3 = getItemType(item, index)) != null ? _a3 : "" : ""
     };
-    renderedItem = React3__namespace.default.createElement(renderItem, itemProps);
+    renderedItem = renderItem(itemProps);
   }
   return { index, item: data[index], renderedItem };
 }

package/index.mjs

@@ -1,5 +1,5 @@
 import * as React3 from 'react';
-import React3__default, { forwardRef, useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useImperativeHandle, useLayoutEffect, useContext } from 'react';
+import { forwardRef, useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useImperativeHandle, useLayoutEffect, useContext } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import * as ReactDOM from 'react-dom';
 import { flushSync } from 'react-dom';
@@ -1212,10 +1212,16 @@ var StyleSheet = {
   create: (styles) => styles,
   flatten: (style) => flattenStyles(style)
 };
+function useLatestRef(value) {
+  const ref = React3.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/utils/useRafCoalescer.ts
 function useRafCoalescer(callback) {
-  const callbackRef = useRef(callback);
+  const callbackRef = useLatestRef(callback);
   const rafIdRef = useRef(void 0);
-  callbackRef.current = callback;
   const coalescer = useMemo(
     () => ({
       cancel() {
@@ -1777,6 +1783,19 @@ function WebAnchoredEndSpace({ horizontal }) {
   const style = horizontal ? { height: "100%", width: anchoredEndSpaceSize || 0 } : { height: anchoredEndSpaceSize || 0 };
   return /* @__PURE__ */ React3.createElement("div", { style }, null);
 }
+function useStableRenderComponent(renderComponent, mapProps) {
+  const renderComponentRef = useLatestRef(renderComponent);
+  const mapPropsRef = useLatestRef(mapProps);
+  return React3.useMemo(
+    () => React3.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, children, ...rest }) => {
   const localRef = useRef(null);
   const ref = refView != null ? refView : localRef;
@@ -1821,14 +1840,11 @@ var ListComponent = typedMemo(function ListComponent2({
     needsOtherAxisSize: ctx.state.needsOtherAxisSize,
     otherAxisSize
   });
-  const ScrollComponent = useMemo(() => {
-    if (!renderScrollComponent) {
-      return ListComponentScrollView;
-    }
-    return React3.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) {
@@ -3188,11 +3204,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)) {
@@ -3349,7 +3405,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);
@@ -3360,7 +3416,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;
@@ -3373,14 +3431,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, {
@@ -3631,7 +3683,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 });
@@ -5634,7 +5689,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) {
@@ -5656,6 +5711,9 @@ function onScroll(ctx, event) {
   if (state.props.horizontal) {
     newScroll = toLogicalHorizontalOffset(state, newScroll, (_e = event.nativeEvent.contentSize) == null ? void 0 : _e.width);
   }
+  state.didFinishInitialScroll && ((_f = state.initialScroll) == null ? void 0 : _f.viewPosition) === 1 && state.scroll > state.scrollLength;
+  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) {
@@ -6281,6 +6339,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;
@@ -6306,7 +6366,7 @@ function getRenderedItem(ctx, key) {
       item,
       type: getItemType ? (_a3 = getItemType(item, index)) != null ? _a3 : "" : ""
     };
-    renderedItem = React3__default.createElement(renderItem, itemProps);
+    renderedItem = renderItem(itemProps);
   }
   return { index, item: data[index], renderedItem };
 }

package/index.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 };
 }