@legendapp/list 1.0.0-beta.50 → 1.0.0-beta.52

package/README.md

@@ -1,10 +1,10 @@
-# Legend List 
+# Legend List
 
 **Legend List** is a high-performance list component for **React Native**, written purely in Javascript / Typescript (no native dependencies). It aims to be a drop-in replacement for `FlatList` and/or `FlashList` with better performance, especially when handling dynamically sized items.
 
 ---
 
-## ⚠️ Caution: Experimental ⚠️ 
+## ⚠️ Caution: Experimental ⚠️
 
 This is an early release to test and gather feedback. It's not used in production yet and needs more work to reach parity with FlatList (and FlashList) features.
 
@@ -13,7 +13,7 @@ This is an early release to test and gather feedback. It's not used in productio
 ## 🤔 Why Legend List?
 
 *   **Performance:** Designed from the ground up for speed, aiming to outperform `FlatList` in common scenarios.
-*   **Dynamic Item Sizes:** Natively supports items with varying heights without performance hits. Just provide an `estimatedItemSize`.
+*   **Dynamic Item Sizes:** Natively supports items with varying heights without performance hits.
 *   **Drop-in Potential:** Aims for API compatibility with `FlatList` for easier migration.
 *   **Pure JS/TS:** No native module linking required, ensuring easier integration and compatibility across platforms.
 *   **Lightweight:** Our goal is to keep LegendList as small of a dependency as possible. For more advanced use cases, we plan on supporting optional plugins. This ensures that we keep the package size as small as possible.
