@legendapp/list 0.5.5 → 0.5.6

package/index.d.mts

@@ -1,8 +1,8 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
 import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 
-type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
-    data: ArrayLike<any> & T[];
+type LegendListProps<ItemT> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
+    data: ArrayLike<any> & ItemT[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
@@ -15,16 +15,16 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
-    estimatedItemSize: number;
-    getEstimatedItemSize?: (index: number, item: T) => number;
-    onEndReached?: ((info: {
-        distanceFromEnd: number;
-    }) => void) | null | undefined;
+    estimatedItemSize?: number;
+    getEstimatedItemSize?: (index: number, item: ItemT) => number;
     onStartReached?: ((info: {
         distanceFromStart: number;
     }) => void) | null | undefined;
-    keyExtractor?: (item: T, index: number) => string;
-    renderItem?: (props: LegendListRenderItemProps<T>) => ReactNode;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    keyExtractor?: (item: ItemT, index: number) => string;
+    renderItem?: (props: LegendListRenderItemProps<ItemT>) => ReactNode;
     ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
@@ -40,6 +40,7 @@ interface InternalState {
     positions: Map<string, number>;
     columns: Map<string, number>;
     sizes: Map<string, number>;
+    sizesLaidOut: Map<string, number> | undefined;
     pendingAdjust: number;
     animFrameLayout: any;
     animFrameTotalSize: number | null;
@@ -63,6 +64,7 @@ interface InternalState {
     scrollAdjustPending: number;
     totalSize: number;
     timeouts: Set<number>;
+    timeoutSizeMessage: any;
     nativeMarginTop: number;
     indexByKey: Map<string, number>;
     contentSize: {
@@ -89,7 +91,7 @@ interface LegendListRenderItemProps<ItemT> {
     useViewability: (configId: string, callback: ViewabilityCallback) => void;
     useViewabilityAmount: (callback: ViewabilityAmountCallback) => void;
     useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
-    useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
+    useRecyclingState: <T>(updateState: ((info: LegendListRecyclingState<ItemT>) => T) | T) => [T, React.Dispatch<T>];
 }
 type LegendListRef = {
     /**

package/index.d.ts

@@ -1,8 +1,8 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
 import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 
-type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
-    data: ArrayLike<any> & T[];
+type LegendListProps<ItemT> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
+    data: ArrayLike<any> & ItemT[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
@@ -15,16 +15,16 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
-    estimatedItemSize: number;
-    getEstimatedItemSize?: (index: number, item: T) => number;
-    onEndReached?: ((info: {
-        distanceFromEnd: number;
-    }) => void) | null | undefined;
+    estimatedItemSize?: number;
+    getEstimatedItemSize?: (index: number, item: ItemT) => number;
     onStartReached?: ((info: {
         distanceFromStart: number;
     }) => void) | null | undefined;
-    keyExtractor?: (item: T, index: number) => string;
-    renderItem?: (props: LegendListRenderItemProps<T>) => ReactNode;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    keyExtractor?: (item: ItemT, index: number) => string;
+    renderItem?: (props: LegendListRenderItemProps<ItemT>) => ReactNode;
     ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
@@ -40,6 +40,7 @@ interface InternalState {
     positions: Map<string, number>;
     columns: Map<string, number>;
     sizes: Map<string, number>;
+    sizesLaidOut: Map<string, number> | undefined;
     pendingAdjust: number;
     animFrameLayout: any;
     animFrameTotalSize: number | null;
@@ -63,6 +64,7 @@ interface InternalState {
     scrollAdjustPending: number;
     totalSize: number;
     timeouts: Set<number>;
+    timeoutSizeMessage: any;
     nativeMarginTop: number;
     indexByKey: Map<string, number>;
     contentSize: {
@@ -89,7 +91,7 @@ interface LegendListRenderItemProps<ItemT> {
     useViewability: (configId: string, callback: ViewabilityCallback) => void;
     useViewabilityAmount: (callback: ViewabilityAmountCallback) => void;
     useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
-    useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
+    useRecyclingState: <T>(updateState: ((info: LegendListRecyclingState<ItemT>) => T) | T) => [T, React.Dispatch<T>];
 }
 type LegendListRef = {
     /**

package/index.js

@@ -474,6 +474,7 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
 var DEFAULT_DRAW_DISTANCE = 250;
 var INITIAL_SCROLL_ADJUST = 1e4;
 var POSITION_OUT_OF_VIEW = -1e7;
+var DEFAULT_ITEM_SIZE = 100;
 var LegendList = React7.forwardRef(function LegendList2(props, forwardedRef) {
   return /* @__PURE__ */ React7__namespace.createElement(StateProvider, null, /* @__PURE__ */ React7__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
@@ -495,6 +496,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     maintainVisibleContentPosition = false,
     onScroll: onScrollProp,
     numColumns: numColumnsProp = 1,
+    style: styleProp,
     keyExtractor,
     renderItem,
     estimatedItemSize,
@@ -504,7 +506,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     ListEmptyComponent,
     ...rest
   } = props;
-  const { style, contentContainerStyle } = rest;
+  const { contentContainerStyle } = props;
   const ctx = useStateContext();
   const internalRef = React7.useRef(null);
   const refScroller = internalRef;
@@ -520,11 +522,12 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     return `${ret}`;
   };
   const getItemSize = (key, index, data2) => {
+    var _a2;
     const sizeKnown = refState.current.sizes.get(key);
     if (sizeKnown !== void 0) {
       return sizeKnown;
     }
-    const size = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize;
+    const size = (_a2 = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize) != null ? _a2 : DEFAULT_ITEM_SIZE;
     refState.current.sizes.set(key, size);
     return size;
   };
@@ -576,7 +579,9 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       indexByKey: /* @__PURE__ */ new Map(),
       scrollHistory: [],
       scrollVelocity: 0,
-      contentSize: { width: 0, height: 0 }
+      contentSize: { width: 0, height: 0 },
+      sizesLaidOut: __DEV__ ? /* @__PURE__ */ new Map() : void 0,
+      timeoutSizeMessage: 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     set$(ctx, "scrollAdjust", refState.current.scrollAdjustPending);
@@ -622,6 +627,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       scroll: scrollState,
       startBuffered: startBufferedState,
       positions,
+      sizes,
       columns
     } = state;
     if (state.animFrameLayout) {
@@ -638,6 +644,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       0,
       scrollState - topPad - (USE_CONTENT_INSET ? scrollAdjustPending : 0) + scrollExtra
     );
+    const scrollBottom = scroll + scrollLength;
     let startNoBuffer = null;
     let startBuffered = null;
     let endNoBuffer = null;
@@ -683,10 +690,10 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         startBuffered = i;
       }
       if (startNoBuffer !== null) {
-        if (top <= scroll + scrollLength) {
+        if (top <= scrollBottom) {
           endNoBuffer = i;
         }
-        if (top <= scroll + scrollLength + scrollBuffer) {
+        if (top <= scrollBottom + scrollBuffer) {
           endBuffered = i;
         } else {
           break;
@@ -767,7 +774,14 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
-          if (!(itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered)) {
+          if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
+            const prevPos = peek$(ctx, `containerPosition${i}`) - scrollAdjustPending;
+            const pos = positions.get(id) || 0;
+            const size = sizes.get(id) || 0;
+            if (pos + size >= scroll && pos <= scrollBottom || prevPos + size >= scroll && prevPos <= scrollBottom) {
+              set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+            }
+          } else {
             const pos = (positions.get(id) || 0) + scrollAdjustPending;
             const column2 = columns.get(id) || 1;
             const prevPos = peek$(ctx, `containerPosition${i}`);
@@ -794,6 +808,18 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       );
     }
   }, []);
+  const style = React7.useMemo(() => {
+    const extraStyle = {};
+    if (data.length > 0) {
+      const size = getItemSize(getId(0), 0, data[0]);
+      if (horizontal) {
+        extraStyle.minHeight = size;
+      } else {
+        extraStyle.minWidth = size;
+      }
+    }
+    return reactNative.StyleSheet.compose(styleProp, extraStyle);
+  }, []);
   const doUpdatePaddingTop = () => {
     if (alignItemsAtEnd) {
       const { scrollLength, totalSize } = refState.current;
@@ -859,6 +885,10 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
   };
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
+    if (!keyExtractor && !isFirst && data !== refState.current.data) {
+      refState.current.sizes.clear();
+      refState.current.positions.clear();
+    }
     refState.current.data = data;
     let totalSize = 0;
     const indexByKey = /* @__PURE__ */ new Map();
@@ -900,6 +930,10 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
         set$(ctx, `containerColumn${i}`, -1);
       }
+      if (!keyExtractor) {
+        refState.current.sizes.clear();
+        refState.current.positions;
+      }
       calculateItemsInView();
       doMaintainScrollAtEnd(false);
       checkAtTop();
@@ -984,17 +1018,17 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         listen$(ctx, signal, run);
       }, []);
     };
