npm - @legendapp/list - Versions diffs - 1.0.0-beta.15 → 1.0.0-beta.17 - Mend

@legendapp/list 1.0.0-beta.15 → 1.0.0-beta.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/animated.d.mts CHANGED Viewed

@@ -34,7 +34,9 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
     ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
-    ItemSeparatorComponent?: React.ComponentType<any>;
+    ItemSeparatorComponent?: React$1.ComponentType<{
+        leadingItem: T;
+    }> | undefined;
     viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;
     onViewableItemsChanged?: _legendapp_list.OnViewableItemsChanged | undefined;
@@ -47,6 +49,9 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
     }) => void) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     extraData?: any;
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    progressViewOffset?: number;
 } & React$1.RefAttributes<_legendapp_list.LegendListRef>) => React.ReactNode)>;
 export { AnimatedLegendList };

package/animated.d.ts CHANGED Viewed

@@ -34,7 +34,9 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
     ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
-    ItemSeparatorComponent?: React.ComponentType<any>;
+    ItemSeparatorComponent?: React$1.ComponentType<{
+        leadingItem: T;
+    }> | undefined;
     viewabilityConfigCallbackPairs?: _legendapp_list.ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: _legendapp_list.ViewabilityConfig;
     onViewableItemsChanged?: _legendapp_list.OnViewableItemsChanged | undefined;
@@ -47,6 +49,9 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
     }) => void) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React.ReactElement<react_native.ScrollViewProps>;
     extraData?: any;
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    progressViewOffset?: number;
 } & React$1.RefAttributes<_legendapp_list.LegendListRef>) => React.ReactNode)>;
 export { AnimatedLegendList };

package/index.d.mts CHANGED Viewed

@@ -49,7 +49,9 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
-    ItemSeparatorComponent?: React.ComponentType<any>;
+    ItemSeparatorComponent?: React.ComponentType<{
+        leadingItem: ItemT;
+    }>;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged | undefined;
@@ -66,6 +68,9 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      */
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
     extraData?: any;
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    progressViewOffset?: number;
 };
 interface ColumnWrapperStyle {
     rowGap?: number;
@@ -90,13 +95,11 @@ interface InternalState {
     sizes: Map<string, number>;
     sizesLaidOut: Map<string, number> | undefined;
     pendingAdjust: number;
-    waitingForMicrotask: any;
     isStartReached: boolean;
     isEndReached: boolean;
     isAtBottom: boolean;
     isAtTop: boolean;
     data: readonly any[];
-    idsInFirstRender: Set<string>;
     hasScrolled: boolean;
     scrollLength: number;
     startBuffered: number;
@@ -130,6 +133,7 @@ interface InternalState {
     } | undefined;
     enableScrollForNextCalculateItemsInView: boolean;
     minIndexSizeChanged: number | undefined;
+    numPendingInitialLayout: number;
 }
 interface ViewableRange<T> {
     startBuffered: number;
@@ -243,6 +247,10 @@ interface LegendListRecyclingState<T> {
 }
 type TypedForwardRef = <T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode) => (props: P & React.RefAttributes<T>) => React.ReactNode;
 declare const typedForwardRef: TypedForwardRef;
+type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean) => T & {
+    displayName?: string;
+};
+declare const typedMemo: TypedMemo;
 declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
     data: readonly T[];
@@ -275,7 +283,9 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
     ListFooterComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
     ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
     ListEmptyComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
-    ItemSeparatorComponent?: React$1.ComponentType<any>;
+    ItemSeparatorComponent?: React$1.ComponentType<{
+        leadingItem: T;
+    }> | undefined;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged | undefined;
@@ -288,6 +298,9 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
     }) => void) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
     extraData?: any;
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    progressViewOffset?: number;
 } & React$1.RefAttributes<LegendListRef>) => React$1.ReactNode;
 declare function useViewability(configId: string, callback: ViewabilityCallback): void;
@@ -295,4 +308,4 @@ declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
 declare function useRecyclingState(valueOrFun: ((info: LegendListRecyclingState<unknown>) => any) | any): [any, React$1.Dispatch<any>];
-export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
+export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, 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 CHANGED Viewed

