@legendapp/list 2.0.9 → 2.0.10

package/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React2 = require('react');
+var React3 = require('react');
 var reactNative = require('react-native');
 var shim = require('use-sync-external-store/shim');
 
@@ -22,12 +22,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // src/components/LegendList.tsx
-var ContextState = React2__namespace.createContext(null);
+var ContextState = React3__namespace.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React2__namespace.useState(() => ({
+  const [value] = React3__namespace.useState(() => ({
     animatedScrollY: new reactNative.Animated.Value(0),
     columnWrapperStyle: void 0,
     internalState: void 0,
@@ -46,10 +46,10 @@ function StateProvider({ children }) {
     ]),
     viewRefs: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React2__namespace.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React3__namespace.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React2__namespace.useContext(ContextState);
+  return React3__namespace.useContext(ContextState);
 }
 function createSelectorFunctionsArr(ctx, signalNames) {
   let lastValues = [];
@@ -119,23 +119,23 @@ function getContentSize(ctx) {
   return headerSize + footerSize + totalSize + stylePaddingTop;
 }
 function useArr$(signalNames) {
-  const ctx = React2__namespace.useContext(ContextState);
-  const { subscribe, get } = React2__namespace.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const ctx = React3__namespace.useContext(ContextState);
+  const { subscribe, get } = React3__namespace.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
   const value = shim.useSyncExternalStore(subscribe, get);
   return value;
 }
 function useSelector$(signalName, selector) {
-  const ctx = React2__namespace.useContext(ContextState);
-  const { subscribe, get } = React2__namespace.useMemo(() => createSelectorFunctionsArr(ctx, [signalName]), [ctx, signalName]);
+  const ctx = React3__namespace.useContext(ContextState);
+  const { subscribe, get } = React3__namespace.useMemo(() => createSelectorFunctionsArr(ctx, [signalName]), [ctx, signalName]);
   const value = shim.useSyncExternalStore(subscribe, () => selector(get()[0]));
   return value;
 }
 
 // src/components/DebugView.tsx
 var DebugRow = ({ children }) => {
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
+  return /* @__PURE__ */ React3__namespace.createElement(reactNative.View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
 };
-var DebugView = React2__namespace.memo(function DebugView2({ state }) {
+var DebugView = React3__namespace.memo(function DebugView2({ state }) {
   const ctx = useStateContext();
   const [totalSize = 0, scrollAdjust = 0, rawScroll = 0, scroll = 0, _numContainers = 0, _numContainersPooled = 0] = useArr$([
     "totalSize",
@@ -146,11 +146,11 @@ var DebugView = React2__namespace.memo(function DebugView2({ state }) {
     "numContainersPooled"
   ]);
   const contentSize = getContentSize(ctx);
-  const [, forceUpdate] = React2.useReducer((x) => x + 1, 0);
+  const [, forceUpdate] = React3.useReducer((x) => x + 1, 0);
   useInterval(() => {
     forceUpdate();
   }, 100);
-  return /* @__PURE__ */ React2__namespace.createElement(
+  return /* @__PURE__ */ React3__namespace.createElement(
     reactNative.View,
     {
       pointerEvents: "none",
@@ -166,27 +166,22 @@ var DebugView = React2__namespace.memo(function DebugView2({ state }) {
         top: 0
       }
     },
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "TotalSize:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, totalSize.toFixed(2))),
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "ContentSize:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, contentSize.toFixed(2))),
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "At end:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, String(state.isAtEnd))),
-    /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null),
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "ScrollAdjust:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, scrollAdjust.toFixed(2))),
-    /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null),
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "RawScroll: "), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, rawScroll.toFixed(2))),
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "ComputedScroll: "), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, scroll.toFixed(2)))
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, "TotalSize:"), /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, totalSize.toFixed(2))),
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, "ContentSize:"), /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, contentSize.toFixed(2))),
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, "At end:"), /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, String(state.isAtEnd))),
+    /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null),
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, "ScrollAdjust:"), /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, scrollAdjust.toFixed(2))),
+    /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null),
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, "RawScroll: "), /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, rawScroll.toFixed(2))),
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, "ComputedScroll: "), /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, null, scroll.toFixed(2)))
   );
 });
 function useInterval(callback, delay) {
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const interval = setInterval(callback, delay);
     return () => clearInterval(interval);
   }, [delay]);
 }
-var LeanViewComponent = React2__namespace.forwardRef((props, ref) => {
-  return React2__namespace.createElement("RCTView", { ...props, ref });
-});
-LeanViewComponent.displayName = "RCTView";
-var LeanView = reactNative.Platform.OS === "android" || reactNative.Platform.OS === "ios" ? LeanViewComponent : reactNative.View;
 
 // src/constants.ts
 var POSITION_OUT_OF_VIEW = -1e7;
@@ -194,7 +189,7 @@ var ENABLE_DEVMODE = __DEV__ && false;
 var ENABLE_DEBUG_VIEW = __DEV__ && false;
 var IsNewArchitecture = global.nativeFabricUIManager != null;
 var useAnimatedValue = (initialValue) => {
-  return React2.useRef(new reactNative.Animated.Value(initialValue)).current;
+  return React3.useRef(new reactNative.Animated.Value(initialValue)).current;
 };
 
 // src/hooks/useValue$.ts
