@legendapp/list 1.0.0-beta.21 → 1.0.0-beta.23

package/animated.d.mts

@@ -3,7 +3,7 @@ import * as _legendapp_list from '@legendapp/list';
 import * as react_native from 'react-native';
 import { Animated } from 'react-native';
 
-declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
     data: readonly T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;

package/animated.d.ts

@@ -3,7 +3,7 @@ import * as _legendapp_list from '@legendapp/list';
 import * as react_native from 'react-native';
 import { Animated } from 'react-native';
 
-declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
     data: readonly T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;

package/index.d.mts

@@ -100,7 +100,7 @@ interface InternalState {
     isAtBottom: boolean;
     isAtTop: boolean;
     data: readonly any[];
-    hasScrolled: boolean;
+    hasScrolled?: boolean;
     scrollLength: number;
     startBuffered: number;
     startBufferedId?: string;
@@ -135,6 +135,9 @@ interface InternalState {
     enableScrollForNextCalculateItemsInView: boolean;
     minIndexSizeChanged: number | undefined;
     numPendingInitialLayout: number;
+    queuedCalculateItemsInView: number | undefined;
+    lastBatchingAction: number;
+    ignoreScrollFromCalcTotal?: boolean;
 }
 interface ViewableRange<T> {
     startBuffered: number;
@@ -253,7 +256,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 };
 declare const typedMemo: TypedMemo;
 
-declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
     data: readonly T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;

package/index.d.ts

@@ -100,7 +100,7 @@ interface InternalState {
     isAtBottom: boolean;
     isAtTop: boolean;
     data: readonly any[];
-    hasScrolled: boolean;
+    hasScrolled?: boolean;
     scrollLength: number;
     startBuffered: number;
     startBufferedId?: string;
@@ -135,6 +135,9 @@ interface InternalState {
     enableScrollForNextCalculateItemsInView: boolean;
     minIndexSizeChanged: number | undefined;
     numPendingInitialLayout: number;
+    queuedCalculateItemsInView: number | undefined;
+    lastBatchingAction: number;
+    ignoreScrollFromCalcTotal?: boolean;
 }
 interface ViewableRange<T> {
     startBuffered: number;
@@ -253,7 +256,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 };
 declare const typedMemo: TypedMemo;
 
-declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "maintainVisibleContentPosition" | "stickyHeaderIndices" | "contentInset" | "contentOffset"> & {
     data: readonly T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;

package/index.js

@@ -239,6 +239,7 @@ var Container = ({
   const itemKey = use$(`containerItemKey${id}`);
   const data = use$(`containerItemData${id}`);
   const extraData = use$("extraData");
+  const refLastSize = React6.useRef();
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
   let verticalPaddingStyles;
@@ -246,9 +247,7 @@ var Container = ({
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     verticalPaddingStyles = {
       paddingBottom: !lastItemKeys.has(itemKey) ? rowGap || gap || void 0 : void 0,
-      // Apply horizontal padding based on column position (first, middle, or last)
-      paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
-      paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
+      paddingHorizontal: (columnGap || gap || 0) / 2
     };
   }
   const style = horizontal ? {
@@ -286,7 +285,8 @@ var Container = ({
         }
         return;
       }
-      updateItemSize(id, itemKey, size);
+      refLastSize.current = size;
+      updateItemSize(itemKey, size);
     }
   };
   const ref = React6.useRef(null);
@@ -298,11 +298,24 @@ var Container = ({
         if (measured) {
           const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
           if (size) {
-            updateItemSize(id, itemKey, size);
+            updateItemSize(itemKey, size);
           }
         }
       }
     }, [itemKey]);
+  } else {
+    React6.useEffect(() => {
+      if (itemKey) {
+        const timeout = setTimeout(() => {
+          if (refLastSize.current) {
+            updateItemSize(itemKey, refLastSize.current);
+          }
+        }, 16);
+        return () => {
+          clearTimeout(timeout);
+        };
+      }
+    }, [itemKey]);
   }
   const contextValue = React6.useMemo(
     () => ({ containerId: id, itemKey, index, value: data }),
@@ -357,6 +370,9 @@ var Containers = typedMemo(function Containers2({
   updateItemSize,
   getRenderedItem
 }) {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
+  const numColumns = use$("numColumns");
   const numContainers = use$("numContainersPooled");
   const animSize = useValue$(
     "totalSizeWithScrollAdjust",
@@ -383,6 +399,13 @@ var Containers = typedMemo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
+  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    const mx = (columnGap || gap || 0) / 2;
+    if (mx) {
+      style.marginHorizontal = -mx;
+    }
+  }
   return /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style }, containers);
 });
 
@@ -687,11 +710,13 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   }
 }
 function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