@@ -49,7 +49,9 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
-    ItemSeparatorComponent?: React.ComponentType<any>;
+    ItemSeparatorComponent?: React.ComponentType<{
+        leadingItem: ItemT;
+    }>;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged | undefined;
@@ -66,6 +68,9 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
      */
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
     extraData?: any;
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    progressViewOffset?: number;
 };
 interface ColumnWrapperStyle {
     rowGap?: number;
@@ -90,13 +95,11 @@ interface InternalState {
     sizes: Map<string, number>;
     sizesLaidOut: Map<string, number> | undefined;
     pendingAdjust: number;
-    waitingForMicrotask: any;
     isStartReached: boolean;
     isEndReached: boolean;
     isAtBottom: boolean;
     isAtTop: boolean;
     data: readonly any[];
-    idsInFirstRender: Set<string>;
     hasScrolled: boolean;
     scrollLength: number;
     startBuffered: number;
@@ -130,6 +133,7 @@ interface InternalState {
     } | undefined;
     enableScrollForNextCalculateItemsInView: boolean;
     minIndexSizeChanged: number | undefined;
+    numPendingInitialLayout: number;
 }
 interface ViewableRange<T> {
     startBuffered: number;
@@ -243,6 +247,10 @@ interface LegendListRecyclingState<T> {
 }
 type TypedForwardRef = <T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode) => (props: P & React.RefAttributes<T>) => React.ReactNode;
 declare const typedForwardRef: TypedForwardRef;
+type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean) => T & {
+    displayName?: string;
+};
+declare const typedMemo: TypedMemo;
 declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "contentOffset" | "contentInset" | "maintainVisibleContentPosition" | "stickyHeaderIndices"> & {
     data: readonly T[];
@@ -275,7 +283,9 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
     ListFooterComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
     ListFooterComponentStyle?: react_native.StyleProp<react_native.ViewStyle> | undefined;
     ListEmptyComponent?: React$1.ComponentType<any> | React$1.ReactElement | null | undefined;
-    ItemSeparatorComponent?: React$1.ComponentType<any>;
+    ItemSeparatorComponent?: React$1.ComponentType<{
+        leadingItem: T;
+    }> | undefined;
     viewabilityConfigCallbackPairs?: ViewabilityConfigCallbackPairs | undefined;
     viewabilityConfig?: ViewabilityConfig;
     onViewableItemsChanged?: OnViewableItemsChanged | undefined;
@@ -288,6 +298,9 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
     }) => void) | undefined;
     renderScrollComponent?: (props: react_native.ScrollViewProps) => React$1.ReactElement<react_native.ScrollViewProps>;
     extraData?: any;
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    progressViewOffset?: number;
 } & React$1.RefAttributes<LegendListRef>) => React$1.ReactNode;
 declare function useViewability(configId: string, callback: ViewabilityCallback): void;
@@ -295,4 +308,4 @@ declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
 declare function useRecyclingState(valueOrFun: ((info: LegendListRecyclingState<unknown>) => any) | any): [any, React$1.Dispatch<any>];
-export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
+export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, 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 CHANGED Viewed

