@legendapp/list 1.0.0-beta.16 → 1.0.0-beta.18

package/index.mjs

@@ -1,6 +1,6 @@
 import * as React6 from 'react';
 import React6__default, { createContext, memo, useReducer, useEffect, useMemo, useRef, useCallback, useImperativeHandle, useSyncExternalStore, useContext, useState, forwardRef, useLayoutEffect } from 'react';
-import { View, Text, Platform, Animated, ScrollView, Dimensions, StyleSheet } from 'react-native';
+import { View, Text, Platform, Animated, ScrollView, Dimensions, StyleSheet, RefreshControl } from 'react-native';
 
 // src/LegendList.tsx
 var ContextState = React6.createContext(null);
@@ -57,6 +57,14 @@ function set$(ctx, signalName, value) {
     }
   }
 }
+function getContentSize(ctx) {
+  const { values } = ctx;
+  const stylePaddingTop = values.get("stylePaddingTop") || 0;
+  const headerSize = values.get("headerSize") || 0;
+  const footerSize = values.get("footerSize") || 0;
+  const totalSize = values.get("totalSize") || 0;
+  return headerSize + footerSize + totalSize + stylePaddingTop;
+}
 var symbolFirst = Symbol();
 function useInit(cb) {
   const refValue = useRef(symbolFirst);
@@ -143,7 +151,9 @@ function useRecyclingState(valueOrFun) {
   return stateInfo;
 }
 var DebugView = memo(function DebugView2({ state }) {
-  const paddingTop = use$("paddingTop");
+  const ctx = useStateContext();
+  const totalSize = use$("totalSize");
+  const contentSize = getContentSize(ctx);
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
   useInterval(() => {
     forceUpdate();
@@ -161,7 +171,8 @@ var DebugView = memo(function DebugView2({ state }) {
         backgroundColor: "#FFFFFFCC"
       }
     },
-    /* @__PURE__ */ React6.createElement(Text, null, "PaddingTop: ", paddingTop),
+    /* @__PURE__ */ React6.createElement(Text, null, "TotalSize: ", totalSize),
+    /* @__PURE__ */ React6.createElement(Text, null, "ContentSize: ", contentSize),
     /* @__PURE__ */ React6.createElement(Text, null, "At end: ", String(state.isAtBottom))
   );
 });
@@ -203,13 +214,17 @@ var Container = ({
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
   const numColumns = use$("numColumns");
+  const lastItemKeys = use$("lastItemKeys");
+  const itemKey = use$(`containerItemKey${id}`);
+  const data = use$(`containerItemData${id}`);
+  const extraData = use$("extraData");
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
   let verticalPaddingStyles;
   if (columnWrapperStyle && !horizontal && numColumns > 1) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     verticalPaddingStyles = {
-      paddingVertical: rowGap || gap || void 0,
+      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
@@ -230,12 +245,8 @@ var Container = ({
     top: position.relativeCoordinate,
     ...verticalPaddingStyles || {}
   };
-  const lastItemKey = use$("lastItemKey");
-  const itemKey = use$(`containerItemKey${id}`);
-  const data = use$(`containerItemData${id}`);
-  const extraData = use$("extraData");
   const renderedItemInfo = useMemo(
-    () => itemKey !== void 0 && getRenderedItem(itemKey),
+    () => itemKey !== void 0 ? getRenderedItem(itemKey) : null,
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
@@ -244,7 +255,7 @@ var Container = ({
       const layout = event.nativeEvent.layout;
       const size = Math.floor(layout[horizontal ? "width" : "height"] * 8) / 8;
       if (size === 0) {
-        if (layout.y !== POSITION_OUT_OF_VIEW && layout.y !== POSITION_OUT_OF_VIEW) {
+        if (layout.x !== POSITION_OUT_OF_VIEW && layout.y !== POSITION_OUT_OF_VIEW) {
           console.log(
             "[WARN] Container 0 height reported, possible bug in LegendList",
             id,
@@ -276,7 +287,7 @@ var Container = ({
     () => ({ containerId: id, itemKey, index, value: data }),
     [id, itemKey, index, data]
   );
-  const contentFragment = /* @__PURE__ */ React6__default.createElement(React6__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent));
+  const contentFragment = /* @__PURE__ */ React6__default.createElement(React6__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.has(itemKey) && /* @__PURE__ */ React6__default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
     if (ENABLE_DEVMODE) {
@@ -287,6 +298,8 @@ var Container = ({
   }
   return /* @__PURE__ */ React6__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
+var typedForwardRef = forwardRef;
+var typedMemo = memo;
 var useAnimatedValue = (initialValue) => {
   return useRef(new Animated.Value(initialValue)).current;
 };
@@ -315,7 +328,7 @@ function useValue$(key, getValue, useMicrotask) {
 }
 
 // src/Containers.tsx
-var Containers = React6.memo(function Containers2({
+var Containers = typedMemo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -325,7 +338,7 @@ var Containers = React6.memo(function Containers2({
 }) {
   const numContainers = use$("numContainersPooled");
   const animSize = useValue$(
-    "totalSize",
+    "totalSizeWithScrollAdjust",
     void 0,
     /*useMicrotask*/
     true
@@ -334,7 +347,7 @@ var Containers = React6.memo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React.createElement(
         Container,
         {
           id: i,
@@ -349,7 +362,7 @@ var Containers = React6.memo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
-  return /* @__PURE__ */ React6.createElement(Animated.View, { style }, containers);
+  return /* @__PURE__ */ React.createElement(Animated.View, { style }, containers);
 });
 
 // src/ListComponent.tsx
@@ -413,7 +426,7 @@ var PaddingAndAdjustDevMode = () => {
     }
   ));
 };
-var ListComponent = React6.memo(function ListComponent2({
+var ListComponent = typedMemo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -434,6 +447,9 @@ var ListComponent = React6.memo(function ListComponent2({
   refScrollView,
   maintainVisibleContentPosition,
   renderScrollComponent,
+  onRefresh,
+  refreshing,
+  progressViewOffset,
   ...rest
 }) {
   const ctx = useStateContext();
@@ -461,15 +477,12 @@ var ListComponent = React6.memo(function ListComponent2({
     },
     ENABLE_DEVMODE ? /* @__PURE__ */ React6.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6.createElement(PaddingAndAdjust, null),
     ListHeaderComponent && /* @__PURE__ */ React6.createElement(
-      Animated.View,
+      View,
       {
         style: ListHeaderComponentStyle,
         onLayout: (event) => {
           const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
-          const prevSize = peek$(ctx, "headerSize") || 0;
-          if (size !== prevSize) {
-            set$(ctx, "headerSize", size);
-          }
+          set$(ctx, "headerSize", size);
         }
       },
       getComponent(ListHeaderComponent)
@@ -482,11 +495,21 @@ var ListComponent = React6.memo(function ListComponent2({
         recycleItems,
         waitForInitialLayout,
         getRenderedItem,
-        ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
+        ItemSeparatorComponent,
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React6.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React6.createElement(
+      View,
+      {
+        style: ListFooterComponentStyle,
+        onLayout: (event) => {
+          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+          set$(ctx, "footerSize", size);
+        }
+      },
+      getComponent(ListFooterComponent)
+    )
   );
 });
 
@@ -531,7 +554,6 @@ var ScrollAdjustHandler = class {
     return false;
   }
 };
-var typedForwardRef = forwardRef;
 var useCombinedRef = (...refs) => {
   const callback = useCallback((element) => {
     for (const ref of refs) {
@@ -731,6 +753,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     waitForInitialLayout = true,
     extraData,
     onLayout: onLayoutProp,
+    onRefresh,
+    refreshing,
+    progressViewOffset,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
@@ -796,13 +821,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       positions: /* @__PURE__ */ new Map(),
       columns: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
-      waitingForMicrotask: false,
       isStartReached: initialContentOffset < initialScrollLength * onStartReachedThreshold,
       isEndReached: false,
       isAtBottom: false,
       isAtTop: false,
       data: dataProp,
-      idsInFirstRender: void 0,
       hasScrolled: false,
       scrollLength: initialScrollLength,
       startBuffered: 0,
@@ -829,11 +852,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       belowAnchorElementPositions: void 0,
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
+      endReachedBlockedByTimer: false,
       scrollForNextCalculateItemsInView: void 0,
       enableScrollForNextCalculateItemsInView: true,
-      minIndexSizeChanged: 0
+      minIndexSizeChanged: 0,
+      numPendingInitialLayout: 0
     };
-    refState.current.idsInFirstRender = new Set(dataProp.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
         refState.current.anchorElement = {
@@ -853,6 +877,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
     set$(ctx, "extraData", extraData);
   }
+  const didDataChange = refState.current.data !== dataProp;
+  refState.current.data = dataProp;
   const getAnchorElementIndex = () => {
     const state = refState.current;
     if (state.anchorElement) {
@@ -894,7 +920,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         });
       }
     }
-    set$(ctx, "totalSize", resultSize);
+    set$(ctx, "totalSize", state.totalSize);
+    set$(ctx, "totalSizeWithScrollAdjust", resultSize);
     if (alignItemsAtEnd) {
       doUpdatePaddingTop();
     }
@@ -964,10 +991,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       columns,
       scrollAdjustHandler
     } = state;
-    if (state.waitingForMicrotask) {
-      state.waitingForMicrotask = false;
-    }
-    if (!data) {
+    if (!data || scrollLength === 0) {
       return;
     }
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
@@ -1200,7 +1224,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       }
     }
-    set$(ctx, "containersDidLayout", true);
+    if (state.numPendingInitialLayout === 0) {
+      state.numPendingInitialLayout = state.endBuffered - state.startBuffered + 1;
+    }
     if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
         state,
@@ -1215,9 +1241,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, []);
   const doUpdatePaddingTop = () => {
     if (alignItemsAtEnd) {
-      const { scrollLength, totalSize } = refState.current;
-      const listPaddingTop = peek$(ctx, "stylePaddingTop") || 0;
-      const paddingTop = Math.max(0, Math.floor(scrollLength - totalSize - listPaddingTop));
+      const { scrollLength } = refState.current;
+      const contentSize = getContentSize(ctx);
+      const paddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
       set$(ctx, "paddingTop", paddingTop);
     }
   };
@@ -1237,29 +1263,48 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return true;
     }
   };
+  const checkThreshold = (distance, threshold, isReached, isBlockedByTimer, onReached, blockTimer) => {
+    const distanceAbs = Math.abs(distance);
+    const isAtThreshold = distanceAbs < threshold;
+    if (!isReached && !isBlockedByTimer) {
+      if (isAtThreshold) {
+        onReached == null ? void 0 : onReached(distance);
+        blockTimer == null ? void 0 : blockTimer(true);
+        setTimeout(() => {
+          blockTimer == null ? void 0 : blockTimer(false);
+        }, 700);
+        return true;
+      }
+    } else {
+      if (distance >= 1.3 * threshold) {
+        return false;
+      }
+    }
+    return isReached;
+  };
   const checkAtBottom = () => {
     if (!refState.current) {
       return;
     }
-    const { scrollLength, scroll, totalSize, hasScrolled } = refState.current;
-    if (totalSize > 0 && hasScrolled) {
-      const distanceFromEnd = Math.abs(
-        totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0)
-      );
-      if (refState.current) {
-        refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
-      }
-      if (!refState.current.isEndReached) {
-        if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
-          refState.current.isEndReached = true;
-          const { onEndReached } = callbacks.current;
-          onEndReached == null ? void 0 : onEndReached({ distanceFromEnd });
-        }
-      } else {
-        if (distanceFromEnd >= onEndReachedThreshold * scrollLength) {
-          refState.current.isEndReached = false;
+    const { scrollLength, scroll, hasScrolled } = refState.current;
+    const contentSize = getContentSize(ctx);
+    if (contentSize > 0 && hasScrolled) {
+      const distanceFromEnd = contentSize - scroll - scrollLength;
+      const distanceFromEndAbs = Math.abs(distanceFromEnd);
+      refState.current.isAtBottom = distanceFromEndAbs < scrollLength * maintainScrollAtEndThreshold;
+      refState.current.isEndReached = checkThreshold(
+        distanceFromEnd,
+        onEndReachedThreshold * scrollLength,
+        refState.current.isEndReached,
+        refState.current.endReachedBlockedByTimer,
+        (distance) => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = callbacks.current).onEndReached) == null ? void 0 : _b2.call(_a2, { distanceFromEnd: distance });
+        },
+        (block) => {
+          refState.current.endReachedBlockedByTimer = block;
         }
-      }
+      );
     }
   };
   const checkAtTop = () => {
@@ -1268,22 +1313,21 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     const { scrollLength, scroll } = refState.current;
     const distanceFromTop = scroll;
-    refState.current.isAtTop = distanceFromTop < 0;
-    if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
-      if (distanceFromTop < onStartReachedThreshold * scrollLength) {
-        refState.current.isStartReached = true;
-        const { onStartReached } = callbacks.current;
-        onStartReached == null ? void 0 : onStartReached({ distanceFromStart: scroll });
-        refState.current.startReachedBlockedByTimer = true;
-        setTimeout(() => {
-          refState.current.startReachedBlockedByTimer = false;
-        }, 700);
-      }
-    } else {
-      if (distanceFromTop >= 1.3 * onStartReachedThreshold * scrollLength) {
-        refState.current.isStartReached = false;
+    const distanceFromTopAbs = Math.abs(distanceFromTop);
+    refState.current.isAtTop = distanceFromTopAbs < 0;
+    refState.current.isStartReached = checkThreshold(
+      distanceFromTop,
+      onStartReachedThreshold * scrollLength,
+      refState.current.isStartReached,
+      refState.current.startReachedBlockedByTimer,
+      (distance) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = callbacks.current).onStartReached) == null ? void 0 : _b2.call(_a2, { distanceFromStart: distance });
+      },
+      (block) => {
+        refState.current.startReachedBlockedByTimer = block;
       }
-    }
+    );
   };
   const checkResetContainers = (isFirst2) => {
     const state = refState.current;
@@ -1394,12 +1438,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   };
   const isFirst = !refState.current.renderItem;
-  if (isFirst || dataProp !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
-    if (!keyExtractorProp && !isFirst && dataProp !== refState.current.data) {
+  if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
+    if (!keyExtractorProp && !isFirst && didDataChange) {
       refState.current.sizes.clear();
       refState.current.positions.clear();
     }
-    refState.current.data = dataProp;
     calcTotalSizesAndPositions({ forgetPositions: false });
   }
   useEffect(() => {
@@ -1412,17 +1455,22 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   refState.current.renderItem = renderItem;
-  const lastItemKey = dataProp.length > 0 ? getId(dataProp.length - 1) : void 0;
+  const memoizedLastItemKeys = useMemo(() => {
+    if (!dataProp.length) return [];
+    return new Set(
+      Array.from({ length: Math.min(numColumnsProp, dataProp.length) }, (_, i) => getId(dataProp.length - 1 - i))
+    );
+  }, [dataProp.length, numColumnsProp, dataProp.slice(-numColumnsProp).toString()]);
   const stylePaddingTop = (_d = (_c = (_a = StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
   const initalizeStateVars = () => {
-    set$(ctx, "lastItemKey", lastItemKey);
+    set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
     set$(ctx, "stylePaddingTop", stylePaddingTop);
   };
   if (isFirst) {
     initalizeStateVars();
   }
-  useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
+  useEffect(initalizeStateVars, [memoizedLastItemKeys, numColumnsProp, stylePaddingTop]);
   const getRenderedItem = useCallback((key) => {
     var _a2, _b2;
     const state = refState.current;
@@ -1454,34 +1502,40 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       useRecyclingEffect: useRecyclingEffect2,
       useRecyclingState: useRecyclingState2
     });
-    return { index, renderedItem };
+    return { index, item: data[index], renderedItem };
   }, []);
-  useInit(() => {
+  const doInitialAllocateContainers = () => {
     var _a2;
     const state = refState.current;
-    const viewability = setupViewability(props);
-    state.viewabilityConfigCallbackPairs = viewability;
-    state.enableScrollForNextCalculateItemsInView = !viewability;
     const scrollLength = state.scrollLength;
-    const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, dataProp[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
-    for (let i = 0; i < numContainers; i++) {
-      set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
-      set$(ctx, `containerColumn${i}`, -1);
-    }
-    set$(ctx, "numContainers", numContainers);
-    set$(ctx, "numContainersPooled", numContainers * 2);
-    if (initialScrollIndex) {
-      requestAnimationFrame(() => {
+    if (scrollLength > 0 && !peek$(ctx, "numContainers")) {
+      const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, dataProp[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
+      const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
+      for (let i = 0; i < numContainers; i++) {
+        set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
+        set$(ctx, `containerColumn${i}`, -1);
+      }
+      set$(ctx, "numContainers", numContainers);
+      set$(ctx, "numContainersPooled", numContainers * 2);
+      if (initialScrollIndex) {
+        requestAnimationFrame(() => {
+          calculateItemsInView(state.scrollVelocity);
+        });
+      } else {
         calculateItemsInView(state.scrollVelocity);
-      });
-    } else {
-      calculateItemsInView(state.scrollVelocity);
+      }
     }
+  };
+  useInit(() => {
+    const state = refState.current;
+    const viewability = setupViewability(props);
+    state.viewabilityConfigCallbackPairs = viewability;
+    state.enableScrollForNextCalculateItemsInView = !viewability;
+    doInitialAllocateContainers();
   });
   const updateItemSize = useCallback((containerId, itemKey, size) => {
     const state = refState.current;
-    const { sizes, indexByKey, columns, sizesLaidOut, data, rowHeights } = state;
+    const { sizes, indexByKey, sizesLaidOut, data, rowHeights } = state;
     if (!data) {
       return;
     }
@@ -1489,8 +1543,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const numColumns = peek$(ctx, "numColumns");
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const prevSize = getItemSize(itemKey, index, data);
+    let needsCalculate = false;
+    if (state.numPendingInitialLayout > 0) {
+      state.numPendingInitialLayout--;
+      if (state.numPendingInitialLayout === 0) {
+        needsCalculate = true;
+        state.numPendingInitialLayout = -1;
+        queueMicrotask(() => {
+          set$(ctx, "containersDidLayout", true);
+        });
+      }
+    }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
+      needsCalculate = true;
       if (numColumns > 1) {
         const rowNumber = Math.floor(index / numColumnsProp);
         const prevSizeInRow = getRowHeight(rowNumber);
@@ -1524,22 +1590,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       refState.current.scrollForNextCalculateItemsInView = void 0;
       addTotalSize(itemKey, diff, 0);
       doMaintainScrollAtEnd(true);
-      const scrollVelocity = state.scrollVelocity;
-      if (!state.waitingForMicrotask && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
-        if (!peek$(ctx, "containersDidLayout")) {
-          state.waitingForMicrotask = true;
-          queueMicrotask(() => {
-            if (state.waitingForMicrotask) {
-              state.waitingForMicrotask = false;
-              calculateItemsInView(state.scrollVelocity);
-            }
-          });
-        } else {
-          calculateItemsInView(state.scrollVelocity);
-        }
-      }
       if (onItemSizeChanged) {
-        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data[index] });
+        onItemSizeChanged({
+          size,
+          previous: prevSize,
+          index,
+          itemKey,
+          itemData: data[index]
+        });
+      }
+    }
+    if (needsCalculate) {
+      const scrollVelocity = state.scrollVelocity;
+      if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
+        calculateItemsInView(state.scrollVelocity);
       }
     }
   }, []);
@@ -1551,7 +1615,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const onLayout = useCallback((event) => {
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
     const didChange = scrollLength !== refState.current.scrollLength;
+    refState.current.scrollLength;
     refState.current.scrollLength = scrollLength;
+    doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
     doUpdatePaddingTop();
     checkAtBottom();
@@ -1671,7 +1737,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             scrollToIndex({ index, animated });
           }
         },
-        scrollToEnd: () => refScroller.current.scrollToEnd()
+        scrollToEnd: (options) => refScroller.current.scrollToEnd(options)
       };
     },
     []
@@ -1704,6 +1770,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       maintainVisibleContentPosition,
       scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : Platform.OS === "web" ? 16 : void 0,
       waitForInitialLayout,
+      refreshControl: props.refreshControl == null ? /* @__PURE__ */ React6.createElement(
+        RefreshControl,
+        {
+          refreshing: !!refreshing,
+          onRefresh,
+          progressViewOffset
+        }
+      ) : props.refreshControl,
       style
     }
   ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React6.createElement(DebugView, { state: refState.current }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.18",
   "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,

package/reanimated.d.mts

@@ -2,7 +2,7 @@ import { LegendListRef, LegendListPropsBase } from '@legendapp/list';
 import React__default, { ComponentProps } from 'react';
 import Animated from 'react-native-reanimated';
 
-type KeysToOmit = "getEstimatedItemSize" | "keyExtractor" | "animatedProps" | "renderItem" | "onItemSizeChanged";
+type KeysToOmit = "getEstimatedItemSize" | "keyExtractor" | "animatedProps" | "renderItem" | "onItemSizeChanged" | "ItemSeparatorComponent";
 type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Animated.ScrollView>>;
 interface AnimatedLegendListProps<ItemT> extends Omit<PropsBase<ItemT>, KeysToOmit> {
     refScrollView?: React__default.Ref<Animated.ScrollView>;

package/reanimated.d.ts

@@ -2,7 +2,7 @@ import { LegendListRef, LegendListPropsBase } from '@legendapp/list';
 import React__default, { ComponentProps } from 'react';
 import Animated from 'react-native-reanimated';
 
-type KeysToOmit = "getEstimatedItemSize" | "keyExtractor" | "animatedProps" | "renderItem" | "onItemSizeChanged";
+type KeysToOmit = "getEstimatedItemSize" | "keyExtractor" | "animatedProps" | "renderItem" | "onItemSizeChanged" | "ItemSeparatorComponent";
 type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Animated.ScrollView>>;
 interface AnimatedLegendListProps<ItemT> extends Omit<PropsBase<ItemT>, KeysToOmit> {
     refScrollView?: React__default.Ref<Animated.ScrollView>;