-    const useRecyclingState = (updateState) => {
+    const useRecyclingState = (valueOrFun) => {
       const stateInfo = React7.useState(
-        () => updateState({
+        () => typeof valueOrFun === "function" ? valueOrFun({
           index,
           item: refState.current.data[index],
           prevIndex: void 0,
           prevItem: void 0
-        })
+        }) : valueOrFun
       );
       useRecyclingEffect((state2) => {
-        const newState = updateState(state2);
+        const newState = typeof valueOrFun === "function" ? valueOrFun(state2) : valueOrFun;
         stateInfo[1](newState);
       });
       return stateInfo;
@@ -1010,9 +1044,10 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     return renderedItem;
   }, []);
   useInit(() => {
+    var _a2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
-    const averageItemSize = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0]);
+    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;
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
@@ -1028,7 +1063,8 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     if (!data2) {
       return;
     }
-    const { sizes, indexByKey, idsInFirstRender, columns } = refState.current;
+    const state = refState.current;
+    const { sizes, indexByKey, idsInFirstRender, columns, sizesLaidOut } = state;
     const index = indexByKey.get(key);
     const wasInFirstRender = idsInFirstRender.has(key);
     const prevSize = sizes.get(key) || (wasInFirstRender ? getItemSize(key, index, data2[index]) : 0);