-  const { sizes, positions, scroll } = state;
+  const { sizes, positions, scroll: scrollState, scrollAdjustHandler } = state;
   const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
   const viewAreaMode = viewAreaCoveragePercentThreshold != null;
   const viewablePercentThreshold = viewAreaMode ? viewAreaCoveragePercentThreshold : itemVisiblePercentThreshold;
+  const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
+  const scroll = scrollState - previousScrollAdjust - topPad;
   const top = positions.get(key) - scroll + topPad;
   const size = sizes.get(key) || 0;
   const bottom = top + size;
@@ -848,7 +873,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       isAtBottom: false,
       isAtTop: false,
       data: dataProp,
-      hasScrolled: false,
       scrollLength: initialScrollLength,
       startBuffered: 0,
       startNoBuffer: 0,
@@ -878,7 +902,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       scrollForNextCalculateItemsInView: void 0,
       enableScrollForNextCalculateItemsInView: true,
       minIndexSizeChanged: 0,
-      numPendingInitialLayout: 0
+      numPendingInitialLayout: 0,
+      queuedCalculateItemsInView: 0,
+      lastBatchingAction: Date.now()
     };
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
@@ -1001,7 +1027,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     return res;
   };
-  const calculateItemsInView = React6.useCallback((speed) => {
+  const calculateItemsInView = React6.useCallback(() => {
     var _a2;
     const state = refState.current;
     const {
@@ -1011,7 +1037,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler
+      scrollAdjustHandler,
+      scrollVelocity: speed
     } = state;
     if (!data || scrollLength === 0) {
       return;
@@ -1370,7 +1397,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (!keyExtractorProp) {
           state.positions.clear();
         }
-        calculateItemsInView(state.scrollVelocity);
+        calculateItemsInView();
         const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
         if (!didMaintainScrollAtEnd && dataProp.length > state.data.length) {
           state.isEndReached = false;
@@ -1419,7 +1446,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             (_a2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
             (_b2 = refScroller.current) == null ? void 0 : _b2.scrollTo({ x: 0, y: 0, animated: false });
             setTimeout(() => {
-              calculateItemsInView(0);
+              calculateItemsInView();
             }, 0);
           } else {
             refState.current.startBufferedId = void 0;
@@ -1434,7 +1461,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           }
           (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
           setTimeout(() => {
-            calculateItemsInView(0);
+            calculateItemsInView();
           }, 0);
         }
       }
@@ -1457,10 +1484,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (maxSizeInRow > 0) {
       totalSize += maxSizeInRow;
     }
+    const state = refState.current;
+    state.ignoreScrollFromCalcTotal = true;
+    requestAnimationFrame(() => {
+      state.ignoreScrollFromCalcTotal = false;
+    });
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   };
   const isFirst = !refState.current.renderItem;
   if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
+    refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirst && didDataChange) {
       refState.current.sizes.clear();
       refState.current.positions.clear();
@@ -1541,10 +1574,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       set$(ctx, "numContainersPooled", numContainers * 2);
       if (initialScrollIndex) {
         requestAnimationFrame(() => {
-          calculateItemsInView(state.scrollVelocity);
+          calculateItemsInView();
         });
       } else {
-        calculateItemsInView(state.scrollVelocity);
+        calculateItemsInView();
       }
     }
   };
@@ -1555,7 +1588,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.enableScrollForNextCalculateItemsInView = !viewability;
     doInitialAllocateContainers();
   });