@@ -203,7 +198,7 @@ function useValue$(key, params) {
   const { getValue, delay } = params || {};
   const ctx = useStateContext();
   const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
-  React2.useMemo(() => {
+  React3.useMemo(() => {
     let newValue;
     let prevValue;
     let didQueueTask = false;
@@ -235,8 +230,8 @@ function useValue$(key, params) {
   }, []);
   return animValue;
 }
-var typedForwardRef = React2.forwardRef;
-var typedMemo = React2.memo;
+var typedForwardRef = React3.forwardRef;
+var typedMemo = React3.memo;
 
 // src/components/PositionView.tsx
 var PositionViewState = typedMemo(function PositionView({
@@ -247,8 +242,8 @@ var PositionViewState = typedMemo(function PositionView({
   ...rest
 }) {
   const [position = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
-  return /* @__PURE__ */ React2__namespace.createElement(
-    LeanView,
+  return /* @__PURE__ */ React3__namespace.createElement(
+    reactNative.View,
     {
       ref: refView,
       style: [
@@ -275,7 +270,7 @@ var PositionViewAnimated = typedMemo(function PositionView2({
   } else {
     position = horizontal ? { left: position$ } : { top: position$ };
   }
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { ref: refView, style: [style, position], ...rest });
+  return /* @__PURE__ */ React3__namespace.createElement(reactNative.Animated.View, { ref: refView, style: [style, position], ...rest });
 });
 var PositionViewSticky = typedMemo(function PositionViewSticky2({
   id,
@@ -288,8 +283,8 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   ...rest
 }) {
   const [position = POSITION_OUT_OF_VIEW, headerSize] = useArr$([`containerPosition${id}`, "headerSize"]);
-  const transform = React2__namespace.useMemo(() => {
-    if (animatedScrollY && stickyOffset) {
+  const transform = React3__namespace.useMemo(() => {
+    if (animatedScrollY && stickyOffset !== void 0) {
       const stickyPosition = animatedScrollY.interpolate({
         extrapolate: "clamp",
         inputRange: [position + headerSize, position + 5e3 + headerSize],
@@ -298,13 +293,13 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
       return horizontal ? [{ translateX: stickyPosition }] : [{ translateY: stickyPosition }];
     }
   }, [animatedScrollY, headerSize, horizontal, stickyOffset, position]);
-  const viewStyle = React2__namespace.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { ref: refView, style: viewStyle, ...rest });
+  const viewStyle = React3__namespace.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
+  return /* @__PURE__ */ React3__namespace.createElement(reactNative.Animated.View, { ref: refView, style: viewStyle, ...rest });
 });
 var PositionView3 = IsNewArchitecture ? PositionViewState : PositionViewAnimated;
 var symbolFirst = Symbol();
 function useInit(cb) {
-  const refValue = React2.useRef(symbolFirst);
+  const refValue = React3.useRef(symbolFirst);
   if (refValue.current === symbolFirst) {
     refValue.current = cb();
   }
@@ -343,10 +338,10 @@ function extractPadding(style, contentContainerStyle, type) {
 }
 
 // src/state/ContextContainer.ts
-var ContextContainer = React2.createContext(null);
+var ContextContainer = React3.createContext(null);
 function useViewability(callback, configId) {
   const ctx = useStateContext();
-  const { containerId } = React2.useContext(ContextContainer);
+  const { containerId } = React3.useContext(ContextContainer);
   const key = containerId + (configId != null ? configId : "");
   useInit(() => {
     const value = ctx.mapViewabilityValues.get(key);
@@ -355,7 +350,7 @@ function useViewability(callback, configId) {
     }
   });
   ctx.mapViewabilityCallbacks.set(key, callback);
-  React2.useEffect(
+  React3.useEffect(
     () => () => {
       ctx.mapViewabilityCallbacks.delete(key);
     },
@@ -364,7 +359,7 @@ function useViewability(callback, configId) {
 }
 function useViewabilityAmount(callback) {
   const ctx = useStateContext();
-  const { containerId } = React2.useContext(ContextContainer);
+  const { containerId } = React3.useContext(ContextContainer);
   useInit(() => {
     const value = ctx.mapViewabilityAmountValues.get(containerId);
     if (value) {
@@ -372,7 +367,7 @@ function useViewabilityAmount(callback) {
     }
   });
   ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-  React2.useEffect(
+  React3.useEffect(
     () => () => {
       ctx.mapViewabilityAmountCallbacks.delete(containerId);
     },
@@ -380,12 +375,12 @@ function useViewabilityAmount(callback) {
   );
 }
 function useRecyclingEffect(effect) {
-  const { index, value } = React2.useContext(ContextContainer);
-  const prevValues = React2.useRef({
+  const { index, value } = React3.useContext(ContextContainer);
+  const prevValues = React3.useRef({
     prevIndex: void 0,
     prevItem: void 0
   });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     let ret;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
@@ -403,12 +398,12 @@ function useRecyclingEffect(effect) {
   }, [index, value, effect]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value, itemKey, triggerLayout } = React2.useContext(ContextContainer);
-  const refState = React2.useRef({
+  const { index, value, itemKey, triggerLayout } = React3.useContext(ContextContainer);
+  const refState = React3.useRef({
     itemKey: null,
     value: null
   });
-  const [_, setRenderNum] = React2.useState(0);
+  const [_, setRenderNum] = React3.useState(0);
   const state = refState.current;
   if (state.itemKey !== itemKey) {
     state.itemKey = itemKey;
@@ -419,7 +414,7 @@ function useRecyclingState(valueOrFun) {
       prevItem: void 0
     }) : valueOrFun;
   }
-  const setState = React2.useCallback(
+  const setState = React3.useCallback(
     (newState) => {
       state.value = isFunction(newState) ? newState(state.value) : newState;
       setRenderNum((v) => v + 1);
@@ -430,7 +425,7 @@ function useRecyclingState(valueOrFun) {
   return [state.value, setState];
 }
 function useIsLastItem() {
-  const { itemKey } = React2.useContext(ContextContainer);
+  const { itemKey } = React3.useContext(ContextContainer);
   const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
   return isLast;
 }
@@ -442,7 +437,7 @@ var noop = () => {
 };
 function useSyncLayout() {
   if (IsNewArchitecture) {
-    const { triggerLayout: syncLayout } = React2.useContext(ContextContainer);
+    const { triggerLayout: syncLayout } = React3.useContext(ContextContainer);
     return syncLayout;
   } else {
     return noop;
@@ -452,7 +447,30 @@ function useSyncLayout() {
 // src/components/Separator.tsx
 function Separator({ ItemSeparatorComponent, leadingItem }) {
   const isLastItem = useIsLastItem();
-  return isLastItem ? null : /* @__PURE__ */ React2__namespace.createElement(ItemSeparatorComponent, { leadingItem });
+  return isLastItem ? null : /* @__PURE__ */ React3__namespace.createElement(ItemSeparatorComponent, { leadingItem });
+}
+function useOnLayoutSync({
+  ref,
+  onLayoutProp,
+  onLayoutChange
+}, deps = []) {
+  const onLayout = React3.useCallback(
+    (event) => {
+      onLayoutChange(event.nativeEvent.layout, false);
+      onLayoutProp == null ? void 0 : onLayoutProp(event);
+    },
+    [onLayoutChange]
+  );
+  if (IsNewArchitecture) {
+    React3.useLayoutEffect(() => {
+      if (ref.current) {
+        ref.current.measure((x, y, width, height) => {
+          onLayoutChange({ height, width, x, y }, true);
+        });
+      }
+    }, deps);
+  }
+  return { onLayout };
 }
 
 // src/components/Container.tsx
@@ -475,13 +493,13 @@ var Container = typedMemo(function Container2({
     `containerSticky${id}`,
     `containerStickyOffset${id}`
   ]);
-  const refLastSize = React2.useRef();
-  const ref = React2.useRef(null);
-  const [layoutRenderCount, forceLayoutRender] = React2.useState(0);
+  const refLastSize = React3.useRef();
+  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;
-  let didLayout = false;
-  const style = React2.useMemo(() => {
+  const didLayoutRef = React3.useRef(false);
+  const style = React3.useMemo(() => {
     let paddingStyles;
     if (columnWrapperStyle) {
       const { columnGap, rowGap, gap } = columnWrapperStyle;
@@ -513,12 +531,12 @@ var Container = typedMemo(function Container2({
       ...paddingStyles || {}
     };
   }, [horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns]);
-  const renderedItemInfo = React2.useMemo(
+  const renderedItemInfo = React3.useMemo(
     () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
-  const contextValue = React2.useMemo(() => {
+  const contextValue = React3.useMemo(() => {
     ctx.viewRefs.set(id, ref);
     return {
       containerId: id,
@@ -530,15 +548,16 @@ var Container = typedMemo(function Container2({
       value: data
     };
   }, [id, itemKey, index, data]);
-  const onLayout = (event) => {
+  const onLayoutChange = (rectangle) => {
     var _a, _b;
     if (!isNullOrUndefined(itemKey)) {
-      didLayout = true;
-      let layout = event.nativeEvent.layout;
-      const size = layout[horizontal ? "width" : "height"];
+      didLayoutRef.current = true;
+      let layout = rectangle;
+      const size = Math.floor(rectangle[horizontal ? "width" : "height"] * 8) / 8;
       const doUpdate = () => {
         refLastSize.current = { height: layout.height, width: layout.width };
         updateItemSize2(itemKey, layout);
+        didLayoutRef.current = true;
       };
       if (IsNewArchitecture || size > 0) {
         doUpdate();
@@ -550,25 +569,20 @@ var Container = typedMemo(function Container2({
       }
     }
   };
-  if (IsNewArchitecture) {
-    React2.useLayoutEffect(() => {
-      var _a, _b;
-      if (!isNullOrUndefined(itemKey)) {
-        const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
-        if (measured) {
-          const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
-          if (size) {
-            updateItemSize2(itemKey, measured);
-          }
-        }
-      }
-    }, [itemKey, layoutRenderCount]);
-  } else {
-    React2.useEffect(() => {
+  const { onLayout } = useOnLayoutSync(
+    {
+      onLayoutChange,
+      ref
+    },
+    [itemKey, layoutRenderCount]
+  );
+  if (!IsNewArchitecture) {
+    React3.useEffect(() => {
       if (!isNullOrUndefined(itemKey)) {
         const timeout = setTimeout(() => {
-          if (!didLayout && refLastSize.current) {
+          if (!didLayoutRef.current && refLastSize.current) {
             updateItemSize2(itemKey, refLastSize.current);
+            didLayoutRef.current = true;
           }
         }, 16);
         return () => {
@@ -578,7 +592,7 @@ var Container = typedMemo(function Container2({
     }, [itemKey]);
   }
   const PositionComponent = isSticky ? PositionViewSticky : PositionView3;
-  return /* @__PURE__ */ React2__namespace.createElement(
+  return /* @__PURE__ */ React3__namespace.createElement(
     PositionComponent,
     {
       animatedScrollY: isSticky ? animatedScrollY : void 0,
@@ -591,7 +605,7 @@ var Container = typedMemo(function Container2({
       stickyOffset: isSticky ? stickyOffset : void 0,
       style
     },
-    /* @__PURE__ */ React2__namespace.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React2__namespace.createElement(Separator, { ItemSeparatorComponent, leadingItem: renderedItemInfo.item }))
+    /* @__PURE__ */ React3__namespace.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React3__namespace.createElement(Separator, { ItemSeparatorComponent, leadingItem: renderedItemInfo.item }))
   );
 });
 
@@ -620,7 +634,7 @@ var Containers = typedMemo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React2__namespace.createElement(
+      /* @__PURE__ */ React3__namespace.createElement(
         Container,
         {
           getRenderedItem: getRenderedItem2,
@@ -655,13 +669,18 @@ var Containers = typedMemo(function Containers2({
       }
     }
   }
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { style }, containers);
+  return /* @__PURE__ */ React3__namespace.createElement(reactNative.Animated.View, { style }, containers);
 });
+var LayoutView = ({ onLayoutChange, refView, ...rest }) => {
+  const ref = refView != null ? refView : React3.useRef();
+  const { onLayout } = useOnLayoutSync({ onLayoutChange, ref });
+  return /* @__PURE__ */ React.createElement(reactNative.View, { ...rest, onLayout, ref });
+};
 function ScrollAdjust() {
   const bias = 1e7;
   const [scrollAdjust, scrollAdjustUserOffset] = useArr$(["scrollAdjust", "scrollAdjustUserOffset"]);
   const scrollOffset = (scrollAdjust || 0) + (scrollAdjustUserOffset || 0) + bias;
-  return /* @__PURE__ */ React2__namespace.createElement(
+  return /* @__PURE__ */ React3__namespace.createElement(
     reactNative.View,
     {
       style: {
@@ -676,88 +695,26 @@ function ScrollAdjust() {
 }
 function SnapWrapper({ ScrollComponent, ...props }) {
   const [snapToOffsets] = useArr$(["snapToOffsets"]);
-  return /* @__PURE__ */ React2__namespace.default.createElement(ScrollComponent, { ...props, snapToOffsets });
-}
-function useThrottleDebounce(mode) {
-  const timeoutRef = React2.useRef(null);
-  const lastCallTimeRef = React2.useRef(0);
-  const lastArgsRef = React2.useRef(null);
-  const clearTimeoutRef = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  };
-  const execute = React2.useCallback(
-    (callback, delay, ...args) => {
-      {
-        const now = Date.now();
-        lastArgsRef.current = args;
-        if (now - lastCallTimeRef.current >= delay) {
-          lastCallTimeRef.current = now;
-          callback(...args);
-          clearTimeoutRef();
-        } else {
-          clearTimeoutRef();
-          timeoutRef.current = setTimeout(
-            () => {
-              if (lastArgsRef.current) {
-                lastCallTimeRef.current = Date.now();
-                callback(...lastArgsRef.current);
-                timeoutRef.current = null;
-                lastArgsRef.current = null;
-              }
-            },
-            delay - (now - lastCallTimeRef.current)
-          );
-        }
-      }
-    },
-    [mode]
-  );
-  return execute;
-}
-
-// src/hooks/useSyncLayout.tsx
-function useSyncLayout2({
-  onChange
-}) {
-  const ref = React2.useRef(null);
-  const onLayout = React2.useCallback(
-    (event) => {
-      onChange(event.nativeEvent.layout, false);
-    },
-    [onChange]
-  );
-  if (IsNewArchitecture) {
-    React2.useLayoutEffect(() => {
-      if (ref.current) {
-        ref.current.measure((x, y, width, height) => {
-          onChange({ height, width, x, y }, true);
-        });
-      }
-    }, []);
-  }
-  return { onLayout, ref };
+  return /* @__PURE__ */ React3__namespace.default.createElement(ScrollComponent, { ...props, snapToOffsets });
 }
 
 // src/components/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React2__namespace.isValidElement(Component)) {
+  if (React3__namespace.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React2__namespace.createElement(Component, null);
+    return /* @__PURE__ */ React3__namespace.createElement(Component, null);
   }
   return null;
 };
 var Padding = () => {
   const animPaddingTop = useValue$("alignItemsPaddingTop", { delay: 0 });
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { style: { paddingTop: animPaddingTop } });
+  return /* @__PURE__ */ React3__namespace.createElement(reactNative.Animated.View, { style: { paddingTop: animPaddingTop } });
 };
 var PaddingDevMode = () => {
   const animPaddingTop = useValue$("alignItemsPaddingTop", { delay: 0 });
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React2__namespace.createElement(
+  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, /* @__PURE__ */ React3__namespace.createElement(reactNative.Animated.View, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React3__namespace.createElement(
     reactNative.Animated.View,
     {
       style: {
@@ -800,14 +757,11 @@ var ListComponent = typedMemo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
-  const { onLayout: onLayoutHeaderSync, ref: refHeader } = useSyncLayout2({
-    onChange: onLayoutHeader
-  });
-  const ScrollComponent = renderScrollComponent ? React2.useMemo(
-    () => React2__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+  const ScrollComponent = renderScrollComponent ? React3.useMemo(
+    () => React3__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
   ) : reactNative.Animated.ScrollView;
-  React2__namespace.useEffect(() => {
+  React3__namespace.useEffect(() => {
     if (canRender) {
       setTimeout(() => {
         scrollAdjustHandler.setMounted();
@@ -815,7 +769,7 @@ var ListComponent = typedMemo(function ListComponent2({
     }
   }, [canRender]);
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
-  return /* @__PURE__ */ React2__namespace.createElement(
+  return /* @__PURE__ */ React3__namespace.createElement(
     SnapOrScroll,
     {
       ...rest,
@@ -834,11 +788,11 @@ var ListComponent = typedMemo(function ListComponent2({
       ScrollComponent: snapToIndices ? ScrollComponent : void 0,
       style
     },
-    maintainVisibleContentPosition && /* @__PURE__ */ React2__namespace.createElement(ScrollAdjust, null),
-    ENABLE_DEVMODE ? /* @__PURE__ */ React2__namespace.createElement(PaddingDevMode, null) : /* @__PURE__ */ React2__namespace.createElement(Padding, null),
-    ListHeaderComponent && /* @__PURE__ */ React2__namespace.createElement(reactNative.View, { onLayout: onLayoutHeaderSync, ref: refHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
+    maintainVisibleContentPosition && /* @__PURE__ */ React3__namespace.createElement(ScrollAdjust, null),
+    ENABLE_DEVMODE ? /* @__PURE__ */ React3__namespace.createElement(PaddingDevMode, null) : /* @__PURE__ */ React3__namespace.createElement(Padding, null),
+    ListHeaderComponent && /* @__PURE__ */ React3__namespace.createElement(LayoutView, { onLayoutChange: onLayoutHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
     ListEmptyComponent && getComponent(ListEmptyComponent),
-    canRender && !ListEmptyComponent && /* @__PURE__ */ React2__namespace.createElement(
+    canRender && !ListEmptyComponent && /* @__PURE__ */ React3__namespace.createElement(
       Containers,
       {
         getRenderedItem: getRenderedItem2,
@@ -849,22 +803,22 @@ var ListComponent = typedMemo(function ListComponent2({
         waitForInitialLayout
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React2__namespace.createElement(
-      reactNative.View,
+    ListFooterComponent && /* @__PURE__ */ React3__namespace.createElement(
+      LayoutView,
       {
-        onLayout: (event) => {
-          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+        onLayoutChange: (layout) => {
+          const size = layout[horizontal ? "width" : "height"];
           set$(ctx, "footerSize", size);
         },
         style: ListFooterComponentStyle
       },
       getComponent(ListFooterComponent)
     ),
-    __DEV__ && ENABLE_DEVMODE && /* @__PURE__ */ React2__namespace.createElement(DevNumbers, null)
+    __DEV__ && ENABLE_DEVMODE && /* @__PURE__ */ React3__namespace.createElement(DevNumbers, null)
   );
 });
-var DevNumbers = __DEV__ && React2__namespace.memo(function DevNumbers2() {
-  return Array.from({ length: 100 }).map((_, index) => /* @__PURE__ */ React2__namespace.createElement(
+var DevNumbers = __DEV__ && React3__namespace.memo(function DevNumbers2() {
+  return Array.from({ length: 100 }).map((_, index) => /* @__PURE__ */ React3__namespace.createElement(
     reactNative.View,
     {
       key: index,
@@ -876,7 +830,7 @@ var DevNumbers = __DEV__ && React2__namespace.memo(function DevNumbers2() {
         width: "100%"
       }
     },
-    /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, { style: { color: "red" } }, index * 100)
+    /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, { style: { color: "red" } }, index * 100)
   ));
 });
 
@@ -888,7 +842,7 @@ function getId(state, index) {
   }
   const ret = index < data.length ? keyExtractor ? keyExtractor(data[index], index) : index : null;
   const id = ret;
-  state.idCache.set(index, id);
+  state.idCache[index] = id;
   return id;
 }
 
@@ -1112,6 +1066,68 @@ function prepareMVCP(ctx, state, dataChanged) {
   };
 }
 
+// src/core/prepareColumnStartState.ts
+function prepareColumnStartState(ctx, state, startIndex, useAverageSize) {
+  var _a;
+  const numColumns = peek$(ctx, "numColumns");
+  let rowStartIndex = startIndex;
+  const columnAtStart = state.columns.get(state.idCache[startIndex]);
+  if (columnAtStart !== 1) {
+    rowStartIndex = findRowStartIndex(state, numColumns, startIndex);
+  }
+  let currentRowTop = 0;
+  const curId = state.idCache[rowStartIndex];
+  const column = state.columns.get(curId);
+  if (rowStartIndex > 0) {
+    const prevIndex = rowStartIndex - 1;
+    const prevId = state.idCache[prevIndex];
+    const prevPosition = (_a = state.positions.get(prevId)) != null ? _a : 0;
+    const prevRowStart = findRowStartIndex(state, numColumns, prevIndex);
+    const prevRowHeight = calculateRowMaxSize(state, prevRowStart, prevIndex, useAverageSize);
+    currentRowTop = prevPosition + prevRowHeight;
+  }
+  return {
+    column,
+    currentRowTop,
+    startIndex: rowStartIndex
+  };
+}
+function findRowStartIndex(state, numColumns, index) {
+  if (numColumns <= 1) {
+    return Math.max(0, index);
+  }
+  let rowStart = Math.max(0, index);
+  while (rowStart > 0) {
+    const columnForIndex = state.columns.get(state.idCache[rowStart]);
+    if (columnForIndex === 1) {
+      break;
+    }
+    rowStart--;
+  }
+  return rowStart;
+}
+function calculateRowMaxSize(state, startIndex, endIndex, useAverageSize) {
+  if (endIndex < startIndex) {
+    return 0;
+  }
+  const { data } = state.props;
+  if (!data) {
+    return 0;
+  }
+  let maxSize = 0;
+  for (let i = startIndex; i <= endIndex; i++) {
+    if (i < 0 || i >= data.length) {
+      continue;
+    }
+    const id = state.idCache[i];
+    const size = getItemSize(state, id, i, data[i], useAverageSize);
+    if (size > maxSize) {
+      maxSize = size;
+    }
+  }
+  return maxSize;
+}
+
 // src/utils/setPaddingTop.ts
 function setPaddingTop(ctx, state, { stylePaddingTop, alignItemsPaddingTop }) {
   if (stylePaddingTop !== void 0) {
@@ -1206,7 +1222,7 @@ function updateSnapToOffsets(ctx, state) {
 
 // src/core/updateItemPositions.ts
 function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottomBuffered } = { scrollBottomBuffered: -1, startIndex: 0 }) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d;
   const {
     columns,
     indexByKey,
@@ -1216,41 +1232,47 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
     props: { getEstimatedItemSize, snapToIndices, enableAverages }
   } = state;
   const data = state.props.data;
+  const dataLength = data.length;
   const numColumns = peek$(ctx, "numColumns");
+  const hasColumns = numColumns > 1;
   const indexByKeyForChecking = __DEV__ ? /* @__PURE__ */ new Map() : void 0;
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = enableAverages && !getEstimatedItemSize;
   let currentRowTop = 0;
   let column = 1;
   let maxSizeInRow = 0;
-  const hasColumns = numColumns > 1;
   if (startIndex > 0) {
-    const prevIndex = startIndex - 1;
-    const prevId = (_a = idCache.get(prevIndex)) != null ? _a : getId(state, prevIndex);
-    const prevPosition = (_b = positions.get(prevId)) != null ? _b : 0;
     if (hasColumns) {
-      const prevColumn = (_c = columns.get(prevId)) != null ? _c : 1;
-      currentRowTop = prevPosition;
-      column = prevColumn % numColumns + 1;
-    } else {
-      const prevSize = (_d = sizesKnown.get(prevId)) != null ? _d : getItemSize(state, prevId, prevIndex, data[prevIndex], useAverageSize);
+      const { startIndex: processedStartIndex, currentRowTop: initialRowTop } = prepareColumnStartState(
+        ctx,
+        state,
+        startIndex,
+        useAverageSize
+      );
+      startIndex = processedStartIndex;
+      currentRowTop = initialRowTop;
+    } else if (startIndex < dataLength) {
+      const prevIndex = startIndex - 1;
+      const prevId = getId(state, prevIndex);
+      const prevPosition = (_a = positions.get(prevId)) != null ? _a : 0;
+      const prevSize = (_b = sizesKnown.get(prevId)) != null ? _b : getItemSize(state, prevId, prevIndex, data[prevIndex], useAverageSize);
       currentRowTop = prevPosition + prevSize;
     }
   }
   const needsIndexByKey = dataChanged || indexByKey.size === 0;
   let didBreakEarly = false;
   let breakAt;
-  const dataLength = data.length;
   for (let i = startIndex; i < dataLength; i++) {
     if (breakAt && i > breakAt) {
       didBreakEarly = true;
       break;
     }
-    if (!dataChanged && currentRowTop > maxVisibleArea) {
-      breakAt = i + 10;
+    if (breakAt === void 0 && !dataChanged && currentRowTop > maxVisibleArea) {
+      const itemsPerRow = hasColumns ? numColumns : 1;
+      breakAt = i + itemsPerRow + 10;
     }
-    const id = (_e = idCache.get(i)) != null ? _e : getId(state, i);
-    const size = (_f = sizesKnown.get(id)) != null ? _f : getItemSize(state, id, i, data[i], useAverageSize);
+    const id = (_c = idCache[i]) != null ? _c : getId(state, i);
+    const size = (_d = sizesKnown.get(id)) != null ? _d : getItemSize(state, id, i, data[i], useAverageSize);
     if (__DEV__ && needsIndexByKey) {
       if (indexByKeyForChecking.has(id)) {
         console.error(
@@ -1487,9 +1509,12 @@ function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
 var batchedUpdates = reactNative.unstable_batchedUpdates || ((callback) => callback());
 
 // src/utils/checkAllSizesKnown.ts
+function isNullOrUndefined2(value) {
+  return value === null || value === void 0;
+}
 function checkAllSizesKnown(state) {
   const { startBuffered, endBuffered, sizesKnown } = state;
-  if (endBuffered !== null) {
+  if (!isNullOrUndefined2(endBuffered) && !isNullOrUndefined2(startBuffered) && startBuffered >= 0 && endBuffered >= 0) {
     let areAllKnown = true;
     for (let i = startBuffered; areAllKnown && i <= endBuffered; i++) {
       const key = getId(state, i);
@@ -1506,6 +1531,8 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
   const { stickyContainerPool, containerItemTypes } = state;
   const result = [];
   const availableContainers = [];
+  const pendingRemovalSet = new Set(pendingRemoval);
+  let pendingRemovalChanged = false;
   const stickyIndicesSet = state.props.stickyIndicesSet;
   const stickyItemIndices = (needNewContainers == null ? void 0 : needNewContainers.filter((index) => stickyIndicesSet.has(index))) || [];
   const canReuseContainer = (containerIndex, requiredType) => {
@@ -1521,12 +1548,11 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
     let foundContainer = false;
     for (const containerIndex of stickyContainerPool) {
       const key = peek$(ctx, `containerItemKey${containerIndex}`);
-      const isPendingRemoval = pendingRemoval.includes(containerIndex);
+      const isPendingRemoval = pendingRemovalSet.has(containerIndex);
       if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType)) {
         result.push(containerIndex);
-        if (isPendingRemoval) {
-          const index = pendingRemoval.indexOf(containerIndex);
-          pendingRemoval.splice(index, 1);
+        if (isPendingRemoval && pendingRemovalSet.delete(containerIndex)) {
+          pendingRemovalChanged = true;
         }
         foundContainer = true;
         if (requiredItemTypes) typeIndex++;
@@ -1546,13 +1572,11 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
     }
     const key = peek$(ctx, `containerItemKey${u}`);
     let isOk = key === void 0;
-    if (!isOk) {
-      const index = pendingRemoval.indexOf(u);
-      if (index !== -1) {
-        pendingRemoval.splice(index, 1);
-        const requiredType = neededTypes[typeIndex];
-        isOk = canReuseContainer(u, requiredType);
-      }
+    if (!isOk && pendingRemovalSet.has(u)) {
+      pendingRemovalSet.delete(u);
+      pendingRemovalChanged = true;
+      const requiredType = neededTypes[typeIndex];
+      isOk = canReuseContainer(u, requiredType);
     }
     if (isOk) {
       result.push(u);
@@ -1610,6 +1634,12 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
       }
     }
   }
+  if (pendingRemovalChanged) {
+    pendingRemoval.length = 0;
+    for (const value of pendingRemovalSet) {
+      pendingRemoval.push(value);
+    }
+  }
   return result.sort(comparatorDefault);
 }
 function comparatorByDistance(a, b) {
@@ -1769,7 +1799,8 @@ function findCurrentStickyIndex(stickyArray, scroll, state) {
   const idCache = state.idCache;
   const positions = state.positions;
   for (let i = stickyArray.length - 1; i >= 0; i--) {
-    const stickyId = (_a = idCache.get(stickyArray[i])) != null ? _a : getId(state, stickyArray[i]);
+    const stickyIndex = stickyArray[i];
+    const stickyId = (_a = idCache[stickyIndex]) != null ? _a : getId(state, stickyIndex);
     const stickyPos = stickyId ? positions.get(stickyId) : void 0;
     if (stickyPos !== void 0 && scroll >= stickyPos) {
       return i;
@@ -1782,40 +1813,43 @@ function getActiveStickyIndices(ctx, state, stickyIndices) {
     Array.from(state.stickyContainerPool).map((i) => peek$(ctx, `containerItemKey${i}`)).map((key) => key ? state.indexByKey.get(key) : void 0).filter((idx) => idx !== void 0 && stickyIndices.has(idx))
   );
 }
-function handleStickyActivation(ctx, state, stickyIndices, stickyArray, scroll, needNewContainers, startBuffered, endBuffered) {
+function handleStickyActivation(ctx, state, stickyIndices, stickyArray, currentStickyIdx, needNewContainers, startBuffered, endBuffered) {
   var _a;
   const activeIndices = getActiveStickyIndices(ctx, state, stickyIndices);
-  const currentStickyIdx = findCurrentStickyIndex(stickyArray, scroll, state);
   state.activeStickyIndex = currentStickyIdx >= 0 ? stickyArray[currentStickyIdx] : void 0;
   for (let offset = 0; offset <= 1; offset++) {
     const idx = currentStickyIdx - offset;
     if (idx < 0 || activeIndices.has(stickyArray[idx])) continue;
     const stickyIndex = stickyArray[idx];
-    const stickyId = (_a = state.idCache.get(stickyIndex)) != null ? _a : getId(state, stickyIndex);
+    const stickyId = (_a = state.idCache[stickyIndex]) != null ? _a : getId(state, stickyIndex);
     if (stickyId && !state.containerItemKeys.has(stickyId) && (stickyIndex < startBuffered || stickyIndex > endBuffered)) {
       needNewContainers.push(stickyIndex);
     }
   }
 }
-function handleStickyRecycling(ctx, state, stickyArray, scroll, scrollBuffer, pendingRemoval) {
+function handleStickyRecycling(ctx, state, stickyArray, scroll, scrollBuffer, currentStickyIdx, pendingRemoval) {
   var _a, _b, _c;
-  const currentStickyIdx = findCurrentStickyIndex(stickyArray, scroll, state);
   for (const containerIndex of state.stickyContainerPool) {
     const itemKey = peek$(ctx, `containerItemKey${containerIndex}`);
     const itemIndex = itemKey ? state.indexByKey.get(itemKey) : void 0;
     if (itemIndex === void 0) continue;
     const arrayIdx = stickyArray.indexOf(itemIndex);
-    if (arrayIdx === -1) continue;
+    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;
     if (isRecentSticky) continue;
     const nextIndex = stickyArray[arrayIdx + 1];
     let shouldRecycle = false;
     if (nextIndex) {
-      const nextId = (_a = state.idCache.get(nextIndex)) != null ? _a : getId(state, nextIndex);
+      const nextId = (_a = state.idCache[nextIndex]) != null ? _a : getId(state, nextIndex);
       const nextPos = nextId ? state.positions.get(nextId) : void 0;
       shouldRecycle = nextPos !== void 0 && scroll > nextPos + scrollBuffer * 2;
     } else {
-      const currentId = (_b = state.idCache.get(itemIndex)) != null ? _b : getId(state, itemIndex);
+      const currentId = (_b = state.idCache[itemIndex]) != null ? _b : getId(state, itemIndex);
       if (currentId) {
         const currentPos = state.positions.get(currentId);
         const currentSize = (_c = state.sizes.get(currentId)) != null ? _c : getItemSize(state, currentId, itemIndex, state.props.data[itemIndex]);
@@ -1843,7 +1877,7 @@ function calculateItemsInView(ctx, state, params = {}) {
       sizes,
       startBufferedId: startBufferedIdOrig,
       viewabilityConfigCallbackPairs,
-      props: { getItemType, initialScroll, itemsAreEqual, keyExtractor, scrollBuffer }
+      props: { getItemType, initialScroll, itemsAreEqual, keyExtractor, onStickyHeaderChange, scrollBuffer }
     } = state;
     const { data } = state.props;
     const stickyIndicesArr = state.props.stickyIndicesArr || [];
@@ -1878,6 +1912,10 @@ function calculateItemsInView(ctx, state, params = {}) {
       set$(ctx, "debugRawScroll", scrollState);
       set$(ctx, "debugComputedScroll", scroll);
     }
+    const previousStickyIndex = state.activeStickyIndex;
+    const currentStickyIdx = stickyIndicesArr.length > 0 ? findCurrentStickyIndex(stickyIndicesArr, scroll, state) : -1;
+    const nextActiveStickyIndex = currentStickyIdx >= 0 ? stickyIndicesArr[currentStickyIdx] : void 0;
+    state.activeStickyIndex = nextActiveStickyIndex;
     let scrollBufferTop = scrollBuffer;
     let scrollBufferBottom = scrollBuffer;
     if (speed > 0 || speed === 0 && scroll < Math.max(50, scrollBuffer)) {
@@ -1899,7 +1937,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     const checkMVCP = doMVCP ? prepareMVCP(ctx, state, dataChanged) : void 0;
     if (dataChanged) {
       indexByKey.clear();
-      idCache.clear();
+      idCache.length = 0;
       positions.clear();
     }
     const startIndex = dataChanged ? 0 : (_a = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _a : 0;
@@ -1915,7 +1953,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     let endBuffered = null;
     let loopStart = !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
     for (let i = loopStart; i >= 0; i--) {
-      const id = (_b = idCache.get(i)) != null ? _b : getId(state, i);
+      const id = (_b = idCache[i]) != null ? _b : getId(state, i);
       const top = positions.get(id);
       const size = (_c = sizes.get(id)) != null ? _c : getItemSize(state, id, i, data[i]);
       const bottom = top + size;
@@ -1943,7 +1981,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     let firstFullyOnScreenIndex;
     const dataLength = data.length;
     for (let i = Math.max(0, loopStart); i < dataLength && (!foundEnd || i <= maxIndexRendered); i++) {
-      const id = (_d = idCache.get(i)) != null ? _d : getId(state, i);
+      const id = (_d = idCache[i]) != null ? _d : getId(state, i);
       const size = (_e = sizes.get(id)) != null ? _e : getItemSize(state, id, i, data[i]);
       const top = positions.get(id);
       if (!foundEnd) {
@@ -1973,7 +2011,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     }
     const idsInView = [];
     for (let i = firstFullyOnScreenIndex; i <= endNoBuffer; i++) {
-      const id = (_f = idCache.get(i)) != null ? _f : getId(state, i);
+      const id = (_f = idCache[i]) != null ? _f : getId(state, i);
       idsInView.push(id);
     }
     Object.assign(state, {
@@ -2005,7 +2043,7 @@ function calculateItemsInView(ctx, state, params = {}) {
       let numContainers2 = prevNumContainers;
       const needNewContainers = [];
       for (let i = startBuffered; i <= endBuffered; i++) {
-        const id = (_g = idCache.get(i)) != null ? _g : getId(state, i);
+        const id = (_g = idCache[i]) != null ? _g : getId(state, i);
         if (!containerItemKeys.has(id)) {
           needNewContainers.push(i);
         }
@@ -2016,7 +2054,7 @@ function calculateItemsInView(ctx, state, params = {}) {
           state,
           stickyIndicesSet,
           stickyIndicesArr,
-          scroll,
+          currentStickyIdx,
           needNewContainers,
           startBuffered,
           endBuffered
@@ -2042,7 +2080,7 @@ function calculateItemsInView(ctx, state, params = {}) {
         for (let idx = 0; idx < needNewContainers.length; idx++) {
           const i = needNewContainers[idx];
           const containerIndex = availableContainers[idx];
-          const id = (_h = idCache.get(i)) != null ? _h : getId(state, i);
+          const id = (_h = idCache[i]) != null ? _h : getId(state, i);
           const oldKey = peek$(ctx, `containerItemKey${containerIndex}`);
           if (oldKey && oldKey !== id) {
             containerItemKeys.delete(oldKey);
@@ -2056,7 +2094,7 @@ function calculateItemsInView(ctx, state, params = {}) {
           if (stickyIndicesSet.has(i)) {
             set$(ctx, `containerSticky${containerIndex}`, true);
             const topPadding = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
-            set$(ctx, `containerStickyOffset${containerIndex}`, new reactNative.Animated.Value(topPadding));
+            set$(ctx, `containerStickyOffset${containerIndex}`, topPadding);
             state.stickyContainerPool.add(containerIndex);
           } else {
             set$(ctx, `containerSticky${containerIndex}`, false);
@@ -2075,7 +2113,7 @@ function calculateItemsInView(ctx, state, params = {}) {
       }
     }
     if (stickyIndicesArr.length > 0) {
-      handleStickyRecycling(ctx, state, stickyIndicesArr, scroll, scrollBuffer, pendingRemoval);
+      handleStickyRecycling(ctx, state, stickyIndicesArr, scroll, scrollBuffer, currentStickyIdx, pendingRemoval);
     }
     for (let i = 0; i < numContainers; i++) {
       const itemKey = peek$(ctx, `containerItemKey${i}`);
@@ -2097,7 +2135,7 @@ function calculateItemsInView(ctx, state, params = {}) {
         const itemIndex = indexByKey.get(itemKey);
         const item = data[itemIndex];
         if (item !== void 0) {
-          const id = (_i = idCache.get(itemIndex)) != null ? _i : getId(state, itemIndex);
+          const id = (_i = idCache[itemIndex]) != null ? _i : getId(state, itemIndex);
           const position = positions.get(id);
           if (position === void 0) {
             set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
@@ -2127,6 +2165,12 @@ function calculateItemsInView(ctx, state, params = {}) {
     if (viewabilityConfigCallbackPairs) {
       updateViewableItems(state, ctx, viewabilityConfigCallbackPairs, scrollLength, startNoBuffer, endNoBuffer);
     }
+    if (onStickyHeaderChange && stickyIndicesArr.length > 0 && nextActiveStickyIndex !== void 0 && nextActiveStickyIndex !== previousStickyIndex) {
+      const item = data[nextActiveStickyIndex];
+      if (item !== void 0) {
+        onStickyHeaderChange({ index: nextActiveStickyIndex, item });
+      }
+    }
   });
 }
 
@@ -2285,7 +2329,9 @@ function doInitialAllocateContainers(ctx, state) {
       let totalSize = 0;
       const num = Math.min(20, data.length);
       for (let i = 0; i < num; i++) {
-        totalSize += fn(0, data[0], getItemType ? (_a = getItemType(data[0], 0)) != null ? _a : "" : "");
+        const item = data[i];
+        const itemType = getItemType ? (_a = getItemType(item, i)) != null ? _a : "" : "";
+        totalSize += fn(i, item, itemType);
       }
       averageItemSize = totalSize / num;
     } else {
@@ -2314,7 +2360,9 @@ function doInitialAllocateContainers(ctx, state) {
 // src/core/handleLayout.ts
 function handleLayout(ctx, state, layout, setCanRender) {
   const { maintainScrollAtEnd } = state.props;
-  const scrollLength = layout[state.props.horizontal ? "width" : "height"];
+  const measuredLength = layout[state.props.horizontal ? "width" : "height"];
+  const previousLength = state.scrollLength;
+  const scrollLength = measuredLength > 0 ? measuredLength : previousLength;
   const otherAxisSize = layout[state.props.horizontal ? "height" : "width"];
   const needsCalculate = !state.lastLayout || scrollLength > state.scrollLength || state.lastLayout.x !== layout.x || state.lastLayout.y !== layout.y;
   state.lastLayout = layout;
@@ -2325,7 +2373,9 @@ function handleLayout(ctx, state, layout, setCanRender) {
     state.otherAxisSize = otherAxisSize;
     state.lastBatchingAction = Date.now();
     state.scrollForNextCalculateItemsInView = void 0;
-    doInitialAllocateContainers(ctx, state);
+    if (scrollLength > 0) {
+      doInitialAllocateContainers(ctx, state);
+    }
     if (needsCalculate) {
       calculateItemsInView(ctx, state, { doMVCP: true });
     }
@@ -2341,14 +2391,14 @@ function handleLayout(ctx, state, layout, setCanRender) {
     if (state) {
       state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
     }
-    if (__DEV__ && scrollLength === 0) {
+    if (__DEV__ && measuredLength === 0) {
       warnDevOnce(
         "height0",
         `List ${state.props.horizontal ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
       );
     }
-    setCanRender(true);
   }
+  setCanRender(true);
 }
 
 // src/core/onScroll.ts
@@ -2555,7 +2605,7 @@ function updateOneItemSize(state, itemKey, sizeObj) {
   return 0;
 }
 var useCombinedRef = (...refs) => {
-  const callback = React2.useCallback((element) => {
+  const callback = React3.useCallback((element) => {
     for (const ref of refs) {
       if (!ref) {
         continue;
@@ -2598,18 +2648,59 @@ function getRenderedItem(ctx, state, key) {
     return null;
   }
   let renderedItem = null;
-  if (renderItem && data[index]) {
+  const extraData = peek$(ctx, "extraData");
+  const item = data[index];
+  if (renderItem && !isNullOrUndefined(item)) {
     const itemProps = {
       data,
-      extraData: peek$(ctx, "extraData"),
+      extraData,
       index,
-      item: data[index],
-      type: getItemType ? (_a = getItemType(data[index], index)) != null ? _a : "" : ""
+      item,
+      type: getItemType ? (_a = getItemType(item, index)) != null ? _a : "" : ""
     };
-    renderedItem = isFunction(renderItem) ? renderItem(itemProps) : React2__namespace.default.createElement(renderItem, itemProps);
+    renderedItem = isFunction(renderItem) ? renderItem(itemProps) : React3__namespace.default.createElement(renderItem, itemProps);
   }
   return { index, item: data[index], renderedItem };
 }
+function useThrottleDebounce(mode) {
+  const timeoutRef = React3.useRef(null);
+  const lastCallTimeRef = React3.useRef(0);
+  const lastArgsRef = React3.useRef(null);
+  const clearTimeoutRef = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+  const execute = React3.useCallback(
+    (callback, delay, ...args) => {
+      {
+        const now = Date.now();
+        lastArgsRef.current = args;
+        if (now - lastCallTimeRef.current >= delay) {
+          lastCallTimeRef.current = now;
+          callback(...args);
+          clearTimeoutRef();
+        } else {
+          clearTimeoutRef();
+          timeoutRef.current = setTimeout(
+            () => {
+              if (lastArgsRef.current) {
+                lastCallTimeRef.current = Date.now();
+                callback(...lastArgsRef.current);
+                timeoutRef.current = null;
+                lastArgsRef.current = null;
+              }
+            },
+            delay - (now - lastCallTimeRef.current)
+          );
+        }
+      }
+    },
+    [mode]
+  );
+  return execute;
+}
 
 // src/utils/throttledOnScroll.ts
 function useThrottledOnScroll(originalHandler, scrollEventThrottle) {
@@ -2626,14 +2717,14 @@ var LegendList = typedMemo(
     const isChildrenMode = children !== void 0 && dataProp === void 0;
     const processedProps = isChildrenMode ? {
       ...restProps,
-      data: (isArray(children) ? children : React2__namespace.Children.toArray(children)).flat(1),
+      data: (isArray(children) ? children : React3__namespace.Children.toArray(children)).flat(1),
       renderItem: ({ item }) => item
     } : {
       ...restProps,
       data: dataProp || [],
       renderItem: renderItemProp
     };
-    return /* @__PURE__ */ React2__namespace.createElement(StateProvider, null, /* @__PURE__ */ React2__namespace.createElement(LegendListInner, { ...processedProps, ref: forwardedRef }));
+    return /* @__PURE__ */ React3__namespace.createElement(StateProvider, null, /* @__PURE__ */ React3__namespace.createElement(LegendListInner, { ...processedProps, ref: forwardedRef }));
   })
 );
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
@@ -2673,6 +2764,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onScroll: onScrollProp,
     onStartReached,
     onStartReachedThreshold = 0.5,
+    onStickyHeaderChange,
     onViewableItemsChanged,
     progressViewOffset,
     recycleItems = false,
@@ -2690,21 +2782,21 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     waitForInitialLayout = true,
     ...rest
   } = props;
-  const [renderNum, setRenderNum] = React2.useState(0);
+  const [renderNum, setRenderNum] = React3.useState(0);
   const initialScroll = initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? { index: initialScrollIndexProp.index || 0, viewOffset: initialScrollIndexProp.viewOffset || 0 } : { index: initialScrollIndexProp || 0, viewOffset: initialScrollOffsetProp || 0 } : void 0;
-  const [canRender, setCanRender] = React2__namespace.useState(!IsNewArchitecture);
+  const [canRender, setCanRender] = React3__namespace.useState(!IsNewArchitecture);
   const contentContainerStyle = { ...reactNative.StyleSheet.flatten(contentContainerStyleProp) };
   const style = { ...reactNative.StyleSheet.flatten(styleProp) };
   const stylePaddingTopState = extractPadding(style, contentContainerStyle, "Top");
   const stylePaddingBottomState = extractPadding(style, contentContainerStyle, "Bottom");
   const ctx = useStateContext();
   ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
-  const refScroller = React2.useRef(null);
+  const refScroller = React3.useRef(null);
   const combinedRef = useCombinedRef(refScroller, refScrollView);
   const estimatedItemSize = estimatedItemSizeProp != null ? estimatedItemSizeProp : DEFAULT_ITEM_SIZE;
   const scrollBuffer = (drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE) || 1;
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (_item, index) => index.toString();
-  const refState = React2.useRef();
+  const refState = React3.useRef();
   if (!refState.current) {
     if (!ctx.internalState) {
       const initialScrollLength = (estimatedListSize != null ? estimatedListSize : IsNewArchitecture ? { height: 0, width: 0 } : reactNative.Dimensions.get("window"))[horizontal ? "width" : "height"];
@@ -2720,7 +2812,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         endNoBuffer: -1,
         endReachedBlockedByTimer: false,
         firstFullyOnScreenIndex: -1,
-        idCache: /* @__PURE__ */ new Map(),
+        idCache: [],
         idsInView: [],
         indexByKey: /* @__PURE__ */ new Map(),
         initialScroll,
@@ -2795,18 +2887,19 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onScroll: throttleScrollFn,
     onStartReached,
     onStartReachedThreshold,
+    onStickyHeaderChange,
     recycleItems: !!recycleItems,
     renderItem,
     scrollBuffer,
     snapToIndices,
     stickyIndicesArr: stickyIndices != null ? stickyIndices : [],
-    stickyIndicesSet: React2.useMemo(() => new Set(stickyIndices != null ? stickyIndices : []), [stickyIndices == null ? void 0 : stickyIndices.join(",")]),
+    stickyIndicesSet: React3.useMemo(() => new Set(stickyIndices != null ? stickyIndices : []), [stickyIndices == null ? void 0 : stickyIndices.join(",")]),
     stylePaddingBottom: stylePaddingBottomState,
     stylePaddingTop: stylePaddingTopState,
     suggestEstimatedItemSize: !!suggestEstimatedItemSize
   };
   state.refScroller = refScroller;
-  const memoizedLastItemKeys = React2.useMemo(() => {
+  const memoizedLastItemKeys = React3.useMemo(() => {
     if (!dataProp.length) return [];
     return Array.from(
       { length: Math.min(numColumnsProp, dataProp.length) },
@@ -2836,7 +2929,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       true
     );
   }
-  const initialContentOffset = React2.useMemo(() => {
+  const initialContentOffset = React3.useMemo(() => {
     if (initialScroll) {
       const { index, viewOffset } = initialScroll;
       let initialContentOffset2 = viewOffset || 0;
@@ -2868,7 +2961,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       refState.current.positions.clear();
     }
   }
-  const onLayoutHeader = React2.useCallback((rect, fromLayoutEffect) => {
+  const onLayoutHeader = React3.useCallback((rect, fromLayoutEffect) => {
     const size = rect[horizontal ? "width" : "height"];
     set$(ctx, "headerSize", size);
     if ((initialScroll == null ? void 0 : initialScroll.index) !== void 0) {
@@ -2883,13 +2976,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
     }
   }, []);
-  React2.useLayoutEffect(() => {
+  React3.useLayoutEffect(() => {
     if (snapToIndices) {
       updateSnapToOffsets(ctx, state);
     }
   }, [snapToIndices]);
-  React2.useLayoutEffect(() => {
-    const didAllocateContainers = dataProp.length > 0 && doInitialAllocateContainersCallback();
+  React3.useLayoutEffect(() => {
+    const didAllocateContainers = dataProp.length > 0 && doInitialAllocateContainers(ctx, state);
     if (!didAllocateContainers) {
       checkResetContainers(
         ctx,
@@ -2900,34 +2993,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       );
     }
   }, [dataProp, numColumnsProp]);
-  React2.useLayoutEffect(() => {
+  React3.useLayoutEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
-  React2.useLayoutEffect(() => {
-    var _a2;
-    if (IsNewArchitecture) {
-      let measured;
-      (_a2 = refScroller.current) == null ? void 0 : _a2.measure((x, y, width, height) => {
-        measured = { height, width, x, y };
-      });
-      if (measured) {
-        const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
-        if (size) {
-          handleLayout(ctx, state, measured, setCanRender);
-        }
-      }
-    }
-  }, []);
-  React2.useLayoutEffect(initializeStateVars, [
+  React3.useLayoutEffect(initializeStateVars, [
     memoizedLastItemKeys.join(","),
     numColumnsProp,
     stylePaddingTopState,
     stylePaddingBottomState
   ]);
-  const doInitialAllocateContainersCallback = () => {
-    return doInitialAllocateContainers(ctx, state);
-  };
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const viewability = setupViewability({
       onViewableItemsChanged,
       viewabilityConfig,
@@ -2938,17 +3013,19 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged]);
   if (!IsNewArchitecture) {
     useInit(() => {
-      doInitialAllocateContainersCallback();
+      doInitialAllocateContainers(ctx, state);
     });
   }
-  const onLayout = React2.useCallback((event) => {
-    const layout = event.nativeEvent.layout;
+  const onLayoutChange = React3.useCallback((layout) => {
     handleLayout(ctx, state, layout, setCanRender);
-    if (onLayoutProp) {
-      onLayoutProp(event);
-    }
   }, []);
-  React2.useImperativeHandle(forwardedRef, () => {
+  const { onLayout } = useOnLayoutSync({
+    onLayoutChange,
+    onLayoutProp,
+    ref: refScroller
+    // the type of ScrollView doesn't include measure?
+  });
+  React3.useImperativeHandle(forwardedRef, () => {
     const scrollIndexIntoView = (options) => {
       const state2 = refState.current;
       if (state2) {
@@ -3031,13 +3108,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     };
   }, []);
   if (reactNative.Platform.OS === "web") {
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (initialContentOffset) {
         scrollTo(state, { animated: false, offset: initialContentOffset });
       }
     }, []);
   }
-  const fns = React2.useMemo(
+  const fns = React3.useMemo(
     () => ({
       getRenderedItem: (key) => getRenderedItem(ctx, state, key),
       onScroll: (event) => onScroll(ctx, state, event),
@@ -3045,7 +3122,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }),
     []
   );
-  const onScrollHandler = React2.useMemo(() => {
+  const onScrollHandler = React3.useMemo(() => {
     const onScrollFn = fns.onScroll;
     if (stickyIndices == null ? void 0 : stickyIndices.length) {
       const { animatedScrollY } = ctx;
@@ -3056,7 +3133,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     return onScrollFn;
   }, [stickyIndices == null ? void 0 : stickyIndices.length, horizontal, scrollEventThrottle]);
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(
+  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, /* @__PURE__ */ React3__namespace.createElement(
     ListComponent,
     {
       ...rest,
@@ -3087,9 +3164,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       },
       onScroll: onScrollHandler,
       recycleItems,
-      refreshControl: refreshControl ? stylePaddingTopState > 0 ? React2__namespace.cloneElement(refreshControl, {
+      refreshControl: refreshControl ? stylePaddingTopState > 0 ? React3__namespace.cloneElement(refreshControl, {
         progressViewOffset: (refreshControl.props.progressViewOffset || 0) + stylePaddingTopState
-      }) : refreshControl : onRefresh && /* @__PURE__ */ React2__namespace.createElement(
+      }) : refreshControl : onRefresh && /* @__PURE__ */ React3__namespace.createElement(
         reactNative.RefreshControl,
         {
           onRefresh,
@@ -3106,7 +3183,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       updateItemSize: fns.updateItemSize,
       waitForInitialLayout
     }
-  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React2__namespace.createElement(DebugView, { state: refState.current }));
+  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React3__namespace.createElement(DebugView, { state: refState.current }));
 });
 
 exports.LegendList = LegendList;