@legendapp/list 3.0.0-beta.28 → 3.0.0-beta.29

package/index.d.mts

@@ -5,7 +5,7 @@ import Reanimated from 'react-native-reanimated';
 
 type AnimatedValue = number;
 
-type ListenerType = "activeStickyIndex" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | `containerColumn${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}` | `containerStickyOffset${number}`;
+type ListenerType = "activeStickyIndex" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -42,9 +42,9 @@ type ListenerTypeValueMap = {
 } & {
     [K in ListenerType as K extends `containerColumn${number}` ? K : never]: number;
 } & {
-    [K in ListenerType as K extends `containerSticky${number}` ? K : never]: boolean;
+    [K in ListenerType as K extends `containerSpan${number}` ? K : never]: number;
 } & {
-    [K in ListenerType as K extends `containerStickyOffset${number}` ? K : never]: number;
+    [K in ListenerType as K extends `containerSticky${number}` ? K : never]: boolean;
 };
 interface StateContext {
     animatedScrollY: AnimatedValue;
@@ -160,6 +160,13 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Use instead of FlatList's getItemLayout or FlashList overrideItemLayout if you want to have accurate initialScrollOffset, you should provide this function
      */
     getEstimatedItemSize?: (item: ItemT, index: number, type: TItemType) => number;
+    /**
+     * Customize layout for multi-column lists, such as allowing items to span multiple columns.
+     * Similar to FlashList's overrideItemLayout.
+     */
+    overrideItemLayout?: (layout: {
+        span?: number;
+    }, item: ItemT, index: number, maxColumns: number, extraData?: any) => void;
     /**
      * Ratio of initial container pool size to data length (e.g., 0.5 for half).
      * @default 2
@@ -429,6 +436,7 @@ interface InternalState {
         avg: number;
     }>;
     columns: Map<string, number>;
+    columnSpans: Map<string, number>;
     containerItemKeys: Map<string, number>;
     containerItemTypes: Map<number, string>;
     dataChangeNeedsScrollUpdate: boolean;
@@ -542,6 +550,7 @@ interface InternalState {
         onStartReached: LegendListProps["onStartReached"];
         onStartReachedThreshold: number | null | undefined;
         onStickyHeaderChange: LegendListProps["onStickyHeaderChange"];
+        overrideItemLayout: LegendListProps["overrideItemLayout"];
         recycleItems: boolean;
         renderItem: LegendListProps["renderItem"];
         scrollBuffer: number;

package/index.d.ts

@@ -5,7 +5,7 @@ import Reanimated from 'react-native-reanimated';
 
 type AnimatedValue = number;
 
-type ListenerType = "activeStickyIndex" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | `containerColumn${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}` | `containerStickyOffset${number}`;
+type ListenerType = "activeStickyIndex" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -42,9 +42,9 @@ type ListenerTypeValueMap = {
 } & {
     [K in ListenerType as K extends `containerColumn${number}` ? K : never]: number;
 } & {
-    [K in ListenerType as K extends `containerSticky${number}` ? K : never]: boolean;
+    [K in ListenerType as K extends `containerSpan${number}` ? K : never]: number;
 } & {
-    [K in ListenerType as K extends `containerStickyOffset${number}` ? K : never]: number;
+    [K in ListenerType as K extends `containerSticky${number}` ? K : never]: boolean;
 };
 interface StateContext {
     animatedScrollY: AnimatedValue;
@@ -160,6 +160,13 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Use instead of FlatList's getItemLayout or FlashList overrideItemLayout if you want to have accurate initialScrollOffset, you should provide this function
      */
     getEstimatedItemSize?: (item: ItemT, index: number, type: TItemType) => number;
+    /**
+     * Customize layout for multi-column lists, such as allowing items to span multiple columns.
+     * Similar to FlashList's overrideItemLayout.
+     */
+    overrideItemLayout?: (layout: {
+        span?: number;
+    }, item: ItemT, index: number, maxColumns: number, extraData?: any) => void;
     /**
      * Ratio of initial container pool size to data length (e.g., 0.5 for half).
      * @default 2
@@ -429,6 +436,7 @@ interface InternalState {
         avg: number;
     }>;
     columns: Map<string, number>;
+    columnSpans: Map<string, number>;
     containerItemKeys: Map<string, number>;
     containerItemTypes: Map<number, string>;
     dataChangeNeedsScrollUpdate: boolean;
@@ -542,6 +550,7 @@ interface InternalState {
         onStartReached: LegendListProps["onStartReached"];
         onStartReachedThreshold: number | null | undefined;
         onStickyHeaderChange: LegendListProps["onStickyHeaderChange"];
+        overrideItemLayout: LegendListProps["overrideItemLayout"];
         recycleItems: boolean;
         renderItem: LegendListProps["renderItem"];
         scrollBuffer: number;

package/index.js

@@ -314,7 +314,7 @@ var PositionViewState = typedMemo(function PositionViewState2({
   };
   const composed = isArray(style) ? Object.assign({}, ...style) : style;
   const combinedStyle = horizontal ? { ...base, ...composed, left: position } : { ...base, ...composed, top: position };
-  const { animatedScrollY, stickyOffset, onLayout, index, ...webProps } = props;
+  const { animatedScrollY, onLayout, index, ...webProps } = props;
   return /* @__PURE__ */ React3__namespace.createElement("div", { ref: refView, ...webProps, style: combinedStyle });
 });
 var PositionViewSticky = typedMemo(function PositionViewSticky2({
@@ -323,16 +323,12 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   style,
   refView,
   index,
-  stickyOffset,
   animatedScrollY: _animatedScrollY,
+  stickyHeaderConfig,
   children,
   ...rest
 }) {
-  const [position = POSITION_OUT_OF_VIEW, headerSize = 0, activeStickyIndex] = useArr$([
-    `containerPosition${id}`,
-    "headerSize",
-    "activeStickyIndex"
-  ]);
+  const [position = POSITION_OUT_OF_VIEW, activeStickyIndex] = useArr$([`containerPosition${id}`, "activeStickyIndex"]);
   const base = {
     contain: "paint layout style"
   };
@@ -347,7 +343,8 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
     var _a3;
     const styleBase = { ...base, ...composed };
     delete styleBase.transform;
-    const offset = (_a3 = stickyOffset != null ? stickyOffset : headerSize) != null ? _a3 : 0;
+    const stickyConfigOffset = (_a3 = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a3 : 0;
+    const offset = stickyConfigOffset != null ? stickyConfigOffset : 0;
     const isActive = activeStickyIndex === index;
     styleBase.position = isActive ? "sticky" : "absolute";
     styleBase.zIndex = index + 1e3;
@@ -357,7 +354,7 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
       styleBase.top = isActive ? offset : position;
     }
     return styleBase;
-  }, [composed, horizontal, position, index, stickyOffset, headerSize, activeStickyIndex]);
+  }, [composed, horizontal, position, index, activeStickyIndex, stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset]);
   return /* @__PURE__ */ React3__namespace.createElement("div", { ref: refView, style: viewStyle, ...rest }, children);
 });
 var PositionView = PositionViewState;
