@legendapp/list 2.1.0-beta.0 → 2.1.0-beta.10

package/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React4 = require('react');
+var React3 = require('react');
 var shim = require('use-sync-external-store/shim');
 var reactDom = require('react-dom');
 
@@ -22,14 +22,14 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // src/components/LegendList.tsx
-var AnimatedView = React4.forwardRef(function AnimatedView2(props, ref) {
-  return /* @__PURE__ */ React4__namespace.createElement("div", { ref, ...props });
+React3.forwardRef(function AnimatedView2(props, ref) {
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref, ...props });
 });
-var View = React4.forwardRef(function View2(props, ref) {
-  return /* @__PURE__ */ React4__namespace.createElement("div", { ref, ...props });
+var View = React3.forwardRef(function View2(props, ref) {
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref, ...props });
 });
 var Text = View;
 
@@ -37,9 +37,9 @@ var Text = View;
 var createAnimatedValue = (value) => value;
 
 // src/state/state.tsx
-var ContextState = React4__namespace.createContext(null);
+var ContextState = React3__namespace.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React4__namespace.useState(() => ({
+  const [value] = React3__namespace.useState(() => ({
     animatedScrollY: createAnimatedValue(0),
     columnWrapperStyle: void 0,
     internalState: void 0,
@@ -54,14 +54,17 @@ function StateProvider({ children }) {
       ["stylePaddingTop", 0],
       ["headerSize", 0],
       ["numContainers", 0],
-      ["totalSize", 0]
+      ["activeStickyIndex", void 0],
+      ["totalSize", 0],
+      ["scrollAdjustPending", 0],
+      ["scrollingTo", void 0]
     ]),
     viewRefs: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React4__namespace.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React3__namespace.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React4__namespace.useContext(ContextState);
+  return React3__namespace.useContext(ContextState);
 }
 function createSelectorFunctionsArr(ctx, signalNames) {
   let lastValues = [];
@@ -131,23 +134,23 @@ function getContentSize(ctx) {
   return headerSize + footerSize + totalSize + stylePaddingTop;
 }
 function useArr$(signalNames) {
-  const ctx = React4__namespace.useContext(ContextState);
-  const { subscribe, get } = React4__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 = React4__namespace.useContext(ContextState);
-  const { subscribe, get } = React4__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__ */ React4__namespace.createElement(View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
+  return /* @__PURE__ */ React3__namespace.createElement(View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
 };
-var DebugView = React4__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",
@@ -158,11 +161,11 @@ var DebugView = React4__namespace.memo(function DebugView2({ state }) {
     "numContainersPooled"
   ]);
   const contentSize = getContentSize(ctx);
-  const [, forceUpdate] = React4.useReducer((x) => x + 1, 0);
+  const [, forceUpdate] = React3.useReducer((x) => x + 1, 0);
   useInterval(() => {
     forceUpdate();
   }, 100);
-  return /* @__PURE__ */ React4__namespace.createElement(
+  return /* @__PURE__ */ React3__namespace.createElement(
     View,
     {
       pointerEvents: "none",
@@ -178,107 +181,77 @@ var DebugView = React4__namespace.memo(function DebugView2({ state }) {
         top: 0
       }
     },
-    /* @__PURE__ */ React4__namespace.createElement(DebugRow, null, /* @__PURE__ */ React4__namespace.createElement(Text, null, "TotalSize:"), /* @__PURE__ */ React4__namespace.createElement(Text, null, totalSize.toFixed(2))),
-    /* @__PURE__ */ React4__namespace.createElement(DebugRow, null, /* @__PURE__ */ React4__namespace.createElement(Text, null, "ContentSize:"), /* @__PURE__ */ React4__namespace.createElement(Text, null, contentSize.toFixed(2))),
-    /* @__PURE__ */ React4__namespace.createElement(DebugRow, null, /* @__PURE__ */ React4__namespace.createElement(Text, null, "At end:"), /* @__PURE__ */ React4__namespace.createElement(Text, null, String(state.isAtEnd))),
-    /* @__PURE__ */ React4__namespace.createElement(DebugRow, null, /* @__PURE__ */ React4__namespace.createElement(Text, null, "ScrollAdjust:"), /* @__PURE__ */ React4__namespace.createElement(Text, null, scrollAdjust.toFixed(2))),
-    /* @__PURE__ */ React4__namespace.createElement(DebugRow, null, /* @__PURE__ */ React4__namespace.createElement(Text, null, "RawScroll: "), /* @__PURE__ */ React4__namespace.createElement(Text, null, rawScroll.toFixed(2))),
-    /* @__PURE__ */ React4__namespace.createElement(DebugRow, null, /* @__PURE__ */ React4__namespace.createElement(Text, null, "ComputedScroll: "), /* @__PURE__ */ React4__namespace.createElement(Text, null, scroll.toFixed(2)))
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(Text, null, "TotalSize:"), /* @__PURE__ */ React3__namespace.createElement(Text, null, totalSize.toFixed(2))),
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(Text, null, "ContentSize:"), /* @__PURE__ */ React3__namespace.createElement(Text, null, contentSize.toFixed(2))),
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(Text, null, "At end:"), /* @__PURE__ */ React3__namespace.createElement(Text, null, String(state.isAtEnd))),
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(Text, null, "ScrollAdjust:"), /* @__PURE__ */ React3__namespace.createElement(Text, null, scrollAdjust.toFixed(2))),
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(Text, null, "RawScroll: "), /* @__PURE__ */ React3__namespace.createElement(Text, null, rawScroll.toFixed(2))),
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(Text, null, "ComputedScroll: "), /* @__PURE__ */ React3__namespace.createElement(Text, null, scroll.toFixed(2)))
   );
 });
 function useInterval(callback, delay) {
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     const interval = setInterval(callback, delay);
     return () => clearInterval(interval);
   }, [delay]);
 }
-var globalResizeObserver = null;
-function getGlobalResizeObserver() {
-  if (!globalResizeObserver) {
-    globalResizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const callbacks = callbackMap.get(entry.target);
-        if (callbacks) {
-          for (const callback of callbacks) {
-            callback(entry);
-          }
-        }
-      }
-    });
+
+// src/utils/devEnvironment.ts
+var metroDev = typeof __DEV__ !== "undefined" ? __DEV__ : void 0;
+var _a;
+var envMode = typeof process !== "undefined" && typeof process.env === "object" && process.env ? (_a = process.env.NODE_ENV) != null ? _a : process.env.MODE : void 0;
+var processDev = typeof envMode === "string" ? envMode.toLowerCase() !== "production" : void 0;
+var _a2;
+var IS_DEV = (_a2 = metroDev != null ? metroDev : processDev) != null ? _a2 : false;
+
+// src/constants.ts
+var POSITION_OUT_OF_VIEW = -1e7;
+var ENABLE_DEVMODE = IS_DEV && false;
+var ENABLE_DEBUG_VIEW = IS_DEV && false;
+var typedForwardRef = React3.forwardRef;
+var typedMemo = React3.memo;
+
+// src/utils/helpers.ts
+function isFunction(obj) {
+  return typeof obj === "function";
+}
+function isArray(obj) {
+  return Array.isArray(obj);
+}
+var warned = /* @__PURE__ */ new Set();
+function warnDevOnce(id, text) {
+  if (IS_DEV && !warned.has(id)) {
+    warned.add(id);
+    console.warn(`[legend-list] ${text}`);
   }
-  return globalResizeObserver;
 }
