@legendapp/list 0.6.2 → 0.6.4

package/index.d.mts

@@ -29,6 +29,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
     refScrollView?: React.Ref<ScrollView>;
+    waitForInitialLayout?: boolean;
     estimatedItemSize?: number;
     getEstimatedItemSize?: (index: number, item: ItemT) => number;
     onStartReached?: ((info: {
@@ -49,6 +50,13 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged | undefined;
+    onItemSizeChanged?: (info: {
+        size: number;
+        previous: number;
+        index: number;
+        itemKey: string;
+        itemData: ItemT;
+    }) => void;
 };
 type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {
@@ -89,10 +97,6 @@ interface InternalState {
     timeoutSizeMessage: any;
     nativeMarginTop: number;
     indexByKey: Map<string, number>;
-    contentSize: {
-        width: number;
-        height: number;
-    };
     viewabilityConfigCallbackPairs: ViewabilityConfigCallbackPairs | undefined;
     renderItem: (props: LegendListRenderItemProps<any>) => ReactNode;
     scrollHistory: Array<{
@@ -101,6 +105,11 @@ interface InternalState {
     }>;
     scrollTimer: Timer | undefined;
     startReachedBlockedByTimer: boolean;
+    layoutsPending: Set<number>;
+    scrollForNextCalculateItemsInView: {
+        top: number;
+        bottom: number;
+    } | undefined;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.d.ts

@@ -29,6 +29,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
     refScrollView?: React.Ref<ScrollView>;
+    waitForInitialLayout?: boolean;
     estimatedItemSize?: number;
     getEstimatedItemSize?: (index: number, item: ItemT) => number;
     onStartReached?: ((info: {
@@ -49,6 +50,13 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged | undefined;
+    onItemSizeChanged?: (info: {
+        size: number;
+        previous: number;
+        index: number;
+        itemKey: string;
+        itemData: ItemT;
+    }) => void;
 };
 type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {
@@ -89,10 +97,6 @@ interface InternalState {
     timeoutSizeMessage: any;
     nativeMarginTop: number;
     indexByKey: Map<string, number>;
-    contentSize: {
-        width: number;
-        height: number;
-    };
     viewabilityConfigCallbackPairs: ViewabilityConfigCallbackPairs | undefined;
     renderItem: (props: LegendListRenderItemProps<any>) => ReactNode;
     scrollHistory: Array<{
@@ -101,6 +105,11 @@ interface InternalState {
     }>;
     scrollTimer: Timer | undefined;
     startReachedBlockedByTimer: boolean;
+    layoutsPending: Set<number>;
+    scrollForNextCalculateItemsInView: {
+        top: number;
+        bottom: number;
+    } | undefined;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.js

@@ -39,12 +39,16 @@ function StateProvider({ children }) {
 function useStateContext() {
   return React4__namespace.useContext(ContextState);
 }
+function createSelectorFunctions(ctx, signalName) {
+  return {
+    subscribe: (cb) => listen$(ctx, signalName, cb),
+    get: () => peek$(ctx, signalName)
+  };
+}
 function use$(signalName) {
   const ctx = React4__namespace.useContext(ContextState);
-  const value = React4.useSyncExternalStore(
-    (onStoreChange) => listen$(ctx, signalName, onStoreChange),
-    () => ctx.values.get(signalName)
-  );
+  const { subscribe, get } = React4__namespace.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const value = React4.useSyncExternalStore(subscribe, get);
   return value;
 }
 function listen$(ctx, signalName, cb) {
@@ -73,10 +77,13 @@ function set$(ctx, signalName, value) {
     }
   }
 }
+
+// src/Container.tsx
 var Container = ({
   id,
   recycleItems,
   horizontal,
+  waitForInitialLayout,
   getRenderedItem,
   updateItemSize,
   ItemSeparatorComponent
@@ -84,11 +91,10 @@ var Container = ({
   const ctx = useStateContext();
   const position = use$(`containerPosition${id}`);
   const column = use$(`containerColumn${id}`) || 0;
-  const visible = use$(`containerDidLayout${id}`);
   const numColumns = use$("numColumns");
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
-  let style = horizontal ? {
+  const style = horizontal ? {
     flexDirection: "row",
     position: "absolute",
     top: otherAxisPos,
@@ -102,7 +108,8 @@ var Container = ({
     width: otherAxisSize,
     top: position
   };
-  {
+  if (waitForInitialLayout) {
+    const visible = use$(`containerDidLayout${id}`);
     style.opacity = visible ? 1 : 0;
   }
   const lastItemKey = use$("lastItemKey");
@@ -118,14 +125,6 @@ var Container = ({
         if (key !== void 0) {
           const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
           updateItemSize(id, key, size);
-          const otherAxisSize2 = horizontal ? event.nativeEvent.layout.width : event.nativeEvent.layout.height;
-          set$(ctx, "otherAxisSize", Math.max(otherAxisSize2, peek$(ctx, "otherAxisSize") || 0));
-          const measured = peek$(ctx, `containerDidLayout${id}`);
-          if (!measured) {
-            requestAnimationFrame(() => {
-              set$(ctx, `containerDidLayout${id}`, true);
-            });
-          }
         }
       }
     },
@@ -150,6 +149,7 @@ var Containers = React4__namespace.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
+  waitForInitialLayout,
   updateItemSize,
   getRenderedItem
 }) {
@@ -165,6 +165,7 @@ var Containers = React4__namespace.memo(function Containers2({
           key: i,
           recycleItems,
           horizontal,
+          waitForInitialLayout,
           getRenderedItem,
           updateItemSize,
           ItemSeparatorComponent
@@ -194,6 +195,7 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
   recycleItems,
   ItemSeparatorComponent,
   alignItemsAtEnd,
+  waitForInitialLayout,
   handleScroll,
   onLayout,
   ListHeaderComponent,
@@ -251,6 +253,7 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
       {
         horizontal,
         recycleItems,
+        waitForInitialLayout,
         getRenderedItem,
         ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
         updateItemSize
@@ -460,7 +463,7 @@ var LegendList = React4.forwardRef(function LegendList2(props, forwardedRef) {
   return /* @__PURE__ */ React4__namespace.createElement(StateProvider, null, /* @__PURE__ */ React4__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = React4.forwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d;
   const {
     data,
     initialScrollIndex,
@@ -484,6 +487,8 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     onEndReached,
     onStartReached,
     ListEmptyComponent,
+    onItemSizeChanged,
+    scrollEventThrottle,
     refScrollView,
     ...rest
   } = props;
@@ -561,13 +566,14 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       indexByKey: /* @__PURE__ */ new Map(),
       scrollHistory: [],
       scrollVelocity: 0,
-      contentSize: { width: 0, height: 0 },
       sizesLaidOut: __DEV__ ? /* @__PURE__ */ new Map() : void 0,
       timeoutSizeMessage: 0,
       scrollTimer: void 0,
       belowAnchorElementPositions: void 0,
       rowHeights: /* @__PURE__ */ new Map(),
-      startReachedBlockedByTimer: false
+      startReachedBlockedByTimer: false,
+      layoutsPending: /* @__PURE__ */ new Set(),
+      scrollForNextCalculateItemsInView: void 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -621,21 +627,18 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
       state.rowHeights.clear();
     }
-    const doAdd = () => {
-      const totalSize = state.totalSize;
-      let resultSize = totalSize;
-      if (applyAdjustValue !== void 0) {
-        resultSize -= applyAdjustValue;
-        refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
-          state.scroll -= diff;
-        });
-      }
-      set$(ctx, "totalSize", resultSize);
-      if (alignItemsAtEnd) {
-        doUpdatePaddingTop();
-      }
-    };
-    doAdd();
+    const totalSize = state.totalSize;
+    let resultSize = totalSize;
+    if (applyAdjustValue !== void 0) {
+      resultSize -= applyAdjustValue;
+      refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
+        state.scroll -= diff;
+      });
+    }
+    set$(ctx, "totalSize", resultSize);
+    if (alignItemsAtEnd) {
+      doUpdatePaddingTop();
+    }
   }, []);
   const getRowHeight = (n) => {
     const { rowHeights } = refState.current;
@@ -698,7 +701,8 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler
+      scrollAdjustHandler,
+      layoutsPending
     } = state;
     if (state.animFrameLayout) {
       cancelAnimationFrame(state.animFrameLayout);
@@ -711,6 +715,12 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
     const scroll = scrollState - previousScrollAdjust - topPad - scrollExtra;
+    if (refState.current.scrollForNextCalculateItemsInView) {
+      const { top: top2, bottom } = refState.current.scrollForNextCalculateItemsInView;
+      if (scroll > top2 && scroll < bottom) {
+        return;
+      }
+    }
     const scrollBottom = scroll + scrollLength;
     let startNoBuffer = null;
     let startBuffered = null;
@@ -804,6 +814,14 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       endBuffered,
       endNoBuffer
     });
+    const nextTop = Math.ceil(startBuffered ? positions.get(startBufferedId) + scrollBuffer : 0);
+    const nextBottom = Math.floor(
+      endBuffered ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
+    );
+    refState.current.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
+      top: nextTop,
+      bottom: nextBottom
+    } : void 0;
     if (startBuffered !== null && endBuffered !== null) {
       const prevNumContainers = ctx.values.get("numContainers");
       let numContainers = prevNumContainers;
@@ -846,7 +864,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
             const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
-            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
+            set$(ctx, `containerItemData${containerId}`, data2[index]);
             set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
@@ -896,6 +914,12 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         }
       }
     }
+    if (layoutsPending.size > 0) {
+      for (const containerId of layoutsPending) {
+        set$(ctx, `containerDidLayout${containerId}`, true);
+      }
+      layoutsPending.clear();
+    }
     if (refState.current.viewabilityConfigCallbackPairs) {
       updateViewableItems(
         refState.current,
@@ -917,25 +941,25 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     }
   };
   const doMaintainScrollAtEnd = (animated) => {
-    var _a2;
-    if (((_a2 = refState.current) == null ? void 0 : _a2.isAtBottom) && maintainScrollAtEnd) {
-      refState.current.scroll = refState.current.totalSize - refState.current.scrollLength;
+    const state = refState.current;
+    if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd) {
+      state.scroll = state.totalSize - state.scrollLength + peek$(ctx, "paddingTop");
       requestAnimationFrame(() => {
-        var _a3;
-        (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
+        var _a2;
+        (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
           animated
         });
       });
+      return true;
     }
   };
   const checkAtBottom = () => {
     if (!refState.current) {
       return;
     }
-    const { scrollLength, scroll, contentSize } = refState.current;
-    const contentLength = contentSize[horizontal ? "width" : "height"];
-    if (scroll > 0 && contentLength > 0) {
-      const distanceFromEnd = contentLength - scroll - scrollLength;
+    const { scrollLength, scroll, totalSize } = refState.current;
+    if (totalSize > 0) {
+      const distanceFromEnd = totalSize - scroll - scrollLength;
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
@@ -977,6 +1001,35 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
     }
   };
+  const checkResetContainers = (reset) => {
+    const state = refState.current;
+    if (state) {
+      state.data = data;
+      if (reset) {
+        refState.current.scrollForNextCalculateItemsInView = void 0;
+        const numContainers = peek$(ctx, "numContainers");
+        for (let i = 0; i < numContainers; i++) {
+          const itemKey = peek$(ctx, `containerItemKey${i}`);
+          if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
+            set$(ctx, `containerItemKey${i}`, void 0);
+            set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+            set$(ctx, `containerColumn${i}`, -1);
+          }
+        }
+        if (!keyExtractorProp) {
+          state.sizes.clear();
+          state.positions;
+        }
+        calculateItemsInView(state.scrollVelocity);
+      }
+      const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
+      if (!didMaintainScrollAtEnd && data.length > state.data.length) {
+        state.isEndReached = false;
+      }
+      checkAtTop();
+      checkAtBottom();
+    }
+  };
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
     if (!keyExtractorProp && !isFirst && data !== refState.current.data) {
@@ -1010,40 +1063,25 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
     }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
-    if (!isFirst) {
-      if (data.length > refState.current.data.length) {
-        refState.current.isEndReached = false;
-      }
-      refState.current.data = data;
-      const numContainers = peek$(ctx, "numContainers");
-      for (let i = 0; i < numContainers; i++) {
-        const itemKey = peek$(ctx, `containerItemKey${i}`);
-        if (!keyExtractorProp || itemKey && ((_a = refState.current) == null ? void 0 : _a.indexByKey.get(itemKey)) === void 0) {
-          set$(ctx, `containerItemKey${i}`, void 0);
-          set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
-          set$(ctx, `containerColumn${i}`, -1);
-        }
-      }
-      if (!keyExtractorProp) {
-        refState.current.sizes.clear();
-        refState.current.positions;
-      }
-      setTimeout(() => {
-        calculateItemsInView(refState.current.scrollVelocity);
-        doMaintainScrollAtEnd(false);
-        checkAtTop();
-        checkAtBottom();
-      }, 0);
-    }
   }
+  React4.useEffect(() => {
+    checkResetContainers(
+      /*reset*/
+      !isFirst
+    );
+  }, [isFirst, data, numColumnsProp]);
   refState.current.renderItem = renderItem;
-  set$(ctx, "lastItemKey", getId(data[data.length - 1]));
-  set$(ctx, "numColumns", numColumnsProp);
-  set$(
-    ctx,
-    "stylePaddingTop",
-    (_e = (_d = (_b = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _b.paddingTop) != null ? _d : (_c = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _c.paddingTop) != null ? _e : 0
-  );
+  const lastItemKey = getId(data[data.length - 1]);
+  const stylePaddingTop = (_d = (_c = (_a = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
+  const initalizeStateVars = () => {
+    set$(ctx, "lastItemKey", lastItemKey);
+    set$(ctx, "numColumns", numColumnsProp);
+    set$(ctx, "stylePaddingTop", stylePaddingTop);
+  };
+  if (isFirst) {
+    initalizeStateVars();
+  }
+  React4.useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
   const getRenderedItem = React4.useCallback((key, containerId) => {
     var _a2, _b2;
     const state = refState.current;
@@ -1111,7 +1149,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
           }
         };
         run();
-        listen$(ctx, signal, run);
+        return listen$(ctx, signal, run);
       }, []);
     };
     const useRecyclingState = (valueOrFun) => {
@@ -1165,6 +1203,10 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     const numColumns = peek$(ctx, "numColumns");
     const row = Math.floor(index / numColumns);
     const prevSize = getRowHeight(row);
+    const measured = peek$(ctx, `containerDidLayout${containerId}`);
+    if (!measured) {
+      state.layoutsPending.add(containerId);
+    }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
       if (numColumns > 1) {
@@ -1202,6 +1244,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
           );
         }, 1e3);
       }
+      refState.current.scrollForNextCalculateItemsInView = void 0;
       addTotalSize(itemKey, diff, 0);
       doMaintainScrollAtEnd(true);
       const scrollVelocity = state.scrollVelocity;
@@ -1215,6 +1258,11 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
           calculateItemsInView(state.scrollVelocity);
         }
       }
+      if (onItemSizeChanged) {
+        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data2[index] });
+      }
+    } else {
+      set$(ctx, `containerDidLayout${containerId}`, true);
     }
   }, []);
   const handleScrollDebounced = React4.useCallback((velocity) => {
@@ -1225,12 +1273,10 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
   const onLayout = React4.useCallback((event) => {
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
     refState.current.scrollLength = scrollLength;
-    if (refState.current.hasScrolled) {
-      doMaintainScrollAtEnd(false);
-      doUpdatePaddingTop();
-      checkAtBottom();
-      checkAtTop();
-    }
+    doMaintainScrollAtEnd(false);
+    doUpdatePaddingTop();
+    checkAtBottom();
+    checkAtTop();
     if (__DEV__) {
       const isWidthZero = event.nativeEvent.layout.width === 0;
       const isHeightZero = event.nativeEvent.layout.height === 0;
@@ -1249,7 +1295,6 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
       const state = refState.current;
       state.hasScrolled = true;
-      state.contentSize = event.nativeEvent.contentSize;
       const currentTime = performance.now();
       const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
       if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
@@ -1337,6 +1382,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       alignItemsAtEnd,
       ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
       maintainVisibleContentPosition,
+      scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : reactNative.Platform.OS === "web" ? 16 : void 0,
       style
     }
   );

package/index.mjs

@@ -1,6 +1,6 @@
 import * as React4 from 'react';
-import React4__default, { forwardRef, useRef, useMemo, useCallback, useImperativeHandle, useSyncExternalStore, useEffect, useState } from 'react';
-import { Animated, ScrollView, View, Dimensions, StyleSheet, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
+import React4__default, { forwardRef, useRef, useMemo, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useState } from 'react';
+import { Animated, ScrollView, View, Dimensions, StyleSheet, Platform, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
 
 // src/LegendList.tsx
 var ContextState = React4.createContext(null);
@@ -18,12 +18,16 @@ function StateProvider({ children }) {
 function useStateContext() {
   return React4.useContext(ContextState);
 }
+function createSelectorFunctions(ctx, signalName) {
+  return {
+    subscribe: (cb) => listen$(ctx, signalName, cb),
+    get: () => peek$(ctx, signalName)
+  };
+}
 function use$(signalName) {
   const ctx = React4.useContext(ContextState);
-  const value = useSyncExternalStore(
-    (onStoreChange) => listen$(ctx, signalName, onStoreChange),
-    () => ctx.values.get(signalName)
-  );
+  const { subscribe, get } = React4.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const value = useSyncExternalStore(subscribe, get);
   return value;
 }
 function listen$(ctx, signalName, cb) {
@@ -52,10 +56,13 @@ function set$(ctx, signalName, value) {
     }
   }
 }
+
+// src/Container.tsx
 var Container = ({
   id,
   recycleItems,
   horizontal,
+  waitForInitialLayout,
   getRenderedItem,
   updateItemSize,
   ItemSeparatorComponent
@@ -63,11 +70,10 @@ var Container = ({
   const ctx = useStateContext();
   const position = use$(`containerPosition${id}`);
   const column = use$(`containerColumn${id}`) || 0;
-  const visible = use$(`containerDidLayout${id}`);
   const numColumns = use$("numColumns");
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
-  let style = horizontal ? {
+  const style = horizontal ? {
     flexDirection: "row",
     position: "absolute",
     top: otherAxisPos,
@@ -81,7 +87,8 @@ var Container = ({
     width: otherAxisSize,
     top: position
   };
-  {
+  if (waitForInitialLayout) {
+    const visible = use$(`containerDidLayout${id}`);
     style.opacity = visible ? 1 : 0;
   }
   const lastItemKey = use$("lastItemKey");
@@ -97,14 +104,6 @@ var Container = ({
         if (key !== void 0) {
           const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
           updateItemSize(id, key, size);
-          const otherAxisSize2 = horizontal ? event.nativeEvent.layout.width : event.nativeEvent.layout.height;
-          set$(ctx, "otherAxisSize", Math.max(otherAxisSize2, peek$(ctx, "otherAxisSize") || 0));
-          const measured = peek$(ctx, `containerDidLayout${id}`);
-          if (!measured) {
-            requestAnimationFrame(() => {
-              set$(ctx, `containerDidLayout${id}`, true);
-            });
-          }
         }
       }
     },
@@ -129,6 +128,7 @@ var Containers = React4.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
+  waitForInitialLayout,
   updateItemSize,
   getRenderedItem
 }) {
@@ -144,6 +144,7 @@ var Containers = React4.memo(function Containers2({
           key: i,
           recycleItems,
           horizontal,
+          waitForInitialLayout,
           getRenderedItem,
           updateItemSize,
           ItemSeparatorComponent
@@ -173,6 +174,7 @@ var ListComponent = React4.memo(function ListComponent2({
   recycleItems,
   ItemSeparatorComponent,
   alignItemsAtEnd,
+  waitForInitialLayout,
   handleScroll,
   onLayout,
   ListHeaderComponent,
@@ -230,6 +232,7 @@ var ListComponent = React4.memo(function ListComponent2({
       {
         horizontal,
         recycleItems,
+        waitForInitialLayout,
         getRenderedItem,
         ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
         updateItemSize
@@ -439,7 +442,7 @@ var LegendList = forwardRef(function LegendList2(props, forwardedRef) {
   return /* @__PURE__ */ React4.createElement(StateProvider, null, /* @__PURE__ */ React4.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d;
   const {
     data,
     initialScrollIndex,
@@ -463,6 +466,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     onEndReached,
     onStartReached,
     ListEmptyComponent,
+    onItemSizeChanged,
+    scrollEventThrottle,
     refScrollView,
     ...rest
   } = props;
@@ -540,13 +545,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       indexByKey: /* @__PURE__ */ new Map(),
       scrollHistory: [],
       scrollVelocity: 0,
-      contentSize: { width: 0, height: 0 },
       sizesLaidOut: __DEV__ ? /* @__PURE__ */ new Map() : void 0,
       timeoutSizeMessage: 0,
       scrollTimer: void 0,
       belowAnchorElementPositions: void 0,
       rowHeights: /* @__PURE__ */ new Map(),
-      startReachedBlockedByTimer: false
+      startReachedBlockedByTimer: false,
+      layoutsPending: /* @__PURE__ */ new Set(),
+      scrollForNextCalculateItemsInView: void 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -600,21 +606,18 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
       state.rowHeights.clear();
     }
-    const doAdd = () => {
-      const totalSize = state.totalSize;
-      let resultSize = totalSize;
-      if (applyAdjustValue !== void 0) {
-        resultSize -= applyAdjustValue;
-        refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
-          state.scroll -= diff;
-        });
-      }
-      set$(ctx, "totalSize", resultSize);
-      if (alignItemsAtEnd) {
-        doUpdatePaddingTop();
-      }
-    };
-    doAdd();
+    const totalSize = state.totalSize;
+    let resultSize = totalSize;
+    if (applyAdjustValue !== void 0) {
+      resultSize -= applyAdjustValue;
+      refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
+        state.scroll -= diff;
+      });
+    }
+    set$(ctx, "totalSize", resultSize);
+    if (alignItemsAtEnd) {
+      doUpdatePaddingTop();
+    }
   }, []);
   const getRowHeight = (n) => {
     const { rowHeights } = refState.current;
@@ -677,7 +680,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler
+      scrollAdjustHandler,
+      layoutsPending
     } = state;
     if (state.animFrameLayout) {
       cancelAnimationFrame(state.animFrameLayout);
@@ -690,6 +694,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
     const scroll = scrollState - previousScrollAdjust - topPad - scrollExtra;
+    if (refState.current.scrollForNextCalculateItemsInView) {
+      const { top: top2, bottom } = refState.current.scrollForNextCalculateItemsInView;
+      if (scroll > top2 && scroll < bottom) {
+        return;
+      }
+    }
     const scrollBottom = scroll + scrollLength;
     let startNoBuffer = null;
     let startBuffered = null;
@@ -783,6 +793,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       endBuffered,
       endNoBuffer
     });
+    const nextTop = Math.ceil(startBuffered ? positions.get(startBufferedId) + scrollBuffer : 0);
+    const nextBottom = Math.floor(
+      endBuffered ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
+    );
+    refState.current.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
+      top: nextTop,
+      bottom: nextBottom
+    } : void 0;
     if (startBuffered !== null && endBuffered !== null) {
       const prevNumContainers = ctx.values.get("numContainers");
       let numContainers = prevNumContainers;
@@ -825,7 +843,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
             const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
-            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
+            set$(ctx, `containerItemData${containerId}`, data2[index]);
             set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
@@ -875,6 +893,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         }
       }
     }
+    if (layoutsPending.size > 0) {
+      for (const containerId of layoutsPending) {
+        set$(ctx, `containerDidLayout${containerId}`, true);
+      }
+      layoutsPending.clear();
+    }
     if (refState.current.viewabilityConfigCallbackPairs) {
       updateViewableItems(
         refState.current,
@@ -896,25 +920,25 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
   };
   const doMaintainScrollAtEnd = (animated) => {
-    var _a2;
-    if (((_a2 = refState.current) == null ? void 0 : _a2.isAtBottom) && maintainScrollAtEnd) {
-      refState.current.scroll = refState.current.totalSize - refState.current.scrollLength;
+    const state = refState.current;
+    if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd) {
+      state.scroll = state.totalSize - state.scrollLength + peek$(ctx, "paddingTop");
       requestAnimationFrame(() => {
-        var _a3;
-        (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
+        var _a2;
+        (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
           animated
         });
       });
+      return true;
     }
   };
   const checkAtBottom = () => {
     if (!refState.current) {
       return;
     }
-    const { scrollLength, scroll, contentSize } = refState.current;
-    const contentLength = contentSize[horizontal ? "width" : "height"];
-    if (scroll > 0 && contentLength > 0) {
-      const distanceFromEnd = contentLength - scroll - scrollLength;
+    const { scrollLength, scroll, totalSize } = refState.current;
+    if (totalSize > 0) {
+      const distanceFromEnd = totalSize - scroll - scrollLength;
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
@@ -956,6 +980,35 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
     }
   };
+  const checkResetContainers = (reset) => {
+    const state = refState.current;
+    if (state) {
+      state.data = data;
+      if (reset) {
+        refState.current.scrollForNextCalculateItemsInView = void 0;
+        const numContainers = peek$(ctx, "numContainers");
+        for (let i = 0; i < numContainers; i++) {
+          const itemKey = peek$(ctx, `containerItemKey${i}`);
+          if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
+            set$(ctx, `containerItemKey${i}`, void 0);
+            set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+            set$(ctx, `containerColumn${i}`, -1);
+          }
+        }
+        if (!keyExtractorProp) {
+          state.sizes.clear();
+          state.positions;
+        }
+        calculateItemsInView(state.scrollVelocity);
+      }
+      const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
+      if (!didMaintainScrollAtEnd && data.length > state.data.length) {
+        state.isEndReached = false;
+      }
+      checkAtTop();
+      checkAtBottom();
+    }
+  };
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
     if (!keyExtractorProp && !isFirst && data !== refState.current.data) {
@@ -989,40 +1042,25 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
     }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
-    if (!isFirst) {
-      if (data.length > refState.current.data.length) {
-        refState.current.isEndReached = false;
-      }
-      refState.current.data = data;
-      const numContainers = peek$(ctx, "numContainers");
-      for (let i = 0; i < numContainers; i++) {
-        const itemKey = peek$(ctx, `containerItemKey${i}`);
-        if (!keyExtractorProp || itemKey && ((_a = refState.current) == null ? void 0 : _a.indexByKey.get(itemKey)) === void 0) {
-          set$(ctx, `containerItemKey${i}`, void 0);
-          set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
-          set$(ctx, `containerColumn${i}`, -1);
-        }
-      }
-      if (!keyExtractorProp) {
-        refState.current.sizes.clear();
-        refState.current.positions;
-      }
-      setTimeout(() => {
-        calculateItemsInView(refState.current.scrollVelocity);
-        doMaintainScrollAtEnd(false);
-        checkAtTop();
-        checkAtBottom();
-      }, 0);
-    }
   }
+  useEffect(() => {
+    checkResetContainers(
+      /*reset*/
+      !isFirst
+    );
+  }, [isFirst, data, numColumnsProp]);
   refState.current.renderItem = renderItem;
-  set$(ctx, "lastItemKey", getId(data[data.length - 1]));
-  set$(ctx, "numColumns", numColumnsProp);
-  set$(
-    ctx,
-    "stylePaddingTop",
-    (_e = (_d = (_b = StyleSheet.flatten(style)) == null ? void 0 : _b.paddingTop) != null ? _d : (_c = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _c.paddingTop) != null ? _e : 0
-  );
+  const lastItemKey = getId(data[data.length - 1]);
+  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, "numColumns", numColumnsProp);
+    set$(ctx, "stylePaddingTop", stylePaddingTop);
+  };
+  if (isFirst) {
+    initalizeStateVars();
+  }
+  useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
   const getRenderedItem = useCallback((key, containerId) => {
     var _a2, _b2;
     const state = refState.current;
@@ -1090,7 +1128,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           }
         };
         run();
-        listen$(ctx, signal, run);
+        return listen$(ctx, signal, run);
       }, []);
     };
     const useRecyclingState = (valueOrFun) => {
@@ -1144,6 +1182,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const numColumns = peek$(ctx, "numColumns");
     const row = Math.floor(index / numColumns);
     const prevSize = getRowHeight(row);
+    const measured = peek$(ctx, `containerDidLayout${containerId}`);
+    if (!measured) {
+      state.layoutsPending.add(containerId);
+    }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
       if (numColumns > 1) {
@@ -1181,6 +1223,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           );
         }, 1e3);
       }
+      refState.current.scrollForNextCalculateItemsInView = void 0;
       addTotalSize(itemKey, diff, 0);
       doMaintainScrollAtEnd(true);
       const scrollVelocity = state.scrollVelocity;
@@ -1194,6 +1237,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           calculateItemsInView(state.scrollVelocity);
         }
       }
+      if (onItemSizeChanged) {
+        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data2[index] });
+      }
+    } else {
+      set$(ctx, `containerDidLayout${containerId}`, true);
     }
   }, []);
   const handleScrollDebounced = useCallback((velocity) => {
@@ -1204,12 +1252,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   const onLayout = useCallback((event) => {
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
     refState.current.scrollLength = scrollLength;
-    if (refState.current.hasScrolled) {
-      doMaintainScrollAtEnd(false);
-      doUpdatePaddingTop();
-      checkAtBottom();
-      checkAtTop();
-    }
+    doMaintainScrollAtEnd(false);
+    doUpdatePaddingTop();
+    checkAtBottom();
+    checkAtTop();
     if (__DEV__) {
       const isWidthZero = event.nativeEvent.layout.width === 0;
       const isHeightZero = event.nativeEvent.layout.height === 0;
@@ -1228,7 +1274,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
       const state = refState.current;
       state.hasScrolled = true;
-      state.contentSize = event.nativeEvent.contentSize;
       const currentTime = performance.now();
       const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
       if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
@@ -1316,6 +1361,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       alignItemsAtEnd,
       ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
       maintainVisibleContentPosition,
+      scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : Platform.OS === "web" ? 16 : void 0,
       style
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "legend-list",
   "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";
+type KeysToOmit = "getEstimatedItemSize" | "keyExtractor" | "animatedProps" | "renderItem" | "onItemSizeChanged";
 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";
+type KeysToOmit = "getEstimatedItemSize" | "keyExtractor" | "animatedProps" | "renderItem" | "onItemSizeChanged";
 type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Animated.ScrollView>>;
 interface AnimatedLegendListProps<ItemT> extends Omit<PropsBase<ItemT>, KeysToOmit> {
     refScrollView?: React__default.Ref<Animated.ScrollView>;