@@ -630,14 +627,14 @@ var Container = typedMemo(function Container2({
 }) {
   const ctx = useStateContext();
   const { columnWrapperStyle, animatedScrollY } = ctx;
-  const [column = 0, data, itemKey, numColumns, extraData, isSticky, stickyOffset] = useArr$([
+  const [column = 0, span = 1, data, itemKey, numColumns = 1, extraData, isSticky] = useArr$([
     `containerColumn${id}`,
+    `containerSpan${id}`,
     `containerItemData${id}`,
     `containerItemKey${id}`,
     "numColumns",
     "extraData",
-    `containerSticky${id}`,
-    `containerStickyOffset${id}`
+    `containerSticky${id}`
   ]);
   const itemLayoutRef = React3.useRef({
     horizontal,
@@ -649,8 +646,10 @@ var Container = typedMemo(function Container2({
   itemLayoutRef.current.updateItemSize = updateItemSize2;
   const ref = React3.useRef(null);
   const [layoutRenderCount, forceLayoutRender] = React3.useState(0);
-  const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
-  const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
+  const resolvedColumn = column > 0 ? column : 1;
+  const resolvedSpan = Math.min(Math.max(span || 1, 1), numColumns);
+  const otherAxisPos = numColumns > 1 ? `${(resolvedColumn - 1) / numColumns * 100}%` : 0;
+  const otherAxisSize = numColumns > 1 ? `${resolvedSpan / numColumns * 100}%` : void 0;
   const didLayoutRef = React3.useRef(false);
   const style = React3.useMemo(() => {
     let paddingStyles;
@@ -741,7 +740,6 @@ var Container = typedMemo(function Container2({
       onLayout,
       refView: ref,
       stickyHeaderConfig,
-      stickyOffset: isSticky ? stickyOffset : void 0,
       style
     },
     /* @__PURE__ */ React3__namespace.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React3__namespace.createElement(Separator, { ItemSeparatorComponent, leadingItem: renderedItemInfo.item }))
@@ -1206,6 +1204,14 @@ var ListComponent = typedMemo(function ListComponent2({
     [renderScrollComponent]
   ) : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
+  React3.useLayoutEffect(() => {
+    if (!ListHeaderComponent) {
+      set$(ctx, "headerSize", 0);
+    }
+    if (!ListFooterComponent) {
+      set$(ctx, "footerSize", 0);
+    }
+  }, [ListHeaderComponent, ListFooterComponent, ctx]);
   return /* @__PURE__ */ React3__namespace.createElement(
     SnapOrScroll,
     {
@@ -1591,7 +1597,8 @@ function checkAtBottom(ctx) {
   } = state;
   const contentSize = getContentSize(ctx);
   if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
-    const distanceFromEnd = contentSize - scroll - scrollLength;
+    const insetEnd = getContentInsetEnd(state);
+    const distanceFromEnd = contentSize - scroll - scrollLength - insetEnd;
     const isContentLess = contentSize < scrollLength;
     state.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
     state.isEndReached = checkThreshold(
@@ -1887,11 +1894,13 @@ function calculateRowMaxSize(ctx, startIndex, endIndex, useAverageSize) {
 
 // src/core/updateTotalSize.ts
 function updateTotalSize(ctx) {
+  var _a3, _b, _c;
   const state = ctx.state;
   const {
     positions,
     props: { data }
   } = state;
+  const numColumns = (_a3 = peek$(ctx, "numColumns")) != null ? _a3 : 1;
   if (data.length === 0) {
     addTotalSize(ctx, null, 0);
   } else {
@@ -1899,10 +1908,31 @@ function updateTotalSize(ctx) {
     if (lastId !== void 0) {
       const lastPosition = positions.get(lastId);
       if (lastPosition !== void 0) {
-        const lastSize = getItemSize(ctx, lastId, data.length - 1, data[data.length - 1]);
-        if (lastSize !== void 0) {
-          const totalSize = lastPosition + lastSize;
-          addTotalSize(ctx, null, totalSize);
+        if (numColumns > 1) {
+          let rowStart = data.length - 1;
+          while (rowStart > 0) {
+            const rowId = (_b = state.idCache[rowStart]) != null ? _b : getId(state, rowStart);
+            const column = state.columns.get(rowId);
+            if (column === 1 || column === void 0) {
+              break;
+            }
+            rowStart -= 1;
+          }
+          let maxSize = 0;
+          for (let i = rowStart; i < data.length; i++) {
+            const rowId = (_c = state.idCache[i]) != null ? _c : getId(state, i);
+            const size = getItemSize(ctx, rowId, i, data[i]);
+            if (size > maxSize) {
+              maxSize = size;
+            }
+          }
+          addTotalSize(ctx, null, lastPosition + maxSize);
+        } else {
+          const lastSize = getItemSize(ctx, lastId, data.length - 1, data[data.length - 1]);
+          if (lastSize !== void 0) {
+            const totalSize = lastPosition + lastSize;
+            addTotalSize(ctx, null, totalSize);
+          }
         }
       }
     }
@@ -1971,30 +2001,36 @@ function updateItemPositions(ctx, dataChanged, { startIndex, scrollBottomBuffere
   scrollBottomBuffered: -1,
   startIndex: 0
 }) {
-  var _a3, _b, _c, _d, _e;
+  var _a3, _b, _c, _d, _e, _f;
   const state = ctx.state;
   const {
     columns,
+    columnSpans,
     indexByKey,
     positions,
     idCache,
     sizesKnown,
-    props: { data, getEstimatedItemSize, snapToIndices },
+    props: { data, getEstimatedItemSize, overrideItemLayout, snapToIndices },
     scrollingTo
   } = state;
   const dataLength = data.length;
-  const numColumns = peek$(ctx, "numColumns");
+  const numColumns = (_a3 = peek$(ctx, "numColumns")) != null ? _a3 : 1;
   const hasColumns = numColumns > 1;
   const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
+  const extraData = peek$(ctx, "extraData");
+  const layoutConfig = overrideItemLayout ? { span: 1 } : void 0;
   const lastScrollDelta = state.lastScrollDelta;
   const velocity = getScrollVelocity(state);
   const shouldOptimize = !forceFullUpdate && !dataChanged && (Math.abs(velocity) > 0 || state.scrollLength > 0 && lastScrollDelta > state.scrollLength);
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = !getEstimatedItemSize;
-  const preferCachedSize = !doMVCP || dataChanged || state.scrollAdjustHandler.getAdjust() !== 0 || ((_a3 = peek$(ctx, "scrollAdjustPending")) != null ? _a3 : 0) !== 0;
+  const preferCachedSize = !doMVCP || dataChanged || state.scrollAdjustHandler.getAdjust() !== 0 || ((_b = peek$(ctx, "scrollAdjustPending")) != null ? _b : 0) !== 0;
   let currentRowTop = 0;
   let column = 1;
   let maxSizeInRow = 0;
+  if (dataChanged) {
+    columnSpans.clear();
+  }
   if (startIndex > 0) {
     if (hasColumns) {
       const { startIndex: processedStartIndex, currentRowTop: initialRowTop } = prepareColumnStartState(
@@ -2007,8 +2043,8 @@ function updateItemPositions(ctx, dataChanged, { startIndex, scrollBottomBuffere
     } else if (startIndex < dataLength) {
       const prevIndex = startIndex - 1;
       const prevId = getId(state, prevIndex);
-      const prevPosition = (_b = positions.get(prevId)) != null ? _b : 0;
-      const prevSize = (_c = sizesKnown.get(prevId)) != null ? _c : getItemSize(ctx, prevId, prevIndex, data[prevIndex], useAverageSize, preferCachedSize);
+      const prevPosition = (_c = positions.get(prevId)) != null ? _c : 0;
+      const prevSize = (_d = sizesKnown.get(prevId)) != null ? _d : getItemSize(ctx, prevId, prevIndex, data[prevIndex], useAverageSize, preferCachedSize);
       currentRowTop = prevPosition + prevSize;
     }
   }
@@ -2024,8 +2060,22 @@ function updateItemPositions(ctx, dataChanged, { startIndex, scrollBottomBuffere
       const itemsPerRow = hasColumns ? numColumns : 1;
       breakAt = i + itemsPerRow + 10;
     }
-    const id = (_d = idCache[i]) != null ? _d : getId(state, i);
-    const size = (_e = sizesKnown.get(id)) != null ? _e : getItemSize(ctx, id, i, data[i], useAverageSize, preferCachedSize);
+    const id = (_e = idCache[i]) != null ? _e : getId(state, i);
+    let span = 1;
+    if (hasColumns && overrideItemLayout && layoutConfig) {
+      layoutConfig.span = 1;
+      overrideItemLayout(layoutConfig, data[i], i, numColumns, extraData);
+      const requestedSpan = layoutConfig.span;
+      if (requestedSpan !== void 0 && Number.isFinite(requestedSpan)) {
+        span = Math.max(1, Math.min(numColumns, Math.round(requestedSpan)));
+      }
+    }
+    if (hasColumns && column + span - 1 > numColumns) {
+      currentRowTop += maxSizeInRow;
+      column = 1;
+      maxSizeInRow = 0;
+    }
+    const size = (_f = sizesKnown.get(id)) != null ? _f : getItemSize(ctx, id, i, data[i], useAverageSize, preferCachedSize);
     if (IS_DEV && needsIndexByKey) {
       if (indexByKeyForChecking.has(id)) {
         console.error(
@@ -2042,11 +2092,12 @@ function updateItemPositions(ctx, dataChanged, { startIndex, scrollBottomBuffere
       indexByKey.set(id, i);
     }
     columns.set(id, column);
+    columnSpans.set(id, span);
     if (hasColumns) {
       if (size > maxSizeInRow) {
         maxSizeInRow = size;
       }
-      column++;
+      column += span;
       if (column > numColumns) {
         currentRowTop += maxSizeInRow;
         column = 1;
@@ -2496,7 +2547,6 @@ function handleStickyRecycling(ctx, stickyArray, scroll, scrollBuffer, currentSt
     if (arrayIdx === -1) {
       state.stickyContainerPool.delete(containerIndex);
       set$(ctx, `containerSticky${containerIndex}`, false);
-      set$(ctx, `containerStickyOffset${containerIndex}`, void 0);
       continue;
     }
     const isRecentSticky = arrayIdx >= currentStickyIdx - 1 && arrayIdx <= currentStickyIdx + 1;
@@ -2523,9 +2573,10 @@ function handleStickyRecycling(ctx, stickyArray, scroll, scrollBuffer, currentSt
 function calculateItemsInView(ctx, params = {}) {
   const state = ctx.state;
   reactDom.unstable_batchedUpdates(() => {
-    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
     const {
       columns,
+      columnSpans,
       containerItemKeys,
       enableScrollForNextCalculateItemsInView,
       idCache,
@@ -2643,9 +2694,15 @@ function calculateItemsInView(ctx, params = {}) {
         break;
       }
     }
-    const loopStartMod = loopStart % numColumns;
-    if (loopStartMod > 0) {
-      loopStart -= loopStartMod;
+    if (numColumns > 1) {
+      while (loopStart > 0) {
+        const loopId = (_e = idCache[loopStart]) != null ? _e : getId(state, loopStart);
+        const loopColumn = columns.get(loopId);
+        if (loopColumn === 1 || loopColumn === void 0) {
+          break;
+        }
+        loopStart -= 1;
+      }
     }
     let foundEnd = false;
     let nextTop;
@@ -2661,8 +2718,8 @@ function calculateItemsInView(ctx, params = {}) {
     let firstFullyOnScreenIndex;
     const dataLength = data.length;
     for (let i = Math.max(0, loopStart); i < dataLength && (!foundEnd || i <= maxIndexRendered); i++) {
-      const id = (_e = idCache[i]) != null ? _e : getId(state, i);
-      const size = (_f = sizes.get(id)) != null ? _f : getItemSize(ctx, id, i, data[i]);
+      const id = (_f = idCache[i]) != null ? _f : getId(state, i);
+      const size = (_g = sizes.get(id)) != null ? _g : getItemSize(ctx, id, i, data[i]);
       const top = positions.get(id);
       if (!foundEnd) {
         if (startNoBuffer === null && top + size > scroll) {
@@ -2699,7 +2756,7 @@ function calculateItemsInView(ctx, params = {}) {
     }
     const idsInView = [];
     for (let i = firstFullyOnScreenIndex; i <= endNoBuffer; i++) {
-      const id = (_g = idCache[i]) != null ? _g : getId(state, i);
+      const id = (_h = idCache[i]) != null ? _h : getId(state, i);
       idsInView.push(id);
     }
     Object.assign(state, {
@@ -2731,7 +2788,7 @@ function calculateItemsInView(ctx, params = {}) {
       const needNewContainers = [];
       const needNewContainersSet = /* @__PURE__ */ new Set();
       for (let i = startBuffered; i <= endBuffered; i++) {
-        const id = (_h = idCache[i]) != null ? _h : getId(state, i);
+        const id = (_i = idCache[i]) != null ? _i : getId(state, i);
         if (!containerItemKeys.has(id)) {
           needNewContainersSet.add(i);
           needNewContainers.push(i);
@@ -2740,7 +2797,7 @@ function calculateItemsInView(ctx, params = {}) {
       if (alwaysRenderArr.length > 0) {
         for (const index of alwaysRenderArr) {
           if (index < 0 || index >= dataLength) continue;
-          const id = (_i = idCache[index]) != null ? _i : getId(state, index);
+          const id = (_j = idCache[index]) != null ? _j : getId(state, index);
           if (id && !containerItemKeys.has(id) && !needNewContainersSet.has(index)) {
             needNewContainersSet.add(index);
             needNewContainers.push(index);
@@ -2778,7 +2835,7 @@ function calculateItemsInView(ctx, params = {}) {
         for (let idx = 0; idx < needNewContainers.length; idx++) {
           const i = needNewContainers[idx];
           const containerIndex = availableContainers[idx];
-          const id = (_j = idCache[i]) != null ? _j : getId(state, i);
+          const id = (_k = idCache[i]) != null ? _k : getId(state, i);
           const oldKey = peek$(ctx, `containerItemKey${containerIndex}`);
           if (oldKey && oldKey !== id) {
             containerItemKeys.delete(oldKey);
@@ -2794,13 +2851,10 @@ function calculateItemsInView(ctx, params = {}) {
           const isAlwaysRender = alwaysRenderSet.has(i);
           if (isSticky) {
             set$(ctx, containerSticky, true);
-            const topPadding = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
-            set$(ctx, `containerStickyOffset${containerIndex}`, topPadding);
             state.stickyContainerPool.add(containerIndex);
           } else {
             if (peek$(ctx, containerSticky)) {
               set$(ctx, containerSticky, false);
-              set$(ctx, `containerStickyOffset${containerIndex}`, void 0);
             }
             if (isAlwaysRender) {
               state.stickyContainerPool.add(containerIndex);
@@ -2822,7 +2876,7 @@ function calculateItemsInView(ctx, params = {}) {
       if (alwaysRenderArr.length > 0) {
         for (const index of alwaysRenderArr) {
           if (index < 0 || index >= dataLength) continue;
-          const id = (_k = idCache[index]) != null ? _k : getId(state, index);
+          const id = (_l = idCache[index]) != null ? _l : getId(state, index);
           const containerIndex = containerItemKeys.get(id);
           if (containerIndex !== void 0) {
             state.stickyContainerPool.add(containerIndex);
@@ -2851,26 +2905,28 @@ function calculateItemsInView(ctx, params = {}) {
         state.containerItemTypes.delete(i);
         if (state.stickyContainerPool.has(i)) {
           set$(ctx, `containerSticky${i}`, false);
-          set$(ctx, `containerStickyOffset${i}`, void 0);
           state.stickyContainerPool.delete(i);
         }
         set$(ctx, `containerItemKey${i}`, void 0);
         set$(ctx, `containerItemData${i}`, void 0);
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
         set$(ctx, `containerColumn${i}`, -1);
+        set$(ctx, `containerSpan${i}`, 1);
       } else {
         const itemIndex = indexByKey.get(itemKey);
         const item = data[itemIndex];
         if (item !== void 0) {
-          const id = (_l = idCache[itemIndex]) != null ? _l : getId(state, itemIndex);
+          const id = (_m = idCache[itemIndex]) != null ? _m : getId(state, itemIndex);
           const positionValue = positions.get(id);
           if (positionValue === void 0) {
             set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
           } else {
             const position = (positionValue || 0) - scrollAdjustPending;
             const column = columns.get(id) || 1;
+            const span = columnSpans.get(id) || 1;
             const prevPos = peek$(ctx, `containerPosition${i}`);
             const prevColumn = peek$(ctx, `containerColumn${i}`);
+            const prevSpan = peek$(ctx, `containerSpan${i}`);
             const prevData = peek$(ctx, `containerItemData${i}`);
             if (position > POSITION_OUT_OF_VIEW && position !== prevPos) {
               set$(ctx, `containerPosition${i}`, position);
@@ -2879,6 +2935,9 @@ function calculateItemsInView(ctx, params = {}) {
             if (column >= 0 && column !== prevColumn) {
               set$(ctx, `containerColumn${i}`, column);
             }
+            if (span !== prevSpan) {
+              set$(ctx, `containerSpan${i}`, span);
+            }
             if (prevData !== item && (itemsAreEqual ? !itemsAreEqual(prevData, item, itemIndex, data) : true)) {
               set$(ctx, `containerItemData${i}`, item);
             }
@@ -3116,6 +3175,7 @@ function doInitialAllocateContainers(ctx) {
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
       set$(ctx, `containerColumn${i}`, -1);
+      set$(ctx, `containerSpan${i}`, 1);
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * state.props.initialContainerPoolRatio);
@@ -3752,6 +3812,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     maintainScrollAtEndThreshold = 0.1,
     maintainVisibleContentPosition: maintainVisibleContentPositionProp,
     numColumns: numColumnsProp = 1,
+    overrideItemLayout,
     onEndReached,
     onEndReachedThreshold = 0.5,
     onItemSizeChanged,
@@ -3781,7 +3842,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewabilityConfig,
     viewabilityConfigCallbackPairs,
     waitForInitialLayout = true,
-    stickyHeaderConfig,
     ...rest
   } = props;
   const animatedPropsInternal = props.animatedPropsInternal;
@@ -3840,6 +3900,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     );
   }
   const refState = React3.useRef();
+  const hasOverrideItemLayout = !!overrideItemLayout;
+  const prevHasOverrideItemLayout = React3.useRef(hasOverrideItemLayout);
   if (!refState.current) {
     if (!ctx.state) {
       const initialScrollLength = (estimatedListSize != null ? estimatedListSize : { height: 0, width: 0 } )[horizontal ? "width" : "height"];
@@ -3847,6 +3909,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         activeStickyIndex: -1,
         averageSizes: {},
         columns: /* @__PURE__ */ new Map(),
+        columnSpans: /* @__PURE__ */ new Map(),
         containerItemKeys: /* @__PURE__ */ new Map(),
         containerItemTypes: /* @__PURE__ */ new Map(),
         contentInsetOverride: void 0,
@@ -3953,6 +4016,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onStartReached,
     onStartReachedThreshold,
     onStickyHeaderChange,
+    overrideItemLayout,
     recycleItems: !!recycleItems,
     renderItem,
     scrollBuffer,
@@ -3971,14 +4035,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       (_, i) => getId(state, dataProp.length - 1 - i)
     );
   }, [dataProp, dataVersion, numColumnsProp]);
-  const initializeStateVars = () => {
+  const initializeStateVars = (shouldAdjustPadding) => {
     set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
     const prevPaddingTop = peek$(ctx, "stylePaddingTop");
     setPaddingTop(ctx, { stylePaddingTop: stylePaddingTopState });
     refState.current.props.stylePaddingBottom = stylePaddingBottomState;
     let paddingDiff = stylePaddingTopState - prevPaddingTop;
-    if (maintainVisibleContentPositionConfig.size && paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
+    if (shouldAdjustPadding && maintainVisibleContentPositionConfig.size && paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
       if (state.scroll < 0) {
         paddingDiff += state.scroll;
       }
@@ -3986,7 +4050,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
   };
   if (isFirstLocal) {
-    initializeStateVars();
+    initializeStateVars(false);
     updateItemPositions(
       ctx,
       /*dataChanged*/
@@ -4085,15 +4149,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.isFirst = false;
   }, [dataProp, dataVersion, numColumnsProp]);
   React3.useLayoutEffect(() => {
+    var _a4;
     set$(ctx, "extraData", extraData);
-  }, [extraData]);
-  React3.useLayoutEffect(initializeStateVars, [
-    dataVersion,
-    memoizedLastItemKeys.join(","),
-    numColumnsProp,
-    stylePaddingBottomState,
-    stylePaddingTopState
-  ]);
+    const didToggleOverride = prevHasOverrideItemLayout.current !== hasOverrideItemLayout;
+    prevHasOverrideItemLayout.current = hasOverrideItemLayout;
+    if ((hasOverrideItemLayout || didToggleOverride) && numColumnsProp > 1) {
+      (_a4 = state.triggerCalculateItemsInView) == null ? void 0 : _a4.call(state, { forceFullItemPositions: true });
+    }
+  }, [extraData, hasOverrideItemLayout, numColumnsProp]);
+  React3.useLayoutEffect(
+    () => initializeStateVars(true),
+    [dataVersion, memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingBottomState, stylePaddingTopState]
+  );
   React3.useEffect(() => {
     if (!onMetricsChange) {
       return;
@@ -4177,7 +4244,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       scrollAdjustHandler: (_d = refState.current) == null ? void 0 : _d.scrollAdjustHandler,
       scrollEventThrottle: 0,
       snapToIndices,
-      stickyHeaderConfig,
       stickyHeaderIndices,
       style,
       updateItemSize: fns.updateItemSize,