-  const updateItemSize = React6.useCallback((containerId, itemKey, size) => {
+  const updateItemSize = React6.useCallback((itemKey, size) => {
     const state = refState.current;
     const { sizes, indexByKey, sizesLaidOut, data, rowHeights } = state;
     if (!data) {
@@ -1625,27 +1658,30 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (needsCalculate) {
       const scrollVelocity = state.scrollVelocity;
       if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
-        calculateItemsInView(state.scrollVelocity);
+        if (Date.now() - state.lastBatchingAction < 500) {
+          state.queuedCalculateItemsInView = requestAnimationFrame(() => {
+            state.queuedCalculateItemsInView = void 0;
+            calculateItemsInView();
+          });
+        } else {
+          calculateItemsInView();
+        }
       }
     }
   }, []);
-  const handleScrollDebounced = React6.useCallback((velocity) => {
-    calculateItemsInView(velocity);
-    checkAtBottom();
-    checkAtTop();
-  }, []);
   const onLayout = React6.useCallback((event) => {
+    const state = refState.current;
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
-    const didChange = scrollLength !== refState.current.scrollLength;
-    refState.current.scrollLength;
-    refState.current.scrollLength = scrollLength;
+    const didChange = scrollLength !== state.scrollLength;
+    state.scrollLength = scrollLength;
+    state.lastBatchingAction = Date.now();
     doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
     doUpdatePaddingTop();
     checkAtBottom();
     checkAtTop();
     if (didChange) {
-      calculateItemsInView(0);
+      calculateItemsInView();
     }
     if (__DEV__) {
       const isWidthZero = event.nativeEvent.layout.width === 0;
@@ -1667,7 +1703,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         return;
       }
       const state = refState.current;
+      if (state.ignoreScrollFromCalcTotal) {
+        return;
+      }
       state.hasScrolled = true;
+      state.lastBatchingAction = Date.now();
       const currentTime = performance.now();
       const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
       if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
@@ -1695,7 +1735,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       state.scroll = newScroll;
       state.scrollTime = currentTime;
       state.scrollVelocity = velocity;
-      handleScrollDebounced(velocity);
+      calculateItemsInView();
+      checkAtBottom();
+      checkAtTop();
       if (!fromSelf) {
         onScrollProp == null ? void 0 : onScrollProp(event);
       }
@@ -1734,7 +1776,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             if (wasAdjusted) {
               refState.current.scrollVelocity = 0;
               refState.current.scrollHistory = [];
-              calculateItemsInView(0);
+              calculateItemsInView();
             }
           },
           animated ? 1e3 : 50
@@ -1785,7 +1827,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (wasPaused) {
           refState.current.scrollVelocity = 0;
           refState.current.scrollHistory = [];
-          calculateItemsInView(0);
+          calculateItemsInView();
         }
         if (onMomentumScrollEnd) {
           onMomentumScrollEnd(event);

package/index.mjs

@@ -218,6 +218,7 @@ var Container = ({
   const itemKey = use$(`containerItemKey${id}`);
   const data = use$(`containerItemData${id}`);
   const extraData = use$("extraData");
+  const refLastSize = useRef();
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
   let verticalPaddingStyles;
@@ -225,9 +226,7 @@ var Container = ({
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     verticalPaddingStyles = {
       paddingBottom: !lastItemKeys.has(itemKey) ? rowGap || gap || void 0 : void 0,
-      // Apply horizontal padding based on column position (first, middle, or last)
-      paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
-      paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
+      paddingHorizontal: (columnGap || gap || 0) / 2
     };
   }
   const style = horizontal ? {
@@ -265,7 +264,8 @@ var Container = ({
         }
         return;
       }
-      updateItemSize(id, itemKey, size);
+      refLastSize.current = size;
+      updateItemSize(itemKey, size);
     }
   };
   const ref = useRef(null);
@@ -277,11 +277,24 @@ var Container = ({
         if (measured) {
           const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
           if (size) {
-            updateItemSize(id, itemKey, size);
+            updateItemSize(itemKey, size);
           }
         }
       }
     }, [itemKey]);
+  } else {
+    useEffect(() => {
+      if (itemKey) {
+        const timeout = setTimeout(() => {
+          if (refLastSize.current) {
+            updateItemSize(itemKey, refLastSize.current);
+          }
+        }, 16);
+        return () => {
+          clearTimeout(timeout);
+        };
+      }
+    }, [itemKey]);
   }
   const contextValue = useMemo(
     () => ({ containerId: id, itemKey, index, value: data }),
@@ -336,6 +349,9 @@ var Containers = typedMemo(function Containers2({
   updateItemSize,
   getRenderedItem
 }) {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
+  const numColumns = use$("numColumns");
   const numContainers = use$("numContainersPooled");
   const animSize = useValue$(
     "totalSizeWithScrollAdjust",
@@ -362,6 +378,13 @@ var Containers = typedMemo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
+  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    const mx = (columnGap || gap || 0) / 2;
+    if (mx) {
+      style.marginHorizontal = -mx;
+    }
+  }
   return /* @__PURE__ */ React6.createElement(Animated.View, { style }, containers);
 });
 
@@ -666,11 +689,13 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   }
 }
 function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
-  const { sizes, positions, scroll } = state;
+  const { sizes, positions, scroll: scrollState, scrollAdjustHandler } = state;
   const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
   const viewAreaMode = viewAreaCoveragePercentThreshold != null;
   const viewablePercentThreshold = viewAreaMode ? viewAreaCoveragePercentThreshold : itemVisiblePercentThreshold;
+  const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
+  const scroll = scrollState - previousScrollAdjust - topPad;
   const top = positions.get(key) - scroll + topPad;
   const size = sizes.get(key) || 0;
   const bottom = top + size;
@@ -827,7 +852,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       isAtBottom: false,
       isAtTop: false,
       data: dataProp,
-      hasScrolled: false,
       scrollLength: initialScrollLength,
       startBuffered: 0,
       startNoBuffer: 0,
@@ -857,7 +881,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       scrollForNextCalculateItemsInView: void 0,
       enableScrollForNextCalculateItemsInView: true,
       minIndexSizeChanged: 0,
-      numPendingInitialLayout: 0
+      numPendingInitialLayout: 0,
+      queuedCalculateItemsInView: 0,
+      lastBatchingAction: Date.now()
     };
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
@@ -980,7 +1006,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     return res;
   };
-  const calculateItemsInView = useCallback((speed) => {
+  const calculateItemsInView = useCallback(() => {
     var _a2;
     const state = refState.current;
     const {
@@ -990,7 +1016,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler
+      scrollAdjustHandler,
+      scrollVelocity: speed
     } = state;
     if (!data || scrollLength === 0) {
       return;
@@ -1349,7 +1376,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (!keyExtractorProp) {
           state.positions.clear();
         }
-        calculateItemsInView(state.scrollVelocity);
+        calculateItemsInView();
         const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
         if (!didMaintainScrollAtEnd && dataProp.length > state.data.length) {
           state.isEndReached = false;
@@ -1398,7 +1425,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             (_a2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
             (_b2 = refScroller.current) == null ? void 0 : _b2.scrollTo({ x: 0, y: 0, animated: false });
             setTimeout(() => {
-              calculateItemsInView(0);
+              calculateItemsInView();
             }, 0);
           } else {
             refState.current.startBufferedId = void 0;
@@ -1413,7 +1440,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           }
           (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
           setTimeout(() => {
-            calculateItemsInView(0);
+            calculateItemsInView();
           }, 0);
         }
       }
@@ -1436,10 +1463,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (maxSizeInRow > 0) {
       totalSize += maxSizeInRow;
     }
+    const state = refState.current;
+    state.ignoreScrollFromCalcTotal = true;
+    requestAnimationFrame(() => {
+      state.ignoreScrollFromCalcTotal = false;
+    });
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   };
   const isFirst = !refState.current.renderItem;
   if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
+    refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirst && didDataChange) {
       refState.current.sizes.clear();
       refState.current.positions.clear();
@@ -1520,10 +1553,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       set$(ctx, "numContainersPooled", numContainers * 2);
       if (initialScrollIndex) {
         requestAnimationFrame(() => {
-          calculateItemsInView(state.scrollVelocity);
+          calculateItemsInView();
         });
       } else {
-        calculateItemsInView(state.scrollVelocity);
+        calculateItemsInView();
       }
     }
   };
@@ -1534,7 +1567,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.enableScrollForNextCalculateItemsInView = !viewability;
     doInitialAllocateContainers();
   });
-  const updateItemSize = useCallback((containerId, itemKey, size) => {
+  const updateItemSize = useCallback((itemKey, size) => {
     const state = refState.current;
     const { sizes, indexByKey, sizesLaidOut, data, rowHeights } = state;
     if (!data) {
@@ -1604,27 +1637,30 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (needsCalculate) {
       const scrollVelocity = state.scrollVelocity;
       if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
-        calculateItemsInView(state.scrollVelocity);
+        if (Date.now() - state.lastBatchingAction < 500) {
+          state.queuedCalculateItemsInView = requestAnimationFrame(() => {
+            state.queuedCalculateItemsInView = void 0;
+            calculateItemsInView();
+          });
+        } else {
+          calculateItemsInView();
+        }
       }
     }
   }, []);
-  const handleScrollDebounced = useCallback((velocity) => {
-    calculateItemsInView(velocity);
-    checkAtBottom();
-    checkAtTop();
-  }, []);
   const onLayout = useCallback((event) => {
+    const state = refState.current;
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
-    const didChange = scrollLength !== refState.current.scrollLength;
-    refState.current.scrollLength;
-    refState.current.scrollLength = scrollLength;
+    const didChange = scrollLength !== state.scrollLength;
+    state.scrollLength = scrollLength;
+    state.lastBatchingAction = Date.now();
     doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
     doUpdatePaddingTop();
     checkAtBottom();
     checkAtTop();
     if (didChange) {
-      calculateItemsInView(0);
+      calculateItemsInView();
     }
     if (__DEV__) {
       const isWidthZero = event.nativeEvent.layout.width === 0;
@@ -1646,7 +1682,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         return;
       }
       const state = refState.current;
+      if (state.ignoreScrollFromCalcTotal) {
+        return;
+      }
       state.hasScrolled = true;
+      state.lastBatchingAction = Date.now();
       const currentTime = performance.now();
       const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
       if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
@@ -1674,7 +1714,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       state.scroll = newScroll;
       state.scrollTime = currentTime;
       state.scrollVelocity = velocity;
-      handleScrollDebounced(velocity);
+      calculateItemsInView();
+      checkAtBottom();
+      checkAtTop();
       if (!fromSelf) {
         onScrollProp == null ? void 0 : onScrollProp(event);
       }
@@ -1713,7 +1755,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             if (wasAdjusted) {
               refState.current.scrollVelocity = 0;
               refState.current.scrollHistory = [];
-              calculateItemsInView(0);
+              calculateItemsInView();
             }
           },
           animated ? 1e3 : 50
@@ -1764,7 +1806,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (wasPaused) {
           refState.current.scrollVelocity = 0;
           refState.current.scrollHistory = [];
-          calculateItemsInView(0);
+          calculateItemsInView();
         }
         if (onMomentumScrollEnd) {
           onMomentumScrollEnd(event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.21",
+  "version": "1.0.0-beta.23",
   "description": "Legend List aims to be a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,