-var callbackMap = /* @__PURE__ */ new WeakMap();
-function useResizeObserver(element, callback) {
-  React4.useEffect(() => {
-    if (!element) return;
-    const observer = getGlobalResizeObserver();
-    let callbacks = callbackMap.get(element);
-    if (!callbacks) {
-      callbacks = /* @__PURE__ */ new Set();
-      callbackMap.set(element, callbacks);
-      observer.observe(element);
-    }
-    callbacks.add(callback);
-    return () => {
-      const callbacks2 = callbackMap.get(element);
-      if (callbacks2) {
-        callbacks2.delete(callback);
-        if (callbacks2.size === 0) {
-          callbackMap.delete(element);
-          observer.unobserve(element);
-        }
-      }
-    };
-  }, [element, callback]);
+function roundSize(size) {
+  return Math.floor(size * 8) / 8;
 }
-
-// src/hooks/useSyncLayout.tsx
-function useSyncLayout({
-  ref,
-  onLayoutChange
-}) {
-  var _a, _b;
-  useResizeObserver(
-    ((_b = (_a = ref.current) == null ? void 0 : _a.getScrollableNode) == null ? void 0 : _b.call(_a)) || ref.current,
-    React4.useCallback(
-      (entry) => {
-        onLayoutChange(entry.contentRect, false);
-      },
-      [onLayoutChange]
-    )
-  );
-  React4.useLayoutEffect(() => {
-    if (ref.current) {
-      const rect = ref.current.getBoundingClientRect();
-      onLayoutChange(
-        {
-          height: rect.height,
-          width: rect.width,
-          x: rect.left,
-          y: rect.top
-        },
-        true
-      );
+function isNullOrUndefined(value) {
+  return value === null || value === void 0;
+}
+function comparatorDefault(a, b) {
+  return a - b;
+}
+function getPadding(s, type) {
+  var _a3, _b, _c;
+  return (_c = (_b = (_a3 = s[`padding${type}`]) != null ? _a3 : s.paddingVertical) != null ? _b : s.padding) != null ? _c : 0;
+}
+function extractPadding(style, contentContainerStyle, type) {
+  return getPadding(style, type) + getPadding(contentContainerStyle, type);
+}
+function findContainerId(ctx, key) {
+  const numContainers = peek$(ctx, "numContainers");
+  for (let i = 0; i < numContainers; i++) {
+    const itemKey = peek$(ctx, `containerItemKey${i}`);
+    if (itemKey === key) {
+      return i;
     }
-  }, []);
-  return {};
+  }
+  return -1;
 }
 
-// src/components/LayoutView.tsx
-var LayoutView = ({ onLayoutChange, refView, children, ...rest }) => {
-  const ref = refView != null ? refView : React4.useRef();
-  useSyncLayout({ onLayoutChange, ref });
-  return /* @__PURE__ */ React4__namespace.createElement("div", { ...rest, ref }, children);
-};
-
-// src/constants.ts
-var POSITION_OUT_OF_VIEW = -1e7;
-var ENABLE_DEVMODE = __DEV__ && false;
-var ENABLE_DEBUG_VIEW = __DEV__ && false;
-var typedForwardRef = React4.forwardRef;
-var typedMemo = React4.memo;
-
 // src/components/PositionView.tsx
 var PositionViewState = typedMemo(function PositionView({
   id,
@@ -288,9 +261,12 @@ var PositionViewState = typedMemo(function PositionView({
   ...rest
 }) {
   const [position = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
-  const base = Array.isArray(style) ? Object.assign({}, ...style) : style;
-  const combinedStyle = horizontal ? { ...base, left: position } : { ...base, top: position };
-  return /* @__PURE__ */ React4__namespace.createElement(LayoutView, { refView, style: combinedStyle, ...rest });
+  const base = {
+    contain: "paint layout style"
+  };
+  const composed = isArray(style) ? Object.assign({}, ...style) : style;
+  const combinedStyle = horizontal ? { ...base, ...composed, left: position } : { ...base, ...composed, top: position };
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref: refView, style: combinedStyle, ...rest });
 });
 var PositionViewSticky = typedMemo(function PositionViewSticky2({
   id,
@@ -298,80 +274,61 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   style,
   refView,
   index,
+  stickyOffset,
+  animatedScrollY: _animatedScrollY,
+  children,
   ...rest
 }) {
-  const [position = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
-  const viewStyle = React4__namespace.useMemo(() => {
-    const base = Array.isArray(style) ? Object.assign({}, ...style) : style;
-    const axisStyle = horizontal ? { transform: `translateX(${position}px)` } : { top: position };
-    return {
-      ...base,
-      zIndex: index + 1e3,
-      ...axisStyle
-    };
-  }, [style, position, horizontal, index]);
-  return /* @__PURE__ */ React4__namespace.createElement(LayoutView, { refView, style: viewStyle, ...rest });
+  const [position = POSITION_OUT_OF_VIEW, headerSize = 0, activeStickyIndex] = useArr$([
+    `containerPosition${id}`,
+    "headerSize",
+    "activeStickyIndex"
+  ]);
+  const base = {
+    contain: "paint layout style"
+  };
+  const composed = React3__namespace.useMemo(
+    () => {
+      var _a3;
+      return (_a3 = isArray(style) ? Object.assign({}, ...style) : style) != null ? _a3 : {};
+    },
+    [style]
+  );
+  const viewStyle = React3__namespace.useMemo(() => {
+    var _a3;
+    const styleBase = { ...base, ...composed };
+    delete styleBase.transform;
+    const offset = (_a3 = stickyOffset != null ? stickyOffset : headerSize) != null ? _a3 : 0;
+    const isActive = activeStickyIndex === index;
+    styleBase.position = isActive ? "sticky" : "absolute";
+    styleBase.zIndex = index + 1e3;
+    if (horizontal) {
+      styleBase.left = isActive ? offset : position;
+    } else {
+      styleBase.top = isActive ? offset : position;
+    }
+    return styleBase;
+  }, [composed, horizontal, position, index, stickyOffset, headerSize, activeStickyIndex]);
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref: refView, style: viewStyle, ...rest }, children);
 });
 var PositionView2 = PositionViewState;
-function Separator({ ItemSeparatorComponent, itemKey, leadingItem }) {
-  const [lastItemKeys] = useArr$(["lastItemKeys"]);
-  const isALastItem = lastItemKeys.includes(itemKey);
-  return isALastItem ? null : /* @__PURE__ */ React4__namespace.createElement(ItemSeparatorComponent, { leadingItem });
-}
 
 // src/constants-platform.ts
 var IsNewArchitecture = true;
-
-// src/platform/Platform.ts
-var Platform = {
-  // Widen the type to avoid unreachable-branch lints in cross-platform code that compares against other OSes
-  OS: "web"
-};
 var symbolFirst = Symbol();
 function useInit(cb) {
-  const refValue = React4.useRef(symbolFirst);
+  const refValue = React3.useRef(symbolFirst);
   if (refValue.current === symbolFirst) {
     refValue.current = cb();
   }
   return refValue.current;
 }
 
-// src/utils/helpers.ts
-function isFunction(obj) {
-  return typeof obj === "function";
-}
-function isArray(obj) {
-  return Array.isArray(obj);
-}
-var warned = /* @__PURE__ */ new Set();
-function warnDevOnce(id, text) {
-  if (__DEV__ && !warned.has(id)) {
-    warned.add(id);
-    console.warn(`[legend-list] ${text}`);
-  }
-}
-function roundSize(size) {
-  return Math.floor(size * 8) / 8;
-}
-function isNullOrUndefined(value) {
-  return value === null || value === void 0;
-}
-function comparatorDefault(a, b) {
-  return a - b;
-}
-function getPadding(s, type) {
-  var _a, _b, _c;
-  return (_c = (_b = (_a = s[`padding${type}`]) != null ? _a : s.paddingVertical) != null ? _b : s.padding) != null ? _c : 0;
-}
-function extractPadding(style, contentContainerStyle, type) {
-  return getPadding(style, type) + getPadding(contentContainerStyle, type);
-}
-
 // src/state/ContextContainer.ts
-var ContextContainer = React4.createContext(null);
+var ContextContainer = React3.createContext(null);
 function useViewability(callback, configId) {
   const ctx = useStateContext();
-  const { containerId } = React4.useContext(ContextContainer);
+  const { containerId } = React3.useContext(ContextContainer);
   const key = containerId + (configId != null ? configId : "");
   useInit(() => {
     const value = ctx.mapViewabilityValues.get(key);
@@ -380,7 +337,7 @@ function useViewability(callback, configId) {
     }
   });
   ctx.mapViewabilityCallbacks.set(key, callback);
-  React4.useEffect(
+  React3.useEffect(
     () => () => {
       ctx.mapViewabilityCallbacks.delete(key);
     },
@@ -389,7 +346,7 @@ function useViewability(callback, configId) {
 }
 function useViewabilityAmount(callback) {
   const ctx = useStateContext();
-  const { containerId } = React4.useContext(ContextContainer);
+  const { containerId } = React3.useContext(ContextContainer);
   useInit(() => {
     const value = ctx.mapViewabilityAmountValues.get(containerId);
     if (value) {
@@ -397,7 +354,7 @@ function useViewabilityAmount(callback) {
     }
   });
   ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-  React4.useEffect(
+  React3.useEffect(
     () => () => {
       ctx.mapViewabilityAmountCallbacks.delete(containerId);
     },
@@ -405,12 +362,12 @@ function useViewabilityAmount(callback) {
   );
 }
 function useRecyclingEffect(effect) {
-  const { index, value } = React4.useContext(ContextContainer);
-  const prevValues = React4.useRef({
+  const { index, value } = React3.useContext(ContextContainer);
+  const prevValues = React3.useRef({
     prevIndex: void 0,
     prevItem: void 0
   });
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     let ret;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
@@ -428,12 +385,12 @@ function useRecyclingEffect(effect) {
   }, [index, value, effect]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value, itemKey, triggerLayout } = React4.useContext(ContextContainer);
-  const refState = React4.useRef({
+  const { index, value, itemKey, triggerLayout } = React3.useContext(ContextContainer);
+  const refState = React3.useRef({
     itemKey: null,
     value: null
   });
-  const [_, setRenderNum] = React4.useState(0);
+  const [_, setRenderNum] = React3.useState(0);
   const state = refState.current;
   if (state.itemKey !== itemKey) {
     state.itemKey = itemKey;
@@ -444,7 +401,7 @@ function useRecyclingState(valueOrFun) {
       prevItem: void 0
     }) : valueOrFun;
   }
-  const setState = React4.useCallback(
+  const setState = React3.useCallback(
     (newState) => {
       state.value = isFunction(newState) ? newState(state.value) : newState;
       setRenderNum((v) => v + 1);
@@ -455,7 +412,7 @@ function useRecyclingState(valueOrFun) {
   return [state.value, setState];
 }
 function useIsLastItem() {
-  const { itemKey } = React4.useContext(ContextContainer);
+  const { itemKey } = React3.useContext(ContextContainer);
   const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
   return isLast;
 }
@@ -463,13 +420,110 @@ function useListScrollSize() {
   const [scrollSize] = useArr$(["scrollSize"]);
   return scrollSize;
 }
-function useSyncLayout2() {
+function useSyncLayout() {
   {
-    const { triggerLayout: syncLayout } = React4.useContext(ContextContainer);
+    const { triggerLayout: syncLayout } = React3.useContext(ContextContainer);
     return syncLayout;
   }
 }
 
+// src/components/Separator.tsx
+function Separator({ ItemSeparatorComponent, leadingItem }) {
+  const isLastItem = useIsLastItem();
+  return isLastItem ? null : /* @__PURE__ */ React3__namespace.createElement(ItemSeparatorComponent, { leadingItem });
+}
+
+// src/hooks/createResizeObserver.ts
+var globalResizeObserver = null;
+function getGlobalResizeObserver() {
+  if (!globalResizeObserver) {
+    globalResizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const callbacks = callbackMap.get(entry.target);
+        if (callbacks) {
+          for (const callback of callbacks) {
+            callback(entry);
+          }
+        }
+      }
+    });
+  }
+  return globalResizeObserver;
+}
+var callbackMap = /* @__PURE__ */ new WeakMap();
+function createResizeObserver(element, callback) {
+  if (typeof ResizeObserver === "undefined") {
+    return () => {
+    };
+  }
+  if (!element) {
+    return () => {
+    };
+  }
+  const observer = getGlobalResizeObserver();
+  let callbacks = callbackMap.get(element);
+  if (!callbacks) {
+    callbacks = /* @__PURE__ */ new Set();
+    callbackMap.set(element, callbacks);
+    observer.observe(element);
+  }
+  callbacks.add(callback);
+  return () => {
+    const callbacks2 = callbackMap.get(element);
+    if (callbacks2) {
+      callbacks2.delete(callback);
+      if (callbacks2.size === 0) {
+        callbackMap.delete(element);
+        observer.unobserve(element);
+      }
+    }
+  };
+}
+
+// src/hooks/useOnLayoutSync.tsx
+function useOnLayoutSync({
+  ref,
+  onLayoutProp,
+  onLayoutChange
+}, deps) {
+  React3.useLayoutEffect(() => {
+    var _a3, _b;
+    const current = ref.current;
+    const scrollableNode = (_b = (_a3 = current == null ? void 0 : current.getScrollableNode) == null ? void 0 : _a3.call(current)) != null ? _b : null;
+    const element = scrollableNode || current;
+    if (!element) {
+      return;
+    }
+    const emit = (layout, fromLayoutEffect) => {
+      if (layout.height === 0 && layout.width === 0) {
+        return;
+      }
+      onLayoutChange(layout, fromLayoutEffect);
+      onLayoutProp == null ? void 0 : onLayoutProp({ nativeEvent: { layout } });
+    };
+    const rect = element.getBoundingClientRect();
+    emit(toLayout(rect), true);
+    return createResizeObserver(element, (entry) => {
+      var _a4;
+      const target = entry.target instanceof HTMLElement ? entry.target : void 0;
+      const rect2 = (_a4 = entry.contentRect) != null ? _a4 : target == null ? void 0 : target.getBoundingClientRect();
+      emit(toLayout(rect2), false);
+    });
+  }, deps);
+  return {};
+}
+function toLayout(rect) {
+  if (!rect) {
+    return { height: 0, width: 0, x: 0, y: 0 };
+  }
+  return {
+    height: rect.height,
+    width: rect.width,
+    x: rect.left,
+    y: rect.top
+  };
+}
+
 // src/components/Container.tsx
 var Container = typedMemo(function Container2({
   id,
@@ -480,37 +534,42 @@ var Container = typedMemo(function Container2({
   ItemSeparatorComponent
 }) {
   const ctx = useStateContext();
-  const { columnWrapperStyle } = ctx;
-  const [column = 0, data, itemKey, numColumns, extraData, isSticky] = useArr$([
+  const { columnWrapperStyle, animatedScrollY } = ctx;
+  const [column = 0, data, itemKey, numColumns, extraData, isSticky, stickyOffset] = useArr$([
     `containerColumn${id}`,
     `containerItemData${id}`,
     `containerItemKey${id}`,
     "numColumns",
     "extraData",
-    `containerSticky${id}`
+    `containerSticky${id}`,
+    `containerStickyOffset${id}`
   ]);
-  const refLastSize = React4.useRef();
-  const ref = React4.useRef(null);
-  const [_, forceLayoutRender] = React4.useState(0);
+  const itemLayoutRef = React3.useRef({
+    horizontal,
+    itemKey,
+    updateItemSize: updateItemSize2
+  });
+  itemLayoutRef.current.horizontal = horizontal;
+  itemLayoutRef.current.itemKey = itemKey;
+  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 style = React4.useMemo(() => {
+  const didLayoutRef = React3.useRef(false);
+  const style = React3.useMemo(() => {
     let paddingStyles;
     if (columnWrapperStyle) {
       const { columnGap, rowGap, gap } = columnWrapperStyle;
       if (horizontal) {
-        const py = numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0;
         paddingStyles = {
-          paddingBottom: py,
           paddingRight: columnGap || gap || void 0,
-          paddingTop: py
+          paddingVertical: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
         };
       } else {
-        const px = numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0;
         paddingStyles = {
           paddingBottom: rowGap || gap || void 0,
-          paddingLeft: px,
-          paddingRight: px
+          paddingHorizontal: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
         };
       }
     }
@@ -524,18 +583,18 @@ var Container = typedMemo(function Container2({
     } : {
       left: otherAxisPos,
       position: "absolute",
-      right: numColumns > 1 ? void 0 : 0,
+      right: numColumns > 1 ? null : 0,
       top: 0,
       width: otherAxisSize,
       ...paddingStyles || {}
     };
   }, [horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns]);
-  const renderedItemInfo = React4.useMemo(
+  const renderedItemInfo = React3.useMemo(
     () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
-  const contextValue = React4.useMemo(() => {
+  const contextValue = React3.useMemo(() => {
     ctx.viewRefs.set(id, ref);
     return {
       containerId: id,
@@ -547,49 +606,64 @@ var Container = typedMemo(function Container2({
       value: data
     };
   }, [id, itemKey, index, data]);
-  const onLayoutChange = (rectangle) => {
-    if (!isNullOrUndefined(itemKey)) {
-      let layout = rectangle;
-      layout[horizontal ? "width" : "height"];
-      const doUpdate = () => {
-        refLastSize.current = { height: layout.height, width: layout.width };
-        updateItemSize2(itemKey, layout);
-      };
-      {
-        doUpdate();
-      }
+  const onLayoutChange = React3.useCallback((rectangle) => {
+    const {
+      horizontal: currentHorizontal,
+      itemKey: currentItemKey,
+      updateItemSize: updateItemSizeFn
+    } = itemLayoutRef.current;
+    if (isNullOrUndefined(currentItemKey)) {
+      return;
     }
-  };
+    didLayoutRef.current = true;
+    let layout = rectangle;
+    roundSize(rectangle[currentHorizontal ? "width" : "height"]);
+    const doUpdate = () => {
+      itemLayoutRef.current.lastSize = { height: layout.height, width: layout.width };
+      updateItemSizeFn(currentItemKey, layout);
+      didLayoutRef.current = true;
+    };
+    {
+      doUpdate();
+    }
+  }, []);
+  const { onLayout } = useOnLayoutSync(
+    {
+      onLayoutChange,
+      ref
+    },
+    [itemKey, layoutRenderCount]
+  );
   const PositionComponent = isSticky ? PositionViewSticky : PositionView2;
-  return /* @__PURE__ */ React4__namespace.createElement(ContextContainer.Provider, { value: contextValue }, /* @__PURE__ */ React4__namespace.createElement(
+  return /* @__PURE__ */ React3__namespace.createElement(
     PositionComponent,
     {
+      animatedScrollY: isSticky ? animatedScrollY : void 0,
       horizontal,
       id,
       index,
       key: recycleItems ? void 0 : itemKey,
-      onLayoutChange,
+      onLayout,
       refView: ref,
+      stickyOffset: isSticky ? stickyOffset : void 0,
       style
     },
-    renderedItem,
-    renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React4__namespace.createElement(
-      Separator,
-      {
-        ItemSeparatorComponent,
-        itemKey,
-        leadingItem: renderedItemInfo.item
-      }
-    )
-  ));
+    /* @__PURE__ */ React3__namespace.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React3__namespace.createElement(Separator, { ItemSeparatorComponent, leadingItem: renderedItemInfo.item }))
+  );
 });
 
+// src/platform/Platform.ts
+var Platform = {
+  // Widen the type to avoid unreachable-branch lints in cross-platform code that compares against other OSes
+  OS: "web"
+};
+
 // src/utils/reordering.ts
 var mapFn = (element) => {
   const indexStr = element.getAttribute("index");
   return [element, indexStr === null ? null : parseInt(indexStr)];
 };
-function sortDOMElementsPatience(container) {
+function sortDOMElements(container) {
   const elements = Array.from(container.children);
   if (elements.length <= 1) return elements;
   const items = elements.map(mapFn);
@@ -671,8 +745,8 @@ function findLIS(arr) {
 // src/hooks/useDOMOrder.ts
 function useDOMOrder(ref) {
   const ctx = useStateContext();
-  const debounceRef = React4.useRef(void 0);
-  React4.useEffect(() => {
+  const debounceRef = React3.useRef(void 0);
+  React3.useEffect(() => {
     const unsubscribe = listen$(ctx, "lastPositionUpdate", () => {
       if (debounceRef.current !== void 0) {
         clearTimeout(debounceRef.current);
@@ -680,7 +754,7 @@ function useDOMOrder(ref) {
       debounceRef.current = setTimeout(() => {
         const parent = ref.current;
         if (parent) {
-          sortDOMElementsPatience(parent);
+          sortDOMElements(parent);
         }
         debounceRef.current = void 0;
       }, 500);
@@ -696,12 +770,12 @@ function useDOMOrder(ref) {
 
 // src/components/Containers.tsx
 var ContainersInner = typedMemo(function ContainersInner2({ horizontal, numColumns, children }) {
-  const ref = React4.useRef(null);
+  const ref = React3.useRef(null);
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
   const [totalSize, otherAxisSize] = useArr$(["totalSize", "otherAxisSize"]);
   useDOMOrder(ref);
-  const style = horizontal ? { minHeight: otherAxisSize, width: totalSize } : { height: totalSize, minWidth: otherAxisSize };
+  const style = horizontal ? { minHeight: otherAxisSize, position: "relative", width: totalSize } : { height: totalSize, minWidth: otherAxisSize, position: "relative" };
   if (columnWrapperStyle && numColumns > 1) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     const gapX = columnGap || gap || 0;
@@ -722,7 +796,7 @@ var ContainersInner = typedMemo(function ContainersInner2({ horizontal, numColum
       }
     }
   }
-  return /* @__PURE__ */ React4__namespace.createElement("div", { ref, style }, children);
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref, style }, children);
 });
 var Containers = typedMemo(function Containers2({
   horizontal,
@@ -736,7 +810,7 @@ var Containers = typedMemo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React4__namespace.createElement(
+      /* @__PURE__ */ React3__namespace.createElement(
         Container,
         {
           getRenderedItem: getRenderedItem2,
@@ -750,25 +824,41 @@ var Containers = typedMemo(function Containers2({
       )
     );
   }
-  return /* @__PURE__ */ React4__namespace.createElement(ContainersInner, { horizontal, numColumns, waitForInitialLayout }, containers);
-});
-var DevNumbers = __DEV__ && React4__namespace.memo(function DevNumbers2() {
-  return Array.from({ length: 100 }).map((_, index) => /* @__PURE__ */ React4__namespace.createElement(
-    View,
-    {
-      key: index,
-      style: {
-        height: 100,
-        pointerEvents: "none",
-        position: "absolute",
-        top: index * 100,
-        width: "100%"
-      }
-    },
-    /* @__PURE__ */ React4__namespace.createElement(Text, { style: { color: "red" } }, index * 100)
-  ));
+  return /* @__PURE__ */ React3__namespace.createElement(ContainersInner, { horizontal, numColumns, waitForInitialLayout }, containers);
 });
-var ListComponentScrollView = React4.forwardRef(function ListComponentScrollView2({
+function DevNumbers() {
+  return IS_DEV && React3__namespace.memo(function DevNumbers2() {
+    return Array.from({ length: 100 }).map((_, index) => /* @__PURE__ */ React3__namespace.createElement(
+      "div",
+      {
+        key: index,
+        style: {
+          height: 100,
+          pointerEvents: "none",
+          position: "absolute",
+          top: index * 100,
+          width: "100%"
+        }
+      },
+      /* @__PURE__ */ React3__namespace.createElement("div", { style: { color: "red" } }, index * 100)
+    ));
+  });
+}
+
+// src/platform/StyleSheet.tsx
+function flattenStyles(styles) {
+  if (isArray(styles)) {
+    return Object.assign({}, ...styles.filter(Boolean));
+  }
+  return styles;
+}
+var StyleSheet = {
+  create: (styles) => styles,
+  flatten: (style) => flattenStyles(style)
+};
+
+// src/components/ListComponentScrollView.tsx
+var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView2({
   children,
   style,
   contentContainerStyle,
@@ -781,25 +871,23 @@ var ListComponentScrollView = React4.forwardRef(function ListComponentScrollView
   showsVerticalScrollIndicator = true,
   refreshControl,
   onLayout,
-  ScrollComponent,
   ...props
 }, ref) {
-  const scrollRef = React4.useRef(null);
-  const contentRef = React4.useRef(null);
-  const momentumTimeout = React4.useRef(null);
-  React4.useImperativeHandle(ref, () => {
+  const scrollRef = React3.useRef(null);
+  const contentRef = React3.useRef(null);
+  const momentumTimeout = React3.useRef(null);
+  React3.useImperativeHandle(ref, () => {
     const api = {
       getBoundingClientRect: () => {
-        var _a;
-        return (_a = scrollRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        var _a3;
+        return (_a3 = scrollRef.current) == null ? void 0 : _a3.getBoundingClientRect();
       },
       getScrollableNode: () => scrollRef.current,
       getScrollResponder: () => scrollRef.current,
-      scrollBy: (options) => {
+      scrollBy: (x, y) => {
         const el = scrollRef.current;
         if (!el) return;
-        const { x = 0, y = 0, animated = true } = options;
-        el.scrollBy({ behavior: animated ? "smooth" : "auto", left: x, top: y });
+        el.scrollBy(x, y);
       },
       scrollTo: (options) => {
         const el = scrollRef.current;
@@ -830,7 +918,7 @@ var ListComponentScrollView = React4.forwardRef(function ListComponentScrollView
     };
     return api;
   }, [horizontal]);
-  const handleScroll = React4.useCallback(
+  const handleScroll = React3.useCallback(
     (event) => {
       if (!onScroll2 || !(event == null ? void 0 : event.target)) {
         return;
@@ -866,21 +954,25 @@ var ListComponentScrollView = React4.forwardRef(function ListComponentScrollView
     },
     [onScroll2, onMomentumScrollEnd]
   );
-  React4.useLayoutEffect(() => {
+  React3.useLayoutEffect(() => {
     const element = scrollRef.current;
     if (!element) return;
-    element.addEventListener("scroll", handleScroll, { passive: true });
+    element.addEventListener("scroll", handleScroll);
     return () => {
       element.removeEventListener("scroll", handleScroll);
     };
   }, [handleScroll]);
-  React4.useLayoutEffect(() => {
-    if (contentOffset && scrollRef.current) {
-      scrollRef.current.scrollLeft = contentOffset.x || 0;
-      scrollRef.current.scrollTop = contentOffset.y || 0;
-    }
-  }, [contentOffset]);
-  React4.useLayoutEffect(() => {
+  React3.useEffect(() => {
+    const doScroll = () => {
+      if (contentOffset && scrollRef.current) {
+        scrollRef.current.scrollLeft = contentOffset.x || 0;
+        scrollRef.current.scrollTop = contentOffset.y || 0;
+      }
+    };
+    doScroll();
+    requestAnimationFrame(doScroll);
+  }, [contentOffset == null ? void 0 : contentOffset.x, contentOffset == null ? void 0 : contentOffset.y]);
+  React3.useLayoutEffect(() => {
     if (!onLayout || !scrollRef.current) return;
     const element = scrollRef.current;
     const fireLayout = () => {
@@ -911,36 +1003,57 @@ var ListComponentScrollView = React4.forwardRef(function ListComponentScrollView
     // Ensure proper positioning context
     WebkitOverflowScrolling: "touch",
     // iOS momentum scrolling
-    ...style
+    ...StyleSheet.flatten(style)
   };
   const contentStyle = {
     display: horizontal ? "flex" : "block",
     flexDirection: horizontal ? "row" : void 0,
     minHeight: horizontal ? void 0 : "100%",
     minWidth: horizontal ? "100%" : void 0,
-    ...contentContainerStyle
+    ...StyleSheet.flatten(contentContainerStyle)
   };
-  return /* @__PURE__ */ React4__namespace.createElement("div", { ref: scrollRef, style: scrollViewStyle, ...props }, refreshControl, /* @__PURE__ */ React4__namespace.createElement("div", { ref: contentRef, style: contentStyle }, children));
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref: scrollRef, style: scrollViewStyle, ...props }, refreshControl, /* @__PURE__ */ React3__namespace.createElement("div", { ref: contentRef, style: contentStyle }, children));
 });
+function Padding() {
+  const [paddingTop] = useArr$(["alignItemsPaddingTop"]);
+  return /* @__PURE__ */ React3__namespace.createElement("div", { style: { paddingTop } });
+}
+function PaddingDevMode() {
+  const [paddingTop] = useArr$(["alignItemsPaddingTop"]);
+  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, /* @__PURE__ */ React3__namespace.createElement("div", { style: { paddingTop } }), /* @__PURE__ */ React3__namespace.createElement(
+    "div",
+    {
+      style: {
+        backgroundColor: "green",
+        height: paddingTop,
+        left: 0,
+        position: "absolute",
+        right: 0,
+        top: 0
+      }
+    }
+  ));
+}
 function useValueListener$(key, callback) {
   const ctx = useStateContext();
-  React4.useLayoutEffect(() => {
-    listen$(ctx, key, (value) => {
+  React3.useLayoutEffect(() => {
+    const unsubscribe = listen$(ctx, key, (value) => {
       callback(value);
     });
-  }, []);
+    return unsubscribe;
+  }, [callback, ctx, key]);
 }
 
 // src/components/ScrollAdjust.tsx
 function ScrollAdjust() {
   const ctx = useStateContext();
-  const lastScrollOffsetRef = React4__namespace.useRef(0);
-  const callback = React4__namespace.useCallback(() => {
-    var _a;
+  const lastScrollOffsetRef = React3__namespace.useRef(0);
+  const callback = React3__namespace.useCallback(() => {
+    var _a3;
     const scrollAdjust = peek$(ctx, "scrollAdjust");
     const scrollAdjustUserOffset = peek$(ctx, "scrollAdjustUserOffset");
     const scrollOffset = (scrollAdjust || 0) + (scrollAdjustUserOffset || 0);
-    const scrollView = (_a = ctx.internalState) == null ? void 0 : _a.refScroller.current;
+    const scrollView = (_a3 = ctx.internalState) == null ? void 0 : _a3.refScroller.current;
     if (scrollView && scrollOffset !== lastScrollOffsetRef.current) {
       const scrollDelta = scrollOffset - lastScrollOffsetRef.current;
       if (scrollDelta !== 0) {
@@ -954,49 +1067,26 @@ function ScrollAdjust() {
   useValueListener$("scrollAdjustUserOffset", callback);
   return null;
 }
-
-// src/components/SnapWrapper.tsx
 function SnapWrapper({ ScrollComponent, ...props }) {
   const [snapToOffsets] = useArr$(["snapToOffsets"]);
-  return /* @__PURE__ */ React.createElement(ScrollComponent, { ...props, snapToOffsets });
-}
-
-// src/hooks/useValue$.ts
-function useValue$(key, params) {
-  const [value] = useArr$([key]);
-  return value;
+  return /* @__PURE__ */ React3__namespace.createElement(ScrollComponent, { ...props, snapToOffsets });
 }
+var LayoutView = ({ onLayoutChange, refView, children, ...rest }) => {
+  const ref = refView != null ? refView : React3.useRef();
+  useOnLayoutSync({ onLayoutChange, ref });
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ...rest, ref }, children);
+};
 
 // src/components/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React4__namespace.isValidElement(Component)) {
+  if (React3__namespace.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React4__namespace.createElement(Component, null);
+    return /* @__PURE__ */ React3__namespace.createElement(Component, null);
   }
   return null;
 };
-var Padding = () => {
-  const animPaddingTop = useValue$("alignItemsPaddingTop");
-  return /* @__PURE__ */ React4__namespace.createElement(AnimatedView, { style: { paddingTop: animPaddingTop } });
-};
-var PaddingDevMode = () => {
-  const animPaddingTop = useValue$("alignItemsPaddingTop");
-  return /* @__PURE__ */ React4__namespace.createElement(React4__namespace.Fragment, null, /* @__PURE__ */ React4__namespace.createElement(AnimatedView, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React4__namespace.createElement(
-    AnimatedView,
-    {
-      style: {
-        backgroundColor: "green",
-        height: animPaddingTop,
-        left: 0,
-        position: "absolute",
-        right: 0,
-        top: 0
-      }
-    }
-  ));
-};
 var ListComponent = typedMemo(function ListComponent2({
   canRender,
   style,
@@ -1026,12 +1116,11 @@ var ListComponent = typedMemo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
-  const refHeader = React4__namespace.useRef(null);
-  const ScrollComponent = renderScrollComponent ? React4.useMemo(
-    () => React4__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+  const ScrollComponent = renderScrollComponent ? React3.useMemo(
+    () => React3__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
   ) : ListComponentScrollView;
-  React4__namespace.useEffect(() => {
+  React3__namespace.useEffect(() => {
     if (canRender) {
       setTimeout(() => {
         scrollAdjustHandler.setMounted();
@@ -1039,39 +1128,30 @@ var ListComponent = typedMemo(function ListComponent2({
     }
   }, [canRender]);
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
-  const contentContainerStyleWeb = React4.useMemo(() => {
-    const base = contentContainerStyle || void 0;
-    if (!horizontal) return base;
-    if (base && base.height === "100%") return base;
-    return { ...base || {}, height: "100%" };
-  }, [horizontal, (contentContainerStyle == null ? void 0 : contentContainerStyle.height) === "100%" ? 1 : 0]);
-  return /* @__PURE__ */ React4__namespace.createElement(
+  return /* @__PURE__ */ React3__namespace.createElement(
     SnapOrScroll,
     {
       ...rest,
-      contentContainerStyle: contentContainerStyleWeb,
+      contentContainerStyle: [
+        contentContainerStyle,
+        horizontal ? {
+          height: "100%"
+        } : {}
+      ],
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       horizontal,
-      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
+      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
       onLayout,
       onScroll: onScroll2,
       ref: refScrollView,
       ScrollComponent: snapToIndices ? ScrollComponent : void 0,
       style
     },
-    maintainVisibleContentPosition && /* @__PURE__ */ React4__namespace.createElement(ScrollAdjust, null),
-    ENABLE_DEVMODE ? /* @__PURE__ */ React4__namespace.createElement(PaddingDevMode, null) : /* @__PURE__ */ React4__namespace.createElement(Padding, null),
-    ListHeaderComponent && /* @__PURE__ */ React4__namespace.createElement(
-      LayoutView,
-      {
-        onLayoutChange: onLayoutHeader,
-        refView: 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 && /* @__PURE__ */ React4__namespace.createElement(
+    canRender && !ListEmptyComponent && /* @__PURE__ */ React3__namespace.createElement(
       Containers,
       {
         getRenderedItem: getRenderedItem2,
@@ -1082,7 +1162,7 @@ var ListComponent = typedMemo(function ListComponent2({
         waitForInitialLayout
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React4__namespace.createElement(
+    ListFooterComponent && /* @__PURE__ */ React3__namespace.createElement(
       LayoutView,
       {
         onLayoutChange: (layout) => {
@@ -1093,7 +1173,7 @@ var ListComponent = typedMemo(function ListComponent2({
       },
       getComponent(ListFooterComponent)
     ),
-    __DEV__ && ENABLE_DEVMODE && /* @__PURE__ */ React4__namespace.createElement(DevNumbers, null)
+    IS_DEV && ENABLE_DEVMODE && /* @__PURE__ */ React3__namespace.createElement(DevNumbers, null)
   );
 });
 
@@ -1105,7 +1185,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;
 }
 
@@ -1126,13 +1206,100 @@ function calculateOffsetForIndex(ctx, state, index) {
   return position;
 }
 
+// src/utils/setPaddingTop.ts
+function setPaddingTop(ctx, state, { stylePaddingTop, alignItemsPaddingTop }) {
+  if (stylePaddingTop !== void 0) {
+    const prevStylePaddingTop = peek$(ctx, "stylePaddingTop") || 0;
+    if (stylePaddingTop < prevStylePaddingTop) {
+      let prevTotalSize = peek$(ctx, "totalSize") || 0;
+      set$(ctx, "totalSize", prevTotalSize + prevStylePaddingTop);
+      state.timeoutSetPaddingTop = setTimeout(() => {
+        prevTotalSize = peek$(ctx, "totalSize") || 0;
+        set$(ctx, "totalSize", prevTotalSize - prevStylePaddingTop);
+      }, 16);
+    }
+    set$(ctx, "stylePaddingTop", stylePaddingTop);
+  }
+  if (alignItemsPaddingTop !== void 0) {
+    set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
+  }
+}
+
+// src/utils/updateAlignItemsPaddingTop.ts
+function updateAlignItemsPaddingTop(ctx, state) {
+  const {
+    scrollLength,
+    props: { alignItemsAtEnd, data }
+  } = state;
+  if (alignItemsAtEnd) {
+    let alignItemsPaddingTop = 0;
+    if ((data == null ? void 0 : data.length) > 0) {
+      const contentSize = getContentSize(ctx);
+      alignItemsPaddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
+    }
+    setPaddingTop(ctx, state, { alignItemsPaddingTop });
+  }
+}
+
+// src/core/updateTotalSize.ts
+function updateTotalSize(ctx, state) {
+  const {
+    positions,
+    props: { data }
+  } = state;
+  if (data.length === 0) {
+    addTotalSize(ctx, state, null, 0);
+  } else {
+    const lastId = getId(state, data.length - 1);
+    if (lastId !== void 0) {
+      const lastPosition = positions.get(lastId);
+      if (lastPosition !== void 0) {
+        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
+        if (lastSize !== void 0) {
+          const totalSize = lastPosition + lastSize;
+          addTotalSize(ctx, state, null, totalSize);
+        }
+      }
+    }
+  }
+}
+function addTotalSize(ctx, state, key, add) {
+  const { alignItemsAtEnd } = state.props;
+  const prevTotalSize = state.totalSize;
+  if (key === null) {
+    state.totalSize = add;
+    if (state.timeoutSetPaddingTop) {
+      clearTimeout(state.timeoutSetPaddingTop);
+      state.timeoutSetPaddingTop = void 0;
+    }
+  } else {
+    state.totalSize += add;
+  }
+  if (prevTotalSize !== state.totalSize) {
+    set$(ctx, "totalSize", state.totalSize);
+    if (alignItemsAtEnd) {
+      updateAlignItemsPaddingTop(ctx, state);
+    }
+  }
+}
+
+// src/core/setSize.ts
+function setSize(ctx, state, itemKey, size) {
+  const { sizes } = state;
+  const previousSize = sizes.get(itemKey);
+  const diff = previousSize !== void 0 ? size - previousSize : size;
+  if (diff !== 0) {
+    addTotalSize(ctx, state, itemKey, diff);
+  }
+  sizes.set(itemKey, size);
+}
+
 // src/utils/getItemSize.ts
-function getItemSize(state, key, index, data, useAverageSize) {
-  var _a, _b;
+function getItemSize(ctx, state, key, index, data, useAverageSize, preferCachedSize) {
+  var _a3, _b;
   const {
     sizesKnown,
     sizes,
-    scrollingTo,
     averageSizes,
     props: { estimatedItemSize, getEstimatedItemSize, getFixedItemSize, getItemType }
   } = state;
@@ -1141,7 +1308,14 @@ function getItemSize(state, key, index, data, useAverageSize) {
     return sizeKnown;
   }
   let size;
-  const itemType = getItemType ? (_a = getItemType(data, index)) != null ? _a : "" : "";
+  const itemType = getItemType ? (_a3 = getItemType(data, index)) != null ? _a3 : "" : "";
+  const scrollingTo = peek$(ctx, "scrollingTo");
+  if (preferCachedSize) {
+    const cachedSize = sizes.get(key);
+    if (cachedSize !== void 0) {
+      return cachedSize;
+    }
+  }
   if (getFixedItemSize) {
     size = getFixedItemSize(index, data, itemType);
     if (size !== void 0) {
@@ -1163,53 +1337,239 @@ function getItemSize(state, key, index, data, useAverageSize) {
   if (size === void 0) {
     size = getEstimatedItemSize ? getEstimatedItemSize(index, data, itemType) : estimatedItemSize;
   }
-  sizes.set(key, size);
+  setSize(ctx, state, key, size);
   return size;
 }
 
 // src/core/calculateOffsetWithOffsetPosition.ts
-function calculateOffsetWithOffsetPosition(state, offsetParam, params) {
+function calculateOffsetWithOffsetPosition(ctx, state, offsetParam, params) {
   const { index, viewOffset, viewPosition } = params;
   let offset = offsetParam;
   if (viewOffset) {
     offset -= viewOffset;
   }
   if (viewPosition !== void 0 && index !== void 0) {
-    offset -= viewPosition * (state.scrollLength - getItemSize(state, getId(state, index), index, state.props.data[index]));
+    offset -= viewPosition * (state.scrollLength - getItemSize(ctx, state, getId(state, index), index, state.props.data[index]));
   }
   return offset;
 }
 
+// src/utils/checkThreshold.ts
+var HYSTERESIS_MULTIPLIER = 1.3;
+var checkThreshold = (distance, atThreshold, threshold, wasReached, snapshot, context, onReached, setSnapshot) => {
+  const absDistance = Math.abs(distance);
+  const within = atThreshold || threshold > 0 && absDistance <= threshold;
+  const updateSnapshot = () => {
+    setSnapshot == null ? void 0 : setSnapshot({
+      atThreshold,
+      contentSize: context.contentSize,
+      dataLength: context.dataLength,
+      scrollPosition: context.scrollPosition
+    });
+  };
+  if (!wasReached) {
+    if (!within) {
+      return false;
+    }
+    onReached == null ? void 0 : onReached(distance);
+    updateSnapshot();
+    return true;
+  }
+  const reset = !atThreshold && threshold > 0 && absDistance >= threshold * HYSTERESIS_MULTIPLIER || !atThreshold && threshold <= 0 && absDistance > 0;
+  if (reset) {
+    setSnapshot == null ? void 0 : setSnapshot(void 0);
+    return false;
+  }
+  if (within) {
+    const changed = !snapshot || snapshot.atThreshold !== atThreshold || snapshot.contentSize !== context.contentSize || snapshot.dataLength !== context.dataLength;
+    if (changed) {
+      onReached == null ? void 0 : onReached(distance);
+      updateSnapshot();
+    }
+  }
+  return true;
+};
+
+// src/utils/checkAtBottom.ts
+function checkAtBottom(ctx, state) {
+  var _a3;
+  if (!state) {
+    return;
+  }
+  const {
+    queuedInitialLayout,
+    scrollLength,
+    scroll,
+    maintainingScrollAtEnd,
+    props: { maintainScrollAtEndThreshold, onEndReachedThreshold }
+  } = state;
+  const contentSize = getContentSize(ctx);
+  if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
+    const distanceFromEnd = contentSize - scroll - scrollLength;
+    const isContentLess = contentSize < scrollLength;
+    state.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
+    state.isEndReached = checkThreshold(
+      distanceFromEnd,
+      isContentLess,
+      onEndReachedThreshold * scrollLength,
+      state.isEndReached,
+      state.endReachedSnapshot,
+      {
+        contentSize,
+        dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length,
+        scrollPosition: scroll
+      },
+      (distance) => {
+        var _a4, _b;
+        return (_b = (_a4 = state.props).onEndReached) == null ? void 0 : _b.call(_a4, { distanceFromEnd: distance });
+      },
+      (snapshot) => {
+        state.endReachedSnapshot = snapshot;
+      }
+    );
+  }
+}
+
+// src/utils/checkAtTop.ts
+function checkAtTop(state) {
+  var _a3;
+  if (!state) {
+    return;
+  }
+  const {
+    scrollLength,
+    scroll,
+    props: { onStartReachedThreshold }
+  } = state;
+  const distanceFromTop = scroll;
+  state.isAtStart = distanceFromTop <= 0;
+  state.isStartReached = checkThreshold(
+    distanceFromTop,
+    false,
+    onStartReachedThreshold * scrollLength,
+    state.isStartReached,
+    state.startReachedSnapshot,
+    {
+      contentSize: state.totalSize,
+      dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length,
+      scrollPosition: scroll
+    },
+    (distance) => {
+      var _a4, _b;
+      return (_b = (_a4 = state.props).onStartReached) == null ? void 0 : _b.call(_a4, { distanceFromStart: distance });
+    },
+    (snapshot) => {
+      state.startReachedSnapshot = snapshot;
+    }
+  );
+}
+
+// src/core/onScroll.ts
+function onScroll(ctx, state, event) {
+  var _a3, _b, _c;
+  const {
+    scrollProcessingEnabled,
+    props: { onScroll: onScrollProp }
+  } = state;
+  if (scrollProcessingEnabled === false) {
+    return;
+  }
+  if (((_b = (_a3 = event.nativeEvent) == null ? void 0 : _a3.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
+    return;
+  }
+  const newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
+  state.scrollPending = newScroll;
+  updateScroll(ctx, state, newScroll);
+  onScrollProp == null ? void 0 : onScrollProp(event);
+}
+function updateScroll(ctx, state, newScroll, forceUpdate) {
+  const scrollingTo = peek$(ctx, "scrollingTo");
+  state.hasScrolled = true;
+  state.lastBatchingAction = Date.now();
+  const currentTime = Date.now();
+  const adjust = state.scrollAdjustHandler.getAdjust();
+  const lastHistoryAdjust = state.lastScrollAdjustForHistory;
+  const adjustChanged = lastHistoryAdjust !== void 0 && Math.abs(adjust - lastHistoryAdjust) > 0.1;
+  if (adjustChanged) {
+    state.scrollHistory.length = 0;
+  }
+  state.lastScrollAdjustForHistory = adjust;
+  if (scrollingTo === void 0 && !(state.scrollHistory.length === 0 && newScroll === state.scroll)) {
+    if (!adjustChanged) {
+      state.scrollHistory.push({ scroll: newScroll, time: currentTime });
+    }
+  }
+  if (state.scrollHistory.length > 5) {
+    state.scrollHistory.shift();
+  }
+  state.scrollPrev = state.scroll;
+  state.scrollPrevTime = state.scrollTime;
+  state.scroll = newScroll;
+  state.scrollTime = currentTime;
+  const ignoreScrollFromMVCP = state.ignoreScrollFromMVCP;
+  if (ignoreScrollFromMVCP && !scrollingTo) {
+    const { lt, gt } = ignoreScrollFromMVCP;
+    if (lt && newScroll < lt || gt && newScroll > gt) {
+      state.ignoreScrollFromMVCPIgnored = true;
+      return;
+    }
+  }
+  if (state.dataChangeNeedsScrollUpdate || Math.abs(state.scroll - state.scrollPrev) > 2) {
+    state.ignoreScrollFromMVCPIgnored = false;
+    calculateItemsInView(ctx, state, { doMVCP: scrollingTo !== void 0 });
+    checkAtBottom(ctx, state);
+    checkAtTop(state);
+    state.dataChangeNeedsScrollUpdate = false;
+  }
+}
+
 // src/core/finishScrollTo.ts
-var finishScrollTo = (state) => {
+function finishScrollTo(ctx, state) {
+  var _a3, _b;
   if (state) {
-    state.scrollingTo = void 0;
     state.scrollHistory.length = 0;
+    state.initialScroll = void 0;
+    set$(ctx, "scrollingTo", void 0);
+    if ((_a3 = state.props) == null ? void 0 : _a3.data) {
+      (_b = state.triggerCalculateItemsInView) == null ? void 0 : _b.call(state, { forceFullItemPositions: true });
+    }
   }
-};
+}
 
 // src/core/scrollTo.ts
-function scrollTo(state, params = {}) {
-  var _a;
-  const { animated, noScrollingTo } = params;
+function scrollTo(ctx, state, params) {
+  var _a3;
+  const { noScrollingTo, ...scrollTarget } = params;
+  const { animated, isInitialScroll, offset: scrollTargetOffset, precomputedWithViewOffset } = scrollTarget;
   const {
     refScroller,
     props: { horizontal }
   } = state;
-  const offset = calculateOffsetWithOffsetPosition(state, params.offset, params);
+  let offset = precomputedWithViewOffset ? scrollTargetOffset : calculateOffsetWithOffsetPosition(ctx, state, scrollTargetOffset, scrollTarget);
+  if (Number.isFinite(state.scrollLength) && Number.isFinite(state.totalSize)) {
+    const maxOffset = Math.max(0, getContentSize(ctx) - state.scrollLength);
+    offset = Math.min(offset, maxOffset);
+  }
   state.scrollHistory.length = 0;
   if (!noScrollingTo) {
-    state.scrollingTo = params;
+    set$(ctx, "scrollingTo", scrollTarget);
   }
   state.scrollPending = offset;
-  (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
-    animated: !!animated,
-    x: horizontal ? offset : 0,
-    y: horizontal ? 0 : offset
-  });
+  if (!isInitialScroll || Platform.OS === "android") {
+    (_a3 = refScroller.current) == null ? void 0 : _a3.scrollTo({
+      animated: !!animated,
+      x: horizontal ? offset : 0,
+      y: horizontal ? 0 : offset
+    });
+  }
   if (!animated) {
     state.scroll = offset;
-    setTimeout(() => finishScrollTo(state), 100);
+    setTimeout(() => finishScrollTo(ctx, state), 100);
+    if (isInitialScroll) {
+      setTimeout(() => {
+        state.initialScroll = void 0;
+      }, 500);
+    }
   }
 }
 
@@ -1226,24 +1586,6 @@ function requestAdjust(ctx, state, positionDiff, dataChanged) {
     const didLayout = peek$(ctx, "containersDidLayout");
     if (didLayout) {
       doit();
-      const threshold = state.scroll - positionDiff / 2;
-      if (!state.ignoreScrollFromMVCP) {
-        state.ignoreScrollFromMVCP = {};
-      }
-      if (positionDiff > 0) {
-        state.ignoreScrollFromMVCP.lt = threshold;
-      } else {
-        state.ignoreScrollFromMVCP.gt = threshold;
-      }
-      if (state.ignoreScrollFromMVCPTimeout) {
-        clearTimeout(state.ignoreScrollFromMVCPTimeout);
-      }
-      state.ignoreScrollFromMVCPTimeout = setTimeout(
-        () => {
-          state.ignoreScrollFromMVCP = void 0;
-        },
-        100
-      );
     } else {
       requestAnimationFrame(doit);
     }
@@ -1255,9 +1597,9 @@ function prepareMVCP(ctx, state, dataChanged) {
   const {
     idsInView,
     positions,
-    scrollingTo,
     props: { maintainVisibleContentPosition }
   } = state;
+  const scrollingTo = peek$(ctx, "scrollingTo");
   let prevPosition;
   let targetId;
   const idsInViewWithPositions = [];
@@ -1298,7 +1640,16 @@ function prepareMVCP(ctx, state, dataChanged) {
     if (targetId !== void 0 && prevPosition !== void 0) {
       const newPosition = positions.get(targetId);
       if (newPosition !== void 0) {
-        positionDiff = newPosition - prevPosition;
+        const totalSize = peek$(ctx, "totalSize");
+        let diff = newPosition - prevPosition;
+        if (diff !== 0 && state.scroll + state.scrollLength > totalSize) {
+          if (diff > 0) {
+            diff = Math.max(0, totalSize - state.scroll - state.scrollLength);
+          } else {
+            diff = 0;
+          }
+        }
+        positionDiff = diff;
       }
     }
     if (positionDiff !== void 0 && Math.abs(positionDiff) > 0.1) {
@@ -1307,77 +1658,105 @@ function prepareMVCP(ctx, state, dataChanged) {
   };
 }
 
-// src/utils/setPaddingTop.ts
-function setPaddingTop(ctx, state, { stylePaddingTop, alignItemsPaddingTop }) {
-  if (stylePaddingTop !== void 0) {
-    const prevStylePaddingTop = peek$(ctx, "stylePaddingTop") || 0;
-    if (stylePaddingTop < prevStylePaddingTop) {
-      let prevTotalSize = peek$(ctx, "totalSize") || 0;
-      set$(ctx, "totalSize", prevTotalSize + prevStylePaddingTop);
-      state.timeoutSetPaddingTop = setTimeout(() => {
-        prevTotalSize = peek$(ctx, "totalSize") || 0;
-        set$(ctx, "totalSize", prevTotalSize - prevStylePaddingTop);
-      }, 16);
-    }
-    set$(ctx, "stylePaddingTop", stylePaddingTop);
+// src/core/prepareColumnStartState.ts
+function prepareColumnStartState(ctx, state, startIndex, useAverageSize) {
+  var _a3;
+  const numColumns = peek$(ctx, "numColumns");
+  let rowStartIndex = startIndex;
+  const columnAtStart = state.columns.get(state.idCache[startIndex]);
+  if (columnAtStart !== 1) {
+    rowStartIndex = findRowStartIndex(state, numColumns, startIndex);
   }
-  if (alignItemsPaddingTop !== void 0) {
-    set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
+  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 = (_a3 = state.positions.get(prevId)) != null ? _a3 : 0;
+    const prevRowStart = findRowStartIndex(state, numColumns, prevIndex);
+    const prevRowHeight = calculateRowMaxSize(ctx, state, prevRowStart, prevIndex, useAverageSize);
+    currentRowTop = prevPosition + prevRowHeight;
   }
+  return {
+    column,
+    currentRowTop,
+    startIndex: rowStartIndex
+  };
 }
-
-// src/utils/updateAlignItemsPaddingTop.ts
-function updateAlignItemsPaddingTop(ctx, state) {
-  const {
-    scrollLength,
-    props: { alignItemsAtEnd, data }
-  } = state;
-  if (alignItemsAtEnd) {
-    let alignItemsPaddingTop = 0;
-    if ((data == null ? void 0 : data.length) > 0) {
-      const contentSize = getContentSize(ctx);
-      alignItemsPaddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
+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;
     }
-    setPaddingTop(ctx, state, { alignItemsPaddingTop });
+    rowStart--;
   }
+  return rowStart;
 }
-
-// src/core/updateTotalSize.ts
-function updateTotalSize(ctx, state) {
-  const {
-    positions,
-    props: { data }
-  } = state;
-  if (data.length === 0) {
-    addTotalSize(ctx, state, null, 0);
-  } else {
-    const lastId = getId(state, data.length - 1);
-    if (lastId !== void 0) {
-      const lastPosition = positions.get(lastId);
-      if (lastPosition !== void 0) {
-        const lastSize = getItemSize(state, lastId, data.length - 1, data[data.length - 1]);
-        if (lastSize !== void 0) {
-          const totalSize = lastPosition + lastSize;
-          addTotalSize(ctx, state, null, totalSize);
-        }
-      }
+function calculateRowMaxSize(ctx, 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(ctx, state, id, i, data[i], useAverageSize);
+    if (size > maxSize) {
+      maxSize = size;
     }
   }
+  return maxSize;
 }
-function addTotalSize(ctx, state, key, add) {
-  const { alignItemsAtEnd } = state.props;
-  {
-    state.totalSize = add;
-    if (state.timeoutSetPaddingTop) {
-      clearTimeout(state.timeoutSetPaddingTop);
-      state.timeoutSetPaddingTop = void 0;
+
+// src/utils/getScrollVelocity.ts
+var getScrollVelocity = (state) => {
+  const { scrollHistory } = state;
+  let velocity = 0;
+  if (scrollHistory.length >= 1) {
+    const newest = scrollHistory[scrollHistory.length - 1];
+    let oldest;
+    let start = 0;
+    const now = Date.now();
+    for (let i = 0; i < scrollHistory.length - 1; i++) {
+      const entry = scrollHistory[i];
+      const nextEntry = scrollHistory[i + 1];
+      if (i > 0) {
+        const prevEntry = scrollHistory[i - 1];
+        const prevDirection = entry.scroll - prevEntry.scroll;
+        const currentDirection = nextEntry.scroll - entry.scroll;
+        if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
+          start = i;
+          break;
+        }
+      }
+    }
+    for (let i = start; i < scrollHistory.length - 1; i++) {
+      const entry = scrollHistory[i];
+      if (now - entry.time <= 1e3) {
+        oldest = entry;
+        break;
+      }
+    }
+    if (oldest && oldest !== newest) {
+      const scrollDiff = newest.scroll - oldest.scroll;
+      const timeDiff = newest.time - oldest.time;
+      velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
     }
   }
-  set$(ctx, "totalSize", state.totalSize);
-  if (alignItemsAtEnd) {
-    updateAlignItemsPaddingTop(ctx, state);
-  }
-}
+  return velocity;
+};
 
 // src/utils/updateSnapToOffsets.ts
 function updateSnapToOffsets(ctx, state) {
@@ -1394,44 +1773,67 @@ function updateSnapToOffsets(ctx, state) {
   set$(ctx, "snapToOffsets", snapToOffsets);
 }
 
-// src/core/updateAllPositions.ts
-function updateAllPositions(ctx, state, dataChanged, startIndex = 0) {
-  var _a, _b, _c, _d, _e, _f;
+// src/core/updateItemPositions.ts
+function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottomBuffered, forceFullUpdate = false } = {
+  forceFullUpdate: false,
+  scrollBottomBuffered: -1,
+  startIndex: 0
+}) {
+  var _a3, _b, _c, _d, _e;
   const {
     columns,
     indexByKey,
     positions,
     idCache,
     sizesKnown,
-    props: { getEstimatedItemSize, snapToIndices, enableAverages }
+    props: { getEstimatedItemSize, snapToIndices, enableAverages, maintainVisibleContentPosition }
   } = state;
   const data = state.props.data;
+  const dataLength = data.length;
   const numColumns = peek$(ctx, "numColumns");
-  const indexByKeyForChecking = __DEV__ ? /* @__PURE__ */ new Map() : void 0;
+  const scrollingTo = peek$(ctx, "scrollingTo");
+  const hasColumns = numColumns > 1;
+  const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
+  const shouldOptimize = !forceFullUpdate && !dataChanged && Math.abs(getScrollVelocity(state)) > 0;
+  const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = enableAverages && !getEstimatedItemSize;
+  const preferCachedSize = maintainVisibleContentPosition && (dataChanged || state.scrollAdjustHandler.getAdjust() !== 0 || ((_a3 = peek$(ctx, "scrollAdjustPending")) != null ? _a3 : 0) !== 0);
   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 = (_b = positions.get(prevId)) != null ? _b : 0;
+      const prevSize = (_c = sizesKnown.get(prevId)) != null ? _c : getItemSize(ctx, state, prevId, prevIndex, data[prevIndex], useAverageSize, preferCachedSize);
       currentRowTop = prevPosition + prevSize;
     }
   }
   const needsIndexByKey = dataChanged || indexByKey.size === 0;
-  const dataLength = data.length;
+  let didBreakEarly = false;
+  let breakAt;
   for (let i = startIndex; i < dataLength; i++) {
-    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);
-    if (__DEV__ && needsIndexByKey) {
+    if (shouldOptimize && breakAt !== void 0 && i > breakAt) {
+      didBreakEarly = true;
+      break;
+    }
+    if (shouldOptimize && breakAt === void 0 && !scrollingTo && !dataChanged && currentRowTop > maxVisibleArea) {
+      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, state, id, i, data[i], useAverageSize, preferCachedSize);
+    if (IS_DEV && needsIndexByKey) {
       if (indexByKeyForChecking.has(id)) {
         console.error(
           `[legend-list] Error: Detected overlapping key (${id}) which causes missing items and gaps and other terrrible things. Check that keyExtractor returns unique values.`
@@ -1458,7 +1860,9 @@ function updateAllPositions(ctx, state, dataChanged, startIndex = 0) {
       currentRowTop += size;
     }
   }
-  updateTotalSize(ctx, state);
+  if (!didBreakEarly) {
+    updateTotalSize(ctx, state);
+  }
   if (snapToIndices) {
     updateSnapToOffsets(ctx, state);
   }
@@ -1478,6 +1882,21 @@ function ensureViewabilityState(ctx, configId) {
   }
   return state;
 }
+function setupViewability(props) {
+  let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
+  if (viewabilityConfig || onViewableItemsChanged) {
+    viewabilityConfigCallbackPairs = [
+      ...viewabilityConfigCallbackPairs || [],
+      {
+        onViewableItemsChanged,
+        viewabilityConfig: viewabilityConfig || {
+          viewAreaCoveragePercentThreshold: 0
+        }
+      }
+    ];
+  }
+  return viewabilityConfigCallbackPairs;
+}
 function updateViewableItems(state, ctx, viewabilityConfigCallbackPairs, scrollSize, start, end) {
   const {
     timeouts,
@@ -1631,16 +2050,6 @@ function isViewable(state, ctx, viewabilityConfig, containerId, key, scrollSize,
   const value = ctx.mapViewabilityAmountValues.get(containerId) || computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index);
   return value.isViewable;
 }
-function findContainerId(ctx, key) {
-  const numContainers = peek$(ctx, "numContainers");
-  for (let i = 0; i < numContainers; i++) {
-    const itemKey = peek$(ctx, `containerItemKey${i}`);
-    if (itemKey === key) {
-      return i;
-    }
-  }
-  return -1;
-}
 function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
   const key = containerId + configId;
   ctx.mapViewabilityValues.set(key, viewToken);
@@ -1649,9 +2058,12 @@ function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
 }
 
 // src/utils/checkAllSizesKnown.ts
+function isNullOrUndefined2(value) {
+  return value === null || value === void 0;
+}
 function checkAllSizesKnown(state) {
   const { startBuffered, endBuffered, sizesKnown } = state;
-  if (endBuffered !== null && startBuffered >= 0 && endBuffered >= 0) {
+  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);
@@ -1668,6 +2080,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) => {
@@ -1683,12 +2097,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);
-      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType)) {
+      const isPendingRemoval = pendingRemovalSet.has(containerIndex);
+      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType) && !result.includes(containerIndex)) {
         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++;
@@ -1708,13 +2121,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);
@@ -1757,7 +2168,7 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
       for (let i = 0; i < stillNeeded; i++) {
         result.push(numContainers + i);
       }
-      if (__DEV__ && numContainers + stillNeeded > peek$(ctx, "numContainersPooled")) {
+      if (IS_DEV && numContainers + stillNeeded > peek$(ctx, "numContainersPooled")) {
         console.warn(
           "[legend-list] No unused container available, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio.",
           {
@@ -1772,50 +2183,18 @@ 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) {
   return b.distance - a.distance;
 }
 
-// src/utils/getScrollVelocity.ts
-var getScrollVelocity = (state) => {
-  const { scrollHistory } = state;
-  let velocity = 0;
-  if (scrollHistory.length >= 1) {
-    const newest = scrollHistory[scrollHistory.length - 1];
-    let oldest;
-    let start = 0;
-    const now = Date.now();
-    for (let i = 0; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      const nextEntry = scrollHistory[i + 1];
-      if (i > 0) {
-        const prevEntry = scrollHistory[i - 1];
-        const prevDirection = entry.scroll - prevEntry.scroll;
-        const currentDirection = nextEntry.scroll - entry.scroll;
-        if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
-          start = i;
-          break;
-        }
-      }
-    }
-    for (let i = start; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      if (now - entry.time <= 1e3) {
-        oldest = entry;
-        break;
-      }
-    }
-    if (oldest && oldest !== newest) {
-      const scrollDiff = newest.scroll - oldest.scroll;
-      const timeDiff = newest.time - oldest.time;
-      velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
-    }
-  }
-  return velocity;
-};
-
 // src/core/scrollToIndex.ts
 function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, viewPosition }) {
   if (index >= state.props.data.length) {
@@ -1828,72 +2207,16 @@ function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, vie
   if (isLast && viewPosition === void 0) {
     viewPosition = 1;
   }
-  const firstIndexScrollPostion = firstIndexOffset - viewOffset;
   state.scrollForNextCalculateItemsInView = void 0;
-  scrollTo(state, {
+  scrollTo(ctx, state, {
     animated,
     index,
-    offset: firstIndexScrollPostion,
+    offset: firstIndexOffset,
     viewOffset,
     viewPosition: viewPosition != null ? viewPosition : 0
   });
 }
 
-// src/utils/checkThreshold.ts
-var checkThreshold = (distance, atThreshold, threshold, isReached, isBlockedByTimer, onReached, blockTimer) => {
-  const distanceAbs = Math.abs(distance);
-  const isAtThreshold = atThreshold || distanceAbs < threshold;
-  if (!isReached && !isBlockedByTimer) {
-    if (isAtThreshold) {
-      onReached == null ? void 0 : onReached(distance);
-      blockTimer == null ? void 0 : blockTimer(true);
-      setTimeout(() => {
-        blockTimer == null ? void 0 : blockTimer(false);
-      }, 700);
-      return true;
-    }
-  } else {
-    if (distance >= 1.3 * threshold) {
-      return false;
-    }
-  }
-  return isReached;
-};
-
-// src/utils/checkAtBottom.ts
-function checkAtBottom(ctx, state) {
-  if (!state) {
-    return;
-  }
-  const {
-    queuedInitialLayout,
-    scrollLength,
-    scroll,
-    maintainingScrollAtEnd,
-    props: { maintainScrollAtEndThreshold, onEndReachedThreshold }
-  } = state;
-  const contentSize = getContentSize(ctx);
-  if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
-    const distanceFromEnd = contentSize - scroll - scrollLength;
-    const isContentLess = contentSize < scrollLength;
-    state.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
-    state.isEndReached = checkThreshold(
-      distanceFromEnd,
-      isContentLess,
-      onEndReachedThreshold * scrollLength,
-      state.isEndReached,
-      state.endReachedBlockedByTimer,
-      (distance) => {
-        var _a, _b;
-        return (_b = (_a = state.props).onEndReached) == null ? void 0 : _b.call(_a, { distanceFromEnd: distance });
-      },
-      (block) => {
-        state.endReachedBlockedByTimer = block;
-      }
-    );
-  }
-}
-
 // src/utils/setDidLayout.ts
 function setDidLayout(ctx, state) {
   const {
@@ -1916,11 +2239,12 @@ function setDidLayout(ctx, state) {
 
 // src/core/calculateItemsInView.ts
 function findCurrentStickyIndex(stickyArray, scroll, state) {
-  var _a;
+  var _a3;
   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 = (_a3 = idCache[stickyIndex]) != null ? _a3 : getId(state, stickyIndex);
     const stickyPos = stickyId ? positions.get(stickyId) : void 0;
     if (stickyPos !== void 0 && scroll >= stickyPos) {
       return i;
@@ -1933,42 +2257,46 @@ 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) {
-  var _a;
+function handleStickyActivation(ctx, state, stickyIndices, stickyArray, currentStickyIdx, needNewContainers, startBuffered, endBuffered) {
+  var _a3;
   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 = (_a3 = state.idCache[stickyIndex]) != null ? _a3 : getId(state, stickyIndex);
     if (stickyId && !state.containerItemKeys.has(stickyId) && (stickyIndex < startBuffered || stickyIndex > endBuffered)) {
       needNewContainers.push(stickyIndex);
     }
   }
 }
-function handleStickyRecycling(ctx, state, stickyArray, scroll, scrollBuffer, pendingRemoval) {
-  var _a, _b, _c;
-  const currentStickyIdx = findCurrentStickyIndex(stickyArray, scroll, state);
+function handleStickyRecycling(ctx, state, stickyArray, scroll, scrollBuffer, currentStickyIdx, pendingRemoval) {
+  var _a3, _b, _c;
   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 = (_a3 = state.idCache[nextIndex]) != null ? _a3 : 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]);
+        const currentSize = (_c = state.sizes.get(currentId)) != null ? _c : getItemSize(ctx, state, currentId, itemIndex, state.props.data[itemIndex]);
         shouldRecycle = currentPos !== void 0 && scroll > currentPos + currentSize + scrollBuffer * 3;
       }
     }
@@ -1979,21 +2307,22 @@ function handleStickyRecycling(ctx, state, stickyArray, scroll, scrollBuffer, pe
 }
 function calculateItemsInView(ctx, state, params = {}) {
   reactDom.unstable_batchedUpdates(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const {
       columns,
       containerItemKeys,
       enableScrollForNextCalculateItemsInView,
       idCache,
       indexByKey,
+      initialScroll,
       minIndexSizeChanged,
       positions,
+      props: { getItemType, itemsAreEqual, keyExtractor, onStickyHeaderChange, scrollBuffer },
       scrollForNextCalculateItemsInView,
       scrollLength,
       sizes,
       startBufferedId: startBufferedIdOrig,
-      viewabilityConfigCallbackPairs,
-      props: { getItemType, initialScroll, itemsAreEqual, keyExtractor, scrollBuffer }
+      viewabilityConfigCallbackPairs
     } = state;
     const { data } = state.props;
     const stickyIndicesArr = state.props.stickyIndicesArr || [];
@@ -2005,35 +2334,22 @@ function calculateItemsInView(ctx, state, params = {}) {
     const totalSize = peek$(ctx, "totalSize");
     const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
-    const previousScrollAdjust = 0;
-    const { dataChanged, doMVCP } = params;
+    const { dataChanged, doMVCP, forceFullItemPositions } = params;
     const speed = getScrollVelocity(state);
-    if (doMVCP || dataChanged) {
-      const checkMVCP = doMVCP ? prepareMVCP(ctx, state, dataChanged) : void 0;
-      if (dataChanged) {
-        indexByKey.clear();
-        idCache.clear();
-        positions.clear();
-      }
-      const startIndex = dataChanged ? 0 : minIndexSizeChanged != null ? minIndexSizeChanged : 0;
-      updateAllPositions(ctx, state, dataChanged, startIndex);
-      if (minIndexSizeChanged !== void 0) {
-        state.minIndexSizeChanged = void 0;
-      }
-      checkMVCP == null ? void 0 : checkMVCP();
-    }
     const scrollExtra = 0;
     const { queuedInitialLayout } = state;
     let { scroll: scrollState } = state;
     if (!queuedInitialLayout && initialScroll) {
       const updatedOffset = calculateOffsetWithOffsetPosition(
+        ctx,
         state,
         calculateOffsetForIndex(ctx, state, initialScroll.index),
         initialScroll
       );
       scrollState = updatedOffset;
     }
-    const scrollAdjustPad = -previousScrollAdjust - topPad;
+    const scrollAdjustPending = (_a3 = peek$(ctx, "scrollAdjustPending")) != null ? _a3 : 0;
+    const scrollAdjustPad = scrollAdjustPending - topPad;
     let scroll = scrollState + scrollExtra + scrollAdjustPad;
     if (scroll + scrollLength > totalSize) {
       scroll = Math.max(0, totalSize - scrollLength);
@@ -2042,6 +2358,11 @@ 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;
+    set$(ctx, "activeStickyIndex", nextActiveStickyIndex);
     let scrollBufferTop = scrollBuffer;
     let scrollBufferBottom = scrollBuffer;
     if (speed > 0 || speed === 0 && scroll < Math.max(50, scrollBuffer)) {
@@ -2054,22 +2375,38 @@ function calculateItemsInView(ctx, state, params = {}) {
     const scrollTopBuffered = scroll - scrollBufferTop;
     const scrollBottom = scroll + scrollLength + (scroll < 0 ? -scroll : 0);
     const scrollBottomBuffered = scrollBottom + scrollBufferBottom;
-    if (scrollForNextCalculateItemsInView) {
+    if (!dataChanged && scrollForNextCalculateItemsInView) {
       const { top, bottom } = scrollForNextCalculateItemsInView;
       if (scrollTopBuffered > top && scrollBottomBuffered < bottom) {
         return;
       }
     }
+    const checkMVCP = doMVCP ? prepareMVCP(ctx, state, dataChanged) : void 0;
+    if (dataChanged) {
+      indexByKey.clear();
+      idCache.length = 0;
+      positions.clear();
+    }
+    const startIndex = dataChanged ? 0 : (_b = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _b : 0;
+    updateItemPositions(ctx, state, dataChanged, {
+      forceFullUpdate: !!forceFullItemPositions,
+      scrollBottomBuffered,
+      startIndex
+    });
+    if (minIndexSizeChanged !== void 0) {
+      state.minIndexSizeChanged = void 0;
+    }
+    checkMVCP == null ? void 0 : checkMVCP();
     let startNoBuffer = null;
     let startBuffered = null;
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    let loopStart = startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    let loopStart = !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
     for (let i = loopStart; i >= 0; i--) {
-      const id = (_a = idCache.get(i)) != null ? _a : getId(state, i);
+      const id = (_c = idCache[i]) != null ? _c : getId(state, i);
       const top = positions.get(id);
-      const size = (_b = sizes.get(id)) != null ? _b : getItemSize(state, id, i, data[i]);
+      const size = (_d = sizes.get(id)) != null ? _d : getItemSize(ctx, state, id, i, data[i]);
       const bottom = top + size;
       if (bottom > scroll - scrollBuffer) {
         loopStart = i;
@@ -2095,8 +2432,8 @@ 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 = (_c = idCache.get(i)) != null ? _c : getId(state, i);
-      const size = (_d = sizes.get(id)) != null ? _d : getItemSize(state, id, i, data[i]);
+      const id = (_e = idCache[i]) != null ? _e : getId(state, i);
+      const size = (_f = sizes.get(id)) != null ? _f : getItemSize(ctx, state, id, i, data[i]);
       const top = positions.get(id);
       if (!foundEnd) {
         if (startNoBuffer === null && top + size > scroll) {
@@ -2125,7 +2462,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     }
     const idsInView = [];
     for (let i = firstFullyOnScreenIndex; i <= endNoBuffer; i++) {
-      const id = (_e = idCache.get(i)) != null ? _e : getId(state, i);
+      const id = (_g = idCache[i]) != null ? _g : getId(state, i);
       idsInView.push(id);
     }
     Object.assign(state, {
@@ -2157,7 +2494,7 @@ function calculateItemsInView(ctx, state, params = {}) {
       let numContainers2 = prevNumContainers;
       const needNewContainers = [];
       for (let i = startBuffered; i <= endBuffered; i++) {
-        const id = (_f = idCache.get(i)) != null ? _f : getId(state, i);
+        const id = (_h = idCache[i]) != null ? _h : getId(state, i);
         if (!containerItemKeys.has(id)) {
           needNewContainers.push(i);
         }
@@ -2168,11 +2505,14 @@ function calculateItemsInView(ctx, state, params = {}) {
           state,
           stickyIndicesSet,
           stickyIndicesArr,
-          scroll,
+          currentStickyIdx,
           needNewContainers,
           startBuffered,
           endBuffered
         );
+      } else {
+        state.activeStickyIndex = void 0;
+        set$(ctx, "activeStickyIndex", void 0);
       }
       if (needNewContainers.length > 0) {
         const requiredItemTypes = getItemType ? needNewContainers.map((i) => {
@@ -2192,7 +2532,7 @@ function calculateItemsInView(ctx, state, params = {}) {
         for (let idx = 0; idx < needNewContainers.length; idx++) {
           const i = needNewContainers[idx];
           const containerIndex = availableContainers[idx];
-          const id = (_g = idCache.get(i)) != null ? _g : getId(state, i);
+          const id = (_i = idCache[i]) != null ? _i : getId(state, i);
           const oldKey = peek$(ctx, `containerItemKey${containerIndex}`);
           if (oldKey && oldKey !== id) {
             containerItemKeys.delete(oldKey);
@@ -2206,9 +2546,10 @@ 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}`, createAnimatedValue(topPadding));
+            set$(ctx, `containerStickyOffset${containerIndex}`, topPadding);
             state.stickyContainerPool.add(containerIndex);
           } else {
+            set$(ctx, `containerSticky${containerIndex}`, false);
             state.stickyContainerPool.delete(containerIndex);
           }
           if (containerIndex >= numContainers2) {
@@ -2224,13 +2565,13 @@ function calculateItemsInView(ctx, state, params = {}) {
       }
     }
     if (stickyIndicesArr.length > 0) {
-      handleStickyRecycling(ctx, state, stickyIndicesArr, scroll, scrollBuffer, pendingRemoval);
+      handleStickyRecycling(ctx, state, stickyIndicesArr, scroll, scrollBuffer, currentStickyIdx, pendingRemoval);
     }
     let didChangePositions = false;
     for (let i = 0; i < numContainers; i++) {
       const itemKey = peek$(ctx, `containerItemKey${i}`);
       if (pendingRemoval.includes(i)) {
-        if (itemKey) {
+        if (itemKey !== void 0) {
           containerItemKeys.delete(itemKey);
         }
         state.containerItemTypes.delete(i);
@@ -2247,11 +2588,12 @@ function calculateItemsInView(ctx, state, params = {}) {
         const itemIndex = indexByKey.get(itemKey);
         const item = data[itemIndex];
         if (item !== void 0) {
-          const id = (_h = idCache.get(itemIndex)) != null ? _h : getId(state, itemIndex);
-          const position = positions.get(id);
-          if (position === void 0) {
+          const id = (_j = idCache[itemIndex]) != null ? _j : 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 prevPos = peek$(ctx, `containerPosition${i}`);
             const prevColumn = peek$(ctx, `containerColumn${i}`);
@@ -2264,7 +2606,7 @@ function calculateItemsInView(ctx, state, params = {}) {
               set$(ctx, `containerColumn${i}`, column);
             }
             if (prevData !== item && (itemsAreEqual ? !itemsAreEqual(prevData, item, itemIndex, data) : true)) {
-              set$(ctx, `containerItemData${i}`, data[itemIndex]);
+              set$(ctx, `containerItemData${i}`, item);
             }
           }
         }
@@ -2281,12 +2623,140 @@ 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 });
+      }
+    }
+  });
+}
+
+// src/core/checkActualChange.ts
+function checkActualChange(state, dataProp, previousData) {
+  if (!previousData || !dataProp || dataProp.length !== previousData.length) {
+    return true;
+  }
+  const {
+    idCache,
+    props: { keyExtractor }
+  } = state;
+  for (let i = 0; i < dataProp.length; i++) {
+    if (dataProp[i] !== previousData[i]) {
+      return true;
+    }
+    if (keyExtractor ? idCache[i] !== keyExtractor(previousData[i], i) : dataProp[i] !== previousData[i]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// src/core/doMaintainScrollAtEnd.ts
+function doMaintainScrollAtEnd(ctx, state, animated) {
+  const {
+    refScroller,
+    props: { maintainScrollAtEnd }
+  } = state;
+  if ((state == null ? void 0 : state.isAtEnd) && maintainScrollAtEnd && peek$(ctx, "containersDidLayout")) {
+    const paddingTop = peek$(ctx, "alignItemsPaddingTop");
+    if (paddingTop > 0) {
+      state.scroll = 0;
+    }
+    requestAnimationFrame(() => {
+      var _a3;
+      if (state == null ? void 0 : state.isAtEnd) {
+        state.maintainingScrollAtEnd = true;
+        (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
+          animated
+        });
+        setTimeout(
+          () => {
+            state.maintainingScrollAtEnd = false;
+          },
+          0
+        );
+      }
+    });
+    return true;
+  }
+}
+
+// src/utils/updateAveragesOnDataChange.ts
+function updateAveragesOnDataChange(state, oldData, newData) {
+  var _a3;
+  const {
+    averageSizes,
+    sizesKnown,
+    indexByKey,
+    props: { itemsAreEqual, getItemType, keyExtractor }
+  } = state;
+  if (!itemsAreEqual || !oldData.length || !newData.length) {
+    for (const key in averageSizes) {
+      delete averageSizes[key];
+    }
+    return;
+  }
+  const itemTypesToPreserve = {};
+  const newDataLength = newData.length;
+  const oldDataLength = oldData.length;
+  for (let newIndex = 0; newIndex < newDataLength; newIndex++) {
+    const newItem = newData[newIndex];
+    const id = keyExtractor ? keyExtractor(newItem, newIndex) : String(newIndex);
+    const oldIndex = indexByKey.get(id);
+    if (oldIndex !== void 0 && oldIndex < oldDataLength) {
+      const knownSize = sizesKnown.get(id);
+      if (knownSize === void 0) continue;
+      const oldItem = oldData[oldIndex];
+      const areEqual = itemsAreEqual(oldItem, newItem, newIndex, newData);
+      if (areEqual) {
+        const itemType = getItemType ? (_a3 = getItemType(newItem, newIndex)) != null ? _a3 : "" : "";
+        let typeData = itemTypesToPreserve[itemType];
+        if (!typeData) {
+          typeData = itemTypesToPreserve[itemType] = { count: 0, totalSize: 0 };
+        }
+        typeData.totalSize += knownSize;
+        typeData.count++;
+      }
+    }
+  }
+  for (const key in averageSizes) {
+    delete averageSizes[key];
+  }
+  for (const itemType in itemTypesToPreserve) {
+    const { totalSize, count } = itemTypesToPreserve[itemType];
+    if (count > 0) {
+      averageSizes[itemType] = {
+        avg: totalSize / count,
+        num: count
+      };
+    }
+  }
+}
+
+// src/core/checkResetContainers.ts
+function checkResetContainers(ctx, state, dataProp) {
+  const { previousData } = state;
+  if (previousData) {
+    updateAveragesOnDataChange(state, previousData, dataProp);
+  }
+  const { maintainScrollAtEnd } = state.props;
+  calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
+  const shouldMaintainScrollAtEnd = maintainScrollAtEnd === true || maintainScrollAtEnd.onDataChange;
+  const didMaintainScrollAtEnd = shouldMaintainScrollAtEnd && doMaintainScrollAtEnd(ctx, state, false);
+  if (!didMaintainScrollAtEnd && previousData && dataProp.length > previousData.length) {
+    state.isEndReached = false;
+  }
+  if (!didMaintainScrollAtEnd) {
+    checkAtTop(state);
+    checkAtBottom(ctx, state);
+  }
+  delete state.previousData;
 }
 
 // src/core/doInitialAllocateContainers.ts
 function doInitialAllocateContainers(ctx, state) {
-  var _a;
+  var _a3, _b, _c;
   const {
     scrollLength,
     props: {
@@ -2302,12 +2772,13 @@ function doInitialAllocateContainers(ctx, state) {
   const hasContainers = peek$(ctx, "numContainers");
   if (scrollLength > 0 && data.length > 0 && !hasContainers) {
     let averageItemSize;
-    const fn = getFixedItemSize || getEstimatedItemSize;
-    if (fn) {
+    if (getFixedItemSize || getEstimatedItemSize) {
       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 ? (_a3 = getItemType(item, i)) != null ? _a3 : "" : "";
+        totalSize += (_c = (_b = getFixedItemSize == null ? void 0 : getFixedItemSize(i, item, itemType)) != null ? _b : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(i, item, itemType)) != null ? _c : estimatedItemSize;
       }
       averageItemSize = totalSize / num;
     } else {
@@ -2321,76 +2792,18 @@ function doInitialAllocateContainers(ctx, state) {
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * state.props.initialContainerPoolRatio);
     if (state.lastLayout) {
-      if (state.props.initialScroll) {
+      if (state.initialScroll) {
         requestAnimationFrame(() => {
-          calculateItemsInView(ctx, state, { dataChanged: true });
+          calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
         });
       } else {
-        calculateItemsInView(ctx, state, { dataChanged: true });
+        calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
       }
     }
     return true;
   }
 }
 
-// src/core/doMaintainScrollAtEnd.ts
-function doMaintainScrollAtEnd(ctx, state, animated) {
-  const {
-    refScroller,
-    props: { maintainScrollAtEnd }
-  } = state;
-  if ((state == null ? void 0 : state.isAtEnd) && maintainScrollAtEnd && peek$(ctx, "containersDidLayout")) {
-    const paddingTop = peek$(ctx, "alignItemsPaddingTop");
-    if (paddingTop > 0) {
-      state.scroll = 0;
-    }
-    requestAnimationFrame(() => {
-      var _a;
-      if (state == null ? void 0 : state.isAtEnd) {
-        state.maintainingScrollAtEnd = true;
-        (_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
-          animated
-        });
-        setTimeout(
-          () => {
-            state.maintainingScrollAtEnd = false;
-          },
-          0
-        );
-      }
-    });
-    return true;
-  }
-}
-
-// src/utils/checkAtTop.ts
-function checkAtTop(state) {
-  if (!state) {
-    return;
-  }
-  const {
-    scrollLength,
-    scroll,
-    props: { onStartReachedThreshold }
-  } = state;
-  const distanceFromTop = scroll;
-  state.isAtStart = distanceFromTop <= 0;
-  state.isStartReached = checkThreshold(
-    distanceFromTop,
-    false,
-    onStartReachedThreshold * scrollLength,
-    state.isStartReached,
-    state.startReachedBlockedByTimer,
-    (distance) => {
-      var _a, _b;
-      return (_b = (_a = state.props).onStartReached) == null ? void 0 : _b.call(_a, { distanceFromStart: distance });
-    },
-    (block) => {
-      state.startReachedBlockedByTimer = block;
-    }
-  );
-}
-
 // src/core/handleLayout.ts
 function handleLayout(ctx, state, layout, setCanRender) {
   const { maintainScrollAtEnd } = state.props;
@@ -2425,87 +2838,57 @@ function handleLayout(ctx, state, layout, setCanRender) {
     if (state) {
       state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
     }
-    if (__DEV__ && measuredLength === 0) {
+    if (IS_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);
-  }
-}
-
-// src/core/onScroll.ts
-function onScroll(ctx, state, event) {
-  var _a, _b, _c;
-  const {
-    scrollProcessingEnabled,
-    props: { onScroll: onScrollProp }
-  } = state;
-  if (scrollProcessingEnabled === false) {
-    return;
-  }
-  if (((_b = (_a = event.nativeEvent) == null ? void 0 : _a.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
-    return;
-  }
-  const newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
-  const ignoreScrollFromMVCP = state.ignoreScrollFromMVCP;
-  if (ignoreScrollFromMVCP && !state.scrollingTo) {
-    const { lt, gt } = ignoreScrollFromMVCP;
-    if (lt && newScroll < lt || gt && newScroll > gt) {
-      return;
-    }
-  }
-  state.scrollPending = newScroll;
-  {
-    if (!state.onScrollRafScheduled) {
-      state.onScrollRafScheduled = true;
-      requestAnimationFrame(() => {
-        state.onScrollRafScheduled = false;
-        updateScroll(ctx, state, newScroll);
-      });
-    }
-  }
-  onScrollProp == null ? void 0 : onScrollProp(event);
-}
-function updateScroll(ctx, state, newScroll) {
-  const scrollingTo = state.scrollingTo;
-  state.hasScrolled = true;
-  state.lastBatchingAction = Date.now();
-  const currentTime = Date.now();
-  if (scrollingTo === void 0 && !(state.scrollHistory.length === 0 && newScroll === state.scroll)) {
-    const adjust = state.scrollAdjustHandler.getAdjust();
-    state.scrollHistory.push({ scroll: newScroll - adjust, time: currentTime });
-  }
-  if (state.scrollHistory.length > 5) {
-    state.scrollHistory.shift();
-  }
-  state.scrollPrev = state.scroll;
-  state.scrollPrevTime = state.scrollTime;
-  state.scroll = newScroll;
-  state.scrollTime = currentTime;
-  if (Math.abs(state.scroll - state.scrollPrev) > 2) {
-    calculateItemsInView(ctx, state);
-    checkAtBottom(ctx, state);
-    checkAtTop(state);
   }
+  setCanRender(true);
 }
 
 // src/core/ScrollAdjustHandler.ts
 var ScrollAdjustHandler = class {
   constructor(ctx) {
     this.appliedAdjust = 0;
+    this.pendingAdjust = 0;
     this.mounted = false;
     this.context = ctx;
+    {
+      const commitPendingAdjust = () => {
+        const state = this.context.internalState;
+        const pending = this.pendingAdjust;
+        if (pending !== 0) {
+          this.pendingAdjust = 0;
+          this.appliedAdjust += pending;
+          state.scroll += pending;
+          state.scrollForNextCalculateItemsInView = void 0;
+          set$(this.context, "scrollAdjustPending", 0);
+          set$(this.context, "scrollAdjust", this.appliedAdjust);
+          calculateItemsInView(this.context, this.context.internalState);
+        }
+      };
+      listen$(this.context, "scrollingTo", (value) => {
+        if (value === void 0) {
+          commitPendingAdjust();
+        }
+      });
+    }
   }
   requestAdjust(add) {
-    const oldAdjustTop = peek$(this.context, "scrollAdjust") || 0;
-    this.appliedAdjust = add + oldAdjustTop;
-    const set = () => set$(this.context, "scrollAdjust", this.appliedAdjust);
-    if (this.mounted) {
-      set();
+    const scrollingTo = peek$(this.context, "scrollingTo");
+    if ((scrollingTo == null ? void 0 : scrollingTo.animated) && !scrollingTo.isInitialScroll) {
+      this.pendingAdjust += add;
+      set$(this.context, "scrollAdjustPending", this.pendingAdjust);
     } else {
-      requestAnimationFrame(set);
+      this.appliedAdjust += add;
+      const setter = () => set$(this.context, "scrollAdjust", this.appliedAdjust);
+      if (this.mounted) {
+        setter();
+      } else {
+        requestAnimationFrame(setter);
+      }
     }
   }
   setMounted() {
@@ -2518,14 +2901,13 @@ var ScrollAdjustHandler = class {
 
 // src/core/updateItemSize.ts
 function updateItemSize(ctx, state, itemKey, sizeObj) {
-  var _a, _b;
+  var _a3;
   const {
     sizesKnown,
     props: {
       getFixedItemSize,
       getItemType,
       horizontal,
-      maintainVisibleContentPosition,
       suggestEstimatedItemSize,
       onItemSizeChanged,
       data,
@@ -2533,17 +2915,17 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
     }
   } = state;
   if (!data) return;
+  const index = state.indexByKey.get(itemKey);
   if (getFixedItemSize) {
-    const index2 = state.indexByKey.get(itemKey);
-    if (index2 === void 0) {
+    if (index === void 0) {
       return;
     }
-    const itemData = state.props.data[index2];
+    const itemData = state.props.data[index];
     if (itemData === void 0) {
       return;
     }
-    const type = getItemType ? (_a = getItemType(itemData, index2)) != null ? _a : "" : "";
-    const size2 = getFixedItemSize(index2, itemData, type);
+    const type = getItemType ? (_a3 = getItemType(itemData, index)) != null ? _a3 : "" : "";
+    const size2 = getFixedItemSize(index, itemData, type);
     if (size2 !== void 0 && size2 === sizesKnown.get(itemKey)) {
       return;
     }
@@ -2553,15 +2935,11 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
   let shouldMaintainScrollAtEnd = false;
   let minIndexSizeChanged;
   let maxOtherAxisSize = peek$(ctx, "otherAxisSize") || 0;
-  const index = state.indexByKey.get(itemKey);
   const prevSizeKnown = state.sizesKnown.get(itemKey);
-  const diff = updateOneItemSize(state, itemKey, sizeObj);
-  const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
+  const diff = updateOneItemSize(ctx, state, itemKey, sizeObj);
+  const size = roundSize(horizontal ? sizeObj.width : sizeObj.height);
   if (diff !== 0) {
     minIndexSizeChanged = minIndexSizeChanged !== void 0 ? Math.min(minIndexSizeChanged, index) : index;
-    if (((_b = state.scrollingTo) == null ? void 0 : _b.viewPosition) && maintainVisibleContentPosition && index === state.scrollingTo.index && diff > 0) {
-      requestAdjust(ctx, state, diff * state.scrollingTo.viewPosition);
-    }
     const { startBuffered, endBuffered } = state;
     needsRecalculate || (needsRecalculate = index >= startBuffered && index <= endBuffered);
     if (!needsRecalculate) {
@@ -2591,13 +2969,13 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
   if (minIndexSizeChanged !== void 0) {
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, minIndexSizeChanged) : minIndexSizeChanged;
   }
-  if (__DEV__ && suggestEstimatedItemSize && minIndexSizeChanged !== void 0) {
+  if (IS_DEV && suggestEstimatedItemSize && minIndexSizeChanged !== void 0) {
     if (state.timeoutSizeMessage) clearTimeout(state.timeoutSizeMessage);
     state.timeoutSizeMessage = setTimeout(() => {
-      var _a2;
+      var _a4;
       state.timeoutSizeMessage = void 0;
       const num = state.sizesKnown.size;
-      const avg = (_a2 = state.averageSizes[""]) == null ? void 0 : _a2.avg;
+      const avg = (_a4 = state.averageSizes[""]) == null ? void 0 : _a4.avg;
       console.warn(
         `[legend-list] Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
       );
@@ -2619,8 +2997,8 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
     }
   }
 }
-function updateOneItemSize(state, itemKey, sizeObj) {
-  var _a;
+function updateOneItemSize(ctx, state, itemKey, sizeObj) {
+  var _a3;
   const {
     sizes,
     indexByKey,
@@ -2630,12 +3008,12 @@ function updateOneItemSize(state, itemKey, sizeObj) {
   } = state;
   if (!data) return 0;
   const index = indexByKey.get(itemKey);
-  const prevSize = getItemSize(state, itemKey, index, data);
+  const prevSize = getItemSize(ctx, state, itemKey, index, data[index]);
   const rawSize = horizontal ? sizeObj.width : sizeObj.height;
   const size = Math.round(rawSize) ;
   sizesKnown.set(itemKey, size);
   if (!getEstimatedItemSize && !getFixedItemSize && size > 0) {
-    const itemType = getItemType ? (_a = getItemType(data[index], index)) != null ? _a : "" : "";
+    const itemType = getItemType ? (_a3 = getItemType(data[index], index)) != null ? _a3 : "" : "";
     let averages = averageSizes[itemType];
     if (!averages) {
       averages = averageSizes[itemType] = { avg: 0, num: 0 };
@@ -2644,13 +3022,13 @@ function updateOneItemSize(state, itemKey, sizeObj) {
     averages.num++;
   }
   if (!prevSize || Math.abs(prevSize - size) > 0.1) {
-    sizes.set(itemKey, size);
+    setSize(ctx, state, itemKey, size);
     return size - prevSize;
   }
   return 0;
 }
 var useCombinedRef = (...refs) => {
-  const callback = React4.useCallback((element) => {
+  const callback = React3.useCallback((element) => {
     for (const ref of refs) {
       if (!ref) {
         continue;
@@ -2666,24 +3044,12 @@ var useCombinedRef = (...refs) => {
 };
 
 // src/platform/RefreshControl.tsx
-function RefreshControl(props) {
+function RefreshControl(_props) {
   return null;
 }
 
-// src/platform/StyleSheet.tsx
-function flattenStyles(styles) {
-  if (Array.isArray(styles)) {
-    return Object.assign({}, ...styles.filter(Boolean));
-  }
-  return styles;
-}
-var StyleSheet = {
-  create: (styles) => styles,
-  flatten: (style) => flattenStyles(style)
-};
-
 // src/platform/useStickyScrollHandler.ts
-function useStickyScrollHandler(stickyIndices, horizontal, ctx, onScroll2) {
+function useStickyScrollHandler(_stickyIndices, _horizontal, _ctx, onScroll2) {
   return onScroll2;
 }
 
@@ -2701,8 +3067,93 @@ function createColumnWrapperStyle(contentContainerStyle) {
     };
   }
 }
+
+// src/utils/createImperativeHandle.ts
+function createImperativeHandle(ctx, state) {
+  const scrollIndexIntoView = (options) => {
+    if (state) {
+      const { index, ...rest } = options;
+      const { startNoBuffer, endNoBuffer } = state;
+      if (index < startNoBuffer || index > endNoBuffer) {
+        const viewPosition = index < startNoBuffer ? 0 : 1;
+        scrollToIndex(ctx, state, {
+          ...rest,
+          index,
+          viewPosition
+        });
+      }
+    }
+  };
+  const refScroller = state.refScroller;
+  return {
+    flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
+    getNativeScrollRef: () => refScroller.current,
+    getScrollableNode: () => refScroller.current.getScrollableNode(),
+    getScrollResponder: () => refScroller.current.getScrollResponder(),
+    getState: () => ({
+      activeStickyIndex: state.activeStickyIndex,
+      contentLength: state.totalSize,
+      data: state.props.data,
+      elementAtIndex: (index) => {
+        var _a3;
+        return (_a3 = ctx.viewRefs.get(findContainerId(ctx, getId(state, index)))) == null ? void 0 : _a3.current;
+      },
+      end: state.endNoBuffer,
+      endBuffered: state.endBuffered,
+      isAtEnd: state.isAtEnd,
+      isAtStart: state.isAtStart,
+      positionAtIndex: (index) => state.positions.get(getId(state, index)),
+      positions: state.positions,
+      scroll: state.scroll,
+      scrollLength: state.scrollLength,
+      sizeAtIndex: (index) => state.sizesKnown.get(getId(state, index)),
+      sizes: state.sizesKnown,
+      start: state.startNoBuffer,
+      startBuffered: state.startBuffered
+    }),
+    scrollIndexIntoView,
+    scrollItemIntoView: ({ item, ...props }) => {
+      const data = state.props.data;
+      const index = data.indexOf(item);
+      if (index !== -1) {
+        scrollIndexIntoView({ index, ...props });
+      }
+    },
+    scrollToEnd: (options) => {
+      const data = state.props.data;
+      const stylePaddingBottom = state.props.stylePaddingBottom;
+      const index = data.length - 1;
+      if (index !== -1) {
+        const paddingBottom = stylePaddingBottom || 0;
+        const footerSize = peek$(ctx, "footerSize") || 0;
+        scrollToIndex(ctx, state, {
+          index,
+          viewOffset: -paddingBottom - footerSize + ((options == null ? void 0 : options.viewOffset) || 0),
+          viewPosition: 1,
+          ...options
+        });
+      }
+    },
+    scrollToIndex: (params) => scrollToIndex(ctx, state, params),
+    scrollToItem: ({ item, ...props }) => {
+      const data = state.props.data;
+      const index = data.indexOf(item);
+      if (index !== -1) {
+        scrollToIndex(ctx, state, { index, ...props });
+      }
+    },
+    scrollToOffset: (params) => scrollTo(ctx, state, params),
+    setScrollProcessingEnabled: (enabled) => {
+      state.scrollProcessingEnabled = enabled;
+    },
+    setVisibleContentAnchorOffset: (value) => {
+      const val = isFunction(value) ? value(peek$(ctx, "scrollAdjustUserOffset") || 0) : value;
+      set$(ctx, "scrollAdjustUserOffset", val);
+    }
+  };
+}
 function getRenderedItem(ctx, state, key) {
-  var _a;
+  var _a3;
   if (!state) {
     return null;
   }
@@ -2715,29 +3166,31 @@ 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 ? (_a3 = getItemType(item, index)) != null ? _a3 : "" : ""
     };
-    renderedItem = isFunction(renderItem) ? renderItem(itemProps) : React4__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 = React4.useRef(null);
-  const lastCallTimeRef = React4.useRef(0);
-  const lastArgsRef = React4.useRef(null);
+  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 = React4.useCallback(
+  const execute = React3.useCallback(
     (callback, delay, ...args) => {
       {
         const now = Date.now();
@@ -2773,58 +3226,6 @@ function useThrottledOnScroll(originalHandler, scrollEventThrottle) {
   return (event) => throttle(originalHandler, scrollEventThrottle, { nativeEvent: event.nativeEvent });
 }
 
-// src/utils/updateAveragesOnDataChange.ts
-function updateAveragesOnDataChange(state, oldData, newData) {
-  var _a;
-  const {
-    averageSizes,
-    sizesKnown,
-    indexByKey,
-    props: { itemsAreEqual, getItemType, keyExtractor }
-  } = state;
-  if (!itemsAreEqual || !oldData.length || !newData.length) {
-    for (const key in averageSizes) {
-      delete averageSizes[key];
-    }
-    return;
-  }
-  const itemTypesToPreserve = {};
-  const newDataLength = newData.length;
-  const oldDataLength = oldData.length;
-  for (let newIndex = 0; newIndex < newDataLength; newIndex++) {
-    const newItem = newData[newIndex];
-    const id = keyExtractor ? keyExtractor(newItem, newIndex) : String(newIndex);
-    const oldIndex = indexByKey.get(id);
-    if (oldIndex !== void 0 && oldIndex < oldDataLength) {
-      const knownSize = sizesKnown.get(id);
-      if (knownSize === void 0) continue;
-      const oldItem = oldData[oldIndex];
-      const areEqual = itemsAreEqual(oldItem, newItem, newIndex, newData);
-      if (areEqual) {
-        const itemType = getItemType ? (_a = getItemType(newItem, newIndex)) != null ? _a : "" : "";
-        let typeData = itemTypesToPreserve[itemType];
-        if (!typeData) {
-          typeData = itemTypesToPreserve[itemType] = { count: 0, totalSize: 0 };
-        }
-        typeData.totalSize += knownSize;
-        typeData.count++;
-      }
-    }
-  }
-  for (const key in averageSizes) {
-    delete averageSizes[key];
-  }
-  for (const itemType in itemTypesToPreserve) {
-    const { totalSize, count } = itemTypesToPreserve[itemType];
-    if (count > 0) {
-      averageSizes[itemType] = {
-        avg: totalSize / count,
-        num: count
-      };
-    }
-  }
-}
-
 // src/components/LegendList.tsx
 var DEFAULT_DRAW_DISTANCE = 250;
 var DEFAULT_ITEM_SIZE = 100;
@@ -2834,22 +3235,24 @@ var LegendList = typedMemo(
     const isChildrenMode = children !== void 0 && dataProp === void 0;
     const processedProps = isChildrenMode ? {
       ...restProps,
-      data: (isArray(children) ? children : React4__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__ */ React4__namespace.createElement(StateProvider, null, /* @__PURE__ */ React4__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) {
+  var _a3;
   const {
     alignItemsAtEnd = false,
     columnWrapperStyle,
     contentContainerStyle: contentContainerStyleProp,
     data: dataProp = [],
+    dataVersion,
     drawDistance = 250,
     enableAverages = true,
     estimatedItemSize: estimatedItemSizeProp,
@@ -2860,6 +3263,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     getItemType,
     horizontal,
     initialContainerPoolRatio = 2,
+    initialScrollAtEnd = false,
     initialScrollIndex: initialScrollIndexProp,
     initialScrollOffset: initialScrollOffsetProp,
     itemsAreEqual,
@@ -2880,6 +3284,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onScroll: onScrollProp,
     onStartReached,
     onStartReachedThreshold = 0.5,
+    onStickyHeaderChange,
+    onViewableItemsChanged,
     progressViewOffset,
     recycleItems = false,
     refreshControl,
@@ -2891,24 +3297,26 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     stickyIndices,
     style: styleProp,
     suggestEstimatedItemSize,
+    viewabilityConfig,
+    viewabilityConfigCallbackPairs,
     waitForInitialLayout = true,
     ...rest
   } = props;
-  const [renderNum, setRenderNum] = React4.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] = React4__namespace.useState(!IsNewArchitecture);
   const contentContainerStyle = { ...StyleSheet.flatten(contentContainerStyleProp) };
   const style = { ...StyleSheet.flatten(styleProp) };
   const stylePaddingTopState = extractPadding(style, contentContainerStyle, "Top");
   const stylePaddingBottomState = extractPadding(style, contentContainerStyle, "Bottom");
+  const [renderNum, setRenderNum] = React3.useState(0);
+  const initialScrollProp = initialScrollAtEnd ? { index: Math.max(0, dataProp.length - 1), viewOffset: -stylePaddingBottomState } : initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? { index: initialScrollIndexProp.index || 0, viewOffset: initialScrollIndexProp.viewOffset || 0 } : { index: initialScrollIndexProp || 0, viewOffset: initialScrollOffsetProp || 0 } : void 0;
+  const [canRender, setCanRender] = React3__namespace.useState(!IsNewArchitecture);
   const ctx = useStateContext();
   ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
-  const refScroller = React4.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 = React4.useRef();
+  const refState = React3.useRef();
   if (!refState.current) {
     if (!ctx.internalState) {
       const initialScrollLength = (estimatedListSize != null ? estimatedListSize : { height: 0, width: 0 } )[horizontal ? "width" : "height"];
@@ -2918,18 +3326,22 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         columns: /* @__PURE__ */ new Map(),
         containerItemKeys: /* @__PURE__ */ new Set(),
         containerItemTypes: /* @__PURE__ */ new Map(),
+        dataChangeNeedsScrollUpdate: false,
+        didColumnsChange: false,
+        didDataChange: false,
         enableScrollForNextCalculateItemsInView: true,
         endBuffered: -1,
         endNoBuffer: -1,
-        endReachedBlockedByTimer: false,
+        endReachedSnapshot: void 0,
         firstFullyOnScreenIndex: -1,
-        idCache: /* @__PURE__ */ new Map(),
+        idCache: [],
         idsInView: [],
         indexByKey: /* @__PURE__ */ new Map(),
-        initialScroll,
+        initialScroll: initialScrollProp,
         isAtEnd: false,
         isAtStart: false,
         isEndReached: false,
+        isFirst: true,
         isStartReached: false,
         lastBatchingAction: Date.now(),
         lastLayout: void 0,
@@ -2954,7 +3366,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         sizesKnown: /* @__PURE__ */ new Map(),
         startBuffered: -1,
         startNoBuffer: -1,
-        startReachedBlockedByTimer: false,
+        startReachedSnapshot: void 0,
         stickyContainerPool: /* @__PURE__ */ new Set(),
         stickyContainers: /* @__PURE__ */ new Map(),
         timeoutSizeMessage: 0,
@@ -2962,21 +3374,27 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         totalSize: 0,
         viewabilityConfigCallbackPairs: void 0
       };
+      const internalState = ctx.internalState;
+      internalState.triggerCalculateItemsInView = (params) => calculateItemsInView(ctx, internalState, params);
       set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
       set$(ctx, "extraData", extraData);
     }
     refState.current = ctx.internalState;
   }
   const state = refState.current;
-  const isFirst = !state.props.renderItem;
-  const didDataChange = state.props.data !== dataProp;
-  const throttleScrollFn = (
-    // @ts-expect-error TODO Fix this
-    scrollEventThrottle && onScrollProp ? useThrottledOnScroll(onScrollProp, scrollEventThrottle) : onScrollProp
-  );
+  const isFirstLocal = state.isFirst;
+  state.didColumnsChange = numColumnsProp !== state.props.numColumns;
+  const didDataChangeLocal = state.props.dataVersion !== dataVersion || state.props.data !== dataProp && checkActualChange(state, dataProp, state.props.data);
+  if (didDataChangeLocal) {
+    state.dataChangeNeedsScrollUpdate = true;
+    state.didDataChange = true;
+    state.previousData = state.props.data;
+  }
+  const throttleScrollFn = scrollEventThrottle && onScrollProp ? useThrottledOnScroll(onScrollProp, scrollEventThrottle) : onScrollProp;
   state.props = {
     alignItemsAtEnd,
     data: dataProp,
+    dataVersion,
     enableAverages,
     estimatedItemSize,
     getEstimatedItemSize,
@@ -2984,7 +3402,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     getItemType,
     horizontal: !!horizontal,
     initialContainerPoolRatio,
-    initialScroll,
     itemsAreEqual,
     keyExtractor,
     maintainScrollAtEnd,
@@ -2998,45 +3415,25 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onScroll: throttleScrollFn,
     onStartReached,
     onStartReachedThreshold,
+    onStickyHeaderChange,
     recycleItems: !!recycleItems,
     renderItem,
     scrollBuffer,
     snapToIndices,
     stickyIndicesArr: stickyIndices != null ? stickyIndices : [],
-    stickyIndicesSet: React4.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 checkResetContainers = (isFirst2) => {
-    const state2 = refState.current;
-    if (state2) {
-      if (!isFirst2 && state2.props.data !== dataProp) {
-        updateAveragesOnDataChange(state2, state2.props.data, dataProp);
-      }
-      state2.props.data = dataProp;
-      if (!isFirst2) {
-        calculateItemsInView(ctx, state2, { dataChanged: true, doMVCP: true });
-        const shouldMaintainScrollAtEnd = maintainScrollAtEnd === true || maintainScrollAtEnd.onDataChange;
-        const didMaintainScrollAtEnd = shouldMaintainScrollAtEnd && doMaintainScrollAtEnd(ctx, state2, false);
-        if (!didMaintainScrollAtEnd && dataProp.length > state2.props.data.length) {
-          state2.isEndReached = false;
-        }
-        if (!didMaintainScrollAtEnd) {
-          checkAtTop(state2);
-          checkAtBottom(ctx, state2);
-        }
-      }
-    }
-  };
-  const memoizedLastItemKeys = React4.useMemo(() => {
+  const memoizedLastItemKeys = React3.useMemo(() => {
     if (!dataProp.length) return [];
     return Array.from(
       { length: Math.min(numColumnsProp, dataProp.length) },
       (_, i) => getId(state, dataProp.length - 1 - i)
     );
-  }, [dataProp, numColumnsProp]);
+  }, [dataProp, dataVersion, numColumnsProp]);
   const initializeStateVars = () => {
     set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
@@ -3051,37 +3448,52 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       requestAdjust(ctx, state, paddingDiff);
     }
   };
-  if (isFirst) {
+  if (isFirstLocal) {
     initializeStateVars();
-    updateAllPositions(ctx, state);
+    updateItemPositions(
+      ctx,
+      state,
+      /*dataChanged*/
+      true
+    );
   }
-  const initialContentOffset = React4.useMemo(() => {
-    if (initialScroll) {
-      const { index, viewOffset } = initialScroll;
-      let initialContentOffset2 = viewOffset || 0;
-      if (index !== void 0) {
-        initialContentOffset2 += calculateOffsetForIndex(ctx, state, index);
-      }
-      refState.current.isStartReached = initialContentOffset2 < refState.current.scrollLength * onStartReachedThreshold;
-      if (initialContentOffset2 > 0) {
-        scrollTo(state, { animated: false, index, offset: initialContentOffset2 });
-      }
-      return initialContentOffset2;
-    }
-    return 0;
-  }, [renderNum]);
-  if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
-    state.lastBatchingAction = Date.now();
-    if (!keyExtractorProp && !isFirst && didDataChange) {
-      __DEV__ && warnDevOnce(
+  const initialContentOffset = React3.useMemo(() => {
+    const { initialScroll } = refState.current;
+    if (!initialScroll) {
+      return 0;
+    }
+    if (initialScroll.contentOffset !== void 0) {
+      return initialScroll.contentOffset;
+    }
+    const baseOffset = initialScroll.index !== void 0 ? calculateOffsetForIndex(ctx, state, initialScroll.index) : 0;
+    const resolvedOffset = calculateOffsetWithOffsetPosition(ctx, state, baseOffset, initialScroll);
+    let clampedOffset = resolvedOffset;
+    if (Number.isFinite(state.scrollLength) && Number.isFinite(state.totalSize)) {
+      const maxOffset = Math.max(0, state.totalSize - state.scrollLength);
+      clampedOffset = Math.min(clampedOffset, maxOffset);
+    }
+    clampedOffset = Math.max(0, clampedOffset);
+    const updatedInitialScroll = { ...initialScroll, contentOffset: clampedOffset };
+    refState.current.initialScroll = updatedInitialScroll;
+    state.initialScroll = updatedInitialScroll;
+    refState.current.isStartReached = clampedOffset < refState.current.scrollLength * onStartReachedThreshold;
+    return clampedOffset;
+  }, [renderNum, state.initialScroll]);
+  if (isFirstLocal || didDataChangeLocal || numColumnsProp !== peek$(ctx, "numColumns")) {
+    refState.current.lastBatchingAction = Date.now();
+    if (!keyExtractorProp && !isFirstLocal && didDataChangeLocal) {
+      IS_DEV && warnDevOnce(
         "keyExtractor",
         "Changing data without a keyExtractor can cause slow performance and resetting scroll. If your list data can change you should use a keyExtractor with a unique id for best performance and behavior."
       );
-      state.sizes.clear();
-      state.positions.clear();
+      refState.current.sizes.clear();
+      refState.current.positions.clear();
+      refState.current.totalSize = 0;
+      set$(ctx, "totalSize", 0);
     }
   }
-  const onLayoutHeader = React4.useCallback((rect, fromLayoutEffect) => {
+  const onLayoutHeader = React3.useCallback((rect, fromLayoutEffect) => {
+    const { initialScroll } = refState.current;
     const size = rect[horizontal ? "width" : "height"];
     set$(ctx, "headerSize", size);
     if ((initialScroll == null ? void 0 : initialScroll.index) !== void 0) {
@@ -3092,134 +3504,72 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
     }
   }, []);
-  React4.useLayoutEffect(() => {
+  const doInitialScroll = React3.useCallback(() => {
+    var _a4;
+    const initialScroll = state.initialScroll;
+    if (initialScroll) {
+      scrollTo(ctx, state, {
+        animated: false,
+        index: (_a4 = state.initialScroll) == null ? void 0 : _a4.index,
+        offset: initialContentOffset,
+        precomputedWithViewOffset: true
+      });
+    }
+  }, [initialContentOffset, state.initialScroll]);
+  const onLayoutChange = React3.useCallback((layout) => {
+    doInitialScroll();
+    handleLayout(ctx, state, layout, setCanRender);
+  }, []);
+  const { onLayout } = useOnLayoutSync({
+    onLayoutChange,
+    onLayoutProp,
+    ref: refScroller
+    // the type of ScrollView doesn't include measure?
+  });
+  React3.useLayoutEffect(() => {
     if (snapToIndices) {
       updateSnapToOffsets(ctx, state);
     }
   }, [snapToIndices]);
-  React4.useLayoutEffect(() => {
-    const didAllocateContainers = dataProp.length > 0 && doInitialAllocateContainersCallback();
-    if (!didAllocateContainers) {
-      checkResetContainers(
-        /*isFirst*/
-        isFirst
-      );
-    }
-  }, [dataProp, numColumnsProp]);
-  React4.useLayoutEffect(() => {
+  React3.useLayoutEffect(() => {
+    const {
+      didColumnsChange,
+      didDataChange,
+      isFirst,
+      props: { data }
+    } = state;
+    const didAllocateContainers = data.length > 0 && doInitialAllocateContainers(ctx, state);
+    if (!didAllocateContainers && !isFirst && (didDataChange || didColumnsChange)) {
+      checkResetContainers(ctx, state, data);
+    }
+    state.didColumnsChange = false;
+    state.didDataChange = false;
+    state.isFirst = false;
+  }, [dataProp, dataVersion, numColumnsProp]);
+  React3.useLayoutEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
-  const { onLayout } = useSyncLayout({
-    onLayout: onLayoutProp,
-    onLayoutChange: React4.useCallback(
-      (rectangle) => {
-        handleLayout(ctx, state, rectangle, setCanRender);
-      },
-      [ctx, state, setCanRender]
-    ),
-    ref: refScroller
-  });
-  React4.useLayoutEffect(initializeStateVars, [
+  React3.useLayoutEffect(initializeStateVars, [
+    dataVersion,
     memoizedLastItemKeys.join(","),
     numColumnsProp,
-    stylePaddingTopState,
-    stylePaddingBottomState
+    stylePaddingBottomState,
+    stylePaddingTopState
   ]);
-  const doInitialAllocateContainersCallback = () => {
-    return doInitialAllocateContainers(ctx, state);
-  };
-  React4.useImperativeHandle(forwardedRef, () => {
-    const scrollIndexIntoView = (options) => {
-      const state2 = refState.current;
-      if (state2) {
-        const { index, ...rest2 } = options;
-        const { startNoBuffer, endNoBuffer } = state2;
-        if (index < startNoBuffer || index > endNoBuffer) {
-          const viewPosition = index < startNoBuffer ? 0 : 1;
-          scrollToIndex(ctx, state2, {
-            ...rest2,
-            index,
-            viewPosition
-          });
-        }
-      }
-    };
-    return {
-      flashScrollIndicators: () => {
-        var _a, _b;
-        return (_b = (_a = refScroller.current) == null ? void 0 : _a.flashScrollIndicators) == null ? void 0 : _b.call(_a);
-      },
-      getNativeScrollRef: () => refScroller.current,
-      getScrollableNode: () => refScroller.current,
-      getScrollResponder: () => refScroller.current,
-      getState: () => {
-        const state2 = refState.current;
-        return state2 ? {
-          contentLength: state2.totalSize,
-          data: state2.props.data,
-          end: state2.endNoBuffer,
-          endBuffered: state2.endBuffered,
-          isAtEnd: state2.isAtEnd,
-          isAtStart: state2.isAtStart,
-          positionAtIndex: (index) => state2.positions.get(getId(state2, index)),
-          positions: state2.positions,
-          scroll: state2.scroll,
-          scrollLength: state2.scrollLength,
-          sizeAtIndex: (index) => state2.sizesKnown.get(getId(state2, index)),
-          sizes: state2.sizesKnown,
-          start: state2.startNoBuffer,
-          startBuffered: state2.startBuffered
-        } : {};
-      },
-      scrollIndexIntoView,
-      scrollItemIntoView: ({ item, ...props2 }) => {
-        const data = refState.current.props.data;
-        const index = data.indexOf(item);
-        if (index !== -1) {
-          scrollIndexIntoView({ index, ...props2 });
-        }
-      },
-      scrollToEnd: (options) => {
-        const data = refState.current.props.data;
-        const stylePaddingBottom = refState.current.props.stylePaddingBottom;
-        const index = data.length - 1;
-        if (index !== -1) {
-          const paddingBottom = stylePaddingBottom || 0;
-          const footerSize = peek$(ctx, "footerSize") || 0;
-          scrollToIndex(ctx, state, {
-            index,
-            viewOffset: -paddingBottom - footerSize + ((options == null ? void 0 : options.viewOffset) || 0),
-            viewPosition: 1,
-            ...options
-          });
-        }
-      },
-      scrollToIndex: (params) => scrollToIndex(ctx, state, params),
-      scrollToItem: ({ item, ...props2 }) => {
-        const data = refState.current.props.data;
-        const index = data.indexOf(item);
-        if (index !== -1) {
-          scrollToIndex(ctx, state, { index, ...props2 });
-        }
-      },
-      scrollToOffset: (params) => scrollTo(state, params),
-      setScrollProcessingEnabled: (enabled) => {
-        refState.current.scrollProcessingEnabled = enabled;
-      },
-      setVisibleContentAnchorOffset: (value) => {
-        const val = typeof value === "function" ? value(peek$(ctx, "scrollAdjustUserOffset") || 0) : value;
-        set$(ctx, "scrollAdjustUserOffset", val);
-      }
-    };
-  }, []);
+  React3.useEffect(() => {
+    const viewability = setupViewability({
+      onViewableItemsChanged,
+      viewabilityConfig,
+      viewabilityConfigCallbackPairs
+    });
+    state.viewabilityConfigCallbackPairs = viewability;
+    state.enableScrollForNextCalculateItemsInView = !viewability;
+  }, [viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged]);
+  React3.useImperativeHandle(forwardedRef, () => createImperativeHandle(ctx, state), []);
   {
-    React4.useEffect(() => {
-      if (initialContentOffset) {
-        scrollTo(state, { animated: false, offset: initialContentOffset });
-      }
-    }, []);
+    React3.useEffect(doInitialScroll, []);
   }
-  const fns = React4.useMemo(
+  const fns = React3.useMemo(
     () => ({
       getRenderedItem: (key) => getRenderedItem(ctx, state, key),
       onScroll: (event) => onScroll(ctx, state, event),
@@ -3228,7 +3578,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     []
   );
   const onScrollHandler = useStickyScrollHandler(stickyIndices, horizontal, ctx, fns.onScroll);
-  return /* @__PURE__ */ React4__namespace.createElement(React4__namespace.Fragment, null, /* @__PURE__ */ React4__namespace.createElement(
+  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, /* @__PURE__ */ React3__namespace.createElement(
     ListComponent,
     {
       ...rest,
@@ -3246,7 +3596,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       onMomentumScrollEnd: (event) => {
         {
           requestAnimationFrame(() => {
-            finishScrollTo(refState.current);
+            finishScrollTo(ctx, refState.current);
           });
         }
         if (onMomentumScrollEnd) {
@@ -3255,9 +3605,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       },
       onScroll: onScrollHandler,
       recycleItems,
-      refreshControl: refreshControl ? stylePaddingTopState > 0 ? React4__namespace.cloneElement(refreshControl, {
+      refreshControl: refreshControl ? stylePaddingTopState > 0 ? React3__namespace.cloneElement(refreshControl, {
         progressViewOffset: (refreshControl.props.progressViewOffset || 0) + stylePaddingTopState
-      }) : refreshControl : onRefresh && /* @__PURE__ */ React4__namespace.createElement(
+      }) : refreshControl : onRefresh && /* @__PURE__ */ React3__namespace.createElement(
         RefreshControl,
         {
           onRefresh,
@@ -3266,14 +3616,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       ),
       refScrollView: combinedRef,
-      scrollAdjustHandler: state.scrollAdjustHandler,
+      scrollAdjustHandler: (_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler,
+      scrollEventThrottle: 16 ,
       snapToIndices,
       stickyIndices,
       style,
       updateItemSize: fns.updateItemSize,
       waitForInitialLayout
     }
-  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React4__namespace.createElement(DebugView, { state: refState.current }));
+  ), IS_DEV && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React3__namespace.createElement(DebugView, { state: refState.current }));
 });
 
 exports.LegendList = LegendList;
@@ -3281,6 +3632,6 @@ exports.useIsLastItem = useIsLastItem;
 exports.useListScrollSize = useListScrollSize;
 exports.useRecyclingEffect = useRecyclingEffect;
 exports.useRecyclingState = useRecyclingState;
-exports.useSyncLayout = useSyncLayout2;
+exports.useSyncLayout = useSyncLayout;
 exports.useViewability = useViewability;
 exports.useViewabilityAmount = useViewabilityAmount;