@@ -21,7 +21,7 @@ This is an early release to test and gather feedback. It's not used in productio
 For more information, listen to the podcast we had on [React Native Radio](https://infinite.red/react-native-radio/rnr-325-legend-list-with-jay-meistrich)!
 
 ---
-## ✨ Additional Features 
+## ✨ Additional Features
 
 Beyond standard `FlatList` capabilities:
 
@@ -57,7 +57,7 @@ yarn add @legendapp/list
 
 ### Example
 ```ts
-import React, { useRef } from "react"; 
+import React, { useRef } from "react";
 import { View, Image, Text, StyleSheet } from "react-native";
 import { LegendList, LegendListRef, LegendListRenderItemProps } from "@legendapp/list";
 import { userData } from "../userData"; // Assuming userData is defined elsewhere
@@ -87,17 +87,16 @@ const LegendListExample = () => {
         <LegendList<UserData>
             // Required Props
             data={data}
-            renderItem={renderItem} 
-            estimatedItemSize={70} 
+            renderItem={renderItem}
 
             // Strongly Recommended Prop (Improves performance)
-            keyExtractor={(item) => item.id} 
+            keyExtractor={(item) => item.id}
 
             // Optional Props
-            ref={listRef} 
-            recycleItems={true}   
-            maintainScrollAtEnd={false} 
-            maintainScrollAtEndThreshold={1} 
+            ref={listRef}
+            recycleItems={true}
+            maintainScrollAtEnd={false}
+            maintainScrollAtEndThreshold={1}
 
             // See docs for all available props!
         />

package/animated.d.mts

@@ -3,7 +3,7 @@ import * as _legendapp_list from '@legendapp/list';
 import * as react_native from 'react-native';
 import { Animated } from 'react-native';
 
-declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
@@ -50,6 +50,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
     refreshing?: boolean;
     renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
+    suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;
     viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
     waitForInitialLayout?: boolean;

package/animated.d.ts

@@ -3,7 +3,7 @@ import * as _legendapp_list from '@legendapp/list';
 import * as react_native from 'react-native';
 import { Animated } from 'react-native';
 
-declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     data: readonly T[];
@@ -50,6 +50,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
     refreshing?: boolean;
     renderItem?: ((props: _legendapp_list.LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
+    suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;
     viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
     waitForInitialLayout?: boolean;

package/index.d.mts

@@ -41,10 +41,8 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      */
     drawDistance?: number;
     /**
-     * Estimated size of each item in pixels; sufficient for most cases. If
-     * you leave this blank, a warning should appear and you will get
-     * a suggested size.
-     * @required
+     * Estimated size of each item in pixels, a hint for the first render. After some
+     * items are rendered, the average size of rendered items will be used instead.
      * @default undefined
      */
     estimatedItemSize?: number;
@@ -191,6 +189,12 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      * @default (props) => <ScrollView {...props} />
      */
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
+    /**
+     * This will log a suggested estimatedItemSize.
+     * @required
+     * @default false
+     */
+    suggestEstimatedItemSize?: boolean;
     /**
      * Configuration for determining item viewability.
      */
@@ -215,7 +219,7 @@ type AnchoredPosition = {
     relativeCoordinate: number;
     top: number;
 };
-type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
+type LegendListProps<ItemT> = LegendListPropsBase<ItemT, Omit<ComponentProps<typeof ScrollView>, "scrollEventThrottle">>;
 interface InternalState {
     anchorElement?: {
         id: string;
@@ -226,7 +230,7 @@ interface InternalState {
     positions: Map<string, number>;
     columns: Map<string, number>;
     sizes: Map<string, number>;
-    sizesKnown: Map<string, number> | undefined;
+    sizesKnown: Map<string, number>;
     pendingAdjust: number;
     isStartReached: boolean;
     isEndReached: boolean;
@@ -246,6 +250,7 @@ interface InternalState {
     scrollPrevTime: number;
     scrollVelocity: number;
     scrollAdjustHandler: ScrollAdjustHandler;
+    maintainingScrollAtEnd?: boolean;
     totalSize: number;
     totalSizeBelowAnchor: number;
     timeouts: Set<number>;
@@ -273,6 +278,10 @@ interface InternalState {
     lastBatchingAction: number;
     ignoreScrollFromCalcTotal?: boolean;
     scrollingToOffset?: number | undefined;
+    averageSizes: Record<string, {
+        num: number;
+        avg: number;
+    }>;
     onScroll: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
 }
 interface ViewableRange<T> {
@@ -453,7 +462,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 };
 declare const typedMemo: TypedMemo;
 
-declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: ColumnWrapperStyle;
     data: readonly T[];
@@ -500,6 +509,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
     refreshing?: boolean;
     renderItem?: ((props: LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
+    suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: ViewabilityConfig;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     waitForInitialLayout?: boolean;
@@ -508,6 +518,6 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
 declare function useViewability(callback: ViewabilityCallback, configId?: string): void;
 declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
-declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): (ItemT | Dispatch<SetStateAction<ItemT>> | null)[];
+declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
 
 export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/index.d.ts

@@ -41,10 +41,8 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      */
     drawDistance?: number;
     /**
-     * Estimated size of each item in pixels; sufficient for most cases. If
-     * you leave this blank, a warning should appear and you will get
-     * a suggested size.
-     * @required
+     * Estimated size of each item in pixels, a hint for the first render. After some
+     * items are rendered, the average size of rendered items will be used instead.
      * @default undefined
      */
     estimatedItemSize?: number;
@@ -191,6 +189,12 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      * @default (props) => <ScrollView {...props} />
      */
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
+    /**
+     * This will log a suggested estimatedItemSize.
+     * @required
+     * @default false
+     */
+    suggestEstimatedItemSize?: boolean;
     /**
      * Configuration for determining item viewability.
      */
@@ -215,7 +219,7 @@ type AnchoredPosition = {
     relativeCoordinate: number;
     top: number;
 };
-type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
+type LegendListProps<ItemT> = LegendListPropsBase<ItemT, Omit<ComponentProps<typeof ScrollView>, "scrollEventThrottle">>;
 interface InternalState {
     anchorElement?: {
         id: string;
@@ -226,7 +230,7 @@ interface InternalState {
     positions: Map<string, number>;
     columns: Map<string, number>;
     sizes: Map<string, number>;
-    sizesKnown: Map<string, number> | undefined;
+    sizesKnown: Map<string, number>;
     pendingAdjust: number;
     isStartReached: boolean;
     isEndReached: boolean;
@@ -246,6 +250,7 @@ interface InternalState {
     scrollPrevTime: number;
     scrollVelocity: number;
     scrollAdjustHandler: ScrollAdjustHandler;
+    maintainingScrollAtEnd?: boolean;
     totalSize: number;
     totalSizeBelowAnchor: number;
     timeouts: Set<number>;
@@ -273,6 +278,10 @@ interface InternalState {
     lastBatchingAction: number;
     ignoreScrollFromCalcTotal?: boolean;
     scrollingToOffset?: number | undefined;
+    averageSizes: Record<string, {
+        num: number;
+        avg: number;
+    }>;
     onScroll: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined;
 }
 interface ViewableRange<T> {
@@ -453,7 +462,7 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 };
 declare const typedMemo: TypedMemo;
 
-declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
+declare const LegendList: <T>(props: Omit<Omit<react_native.ScrollViewProps, "scrollEventThrottle">, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
     alignItemsAtEnd?: boolean;
     columnWrapperStyle?: ColumnWrapperStyle;
     data: readonly T[];
@@ -500,6 +509,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
     refreshing?: boolean;
     renderItem?: ((props: LegendListRenderItemProps<T>) => React$1.ReactNode) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
+    suggestEstimatedItemSize?: boolean;
     viewabilityConfig?: ViewabilityConfig;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     waitForInitialLayout?: boolean;
@@ -508,6 +518,6 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
 declare function useViewability(callback: ViewabilityCallback, configId?: string): void;
 declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void;
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
-declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): (ItemT | Dispatch<SetStateAction<ItemT>> | null)[];
+declare function useRecyclingState<ItemT>(valueOrFun: ((info: LegendListRecyclingState<ItemT>) => ItemT) | ItemT): readonly [ItemT | null, Dispatch<SetStateAction<ItemT>>];
 
 export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type ScrollState, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/index.js

@@ -149,6 +149,16 @@ function useInterval(callback, delay) {
 function isFunction(obj) {
   return typeof obj === "function";
 }
+var warned = /* @__PURE__ */ new Set();
+function warnDevOnce(id, text) {
+  if (__DEV__ && !warned.has(id)) {
+    warned.add(id);
+    console.warn(`[legend-list] ${text}`);
+  }
+}
+function roundSize(size) {
+  return Math.floor(size * 8) / 8;
+}
 var symbolFirst = Symbol();
 function useInit(cb) {
   const refValue = React6.useRef(symbolFirst);
@@ -327,7 +337,7 @@ var Container = ({
   const onLayout = (event) => {
     if (itemKey !== void 0) {
       const layout = event.nativeEvent.layout;
-      const size = Math.floor(layout[horizontal ? "width" : "height"] * 8) / 8;
+      const size = roundSize(layout[horizontal ? "width" : "height"]);
       refLastSize.current = size;
       updateItemSize(itemKey, size);
     }
@@ -897,9 +907,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     renderItem,
     estimatedItemSize,
     getEstimatedItemSize,
+    suggestEstimatedItemSize,
     ListEmptyComponent,
     onItemSizeChanged,
-    scrollEventThrottle,
     refScrollView,
     waitForInitialLayout = true,
     extraData,
@@ -947,14 +957,31 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const ret = index < data.length ? keyExtractor ? keyExtractor(data[index], index) : index : null;
     return `${ret}`;
   };
-  const getItemSize = (key, index, data) => {
-    var _a;
-    const sizeKnown = refState.current.sizes.get(key);
+  const getItemSize = (key, index, data, useAverageSize = false) => {
+    const state = refState.current;
+    const sizeKnown = state.sizesKnown.get(key);
     if (sizeKnown !== void 0) {
       return sizeKnown;
     }
-    const size = (_a = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize) != null ? _a : DEFAULT_ITEM_SIZE;
-    refState.current.sizes.set(key, size);
+    let size;
+    if (getEstimatedItemSize) {
+      size = getEstimatedItemSize(index, data);
+    }
+    if (size === void 0 && useAverageSize) {
+      const itemType = "";
+      const average = state.averageSizes[itemType];
+      if (average) {
+        size = roundSize(average.avg);
+      }
+    }
+    const sizePrevious = state.sizesKnown.get(key);
+    if (sizePrevious !== void 0) {
+      return sizePrevious;
+    }
+    if (size === void 0) {
+      size = estimatedItemSize != null ? estimatedItemSize : DEFAULT_ITEM_SIZE;
+    }
+    state.sizes.set(key, size);
     return size;
   };
   const calculateOffsetForIndex = (index = initialScrollIndex) => {
@@ -1025,6 +1052,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       numPendingInitialLayout: 0,
       queuedCalculateItemsInView: 0,
       lastBatchingAction: Date.now(),
+      averageSizes: {},
       onScroll: onScrollProp
     };
     const dataLength = dataProp.length;
@@ -1040,7 +1068,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           id: getId(0)
         };
       } else {
-        console.warn("[legend-list] maintainVisibleContentPosition was not able to find an anchor element");
+        __DEV__ && warnDevOnce(
+          "maintainVisibleContentPosition",
+          "[legend-list] maintainVisibleContentPosition was not able to find an anchor element"
+        );
       }
     }
     set$(ctx, "scrollAdjust", 0);
@@ -1202,14 +1233,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     var _a;
     const state = refState.current;
     const { data, scrollLength, positions, startBuffered, endBuffered } = state;
-    if (!data || scrollLength === 0) {
+    const numColumns = peek$(ctx, "numColumns");
+    if (!data || scrollLength === 0 || numColumns > 1) {
       return;
     }
     const numContainers = ctx.values.get("numContainers");
     let numMeasurements = 0;
     for (let i = 0; i < numContainers; i++) {
       const itemKey = peek$(ctx, `containerItemKey${i}`);
-      const isSizeKnown = refState.current.sizesKnown.get(itemKey);
+      const isSizeKnown = state.sizesKnown.get(itemKey);
       if (itemKey && !isSizeKnown) {
         const containerRef = ctx.viewRefs.get(i);
         if (containerRef) {
@@ -1334,7 +1366,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
       const top2 = newPosition || positions.get(id);
       if (top2 !== void 0) {
-        const size = getItemSize(id, i, data[i]);
+        const size = getItemSize(
+          id,
+          i,
+          data[i],
+          /*useAverageSize*/
+          true
+        );
         const bottom = top2 + size;
         if (bottom > scroll - scrollBuffer) {
           loopStart = i;
@@ -1364,7 +1402,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     };
     for (let i = Math.max(0, loopStart); i < data.length; i++) {
       const id = getId(i);
-      const size = getItemSize(id, i, data[i]);
+      const size = getItemSize(
+        id,
+        i,
+        data[i],
+        /*useAverageSize*/
+        true
+      );
       maxSizeInRow = Math.max(maxSizeInRow, size);
       if (top === void 0 || id === ((_a = state.anchorElement) == null ? void 0 : _a.id)) {
         top = getInitialTop(i);
@@ -1588,9 +1632,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
       requestAnimationFrame(() => {
         var _a;
+        state.maintainingScrollAtEnd = true;
         (_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
           animated
         });
+        setTimeout(
+          () => {
+            state.maintainingScrollAtEnd = false;
+          },
+          0
+        );
       });
       return true;
     }
@@ -1618,9 +1669,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (!refState.current) {
       return;
     }
-    const { queuedInitialLayout, scrollLength, scroll } = refState.current;
+    const { queuedInitialLayout, scrollLength, scroll, maintainingScrollAtEnd } = refState.current;
     const contentSize = getContentSize(ctx);
-    if (contentSize > 0 && queuedInitialLayout) {
+    if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
       const distanceFromEnd = contentSize - scroll - scrollLength;
       const distanceFromEndAbs = Math.abs(distanceFromEnd);
       const isContentLess = contentSize < scrollLength;
@@ -1688,13 +1739,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (!didMaintainScrollAtEnd && dataProp.length > state.data.length) {
           state.isEndReached = false;
         }
-        checkAtTop();
-        checkAtBottom();
+        if (!didMaintainScrollAtEnd) {
+          checkAtTop();
+          checkAtBottom();
+        }
       }
     }
   };
   const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
     var _a, _b;
+    const state = refState.current;
     let totalSize = 0;
     let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
@@ -1702,7 +1756,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     let column = 1;
     let maxSizeInRow = 0;
     const numColumns = (_a = peek$(ctx, "numColumns")) != null ? _a : numColumnsProp;
-    if (!refState.current) {
+    if (!state) {
       return;
     }
     for (let i = 0; i < dataProp.length; i++) {
@@ -1715,36 +1769,36 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       }
       indexByKey.set(key, i);
-      if (!forgetPositions && refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
-        newPositions.set(key, refState.current.positions.get(key));
+      if (!forgetPositions && state.positions.get(key) != null && state.indexByKey.get(key) === i) {
+        newPositions.set(key, state.positions.get(key));
       }
     }
-    refState.current.indexByKey = indexByKey;
-    refState.current.positions = newPositions;
+    state.indexByKey = indexByKey;
+    state.positions = newPositions;
     if (!forgetPositions && !isFirst) {
       if (maintainVisibleContentPosition) {
-        if (refState.current.anchorElement == null || indexByKey.get(refState.current.anchorElement.id) == null) {
+        if (state.anchorElement == null || indexByKey.get(state.anchorElement.id) == null) {
           if (dataProp.length) {
             const newAnchorElement = {
               coordinate: 0,
               id: getId(0)
             };
-            refState.current.anchorElement = newAnchorElement;
-            (_b = refState.current.belowAnchorElementPositions) == null ? void 0 : _b.clear();
+            state.anchorElement = newAnchorElement;
+            (_b = state.belowAnchorElementPositions) == null ? void 0 : _b.clear();
             scrollTo(0, false);
             setTimeout(() => {
               calculateItemsInView();
             }, 0);
           } else {
-            refState.current.startBufferedId = void 0;
+            state.startBufferedId = void 0;
           }
         }
       } else {
-        if (refState.current.startBufferedId != null && newPositions.get(refState.current.startBufferedId) == null) {
+        if (state.startBufferedId != null && newPositions.get(state.startBufferedId) == null) {
           if (dataProp.length) {
-            refState.current.startBufferedId = getId(0);
+            state.startBufferedId = getId(0);
           } else {
-            refState.current.startBufferedId = void 0;
+            state.startBufferedId = void 0;
           }
           scrollTo(0, false);
           setTimeout(() => {
@@ -1771,7 +1825,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (maxSizeInRow > 0) {
       totalSize += maxSizeInRow;
     }
-    const state = refState.current;
     state.ignoreScrollFromCalcTotal = true;
     requestAnimationFrame(() => {
       state.ignoreScrollFromCalcTotal = false;
@@ -1804,6 +1857,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
     refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirst && didDataChange) {
+      __DEV__ && warnDevOnce(
+        "keyExtractor",
+        "Changing data without a keyExtractor can cause slow performance and resetting scroll. If your list data can change you should use a keyExtractor with a unique id for best performance and behavior."
+      );
       refState.current.sizes.clear();
       refState.current.positions.clear();
     }
@@ -1834,24 +1891,28 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (index === void 0) {
       return null;
     }
-    const useViewability2 = __DEV__ ? (configId, callback) => {
-      console.warn(
-        `[legend-list] useViewability has been moved from a render prop to a regular import: import { useViewability } from "@legendapp/list";`
+    const useViewability2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useViewability",
+        `useViewability has been moved from a render prop to a regular import: import { useViewability } from "@legendapp/list";`
       );
     } : void 0;
-    const useViewabilityAmount2 = __DEV__ ? (callback) => {
-      console.warn(
-        `[legend-list] useViewabilityAmount has been moved from a render prop to a regular import: import { useViewabilityAmount } from "@legendapp/list";`
+    const useViewabilityAmount2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useViewabilityAmount",
+        `useViewabilityAmount has been moved from a render prop to a regular import: import { useViewabilityAmount } from "@legendapp/list";`
       );
     } : void 0;
-    const useRecyclingEffect2 = __DEV__ ? (effect) => {
-      console.warn(
-        `[legend-list] useRecyclingEffect has been moved from a render prop to a regular import: import { useRecyclingEffect } from "@legendapp/list";`
+    const useRecyclingEffect2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useRecyclingEffect",
+        `useRecyclingEffect has been moved from a render prop to a regular import: import { useRecyclingEffect } from "@legendapp/list";`
       );
     } : void 0;
-    const useRecyclingState2 = __DEV__ ? (valueOrFun) => {
-      console.warn(
-        `[legend-list] useRecyclingState has been moved from a render prop to a regular import: import { useRecyclingState } from "@legendapp/list";`
+    const useRecyclingState2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useRecyclingState",
+        `useRecyclingState has been moved from a render prop to a regular import: import { useRecyclingState } from "@legendapp/list";`
       );
     } : void 0;
     const renderedItem = (_b = (_a = refState.current).renderItem) == null ? void 0 : _b.call(_a, {
@@ -1904,7 +1965,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   });
   const updateItemSize = React6.useCallback((itemKey, size, fromFixGaps) => {
     const state = refState.current;
-    const { sizes, indexByKey, sizesKnown, data, rowHeights, startBuffered, endBuffered } = state;
+    const { sizes, indexByKey, sizesKnown, data, rowHeights, startBuffered, endBuffered, averageSizes } = state;
     if (!data) {
       return;
     }
@@ -1922,7 +1983,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         needsUpdateContainersDidLayout = true;
       }
     }
-    sizesKnown == null ? void 0 : sizesKnown.set(itemKey, size);
+    sizesKnown.set(itemKey, size);
+    const itemType = "";
+    let averages = averageSizes[itemType];
+    if (!averages) {
+      averages = averageSizes[itemType] = {
+        num: 0,
+        avg: 0
+      };
+    }
+    averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
+    averages.num++;
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
       needsCalculate = true;
@@ -1937,19 +2008,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         sizes.set(itemKey, size);
         diff = size - prevSize;
       }
-      if (__DEV__ && !estimatedItemSize && !getEstimatedItemSize) {
+      if (__DEV__ && suggestEstimatedItemSize) {
         if (state.timeoutSizeMessage) {
           clearTimeout(state.timeoutSizeMessage);
         }
         state.timeoutSizeMessage = setTimeout(() => {
           state.timeoutSizeMessage = void 0;
-          let total = 0;
-          let num = 0;
-          for (const [_, size2] of sizesKnown) {
-            num++;
-            total += size2;
-          }
-          const avg = Math.round(total / num);
+          const num = sizesKnown.size;
+          const avg = state.averageSizes[""].avg;
           console.warn(
             `[legend-list] estimatedItemSize or getEstimatedItemSize are not defined. Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
           );
@@ -2009,7 +2075,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       const isWidthZero = event.nativeEvent.layout.width === 0;
       const isHeightZero = event.nativeEvent.layout.height === 0;
       if (isWidthZero || isHeightZero) {
-        console.warn(
+        warnDevOnce(
+          "height0",
           `[legend-list] List ${isWidthZero ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
         );
       }
@@ -2176,7 +2243,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       alignItemsAtEnd,
       ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
       maintainVisibleContentPosition,
-      scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : reactNative.Platform.OS === "web" ? 16 : void 0,
+      scrollEventThrottle: reactNative.Platform.OS === "web" ? 16 : void 0,
       waitForInitialLayout,
       refreshControl: refreshControl != null ? refreshControl : onRefresh && /* @__PURE__ */ React6__namespace.createElement(
         reactNative.RefreshControl,