@@ -1056,9 +1092,27 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         sizes.set(key, size);
         diff = size - prevSize;
       }
+      if (__DEV__ && !estimatedItemSize && !getEstimatedItemSize) {
+        sizesLaidOut.set(key, size);
+        if (state.timeoutSizeMessage) {
+          clearTimeout(state.timeoutSizeMessage);
+        }
+        state.timeoutSizeMessage = setTimeout(() => {
+          state.timeoutSizeMessage = void 0;
+          let total = 0;
+          let num = 0;
+          for (const [key2, size2] of sizesLaidOut) {
+            num++;
+            total += size2;
+          }
+          const avg = Math.round(total / num);
+          console.warn(
+            `[legend-list] estimatedItemSize or getEstimatedItemSize are not defined. Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
+          );
+        }, 1e3);
+      }
       addTotalSize(key, diff);
       doMaintainScrollAtEnd(true);
-      const state = refState.current;
       const scrollVelocity = state.scrollVelocity;
       if (!state.animFrameLayout && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
         state.animFrameLayout = requestAnimationFrame(() => {
@@ -1176,7 +1230,8 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       recycleItems,
       alignItemsAtEnd,
       addTotalSize,
-      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0
+      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
+      style
     }
   );
 });

package/index.mjs

@@ -453,6 +453,7 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
 var DEFAULT_DRAW_DISTANCE = 250;
 var INITIAL_SCROLL_ADJUST = 1e4;
 var POSITION_OUT_OF_VIEW = -1e7;
+var DEFAULT_ITEM_SIZE = 100;
 var LegendList = forwardRef(function LegendList2(props, forwardedRef) {
   return /* @__PURE__ */ React7.createElement(StateProvider, null, /* @__PURE__ */ React7.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
@@ -474,6 +475,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     maintainVisibleContentPosition = false,
     onScroll: onScrollProp,
     numColumns: numColumnsProp = 1,
+    style: styleProp,
     keyExtractor,
     renderItem,
     estimatedItemSize,
@@ -483,7 +485,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     ListEmptyComponent,
     ...rest
   } = props;
-  const { style, contentContainerStyle } = rest;
+  const { contentContainerStyle } = props;
   const ctx = useStateContext();
   const internalRef = useRef(null);
   const refScroller = internalRef;
@@ -499,11 +501,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     return `${ret}`;
   };
   const getItemSize = (key, index, data2) => {
+    var _a2;
     const sizeKnown = refState.current.sizes.get(key);
     if (sizeKnown !== void 0) {
       return sizeKnown;
     }
-    const size = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize;
+    const size = (_a2 = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize) != null ? _a2 : DEFAULT_ITEM_SIZE;
     refState.current.sizes.set(key, size);
     return size;
   };
@@ -555,7 +558,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       indexByKey: /* @__PURE__ */ new Map(),
       scrollHistory: [],
       scrollVelocity: 0,
-      contentSize: { width: 0, height: 0 }
+      contentSize: { width: 0, height: 0 },
+      sizesLaidOut: __DEV__ ? /* @__PURE__ */ new Map() : void 0,
+      timeoutSizeMessage: 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     set$(ctx, "scrollAdjust", refState.current.scrollAdjustPending);
@@ -601,6 +606,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       scroll: scrollState,
       startBuffered: startBufferedState,
       positions,
+      sizes,
       columns
     } = state;
     if (state.animFrameLayout) {
@@ -617,6 +623,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       0,
       scrollState - topPad - (USE_CONTENT_INSET ? scrollAdjustPending : 0) + scrollExtra
     );
+    const scrollBottom = scroll + scrollLength;
     let startNoBuffer = null;
     let startBuffered = null;
     let endNoBuffer = null;
@@ -662,10 +669,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         startBuffered = i;
       }
       if (startNoBuffer !== null) {
-        if (top <= scroll + scrollLength) {
+        if (top <= scrollBottom) {
           endNoBuffer = i;
         }
-        if (top <= scroll + scrollLength + scrollBuffer) {
+        if (top <= scrollBottom + scrollBuffer) {
           endBuffered = i;
         } else {
           break;
@@ -746,7 +753,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
-          if (!(itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered)) {
+          if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
+            const prevPos = peek$(ctx, `containerPosition${i}`) - scrollAdjustPending;
+            const pos = positions.get(id) || 0;
+            const size = sizes.get(id) || 0;
+            if (pos + size >= scroll && pos <= scrollBottom || prevPos + size >= scroll && prevPos <= scrollBottom) {
+              set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+            }
+          } else {
             const pos = (positions.get(id) || 0) + scrollAdjustPending;
             const column2 = columns.get(id) || 1;
             const prevPos = peek$(ctx, `containerPosition${i}`);
@@ -773,6 +787,18 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       );
     }
   }, []);
+  const style = useMemo(() => {
+    const extraStyle = {};
+    if (data.length > 0) {
+      const size = getItemSize(getId(0), 0, data[0]);
+      if (horizontal) {
+        extraStyle.minHeight = size;
+      } else {
+        extraStyle.minWidth = size;
+      }
+    }
+    return StyleSheet.compose(styleProp, extraStyle);
+  }, []);
   const doUpdatePaddingTop = () => {
     if (alignItemsAtEnd) {
       const { scrollLength, totalSize } = refState.current;
@@ -838,6 +864,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   };
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
+    if (!keyExtractor && !isFirst && data !== refState.current.data) {
+      refState.current.sizes.clear();
+      refState.current.positions.clear();
+    }
     refState.current.data = data;
     let totalSize = 0;
     const indexByKey = /* @__PURE__ */ new Map();
@@ -879,6 +909,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
         set$(ctx, `containerColumn${i}`, -1);
       }
+      if (!keyExtractor) {
+        refState.current.sizes.clear();
+        refState.current.positions;
+      }
       calculateItemsInView();
       doMaintainScrollAtEnd(false);
       checkAtTop();
@@ -963,17 +997,17 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         listen$(ctx, signal, run);
       }, []);
     };
-    const useRecyclingState = (updateState) => {
+    const useRecyclingState = (valueOrFun) => {
       const stateInfo = useState(
-        () => updateState({
+        () => typeof valueOrFun === "function" ? valueOrFun({
           index,
           item: refState.current.data[index],
           prevIndex: void 0,
           prevItem: void 0
-        })
+        }) : valueOrFun
       );
       useRecyclingEffect((state2) => {
-        const newState = updateState(state2);
+        const newState = typeof valueOrFun === "function" ? valueOrFun(state2) : valueOrFun;
         stateInfo[1](newState);
       });
       return stateInfo;
@@ -989,9 +1023,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     return renderedItem;
   }, []);
   useInit(() => {
+    var _a2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
-    const averageItemSize = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0]);
+    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;
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
@@ -1007,7 +1042,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (!data2) {
       return;
     }
-    const { sizes, indexByKey, idsInFirstRender, columns } = refState.current;
+    const state = refState.current;
+    const { sizes, indexByKey, idsInFirstRender, columns, sizesLaidOut } = state;
     const index = indexByKey.get(key);
     const wasInFirstRender = idsInFirstRender.has(key);
     const prevSize = sizes.get(key) || (wasInFirstRender ? getItemSize(key, index, data2[index]) : 0);
@@ -1035,9 +1071,27 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         sizes.set(key, size);
         diff = size - prevSize;
       }
+      if (__DEV__ && !estimatedItemSize && !getEstimatedItemSize) {
+        sizesLaidOut.set(key, size);
+        if (state.timeoutSizeMessage) {
+          clearTimeout(state.timeoutSizeMessage);
+        }
+        state.timeoutSizeMessage = setTimeout(() => {
+          state.timeoutSizeMessage = void 0;
+          let total = 0;
+          let num = 0;
+          for (const [key2, size2] of sizesLaidOut) {
+            num++;
+            total += size2;
+          }
+          const avg = Math.round(total / num);
+          console.warn(
+            `[legend-list] estimatedItemSize or getEstimatedItemSize are not defined. Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
+          );
+        }, 1e3);
+      }
       addTotalSize(key, diff);
       doMaintainScrollAtEnd(true);
-      const state = refState.current;
       const scrollVelocity = state.scrollVelocity;
       if (!state.animFrameLayout && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
         state.animFrameLayout = requestAnimationFrame(() => {
@@ -1155,7 +1209,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       recycleItems,
       alignItemsAtEnd,
       addTotalSize,
-      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0
+      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
+      style
     }
   );
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,