@legendapp/list 0.6.3 → 1.0.0-beta.0

package/README.md

@@ -14,6 +14,10 @@ In addition to normal FlatList features:
 -   `maintainScrollAtEnd`: If true and scroll is within `maintainScrollAtEndThreshold * screen height` then changing items or heights will scroll to the bottom. This can be useful for chat interfaces.
 -   `recycleItems` prop enables toggling recycling of list items. If enabled it will reuse item components for improved performance, but it will reuse any local state in items. So if you have local state in items you likely want this disabled.
 
+## Documentation
+
+See the [documentation site](https://www.legendapp.com/open-source/list) for the full documentation.
+
 ## Usage
 
 ## Install
@@ -41,7 +45,6 @@ interface PropsOptional {
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
-    initialContainers?: number;
     recycleItems?: boolean;
     onEndReachedThreshold?: number | null | undefined;
     maintainScrollAtEnd?: boolean;

package/index.d.mts

@@ -1,5 +1,5 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
-import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
+import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 declare class ScrollAdjustHandler {
@@ -19,7 +19,6 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
-    initialNumContainers?: number;
     recycleItems?: boolean;
     onEndReachedThreshold?: number | null | undefined;
     onStartReachedThreshold?: number | null | undefined;
@@ -29,6 +28,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 +49,18 @@ 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;
+    /**
+     * Render custom ScrollView component.
+     * @default (props) => <ScrollView {...props} />
+     */
+    renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
 };
 type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {
@@ -89,10 +101,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<{

package/index.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
-import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
+import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 declare class ScrollAdjustHandler {
@@ -19,7 +19,6 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
-    initialNumContainers?: number;
     recycleItems?: boolean;
     onEndReachedThreshold?: number | null | undefined;
     onStartReachedThreshold?: number | null | undefined;
@@ -29,6 +28,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 +49,18 @@ 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;
+    /**
+     * Render custom ScrollView component.
+     * @default (props) => <ScrollView {...props} />
+     */
+    renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
 };
 type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {
@@ -89,10 +101,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<{

package/index.js

@@ -77,10 +77,13 @@ function set$(ctx, signalName, value) {
     }
   }
 }
+
+// src/Container.tsx
 var Container = ({
   id,
   recycleItems,
   horizontal,
+  waitForInitialLayout,
   getRenderedItem,
   updateItemSize,
   ItemSeparatorComponent
@@ -88,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,
@@ -106,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");
@@ -146,6 +149,7 @@ var Containers = React4__namespace.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
+  waitForInitialLayout,
   updateItemSize,
   getRenderedItem
 }) {
@@ -161,6 +165,7 @@ var Containers = React4__namespace.memo(function Containers2({
           key: i,
           recycleItems,
           horizontal,
+          waitForInitialLayout,
           getRenderedItem,
           updateItemSize,
           ItemSeparatorComponent
@@ -190,6 +195,7 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
   recycleItems,
   ItemSeparatorComponent,
   alignItemsAtEnd,
+  waitForInitialLayout,
   handleScroll,
   onLayout,
   ListHeaderComponent,
@@ -202,14 +208,19 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
   updateItemSize,
   refScrollView,
   maintainVisibleContentPosition,
+  renderScrollComponent,
   ...rest
 }) {
   const ctx = useStateContext();
   const animPaddingTop = useValue$("paddingTop");
   const animScrollAdjust = useValue$("scrollAdjust");
+  const ScrollComponent = renderScrollComponent ? React4.useMemo(
+    () => React4__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    [renderScrollComponent]
+  ) : reactNative.ScrollView;
   const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
   return /* @__PURE__ */ React4__namespace.createElement(
-    reactNative.ScrollView,
+    ScrollComponent,
     {
       ...rest,
       style,
@@ -247,6 +258,7 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
       {
         horizontal,
         recycleItems,
+        waitForInitialLayout,
         getRenderedItem,
         ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
         updateItemSize
@@ -462,7 +474,6 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     initialScrollIndex,
     initialScrollOffset,
     horizontal,
-    initialNumContainers,
     drawDistance = 250,
     recycleItems = false,
     onEndReachedThreshold = 0.5,
@@ -480,6 +491,8 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     onEndReached,
     onStartReached,
     ListEmptyComponent,
+    onItemSizeChanged,
+    scrollEventThrottle,
     refScrollView,
     ...rest
   } = props;
@@ -557,7 +570,6 @@ 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,
@@ -619,21 +631,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;
@@ -864,7 +873,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
               console.warn(
-                "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemSize. numContainers:",
+                "[legend-list] No container to recycle, so creating one on demand. This can be a performance issue and is likely caused by the estimatedItemSize being too small. Consider increasing estimatedItemSize. numContainers:",
                 numContainers
               );
             }
@@ -936,25 +945,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;
       }
@@ -996,29 +1005,31 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
     }
   };
-  const resetContainers = () => {
+  const checkResetContainers = (reset) => {
     const state = refState.current;
     if (state) {
-      if (data.length > state.data.length) {
-        state.isEndReached = false;
-      }
-      refState.current.scrollForNextCalculateItemsInView = void 0;
       state.data = data;
-      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 (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);
       }
-      if (!keyExtractorProp) {
-        state.sizes.clear();
-        state.positions;
+      const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
+      if (!didMaintainScrollAtEnd && data.length > state.data.length) {
+        state.isEndReached = false;
       }
-      calculateItemsInView(state.scrollVelocity);
-      doMaintainScrollAtEnd(false);
       checkAtTop();
       checkAtBottom();
     }
@@ -1058,9 +1069,10 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   }
   React4.useEffect(() => {
-    if (!isFirst) {
-      resetContainers();
-    }
+    checkResetContainers(
+      /*reset*/
+      !isFirst
+    );
   }, [isFirst, data, numColumnsProp]);
   refState.current.renderItem = renderItem;
   const lastItemKey = getId(data[data.length - 1]);
@@ -1174,7 +1186,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
     const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    const numContainers = (initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize)) * numColumnsProp;
+    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
       set$(ctx, `containerColumn${i}`, -1);
@@ -1250,6 +1262,9 @@ 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);
     }
@@ -1262,12 +1277,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;
@@ -1286,7 +1299,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)) {
@@ -1374,6 +1386,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, useEffect, useImperativeHandle, useSyncExternalStore, useState } from 'react';
-import { Animated, ScrollView, View, Dimensions, StyleSheet, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
+import React4__default, { useMemo, forwardRef, useRef, 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);
@@ -56,10 +56,13 @@ function set$(ctx, signalName, value) {
     }
   }
 }