@@ -169,7 +169,7 @@ var DebugView = React6.memo(function DebugView2({ state }) {
   useInterval(() => {
     forceUpdate();
   }, 100);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     reactNative.View,
     {
       style: {
@@ -182,8 +182,8 @@ var DebugView = React6.memo(function DebugView2({ state }) {
         backgroundColor: "#FFFFFFCC"
       }
     },
-    /* @__PURE__ */ React.createElement(reactNative.Text, null, "PaddingTop: ", paddingTop),
-    /* @__PURE__ */ React.createElement(reactNative.Text, null, "At end: ", String(state.isAtBottom))
+    /* @__PURE__ */ React6__namespace.createElement(reactNative.Text, null, "PaddingTop: ", paddingTop),
+    /* @__PURE__ */ React6__namespace.createElement(reactNative.Text, null, "At end: ", String(state.isAtBottom))
   );
 });
 function useInterval(callback, delay) {
@@ -224,13 +224,17 @@ var Container = ({
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
   const numColumns = use$("numColumns");
+  const lastItemKeys = use$("lastItemKeys");
+  const itemKey = use$(`containerItemKey${id}`);
+  const data = use$(`containerItemData${id}`);
+  const extraData = use$("extraData");
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
   let verticalPaddingStyles;
   if (columnWrapperStyle && !horizontal && numColumns > 1) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     verticalPaddingStyles = {
-      paddingVertical: rowGap || gap || void 0,
+      paddingBottom: !lastItemKeys.has(itemKey) ? rowGap || gap || void 0 : void 0,
       // Apply horizontal padding based on column position (first, middle, or last)
       paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
       paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
@@ -251,20 +255,24 @@ var Container = ({
     top: position.relativeCoordinate,
     ...verticalPaddingStyles || {}
   };
-  const lastItemKey = use$("lastItemKey");
-  const itemKey = use$(`containerItemKey${id}`);
-  const data = use$(`containerItemData${id}`);
-  const extraData = use$("extraData");
   const renderedItemInfo = React6.useMemo(
-    () => itemKey !== void 0 && getRenderedItem(itemKey),
+    () => itemKey !== void 0 ? getRenderedItem(itemKey) : null,
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
   const onLayout = (event) => {
     if (itemKey !== void 0) {
-      const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
+      const layout = event.nativeEvent.layout;
+      const size = Math.floor(layout[horizontal ? "width" : "height"] * 8) / 8;
       if (size === 0) {
-        console.log("[WARN] Container 0 height reported, possible bug in LegendList", id, itemKey);
+        if (layout.x !== POSITION_OUT_OF_VIEW && layout.y !== POSITION_OUT_OF_VIEW) {
+          console.log(
+            "[WARN] Container 0 height reported, possible bug in LegendList",
+            id,
+            itemKey,
+            event.nativeEvent
+          );
+        }
         return;
       }
       updateItemSize(id, itemKey, size);
@@ -289,7 +297,7 @@ var Container = ({
     () => ({ containerId: id, itemKey, index, value: data }),
     [id, itemKey, index, data]
   );
-  const contentFragment = /* @__PURE__ */ React6__namespace.default.createElement(React6__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent));
+  const contentFragment = /* @__PURE__ */ React6__namespace.default.createElement(React6__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.has(itemKey) && /* @__PURE__ */ React6__namespace.default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
     if (ENABLE_DEVMODE) {
@@ -300,6 +308,8 @@ var Container = ({
   }
   return /* @__PURE__ */ React6__namespace.default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
+var typedForwardRef = React6.forwardRef;
+var typedMemo = React6.memo;
 var useAnimatedValue = (initialValue) => {
   return React6.useRef(new reactNative.Animated.Value(initialValue)).current;
 };
@@ -328,7 +338,7 @@ function useValue$(key, getValue, useMicrotask) {
 }
 // src/Containers.tsx
-var Containers = React6__namespace.memo(function Containers2({
+var Containers = typedMemo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -347,7 +357,7 @@ var Containers = React6__namespace.memo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React6__namespace.createElement(
+      /* @__PURE__ */ React.createElement(
         Container,
         {
           id: i,
@@ -362,7 +372,7 @@ var Containers = React6__namespace.memo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
-  return /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style }, containers);
+  return /* @__PURE__ */ React.createElement(reactNative.Animated.View, { style }, containers);
 });
 // src/ListComponent.tsx
@@ -426,7 +436,7 @@ var PaddingAndAdjustDevMode = () => {
     }
   ));
 };
-var ListComponent = React6__namespace.memo(function ListComponent2({
+var ListComponent = typedMemo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -447,6 +457,9 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
   refScrollView,
   maintainVisibleContentPosition,
   renderScrollComponent,
+  onRefresh,
+  refreshing,
+  progressViewOffset,
   ...rest
 }) {
   const ctx = useStateContext();
@@ -495,7 +508,7 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
         recycleItems,
         waitForInitialLayout,
         getRenderedItem,
-        ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
+        ItemSeparatorComponent,
         updateItemSize
       }
     ),
@@ -544,7 +557,6 @@ var ScrollAdjustHandler = class {
     return false;
   }
 };
-var typedForwardRef = React6.forwardRef;
 var useCombinedRef = (...refs) => {
   const callback = React6.useCallback((element) => {
     for (const ref of refs) {
@@ -744,6 +756,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     waitForInitialLayout = true,
     extraData,
     onLayout: onLayoutProp,
+    onRefresh,
+    refreshing,
+    progressViewOffset,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
@@ -809,13 +824,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       positions: /* @__PURE__ */ new Map(),
       columns: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
-      waitingForMicrotask: false,
       isStartReached: initialContentOffset < initialScrollLength * onStartReachedThreshold,
       isEndReached: false,
       isAtBottom: false,
       isAtTop: false,
       data: dataProp,
-      idsInFirstRender: void 0,
       hasScrolled: false,
       scrollLength: initialScrollLength,
       startBuffered: 0,
@@ -844,9 +857,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       startReachedBlockedByTimer: false,
       scrollForNextCalculateItemsInView: void 0,
       enableScrollForNextCalculateItemsInView: true,
-      minIndexSizeChanged: 0
+      minIndexSizeChanged: 0,
+      numPendingInitialLayout: 0
     };
-    refState.current.idsInFirstRender = new Set(dataProp.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
         refState.current.anchorElement = {
@@ -866,6 +879,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
     set$(ctx, "extraData", extraData);
   }
+  const didDataChange = refState.current.data !== dataProp;
+  refState.current.data = dataProp;
   const getAnchorElementIndex = () => {
     const state = refState.current;
     if (state.anchorElement) {
@@ -977,10 +992,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       columns,
       scrollAdjustHandler
     } = state;
-    if (state.waitingForMicrotask) {
-      state.waitingForMicrotask = false;
-    }
-    if (!data) {
+    if (!data || scrollLength === 0) {
       return;
     }
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
@@ -1213,7 +1225,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       }
     }
-    set$(ctx, "containersDidLayout", true);
+    if (state.numPendingInitialLayout === 0) {
+      state.numPendingInitialLayout = state.endBuffered - state.startBuffered + 1;
+    }
     if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
         state,
@@ -1254,9 +1268,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (!refState.current) {
       return;
     }
-    const { scrollLength, scroll, totalSize } = refState.current;
-    if (totalSize > 0) {
-      const distanceFromEnd = totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0);
+    const { scrollLength, scroll, totalSize, hasScrolled } = refState.current;
+    if (totalSize > 0 && hasScrolled) {
+      const distanceFromEnd = Math.abs(
+        totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0)
+      );
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
@@ -1405,18 +1421,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   };
   const isFirst = !refState.current.renderItem;
-  if (isFirst || dataProp !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
-    if (!keyExtractorProp && !isFirst && dataProp !== refState.current.data) {
+  if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
+    if (!keyExtractorProp && !isFirst && didDataChange) {
       refState.current.sizes.clear();
       refState.current.positions.clear();
     }
-    refState.current.data = dataProp;
-    const indexByKey = /* @__PURE__ */ new Map();
-    for (let i = 0; i < dataProp.length; i++) {
-      const key = getId(i);
-      indexByKey.set(key, i);
-    }
-    refState.current.indexByKey = indexByKey;
     calcTotalSizesAndPositions({ forgetPositions: false });
   }
   React6.useEffect(() => {
@@ -1429,17 +1438,22 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   refState.current.renderItem = renderItem;
-  const lastItemKey = dataProp.length > 0 ? getId(dataProp.length - 1) : void 0;
+  const memoizedLastItemKeys = React6.useMemo(() => {
+    if (!dataProp.length) return [];
+    return new Set(
+      Array.from({ length: Math.min(numColumnsProp, dataProp.length) }, (_, i) => getId(dataProp.length - 1 - i))
+    );
+  }, [dataProp.length, numColumnsProp, dataProp.slice(-numColumnsProp).toString()]);
   const stylePaddingTop = (_d = (_c = (_a = 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, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
     set$(ctx, "stylePaddingTop", stylePaddingTop);
   };
   if (isFirst) {
     initalizeStateVars();
   }
-  React6.useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
+  React6.useEffect(initalizeStateVars, [memoizedLastItemKeys, numColumnsProp, stylePaddingTop]);
   const getRenderedItem = React6.useCallback((key) => {
     var _a2, _b2;
     const state = refState.current;
@@ -1471,34 +1485,40 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       useRecyclingEffect: useRecyclingEffect2,
       useRecyclingState: useRecyclingState2
     });
-    return { index, renderedItem };
+    return { index, item: data[index], renderedItem };
   }, []);
-  useInit(() => {
+  const doInitialAllocateContainers = () => {
     var _a2;
     const state = refState.current;
-    const viewability = setupViewability(props);
-    state.viewabilityConfigCallbackPairs = viewability;
-    state.enableScrollForNextCalculateItemsInView = !viewability;
     const scrollLength = state.scrollLength;
-    const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, dataProp[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
-    for (let i = 0; i < numContainers; i++) {
-      set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
-      set$(ctx, `containerColumn${i}`, -1);
-    }
-    set$(ctx, "numContainers", numContainers);
-    set$(ctx, "numContainersPooled", numContainers * 2);
-    if (initialScrollIndex) {
-      requestAnimationFrame(() => {
+    if (scrollLength > 0 && !peek$(ctx, "numContainers")) {
+      const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, dataProp[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
+      const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
+      for (let i = 0; i < numContainers; i++) {
+        set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
+        set$(ctx, `containerColumn${i}`, -1);
+      }
+      set$(ctx, "numContainers", numContainers);
+      set$(ctx, "numContainersPooled", numContainers * 2);
+      if (initialScrollIndex) {
+        requestAnimationFrame(() => {
+          calculateItemsInView(state.scrollVelocity);
+        });
+      } else {
         calculateItemsInView(state.scrollVelocity);
-      });
-    } else {
-      calculateItemsInView(state.scrollVelocity);
+      }
     }
+  };
+  useInit(() => {
+    const state = refState.current;
+    const viewability = setupViewability(props);
+    state.viewabilityConfigCallbackPairs = viewability;
+    state.enableScrollForNextCalculateItemsInView = !viewability;
+    doInitialAllocateContainers();
   });
   const updateItemSize = React6.useCallback((containerId, itemKey, size) => {
     const state = refState.current;
-    const { sizes, indexByKey, columns, sizesLaidOut, data, rowHeights } = state;
+    const { sizes, indexByKey, sizesLaidOut, data, rowHeights } = state;
     if (!data) {
       return;
     }
@@ -1506,8 +1526,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const numColumns = peek$(ctx, "numColumns");
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const prevSize = getItemSize(itemKey, index, data);
+    let needsCalculate = false;
+    if (state.numPendingInitialLayout > 0) {
+      state.numPendingInitialLayout--;
+      if (state.numPendingInitialLayout === 0) {
+        needsCalculate = true;
+        state.numPendingInitialLayout = -1;
+        queueMicrotask(() => {
+          set$(ctx, "containersDidLayout", true);
+        });
+      }
+    }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
+      needsCalculate = true;
       if (numColumns > 1) {
         const rowNumber = Math.floor(index / numColumnsProp);
         const prevSizeInRow = getRowHeight(rowNumber);
@@ -1541,22 +1573,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       refState.current.scrollForNextCalculateItemsInView = void 0;
       addTotalSize(itemKey, diff, 0);
       doMaintainScrollAtEnd(true);
-      const scrollVelocity = state.scrollVelocity;
-      if (!state.waitingForMicrotask && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
-        if (!peek$(ctx, "containersDidLayout")) {
-          state.waitingForMicrotask = true;
-          queueMicrotask(() => {
-            if (state.waitingForMicrotask) {
-              state.waitingForMicrotask = false;
-              calculateItemsInView(state.scrollVelocity);
-            }
-          });
-        } else {
-          calculateItemsInView(state.scrollVelocity);
-        }
-      }
       if (onItemSizeChanged) {
-        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data[index] });
+        onItemSizeChanged({
+          size,
+          previous: prevSize,
+          index,
+          itemKey,
+          itemData: data[index]
+        });
+      }
+    }
+    if (needsCalculate) {
+      const scrollVelocity = state.scrollVelocity;
+      if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
+        calculateItemsInView(state.scrollVelocity);
       }
     }
   }, []);
@@ -1568,7 +1598,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const onLayout = React6.useCallback((event) => {
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
     const didChange = scrollLength !== refState.current.scrollLength;
+    refState.current.scrollLength;
     refState.current.scrollLength = scrollLength;
+    doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
     doUpdatePaddingTop();
     checkAtBottom();
@@ -1688,7 +1720,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             scrollToIndex({ index, animated });
           }
         },
-        scrollToEnd: () => refScroller.current.scrollToEnd()
+        scrollToEnd: (options) => refScroller.current.scrollToEnd(options)
       };
     },
     []
@@ -1721,6 +1753,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       maintainVisibleContentPosition,
       scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : reactNative.Platform.OS === "web" ? 16 : void 0,
       waitForInitialLayout,
+      refreshControl: props.refreshControl == null ? /* @__PURE__ */ React6__namespace.createElement(
+        reactNative.RefreshControl,
+        {
+          refreshing: !!refreshing,
+          onRefresh,
+          progressViewOffset
+        }
+      ) : props.refreshControl,
       style
     }
   ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React6__namespace.createElement(DebugView, { state: refState.current }));

package/index.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React6 from 'react';
 import React6__default, { createContext, memo, useReducer, useEffect, useMemo, useRef, useCallback, useImperativeHandle, useSyncExternalStore, useContext, useState, forwardRef, useLayoutEffect } from 'react';
-import { View, Text, Platform, Animated, ScrollView, Dimensions, StyleSheet } from 'react-native';
+import { View, Text, Platform, Animated, ScrollView, Dimensions, StyleSheet, RefreshControl } from 'react-native';
 // src/LegendList.tsx
 var ContextState = React6.createContext(null);
@@ -148,7 +148,7 @@ var DebugView = memo(function DebugView2({ state }) {
   useInterval(() => {
     forceUpdate();
   }, 100);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React6.createElement(
     View,
     {
       style: {
@@ -161,8 +161,8 @@ var DebugView = memo(function DebugView2({ state }) {
         backgroundColor: "#FFFFFFCC"
       }
     },
-    /* @__PURE__ */ React.createElement(Text, null, "PaddingTop: ", paddingTop),
-    /* @__PURE__ */ React.createElement(Text, null, "At end: ", String(state.isAtBottom))
+    /* @__PURE__ */ React6.createElement(Text, null, "PaddingTop: ", paddingTop),
+    /* @__PURE__ */ React6.createElement(Text, null, "At end: ", String(state.isAtBottom))
   );
 });
 function useInterval(callback, delay) {
@@ -203,13 +203,17 @@ var Container = ({
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
   const numColumns = use$("numColumns");
+  const lastItemKeys = use$("lastItemKeys");
+  const itemKey = use$(`containerItemKey${id}`);
+  const data = use$(`containerItemData${id}`);
+  const extraData = use$("extraData");
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
   let verticalPaddingStyles;
   if (columnWrapperStyle && !horizontal && numColumns > 1) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     verticalPaddingStyles = {
-      paddingVertical: rowGap || gap || void 0,
+      paddingBottom: !lastItemKeys.has(itemKey) ? rowGap || gap || void 0 : void 0,
       // Apply horizontal padding based on column position (first, middle, or last)
       paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
       paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
@@ -230,20 +234,24 @@ var Container = ({
     top: position.relativeCoordinate,
     ...verticalPaddingStyles || {}
   };
-  const lastItemKey = use$("lastItemKey");
-  const itemKey = use$(`containerItemKey${id}`);
-  const data = use$(`containerItemData${id}`);
-  const extraData = use$("extraData");
   const renderedItemInfo = useMemo(
-    () => itemKey !== void 0 && getRenderedItem(itemKey),
+    () => itemKey !== void 0 ? getRenderedItem(itemKey) : null,
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
   const onLayout = (event) => {
     if (itemKey !== void 0) {
-      const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
+      const layout = event.nativeEvent.layout;
+      const size = Math.floor(layout[horizontal ? "width" : "height"] * 8) / 8;
       if (size === 0) {
-        console.log("[WARN] Container 0 height reported, possible bug in LegendList", id, itemKey);
+        if (layout.x !== POSITION_OUT_OF_VIEW && layout.y !== POSITION_OUT_OF_VIEW) {
+          console.log(
+            "[WARN] Container 0 height reported, possible bug in LegendList",
+            id,
+            itemKey,
+            event.nativeEvent
+          );
+        }
         return;
       }
       updateItemSize(id, itemKey, size);
@@ -268,7 +276,7 @@ var Container = ({
     () => ({ containerId: id, itemKey, index, value: data }),
     [id, itemKey, index, data]
   );
-  const contentFragment = /* @__PURE__ */ React6__default.createElement(React6__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent));
+  const contentFragment = /* @__PURE__ */ React6__default.createElement(React6__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.has(itemKey) && /* @__PURE__ */ React6__default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
     if (ENABLE_DEVMODE) {
@@ -279,6 +287,8 @@ var Container = ({
   }
   return /* @__PURE__ */ React6__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
+var typedForwardRef = forwardRef;
+var typedMemo = memo;
 var useAnimatedValue = (initialValue) => {
   return useRef(new Animated.Value(initialValue)).current;
 };
@@ -307,7 +317,7 @@ function useValue$(key, getValue, useMicrotask) {
 }
 // src/Containers.tsx
-var Containers = React6.memo(function Containers2({
+var Containers = typedMemo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -326,7 +336,7 @@ var Containers = React6.memo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React.createElement(
         Container,
         {
           id: i,
@@ -341,7 +351,7 @@ var Containers = React6.memo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
-  return /* @__PURE__ */ React6.createElement(Animated.View, { style }, containers);
+  return /* @__PURE__ */ React.createElement(Animated.View, { style }, containers);
 });
 // src/ListComponent.tsx
@@ -405,7 +415,7 @@ var PaddingAndAdjustDevMode = () => {
     }
   ));
 };
-var ListComponent = React6.memo(function ListComponent2({
+var ListComponent = typedMemo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -426,6 +436,9 @@ var ListComponent = React6.memo(function ListComponent2({
   refScrollView,
   maintainVisibleContentPosition,
   renderScrollComponent,
+  onRefresh,
+  refreshing,
+  progressViewOffset,
   ...rest
 }) {
   const ctx = useStateContext();
@@ -474,7 +487,7 @@ var ListComponent = React6.memo(function ListComponent2({
         recycleItems,
         waitForInitialLayout,
         getRenderedItem,
-        ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
+        ItemSeparatorComponent,
         updateItemSize
       }
     ),
@@ -523,7 +536,6 @@ var ScrollAdjustHandler = class {
     return false;
   }
 };
-var typedForwardRef = forwardRef;
 var useCombinedRef = (...refs) => {
   const callback = useCallback((element) => {
     for (const ref of refs) {
@@ -723,6 +735,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     waitForInitialLayout = true,
     extraData,
     onLayout: onLayoutProp,
+    onRefresh,
+    refreshing,
+    progressViewOffset,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
@@ -788,13 +803,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       positions: /* @__PURE__ */ new Map(),
       columns: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
-      waitingForMicrotask: false,
       isStartReached: initialContentOffset < initialScrollLength * onStartReachedThreshold,
       isEndReached: false,
       isAtBottom: false,
       isAtTop: false,
       data: dataProp,
-      idsInFirstRender: void 0,
       hasScrolled: false,
       scrollLength: initialScrollLength,
       startBuffered: 0,
@@ -823,9 +836,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       startReachedBlockedByTimer: false,
       scrollForNextCalculateItemsInView: void 0,
       enableScrollForNextCalculateItemsInView: true,
-      minIndexSizeChanged: 0
+      minIndexSizeChanged: 0,
+      numPendingInitialLayout: 0
     };
-    refState.current.idsInFirstRender = new Set(dataProp.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
         refState.current.anchorElement = {
@@ -845,6 +858,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
     set$(ctx, "extraData", extraData);
   }
+  const didDataChange = refState.current.data !== dataProp;
+  refState.current.data = dataProp;
   const getAnchorElementIndex = () => {
     const state = refState.current;
     if (state.anchorElement) {
@@ -956,10 +971,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       columns,
       scrollAdjustHandler
     } = state;
-    if (state.waitingForMicrotask) {
-      state.waitingForMicrotask = false;
-    }
-    if (!data) {
+    if (!data || scrollLength === 0) {
       return;
     }
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
@@ -1192,7 +1204,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       }
     }
-    set$(ctx, "containersDidLayout", true);
+    if (state.numPendingInitialLayout === 0) {
+      state.numPendingInitialLayout = state.endBuffered - state.startBuffered + 1;
+    }
     if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
         state,
@@ -1233,9 +1247,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (!refState.current) {
       return;
     }
-    const { scrollLength, scroll, totalSize } = refState.current;
-    if (totalSize > 0) {
-      const distanceFromEnd = totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0);
+    const { scrollLength, scroll, totalSize, hasScrolled } = refState.current;
+    if (totalSize > 0 && hasScrolled) {
+      const distanceFromEnd = Math.abs(
+        totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0)
+      );
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
@@ -1384,18 +1400,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   };
   const isFirst = !refState.current.renderItem;
-  if (isFirst || dataProp !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
-    if (!keyExtractorProp && !isFirst && dataProp !== refState.current.data) {
+  if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
+    if (!keyExtractorProp && !isFirst && didDataChange) {
       refState.current.sizes.clear();
       refState.current.positions.clear();
     }
-    refState.current.data = dataProp;
-    const indexByKey = /* @__PURE__ */ new Map();
-    for (let i = 0; i < dataProp.length; i++) {
-      const key = getId(i);
-      indexByKey.set(key, i);
-    }
-    refState.current.indexByKey = indexByKey;
     calcTotalSizesAndPositions({ forgetPositions: false });
   }
   useEffect(() => {
@@ -1408,17 +1417,22 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   refState.current.renderItem = renderItem;
-  const lastItemKey = dataProp.length > 0 ? getId(dataProp.length - 1) : void 0;
+  const memoizedLastItemKeys = useMemo(() => {
+    if (!dataProp.length) return [];
+    return new Set(
+      Array.from({ length: Math.min(numColumnsProp, dataProp.length) }, (_, i) => getId(dataProp.length - 1 - i))
+    );
+  }, [dataProp.length, numColumnsProp, dataProp.slice(-numColumnsProp).toString()]);
   const stylePaddingTop = (_d = (_c = (_a = StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
   const initalizeStateVars = () => {
-    set$(ctx, "lastItemKey", lastItemKey);
+    set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
     set$(ctx, "stylePaddingTop", stylePaddingTop);
   };
   if (isFirst) {
     initalizeStateVars();
   }
-  useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
+  useEffect(initalizeStateVars, [memoizedLastItemKeys, numColumnsProp, stylePaddingTop]);
   const getRenderedItem = useCallback((key) => {
     var _a2, _b2;
     const state = refState.current;
@@ -1450,34 +1464,40 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       useRecyclingEffect: useRecyclingEffect2,
       useRecyclingState: useRecyclingState2
     });
-    return { index, renderedItem };
+    return { index, item: data[index], renderedItem };
   }, []);
-  useInit(() => {
+  const doInitialAllocateContainers = () => {
     var _a2;
     const state = refState.current;
-    const viewability = setupViewability(props);
-    state.viewabilityConfigCallbackPairs = viewability;
-    state.enableScrollForNextCalculateItemsInView = !viewability;
     const scrollLength = state.scrollLength;
-    const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, dataProp[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
-    for (let i = 0; i < numContainers; i++) {
-      set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
-      set$(ctx, `containerColumn${i}`, -1);
-    }
-    set$(ctx, "numContainers", numContainers);
-    set$(ctx, "numContainersPooled", numContainers * 2);
-    if (initialScrollIndex) {
-      requestAnimationFrame(() => {
+    if (scrollLength > 0 && !peek$(ctx, "numContainers")) {
+      const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, dataProp[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
+      const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
+      for (let i = 0; i < numContainers; i++) {
+        set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
+        set$(ctx, `containerColumn${i}`, -1);
+      }
+      set$(ctx, "numContainers", numContainers);
+      set$(ctx, "numContainersPooled", numContainers * 2);
+      if (initialScrollIndex) {
+        requestAnimationFrame(() => {
+          calculateItemsInView(state.scrollVelocity);
+        });
+      } else {
         calculateItemsInView(state.scrollVelocity);
-      });
-    } else {
-      calculateItemsInView(state.scrollVelocity);
+      }
     }
+  };
+  useInit(() => {
+    const state = refState.current;
+    const viewability = setupViewability(props);
+    state.viewabilityConfigCallbackPairs = viewability;
+    state.enableScrollForNextCalculateItemsInView = !viewability;
+    doInitialAllocateContainers();
   });
   const updateItemSize = useCallback((containerId, itemKey, size) => {
     const state = refState.current;
-    const { sizes, indexByKey, columns, sizesLaidOut, data, rowHeights } = state;
+    const { sizes, indexByKey, sizesLaidOut, data, rowHeights } = state;
     if (!data) {
       return;
     }
@@ -1485,8 +1505,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const numColumns = peek$(ctx, "numColumns");
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const prevSize = getItemSize(itemKey, index, data);
+    let needsCalculate = false;
+    if (state.numPendingInitialLayout > 0) {
+      state.numPendingInitialLayout--;
+      if (state.numPendingInitialLayout === 0) {
+        needsCalculate = true;
+        state.numPendingInitialLayout = -1;
+        queueMicrotask(() => {
+          set$(ctx, "containersDidLayout", true);
+        });
+      }
+    }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
+      needsCalculate = true;
       if (numColumns > 1) {
         const rowNumber = Math.floor(index / numColumnsProp);
         const prevSizeInRow = getRowHeight(rowNumber);
@@ -1520,22 +1552,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       refState.current.scrollForNextCalculateItemsInView = void 0;
       addTotalSize(itemKey, diff, 0);
       doMaintainScrollAtEnd(true);
-      const scrollVelocity = state.scrollVelocity;
-      if (!state.waitingForMicrotask && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
-        if (!peek$(ctx, "containersDidLayout")) {
-          state.waitingForMicrotask = true;
-          queueMicrotask(() => {
-            if (state.waitingForMicrotask) {
-              state.waitingForMicrotask = false;
-              calculateItemsInView(state.scrollVelocity);
-            }
-          });
-        } else {
-          calculateItemsInView(state.scrollVelocity);
-        }
-      }
       if (onItemSizeChanged) {
-        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data[index] });
+        onItemSizeChanged({
+          size,
+          previous: prevSize,
+          index,
+          itemKey,
+          itemData: data[index]
+        });
+      }
+    }
+    if (needsCalculate) {
+      const scrollVelocity = state.scrollVelocity;
+      if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
+        calculateItemsInView(state.scrollVelocity);
       }
     }
   }, []);
@@ -1547,7 +1577,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const onLayout = useCallback((event) => {
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
     const didChange = scrollLength !== refState.current.scrollLength;
+    refState.current.scrollLength;
     refState.current.scrollLength = scrollLength;
+    doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
     doUpdatePaddingTop();
     checkAtBottom();
@@ -1667,7 +1699,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             scrollToIndex({ index, animated });
           }
         },
-        scrollToEnd: () => refScroller.current.scrollToEnd()
+        scrollToEnd: (options) => refScroller.current.scrollToEnd(options)
       };
     },
     []
@@ -1700,6 +1732,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       maintainVisibleContentPosition,
       scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : Platform.OS === "web" ? 16 : void 0,
       waitForInitialLayout,
+      refreshControl: props.refreshControl == null ? /* @__PURE__ */ React6.createElement(
+        RefreshControl,
+        {
+          refreshing: !!refreshing,
+          onRefresh,
+          progressViewOffset
+        }
+      ) : props.refreshControl,
       style
     }
   ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React6.createElement(DebugView, { state: refState.current }));

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.17",
   "description": "Legend List aims to be a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,

package/reanimated.d.mts CHANGED Viewed

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

package/reanimated.d.ts CHANGED Viewed

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