+
+// src/Container.tsx
 var Container = ({
   id,
   recycleItems,
   horizontal,
+  waitForInitialLayout,
   getRenderedItem,
   updateItemSize,
   ItemSeparatorComponent
@@ -67,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,
@@ -85,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");
@@ -125,6 +128,7 @@ var Containers = React4.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
+  waitForInitialLayout,
   updateItemSize,
   getRenderedItem
 }) {
@@ -140,6 +144,7 @@ var Containers = React4.memo(function Containers2({
           key: i,
           recycleItems,
           horizontal,
+          waitForInitialLayout,
           getRenderedItem,
           updateItemSize,
           ItemSeparatorComponent
@@ -169,6 +174,7 @@ var ListComponent = React4.memo(function ListComponent2({
   recycleItems,
   ItemSeparatorComponent,
   alignItemsAtEnd,
+  waitForInitialLayout,
   handleScroll,
   onLayout,
   ListHeaderComponent,
@@ -181,14 +187,19 @@ var ListComponent = React4.memo(function ListComponent2({
   updateItemSize,
   refScrollView,
   maintainVisibleContentPosition,
+  renderScrollComponent,
   ...rest
 }) {
   const ctx = useStateContext();
   const animPaddingTop = useValue$("paddingTop");
   const animScrollAdjust = useValue$("scrollAdjust");
+  const ScrollComponent = renderScrollComponent ? useMemo(
+    () => React4.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    [renderScrollComponent]
+  ) : ScrollView;
   const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
   return /* @__PURE__ */ React4.createElement(
-    ScrollView,
+    ScrollComponent,
     {
       ...rest,
       style,
@@ -226,6 +237,7 @@ var ListComponent = React4.memo(function ListComponent2({
       {
         horizontal,
         recycleItems,
+        waitForInitialLayout,
         getRenderedItem,
         ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
         updateItemSize
@@ -441,7 +453,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     initialScrollIndex,
     initialScrollOffset,
     horizontal,
-    initialNumContainers,
     drawDistance = 250,
     recycleItems = false,
     onEndReachedThreshold = 0.5,
@@ -459,6 +470,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     onEndReached,
     onStartReached,
     ListEmptyComponent,
+    onItemSizeChanged,
+    scrollEventThrottle,
     refScrollView,
     ...rest
   } = props;
@@ -536,7 +549,6 @@ 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,
@@ -598,21 +610,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;
@@ -843,7 +852,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
               console.warn(
-                "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemSize. numContainers:",
+                "[legend-list] No container to recycle, so creating one on demand. This can be a performance issue and is likely caused by the estimatedItemSize being too small. Consider increasing estimatedItemSize. numContainers:",
                 numContainers
               );
             }
@@ -915,25 +924,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;
       }
@@ -975,29 +984,31 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
     }
   };
-  const resetContainers = () => {
+  const checkResetContainers = (reset) => {
     const state = refState.current;
     if (state) {
-      if (data.length > state.data.length) {
-        state.isEndReached = false;
-      }
-      refState.current.scrollForNextCalculateItemsInView = void 0;
       state.data = data;
-      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 (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);
       }
-      if (!keyExtractorProp) {
-        state.sizes.clear();
-        state.positions;
+      const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
+      if (!didMaintainScrollAtEnd && data.length > state.data.length) {
+        state.isEndReached = false;
       }
-      calculateItemsInView(state.scrollVelocity);
-      doMaintainScrollAtEnd(false);
       checkAtTop();
       checkAtBottom();
     }
@@ -1037,9 +1048,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   }
   useEffect(() => {
-    if (!isFirst) {
-      resetContainers();
-    }
+    checkResetContainers(
+      /*reset*/
+      !isFirst
+    );
   }, [isFirst, data, numColumnsProp]);
   refState.current.renderItem = renderItem;
   const lastItemKey = getId(data[data.length - 1]);
@@ -1153,7 +1165,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
     const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    const numContainers = (initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize)) * numColumnsProp;
+    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
       set$(ctx, `containerColumn${i}`, -1);
@@ -1229,6 +1241,9 @@ 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);
     }
@@ -1241,12 +1256,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;
@@ -1265,7 +1278,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)) {
@@ -1353,6 +1365,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.3",
+  "version": "1.0.0-beta.0",
   "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>;