@legendapp/list 2.0.13 → 2.1.0-beta.1

package/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var React2 = require('react');
-var reactNative = require('react-native');
+var React3 = require('react');
 var shim = require('use-sync-external-store/shim');
+var reactDom = require('react-dom');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -22,13 +22,25 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 
 // src/components/LegendList.tsx
-var ContextState = React2__namespace.createContext(null);
+React3.forwardRef(function AnimatedView2(props, ref) {
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref, ...props });
+});
+var View = React3.forwardRef(function View2(props, ref) {
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref, ...props });
+});
+var Text = View;
+
+// src/platform/Animated.tsx
+var createAnimatedValue = (value) => value;
+
+// src/state/state.tsx
+var ContextState = React3__namespace.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React2__namespace.useState(() => ({
-    animatedScrollY: new reactNative.Animated.Value(0),
+  const [value] = React3__namespace.useState(() => ({
+    animatedScrollY: createAnimatedValue(0),
     columnWrapperStyle: void 0,
     internalState: void 0,
     listeners: /* @__PURE__ */ new Map(),
@@ -46,10 +58,10 @@ function StateProvider({ children }) {
     ]),
     viewRefs: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React2__namespace.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React3__namespace.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React2__namespace.useContext(ContextState);
+  return React3__namespace.useContext(ContextState);
 }
 function createSelectorFunctionsArr(ctx, signalNames) {
   let lastValues = [];
@@ -119,23 +131,23 @@ function getContentSize(ctx) {
   return headerSize + footerSize + totalSize + stylePaddingTop;
 }
 function useArr$(signalNames) {
-  const ctx = React2__namespace.useContext(ContextState);
-  const { subscribe, get } = React2__namespace.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const ctx = React3__namespace.useContext(ContextState);
+  const { subscribe, get } = React3__namespace.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
   const value = shim.useSyncExternalStore(subscribe, get);
   return value;
 }
 function useSelector$(signalName, selector) {
-  const ctx = React2__namespace.useContext(ContextState);
-  const { subscribe, get } = React2__namespace.useMemo(() => createSelectorFunctionsArr(ctx, [signalName]), [ctx, signalName]);
+  const ctx = React3__namespace.useContext(ContextState);
+  const { subscribe, get } = React3__namespace.useMemo(() => createSelectorFunctionsArr(ctx, [signalName]), [ctx, signalName]);
   const value = shim.useSyncExternalStore(subscribe, () => selector(get()[0]));
   return value;
 }
 
 // src/components/DebugView.tsx
 var DebugRow = ({ children }) => {
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
+  return /* @__PURE__ */ React3__namespace.createElement(View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
 };
-var DebugView = React2__namespace.memo(function DebugView2({ state }) {
+var DebugView = React3__namespace.memo(function DebugView2({ state }) {
   const ctx = useStateContext();
   const [totalSize = 0, scrollAdjust = 0, rawScroll = 0, scroll = 0, _numContainers = 0, _numContainersPooled = 0] = useArr$([
     "totalSize",
@@ -146,12 +158,12 @@ var DebugView = React2__namespace.memo(function DebugView2({ state }) {
     "numContainersPooled"
   ]);
   const contentSize = getContentSize(ctx);
-  const [, forceUpdate] = React2.useReducer((x) => x + 1, 0);
+  const [, forceUpdate] = React3.useReducer((x) => x + 1, 0);
   useInterval(() => {
     forceUpdate();
   }, 100);
-  return /* @__PURE__ */ React2__namespace.createElement(
-    reactNative.View,
+  return /* @__PURE__ */ React3__namespace.createElement(
+    View,
     {
       pointerEvents: "none",
       style: {
@@ -166,72 +178,35 @@ var DebugView = React2__namespace.memo(function DebugView2({ state }) {
         top: 0
       }
     },
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "TotalSize:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, totalSize.toFixed(2))),
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "ContentSize:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, contentSize.toFixed(2))),
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "At end:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, String(state.isAtEnd))),
-    /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null),
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "ScrollAdjust:"), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, scrollAdjust.toFixed(2))),
-    /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null),
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "RawScroll: "), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, rawScroll.toFixed(2))),
-    /* @__PURE__ */ React2__namespace.createElement(DebugRow, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, "ComputedScroll: "), /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, null, scroll.toFixed(2)))
+    /* @__PURE__ */ React3__namespace.createElement(DebugRow, null, /* @__PURE__ */ React3__namespace.createElement(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) {
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const interval = setInterval(callback, delay);
     return () => clearInterval(interval);
   }, [delay]);
 }
 
+// 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 = __DEV__ && false;
-var ENABLE_DEBUG_VIEW = __DEV__ && false;
-var IsNewArchitecture = global.nativeFabricUIManager != null;
-var useAnimatedValue = (initialValue) => {
-  return React2.useRef(new reactNative.Animated.Value(initialValue)).current;
-};
-
-// src/hooks/useValue$.ts
-function useValue$(key, params) {
-  var _a;
-  const { getValue, delay } = params || {};
-  const ctx = useStateContext();
-  const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
-  React2.useMemo(() => {
-    let newValue;
-    let prevValue;
-    let didQueueTask = false;
-    listen$(ctx, key, (v) => {
-      newValue = getValue ? getValue(v) : v;
-      if (delay !== void 0) {
-        const fn = () => {
-          didQueueTask = false;
-          if (newValue !== void 0) {
-            animValue.setValue(newValue);
-          }
-        };
-        const delayValue = typeof delay === "function" ? delay(newValue, prevValue) : delay;
-        prevValue = newValue;
-        if (!didQueueTask) {
-          didQueueTask = true;
-          if (delayValue === void 0) {
-            fn();
-          } else if (delayValue === 0) {
-            queueMicrotask(fn);
-          } else {
-            setTimeout(fn, delayValue);
-          }
-        }
-      } else {
-        animValue.setValue(newValue);
-      }
-    });
-  }, []);
-  return animValue;
-}
-var typedForwardRef = React2.forwardRef;
-var typedMemo = React2.memo;
+var ENABLE_DEVMODE = IS_DEV && false;
+var ENABLE_DEBUG_VIEW = IS_DEV && false;
+var typedForwardRef = React3.forwardRef;
+var typedMemo = React3.memo;
 
 // src/components/PositionView.tsx
 var PositionViewState = typedMemo(function PositionView({
@@ -242,64 +217,37 @@ var PositionViewState = typedMemo(function PositionView({
   ...rest
 }) {
   const [position = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
-  return /* @__PURE__ */ React2__namespace.createElement(
-    reactNative.View,
-    {
-      ref: refView,
-      style: [
-        style,
-        horizontal ? { transform: [{ translateX: position }] } : { transform: [{ translateY: position }] }
-      ],
-      ...rest
-    }
-  );
-});
-var PositionViewAnimated = typedMemo(function PositionView2({
-  id,
-  horizontal,
-  style,
-  refView,
-  ...rest
-}) {
-  const position$ = useValue$(`containerPosition${id}`, {
-    getValue: (v) => v != null ? v : POSITION_OUT_OF_VIEW
-  });
-  let position;
-  if (reactNative.Platform.OS === "ios" || reactNative.Platform.OS === "android") {
-    position = horizontal ? { transform: [{ translateX: position$ }] } : { transform: [{ translateY: position$ }] };
-  } else {
-    position = horizontal ? { left: position$ } : { top: position$ };
-  }
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { ref: refView, style: [style, position], ...rest });
+  const base = Array.isArray(style) ? Object.assign({}, ...style) : style;
+  const combinedStyle = horizontal ? { ...base, left: position } : { ...base, top: position };
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref: refView, style: combinedStyle, ...rest });
 });
 var PositionViewSticky = typedMemo(function PositionViewSticky2({
   id,
   horizontal,
   style,
   refView,
-  animatedScrollY,
-  stickyOffset,
   index,
   ...rest
 }) {
-  const [position = POSITION_OUT_OF_VIEW, headerSize] = useArr$([`containerPosition${id}`, "headerSize"]);
-  const transform = React2__namespace.useMemo(() => {
-    if (animatedScrollY && stickyOffset !== void 0) {
-      const stickyPosition = animatedScrollY.interpolate({
-        extrapolate: "clamp",
-        inputRange: [position + headerSize, position + 5e3 + headerSize],
-        outputRange: [position, position + 5e3]
-      });
-      return horizontal ? [{ translateX: stickyPosition }] : [{ translateY: stickyPosition }];
-    }
-  }, [animatedScrollY, headerSize, horizontal, stickyOffset, position]);
-  const viewStyle = React2__namespace.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { ref: refView, style: viewStyle, ...rest });
+  const [position = POSITION_OUT_OF_VIEW, _headerSize] = useArr$([`containerPosition${id}`, "headerSize"]);
+  const viewStyle = React3__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__ */ React3__namespace.createElement("div", { ref: refView, style: viewStyle, ...rest });
 });
-var PositionView3 = IsNewArchitecture ? PositionViewState : PositionViewAnimated;
+var PositionView2 = PositionViewState;
+
+// src/constants-platform.ts
+var IsNewArchitecture = true;
 var symbolFirst = Symbol();
 function useInit(cb) {
-  const refValue = React2.useRef(symbolFirst);
+  const refValue = React3.useRef(symbolFirst);
   if (refValue.current === symbolFirst) {
     refValue.current = cb();
   }
@@ -315,7 +263,7 @@ function isArray(obj) {
 }
 var warned = /* @__PURE__ */ new Set();
 function warnDevOnce(id, text) {
-  if (__DEV__ && !warned.has(id)) {
+  if (IS_DEV && !warned.has(id)) {
     warned.add(id);
     console.warn(`[legend-list] ${text}`);
   }
@@ -330,18 +278,18 @@ 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;
+  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);
 }
 
 // src/state/ContextContainer.ts
-var ContextContainer = React2.createContext(null);
+var ContextContainer = React3.createContext(null);
 function useViewability(callback, configId) {
   const ctx = useStateContext();
-  const { containerId } = React2.useContext(ContextContainer);
+  const { containerId } = React3.useContext(ContextContainer);
   const key = containerId + (configId != null ? configId : "");
   useInit(() => {
     const value = ctx.mapViewabilityValues.get(key);
@@ -350,7 +298,7 @@ function useViewability(callback, configId) {
     }
   });
   ctx.mapViewabilityCallbacks.set(key, callback);
-  React2.useEffect(
+  React3.useEffect(
     () => () => {
       ctx.mapViewabilityCallbacks.delete(key);
     },
@@ -359,7 +307,7 @@ function useViewability(callback, configId) {
 }
 function useViewabilityAmount(callback) {
   const ctx = useStateContext();
-  const { containerId } = React2.useContext(ContextContainer);
+  const { containerId } = React3.useContext(ContextContainer);
   useInit(() => {
     const value = ctx.mapViewabilityAmountValues.get(containerId);
     if (value) {
@@ -367,7 +315,7 @@ function useViewabilityAmount(callback) {
     }
   });
   ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-  React2.useEffect(
+  React3.useEffect(
     () => () => {
       ctx.mapViewabilityAmountCallbacks.delete(containerId);
     },
@@ -375,12 +323,12 @@ function useViewabilityAmount(callback) {
   );
 }
 function useRecyclingEffect(effect) {
-  const { index, value } = React2.useContext(ContextContainer);
-  const prevValues = React2.useRef({
+  const { index, value } = React3.useContext(ContextContainer);
+  const prevValues = React3.useRef({
     prevIndex: void 0,
     prevItem: void 0
   });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     let ret;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
@@ -398,12 +346,12 @@ function useRecyclingEffect(effect) {
   }, [index, value, effect]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value, itemKey, triggerLayout } = React2.useContext(ContextContainer);
-  const refState = React2.useRef({
+  const { index, value, itemKey, triggerLayout } = React3.useContext(ContextContainer);
+  const refState = React3.useRef({
     itemKey: null,
     value: null
   });
-  const [_, setRenderNum] = React2.useState(0);
+  const [_, setRenderNum] = React3.useState(0);
   const state = refState.current;
   if (state.itemKey !== itemKey) {
     state.itemKey = itemKey;
@@ -414,7 +362,7 @@ function useRecyclingState(valueOrFun) {
       prevItem: void 0
     }) : valueOrFun;
   }
-  const setState = React2.useCallback(
+  const setState = React3.useCallback(
     (newState) => {
       state.value = isFunction(newState) ? newState(state.value) : newState;
       setRenderNum((v) => v + 1);
@@ -425,7 +373,7 @@ function useRecyclingState(valueOrFun) {
   return [state.value, setState];
 }
 function useIsLastItem() {
-  const { itemKey } = React2.useContext(ContextContainer);
+  const { itemKey } = React3.useContext(ContextContainer);
   const isLast = useSelector$("lastItemKeys", (lastItemKeys) => (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false);
   return isLast;
 }
@@ -433,44 +381,101 @@ function useListScrollSize() {
   const [scrollSize] = useArr$(["scrollSize"]);
   return scrollSize;
 }
-var noop = () => {
-};
 function useSyncLayout() {
-  if (IsNewArchitecture) {
-    const { triggerLayout: syncLayout } = React2.useContext(ContextContainer);
+  {
+    const { triggerLayout: syncLayout } = React3.useContext(ContextContainer);
     return syncLayout;
-  } else {
-    return noop;
   }
 }
 
 // src/components/Separator.tsx
 function Separator({ ItemSeparatorComponent, leadingItem }) {
   const isLastItem = useIsLastItem();
-  return isLastItem ? null : /* @__PURE__ */ React2__namespace.createElement(ItemSeparatorComponent, { leadingItem });
+  return isLastItem ? null : /* @__PURE__ */ React3__namespace.createElement(ItemSeparatorComponent, { leadingItem });
+}
+
+// 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 (!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 = []) {
-  const onLayout = React2.useCallback(
-    (event) => {
-      onLayoutChange(event.nativeEvent.layout, false);
-      onLayoutProp == null ? void 0 : onLayoutProp(event);
-    },
-    [onLayoutChange]
-  );
-  if (IsNewArchitecture) {
-    React2.useLayoutEffect(() => {
-      if (ref.current) {
-        ref.current.measure((x, y, width, height) => {
-          onLayoutChange({ height, width, x, y }, true);
-        });
+}, 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 || !(element instanceof HTMLElement)) {
+      return;
+    }
+    const emit = (layout, fromLayoutEffect) => {
+      if (layout.height === 0 && layout.width === 0) {
+        return;
       }
-    }, deps);
-  }
-  return { onLayout };
+      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) {
+  return {
+    height: rect.height,
+    width: rect.width,
+    x: rect.left,
+    y: rect.top
+  };
 }
 
 // src/components/Container.tsx
@@ -493,13 +498,20 @@ var Container = typedMemo(function Container2({
     `containerSticky${id}`,
     `containerStickyOffset${id}`
   ]);
-  const refLastSize = React2.useRef();
-  const ref = React2.useRef(null);
-  const [layoutRenderCount, forceLayoutRender] = React2.useState(0);
+  const 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 didLayoutRef = React2.useRef(false);
-  const style = React2.useMemo(() => {
+  const didLayoutRef = React3.useRef(false);
+  const style = React3.useMemo(() => {
     let paddingStyles;
     if (columnWrapperStyle) {
       const { columnGap, rowGap, gap } = columnWrapperStyle;
@@ -531,12 +543,12 @@ var Container = typedMemo(function Container2({
       ...paddingStyles || {}
     };
   }, [horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns]);
-  const renderedItemInfo = React2.useMemo(
+  const renderedItemInfo = React3.useMemo(
     () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
-  const contextValue = React2.useMemo(() => {
+  const contextValue = React3.useMemo(() => {
     ctx.viewRefs.set(id, ref);
     return {
       containerId: id,
@@ -548,27 +560,27 @@ var Container = typedMemo(function Container2({
       value: data
     };
   }, [id, itemKey, index, data]);
-  const onLayoutChange = (rectangle) => {
-    var _a, _b;
-    if (!isNullOrUndefined(itemKey)) {
+  const onLayoutChange = React3.useCallback((rectangle) => {
+    const {
+      horizontal: currentHorizontal,
+      itemKey: currentItemKey,
+      updateItemSize: updateItemSizeFn
+    } = itemLayoutRef.current;
+    if (isNullOrUndefined(currentItemKey)) {
+      return;
+    }
+    didLayoutRef.current = true;
+    let layout = rectangle;
+    Math.floor(rectangle[currentHorizontal ? "width" : "height"] * 8) / 8;
+    const doUpdate = () => {
+      itemLayoutRef.current.lastSize = { height: layout.height, width: layout.width };
+      updateItemSizeFn(currentItemKey, layout);
       didLayoutRef.current = true;
-      let layout = rectangle;
-      const size = Math.floor(rectangle[horizontal ? "width" : "height"] * 8) / 8;
-      const doUpdate = () => {
-        refLastSize.current = { height: layout.height, width: layout.width };
-        updateItemSize2(itemKey, layout);
-        didLayoutRef.current = true;
-      };
-      if (IsNewArchitecture || size > 0) {
-        doUpdate();
-      } else {
-        (_b = (_a = ref.current) == null ? void 0 : _a.measure) == null ? void 0 : _b.call(_a, (_x, _y, width, height) => {
-          layout = { height, width };
-          doUpdate();
-        });
-      }
+    };
+    {
+      doUpdate();
     }
-  };
+  }, []);
   const { onLayout } = useOnLayoutSync(
     {
       onLayoutChange,
@@ -576,23 +588,8 @@ var Container = typedMemo(function Container2({
     },
     [itemKey, layoutRenderCount]
   );
-  if (!IsNewArchitecture) {
-    React2.useEffect(() => {
-      if (!isNullOrUndefined(itemKey)) {
-        const timeout = setTimeout(() => {
-          if (!didLayoutRef.current && refLastSize.current) {
-            updateItemSize2(itemKey, refLastSize.current);
-            didLayoutRef.current = true;
-          }
-        }, 16);
-        return () => {
-          clearTimeout(timeout);
-        };
-      }
-    }, [itemKey]);
-  }
-  const PositionComponent = isSticky ? PositionViewSticky : PositionView3;
-  return /* @__PURE__ */ React2__namespace.createElement(
+  const PositionComponent = isSticky ? PositionViewSticky : PositionView2;
+  return /* @__PURE__ */ React3__namespace.createElement(
     PositionComponent,
     {
       animatedScrollY: isSticky ? animatedScrollY : void 0,
@@ -605,11 +602,156 @@ var Container = typedMemo(function Container2({
       stickyOffset: isSticky ? stickyOffset : void 0,
       style
     },
-    /* @__PURE__ */ React2__namespace.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React2__namespace.createElement(Separator, { ItemSeparatorComponent, leadingItem: renderedItemInfo.item }))
+    /* @__PURE__ */ React3__namespace.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React3__namespace.createElement(Separator, { ItemSeparatorComponent, leadingItem: renderedItemInfo.item }))
   );
 });
 
+// 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 sortDOMElements(container) {
+  const elements = Array.from(container.children);
+  if (elements.length <= 1) return elements;
+  const items = elements.map(mapFn);
+  items.sort((a, b) => {
+    const aKey = a[1];
+    const bKey = b[1];
+    if (aKey === null) {
+      return 1;
+    }
+    if (bKey === null) {
+      return -1;
+    }
+    return aKey - bKey;
+  });
+  const targetPositions = /* @__PURE__ */ new Map();
+  items.forEach((item, index) => {
+    targetPositions.set(item[0], index);
+  });
+  const currentPositions = elements.map((el) => targetPositions.get(el));
+  const lis = findLIS(currentPositions);
+  const stableIndices = new Set(lis);
+  for (let targetPos = 0; targetPos < items.length; targetPos++) {
+    const element = items[targetPos][0];
+    const currentPos = elements.indexOf(element);
+    if (!stableIndices.has(currentPos)) {
+      let nextStableElement = null;
+      for (let i = targetPos + 1; i < items.length; i++) {
+        const nextEl = items[i][0];
+        const nextCurrentPos = elements.indexOf(nextEl);
+        if (stableIndices.has(nextCurrentPos)) {
+          nextStableElement = nextEl;
+          break;
+        }
+      }
+      if (nextStableElement) {
+        container.insertBefore(element, nextStableElement);
+      } else {
+        container.appendChild(element);
+      }
+    }
+  }
+}
+function findLIS(arr) {
+  const n = arr.length;
+  const tails = [];
+  const predecessors = new Array(n).fill(-1);
+  const indices = [];
+  for (let i = 0; i < n; i++) {
+    const num = arr[i];
+    let left = 0, right = tails.length;
+    while (left < right) {
+      const mid = Math.floor((left + right) / 2);
+      if (arr[indices[mid]] < num) {
+        left = mid + 1;
+      } else {
+        right = mid;
+      }
+    }
+    if (left === tails.length) {
+      tails.push(num);
+      indices.push(i);
+    } else {
+      tails[left] = num;
+      indices[left] = i;
+    }
+    if (left > 0) {
+      predecessors[i] = indices[left - 1];
+    }
+  }
+  const result = [];
+  let k = indices[indices.length - 1];
+  while (k !== -1) {
+    result.unshift(k);
+    k = predecessors[k];
+  }
+  return result;
+}
+
+// src/hooks/useDOMOrder.ts
+function useDOMOrder(ref) {
+  const ctx = useStateContext();
+  const debounceRef = React3.useRef(void 0);
+  React3.useEffect(() => {
+    const unsubscribe = listen$(ctx, "lastPositionUpdate", () => {
+      if (debounceRef.current !== void 0) {
+        clearTimeout(debounceRef.current);
+      }
+      debounceRef.current = setTimeout(() => {
+        const parent = ref.current;
+        if (parent) {
+          sortDOMElements(parent);
+        }
+        debounceRef.current = void 0;
+      }, 500);
+    });
+    return () => {
+      unsubscribe();
+      if (debounceRef.current !== void 0) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [ctx]);
+}
+
 // src/components/Containers.tsx
+var ContainersInner = typedMemo(function ContainersInner2({ horizontal, numColumns, children }) {
+  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 };
+  if (columnWrapperStyle && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    const gapX = columnGap || gap || 0;
+    const gapY = rowGap || gap || 0;
+    if (horizontal) {
+      if (gapY) {
+        style.marginTop = style.marginBottom = -gapY / 2;
+      }
+      if (gapX) {
+        style.marginRight = -gapX;
+      }
+    } else {
+      if (gapX) {
+        style.marginLeft = style.marginRight = -gapX;
+      }
+      if (gapY) {
+        style.marginBottom = -gapY;
+      }
+    }
+  }
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref, style }, children);
+});
 var Containers = typedMemo(function Containers2({
   horizontal,
   recycleItems,
@@ -618,23 +760,11 @@ var Containers = typedMemo(function Containers2({
   updateItemSize: updateItemSize2,
   getRenderedItem: getRenderedItem2
 }) {
-  const ctx = useStateContext();
-  const columnWrapperStyle = ctx.columnWrapperStyle;
   const [numContainers, numColumns] = useArr$(["numContainersPooled", "numColumns"]);
-  const animSize = useValue$("totalSize", {
-    // Use a microtask if increasing the size significantly, otherwise use a timeout
-    // If this is the initial scroll, we don't want to delay because we want to update the size immediately
-    delay: (value, prevValue) => {
-      var _a;
-      return !((_a = ctx.internalState) == null ? void 0 : _a.initialScroll) ? !prevValue || value - prevValue > 20 ? 0 : 200 : void 0;
-    }
-  });
-  const animOpacity = waitForInitialLayout && !IsNewArchitecture ? useValue$("containersDidLayout", { getValue: (value) => value ? 1 : 0 }) : void 0;
-  const otherAxisSize = useValue$("otherAxisSize", { delay: 0 });
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React2__namespace.createElement(
+      /* @__PURE__ */ React3__namespace.createElement(
         Container,
         {
           getRenderedItem: getRenderedItem2,
@@ -648,86 +778,268 @@ var Containers = typedMemo(function Containers2({
       )
     );
   }
-  const style = horizontal ? { minHeight: otherAxisSize, opacity: animOpacity, width: animSize } : { height: animSize, minWidth: otherAxisSize, opacity: animOpacity };
-  if (columnWrapperStyle && numColumns > 1) {
-    const { columnGap, rowGap, gap } = columnWrapperStyle;
-    const gapX = columnGap || gap || 0;
-    const gapY = rowGap || gap || 0;
-    if (horizontal) {
-      if (gapY) {
-        style.marginVertical = -gapY / 2;
+  return /* @__PURE__ */ React3__namespace.createElement(ContainersInner, { horizontal, numColumns, waitForInitialLayout }, containers);
+});
+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 (Array.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,
+  horizontal = false,
+  contentOffset,
+  maintainVisibleContentPosition,
+  onScroll: onScroll2,
+  onMomentumScrollEnd,
+  showsHorizontalScrollIndicator = true,
+  showsVerticalScrollIndicator = true,
+  refreshControl,
+  onLayout,
+  ...props
+}, ref) {
+  const scrollRef = React3.useRef(null);
+  const contentRef = React3.useRef(null);
+  const momentumTimeout = React3.useRef(null);
+  React3.useImperativeHandle(ref, () => {
+    const api = {
+      getBoundingClientRect: () => {
+        var _a3;
+        return (_a3 = scrollRef.current) == null ? void 0 : _a3.getBoundingClientRect();
+      },
+      getScrollableNode: () => scrollRef.current,
+      getScrollResponder: () => scrollRef.current,
+      scrollBy: (x, y) => {
+        const el = scrollRef.current;
+        if (!el) return;
+        el.scrollBy(x, y);
+      },
+      scrollTo: (options) => {
+        const el = scrollRef.current;
+        if (!el) return;
+        const { x = 0, y = 0, animated = true } = options;
+        el.scrollTo({ behavior: animated ? "smooth" : "auto", left: x, top: y });
+      },
+      scrollToEnd: (options = {}) => {
+        const el = scrollRef.current;
+        if (!el) return;
+        const { animated = true } = options;
+        if (horizontal) {
+          el.scrollTo({ behavior: animated ? "smooth" : "auto", left: el.scrollWidth });
+        } else {
+          el.scrollTo({ behavior: animated ? "smooth" : "auto", top: el.scrollHeight });
+        }
+      },
+      scrollToOffset: (params) => {
+        const el = scrollRef.current;
+        if (!el) return;
+        const { offset, animated = true } = params;
+        if (horizontal) {
+          el.scrollTo({ behavior: animated ? "smooth" : "auto", left: offset });
+        } else {
+          el.scrollTo({ behavior: animated ? "smooth" : "auto", top: offset });
+        }
       }
-      if (gapX) {
-        style.marginRight = -gapX;
+    };
+    return api;
+  }, [horizontal]);
+  const handleScroll = React3.useCallback(
+    (event) => {
+      if (!onScroll2 || !(event == null ? void 0 : event.target)) {
+        return;
       }
-    } else {
-      if (gapX) {
-        style.marginHorizontal = -gapX;
+      const target = event.target;
+      const scrollEvent = {
+        nativeEvent: {
+          contentOffset: {
+            x: target.scrollLeft,
+            y: target.scrollTop
+          },
+          contentSize: {
+            height: target.scrollHeight,
+            width: target.scrollWidth
+          },
+          layoutMeasurement: {
+            height: target.clientHeight,
+            width: target.clientWidth
+          }
+        }
+      };
+      onScroll2(scrollEvent);
+      if (onMomentumScrollEnd) {
+        if (momentumTimeout.current != null) clearTimeout(momentumTimeout.current);
+        momentumTimeout.current = setTimeout(() => {
+          onMomentumScrollEnd({
+            nativeEvent: {
+              contentOffset: scrollEvent.nativeEvent.contentOffset
+            }
+          });
+        }, 100);
       }
-      if (gapY) {
-        style.marginBottom = -gapY;
+    },
+    [onScroll2, onMomentumScrollEnd]
+  );
+  React3.useLayoutEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    element.addEventListener("scroll", handleScroll);
+    return () => {
+      element.removeEventListener("scroll", handleScroll);
+    };
+  }, [handleScroll]);
+  React3.useEffect(() => {
+    const doScroll = () => {
+      if (contentOffset && scrollRef.current) {
+        scrollRef.current.scrollLeft = contentOffset.x || 0;
+        scrollRef.current.scrollTop = contentOffset.y || 0;
       }
-    }
-  }
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { style }, containers);
+    };
+    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 = () => {
+      const rect = element.getBoundingClientRect();
+      onLayout({
+        nativeEvent: {
+          layout: {
+            height: rect.height,
+            width: rect.width,
+            x: rect.left,
+            y: rect.top
+          }
+        }
+      });
+    };
+    fireLayout();
+    const resizeObserver = new ResizeObserver(() => {
+      fireLayout();
+    });
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
+  }, [onLayout]);
+  const scrollViewStyle = {
+    overflow: "auto",
+    overflowX: horizontal ? "auto" : showsHorizontalScrollIndicator ? "auto" : "hidden",
+    overflowY: horizontal ? showsVerticalScrollIndicator ? "auto" : "hidden" : "auto",
+    position: "relative",
+    // Ensure proper positioning context
+    WebkitOverflowScrolling: "touch",
+    // iOS momentum scrolling
+    ...StyleSheet.flatten(style)
+  };
+  const contentStyle = {
+    display: horizontal ? "flex" : "block",
+    flexDirection: horizontal ? "row" : void 0,
+    minHeight: horizontal ? void 0 : "100%",
+    minWidth: horizontal ? "100%" : void 0,
+    ...StyleSheet.flatten(contentContainerStyle)
+  };
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref: scrollRef, style: scrollViewStyle, ...props }, refreshControl, /* @__PURE__ */ React3__namespace.createElement("div", { ref: contentRef, style: contentStyle }, children));
 });
-var LayoutView = ({ onLayoutChange, refView, ...rest }) => {
-  const ref = refView != null ? refView : React2.useRef();
-  const { onLayout } = useOnLayoutSync({ onLayoutChange, ref });
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.View, { ...rest, onLayout, ref });
-};
-function ScrollAdjust() {
-  const bias = 1e7;
-  const [scrollAdjust, scrollAdjustUserOffset] = useArr$(["scrollAdjust", "scrollAdjustUserOffset"]);
-  const scrollOffset = (scrollAdjust || 0) + (scrollAdjustUserOffset || 0) + bias;
-  return /* @__PURE__ */ React2__namespace.createElement(
-    reactNative.View,
+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: {
-        height: 0,
+        backgroundColor: "green",
+        height: paddingTop,
         left: 0,
         position: "absolute",
-        top: scrollOffset,
-        width: 0
+        right: 0,
+        top: 0
       }
     }
-  );
+  ));
+}
+function useValueListener$(key, callback) {
+  const ctx = useStateContext();
+  React3.useLayoutEffect(() => {
+    listen$(ctx, key, (value) => {
+      callback(value);
+    });
+  }, []);
+}
+
+// src/components/ScrollAdjust.tsx
+function ScrollAdjust() {
+  const ctx = useStateContext();
+  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 = (_a3 = ctx.internalState) == null ? void 0 : _a3.refScroller.current;
+    if (scrollView && scrollOffset !== lastScrollOffsetRef.current) {
+      const scrollDelta = scrollOffset - lastScrollOffsetRef.current;
+      if (scrollDelta !== 0) {
+        scrollView.scrollBy(0, scrollDelta);
+        console.log("ScrollAdjust (web scrollBy)", scrollDelta, "total offset:", scrollOffset);
+      }
+      lastScrollOffsetRef.current = scrollOffset;
+    }
+  }, []);
+  useValueListener$("scrollAdjust", callback);
+  useValueListener$("scrollAdjustUserOffset", callback);
+  return null;
 }
 function SnapWrapper({ ScrollComponent, ...props }) {
   const [snapToOffsets] = useArr$(["snapToOffsets"]);
-  return /* @__PURE__ */ React2__namespace.createElement(ScrollComponent, { ...props, snapToOffsets });
+  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 (React2__namespace.isValidElement(Component)) {
+  if (React3__namespace.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React2__namespace.createElement(Component, null);
+    return /* @__PURE__ */ React3__namespace.createElement(Component, null);
   }
   return null;
 };
-var Padding = () => {
-  const animPaddingTop = useValue$("alignItemsPaddingTop", { delay: 0 });
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { style: { paddingTop: animPaddingTop } });
-};
-var PaddingDevMode = () => {
-  const animPaddingTop = useValue$("alignItemsPaddingTop", { delay: 0 });
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React2__namespace.createElement(
-    reactNative.Animated.View,
-    {
-      style: {
-        backgroundColor: "green",
-        height: animPaddingTop,
-        left: 0,
-        position: "absolute",
-        right: 0,
-        top: 0
-      }
-    }
-  ));
-};
 var ListComponent = typedMemo(function ListComponent2({
   canRender,
   style,
@@ -757,11 +1069,11 @@ var ListComponent = typedMemo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
-  const ScrollComponent = renderScrollComponent ? React2.useMemo(
-    () => React2__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+  const ScrollComponent = renderScrollComponent ? React3.useMemo(
+    () => React3__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
-  ) : reactNative.Animated.ScrollView;
-  React2__namespace.useEffect(() => {
+  ) : ListComponentScrollView;
+  React3__namespace.useEffect(() => {
     if (canRender) {
       setTimeout(() => {
         scrollAdjustHandler.setMounted();
@@ -769,7 +1081,7 @@ var ListComponent = typedMemo(function ListComponent2({
     }
   }, [canRender]);
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
-  return /* @__PURE__ */ React2__namespace.createElement(
+  return /* @__PURE__ */ React3__namespace.createElement(
     SnapOrScroll,
     {
       ...rest,
@@ -788,11 +1100,11 @@ var ListComponent = typedMemo(function ListComponent2({
       ScrollComponent: snapToIndices ? ScrollComponent : void 0,
       style
     },
-    maintainVisibleContentPosition && /* @__PURE__ */ React2__namespace.createElement(ScrollAdjust, null),
-    ENABLE_DEVMODE ? /* @__PURE__ */ React2__namespace.createElement(PaddingDevMode, null) : /* @__PURE__ */ React2__namespace.createElement(Padding, null),
-    ListHeaderComponent && /* @__PURE__ */ React2__namespace.createElement(LayoutView, { onLayoutChange: onLayoutHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
+    maintainVisibleContentPosition && /* @__PURE__ */ React3__namespace.createElement(ScrollAdjust, null),
+    ENABLE_DEVMODE ? /* @__PURE__ */ React3__namespace.createElement(PaddingDevMode, null) : /* @__PURE__ */ React3__namespace.createElement(Padding, null),
+    ListHeaderComponent && /* @__PURE__ */ React3__namespace.createElement(LayoutView, { onLayoutChange: onLayoutHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
     ListEmptyComponent && getComponent(ListEmptyComponent),
-    canRender && !ListEmptyComponent && /* @__PURE__ */ React2__namespace.createElement(
+    canRender && !ListEmptyComponent && /* @__PURE__ */ React3__namespace.createElement(
       Containers,
       {
         getRenderedItem: getRenderedItem2,
@@ -803,7 +1115,7 @@ var ListComponent = typedMemo(function ListComponent2({
         waitForInitialLayout
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React2__namespace.createElement(
+    ListFooterComponent && /* @__PURE__ */ React3__namespace.createElement(
       LayoutView,
       {
         onLayoutChange: (layout) => {
@@ -814,25 +1126,9 @@ var ListComponent = typedMemo(function ListComponent2({
       },
       getComponent(ListFooterComponent)
     ),
-    __DEV__ && ENABLE_DEVMODE && /* @__PURE__ */ React2__namespace.createElement(DevNumbers, null)
+    IS_DEV && ENABLE_DEVMODE && /* @__PURE__ */ React3__namespace.createElement(DevNumbers, null)
   );
 });
-var DevNumbers = __DEV__ && React2__namespace.memo(function DevNumbers2() {
-  return Array.from({ length: 100 }).map((_, index) => /* @__PURE__ */ React2__namespace.createElement(
-    reactNative.View,
-    {
-      key: index,
-      style: {
-        height: 100,
-        pointerEvents: "none",
-        position: "absolute",
-        top: index * 100,
-        width: "100%"
-      }
-    },
-    /* @__PURE__ */ React2__namespace.createElement(reactNative.Text, { style: { color: "red" } }, index * 100)
-  ));
-});
 
 // src/utils/getId.ts
 function getId(state, index) {
@@ -865,7 +1161,7 @@ function calculateOffsetForIndex(ctx, state, index) {
 
 // src/utils/getItemSize.ts
 function getItemSize(state, key, index, data, useAverageSize) {
-  var _a, _b;
+  var _a3, _b;
   const {
     sizesKnown,
     sizes,
@@ -878,7 +1174,7 @@ 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 : "" : "";
   if (getFixedItemSize) {
     size = getFixedItemSize(index, data, itemType);
     if (size !== void 0) {
@@ -927,7 +1223,7 @@ var finishScrollTo = (state) => {
 
 // src/core/scrollTo.ts
 function scrollTo(state, params = {}) {
-  var _a;
+  var _a3;
   const { animated, noScrollingTo, isInitialScroll } = params;
   const {
     refScroller,
@@ -939,8 +1235,8 @@ function scrollTo(state, params = {}) {
     state.scrollingTo = params;
   }
   state.scrollPending = offset;
-  if (!params.isInitialScroll || reactNative.Platform.OS === "android") {
-    (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
+  if (!params.isInitialScroll || Platform.OS === "android") {
+    (_a3 = refScroller.current) == null ? void 0 : _a3.scrollTo({
       animated: !!animated,
       x: horizontal ? offset : 0,
       y: horizontal ? 0 : offset
@@ -960,14 +1256,8 @@ function scrollTo(state, params = {}) {
 // src/utils/requestAdjust.ts
 function requestAdjust(ctx, state, positionDiff, dataChanged) {
   if (Math.abs(positionDiff) > 0.1) {
-    const needsScrollWorkaround = reactNative.Platform.OS === "android" && !IsNewArchitecture && dataChanged && state.scroll <= positionDiff;
     const doit = () => {
-      if (needsScrollWorkaround) {
-        scrollTo(state, {
-          noScrollingTo: true,
-          offset: state.scroll
-        });
-      } else {
+      {
         state.scrollAdjustHandler.requestAdjust(positionDiff);
       }
     };
@@ -992,7 +1282,7 @@ function requestAdjust(ctx, state, positionDiff, dataChanged) {
         () => {
           state.ignoreScrollFromMVCP = void 0;
         },
-        needsScrollWorkaround ? 250 : 100
+        100
       );
     } else {
       requestAnimationFrame(doit);
@@ -1061,14 +1351,14 @@ function prepareMVCP(ctx, state, dataChanged) {
       }
     }
     if (positionDiff !== void 0 && Math.abs(positionDiff) > 0.1) {
-      requestAdjust(ctx, state, positionDiff, dataChanged);
+      requestAdjust(ctx, state, positionDiff);
     }
   };
 }
 
 // src/core/prepareColumnStartState.ts
 function prepareColumnStartState(ctx, state, startIndex, useAverageSize) {
-  var _a;
+  var _a3;
   const numColumns = peek$(ctx, "numColumns");
   let rowStartIndex = startIndex;
   const columnAtStart = state.columns.get(state.idCache[startIndex]);
@@ -1081,7 +1371,7 @@ function prepareColumnStartState(ctx, state, startIndex, useAverageSize) {
   if (rowStartIndex > 0) {
     const prevIndex = rowStartIndex - 1;
     const prevId = state.idCache[prevIndex];
-    const prevPosition = (_a = state.positions.get(prevId)) != null ? _a : 0;
+    const prevPosition = (_a3 = state.positions.get(prevId)) != null ? _a3 : 0;
     const prevRowStart = findRowStartIndex(state, numColumns, prevIndex);
     const prevRowHeight = calculateRowMaxSize(state, prevRowStart, prevIndex, useAverageSize);
     currentRowTop = prevPosition + prevRowHeight;
@@ -1222,7 +1512,7 @@ function updateSnapToOffsets(ctx, state) {
 
 // src/core/updateItemPositions.ts
 function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottomBuffered } = { scrollBottomBuffered: -1, startIndex: 0 }) {
-  var _a, _b, _c, _d;
+  var _a3, _b, _c, _d;
   const {
     columns,
     indexByKey,
@@ -1235,7 +1525,7 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
   const dataLength = data.length;
   const numColumns = peek$(ctx, "numColumns");
   const hasColumns = numColumns > 1;
-  const indexByKeyForChecking = __DEV__ ? /* @__PURE__ */ new Map() : void 0;
+  const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = enableAverages && !getEstimatedItemSize;
   let currentRowTop = 0;
@@ -1254,7 +1544,7 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
     } else if (startIndex < dataLength) {
       const prevIndex = startIndex - 1;
       const prevId = getId(state, prevIndex);
-      const prevPosition = (_a = positions.get(prevId)) != null ? _a : 0;
+      const prevPosition = (_a3 = positions.get(prevId)) != null ? _a3 : 0;
       const prevSize = (_b = sizesKnown.get(prevId)) != null ? _b : getItemSize(state, prevId, prevIndex, data[prevIndex], useAverageSize);
       currentRowTop = prevPosition + prevSize;
     }
@@ -1273,7 +1563,7 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
     }
     const id = (_c = idCache[i]) != null ? _c : getId(state, i);
     const size = (_d = sizesKnown.get(id)) != null ? _d : getItemSize(state, id, i, data[i], useAverageSize);
-    if (__DEV__ && needsIndexByKey) {
+    if (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.`
@@ -1506,7 +1796,6 @@ function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
   const cb = ctx.mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
-var batchedUpdates = reactNative.unstable_batchedUpdates || ((callback) => callback());
 
 // src/utils/checkAllSizesKnown.ts
 function isNullOrUndefined2(value) {
@@ -1619,7 +1908,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.",
           {
@@ -1707,28 +1996,44 @@ function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, vie
 }
 
 // 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) {
+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 isReached;
+  return true;
 };
 
 // src/utils/checkAtBottom.ts
 function checkAtBottom(ctx, state) {
+  var _a3;
   if (!state) {
     return;
   }
@@ -1749,13 +2054,18 @@ function checkAtBottom(ctx, state) {
       isContentLess,
       onEndReachedThreshold * scrollLength,
       state.isEndReached,
-      state.endReachedBlockedByTimer,
+      state.endReachedSnapshot,
+      {
+        scrollPosition: scroll,
+        contentSize,
+        dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length
+      },
       (distance) => {
-        var _a, _b;
-        return (_b = (_a = state.props).onEndReached) == null ? void 0 : _b.call(_a, { distanceFromEnd: distance });
+        var _a4, _b;
+        return (_b = (_a4 = state.props).onEndReached) == null ? void 0 : _b.call(_a4, { distanceFromEnd: distance });
       },
-      (block) => {
-        state.endReachedBlockedByTimer = block;
+      (snapshot) => {
+        state.endReachedSnapshot = snapshot;
       }
     );
   }
@@ -1776,30 +2086,19 @@ function setDidLayout(ctx, state) {
       onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
     }
   };
-  if (reactNative.Platform.OS === "android" && initialScroll) {
-    if (IsNewArchitecture) {
-      scrollToIndex(ctx, state, { ...initialScroll, animated: false });
-      requestAnimationFrame(() => {
-        scrollToIndex(ctx, state, { ...initialScroll, animated: false });
-        setIt();
-      });
-    } else {
-      scrollToIndex(ctx, state, { ...initialScroll, animated: false });
-      setIt();
-    }
-  } else {
+  {
     setIt();
   }
 }
 
 // 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 stickyIndex = stickyArray[i];
-    const stickyId = (_a = idCache[stickyIndex]) != null ? _a : getId(state, stickyIndex);
+    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;
@@ -1813,21 +2112,21 @@ function getActiveStickyIndices(ctx, state, stickyIndices) {
   );
 }
 function handleStickyActivation(ctx, state, stickyIndices, stickyArray, currentStickyIdx, needNewContainers, startBuffered, endBuffered) {
-  var _a;
+  var _a3;
   const activeIndices = getActiveStickyIndices(ctx, state, stickyIndices);
   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[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, currentStickyIdx, pendingRemoval) {
-  var _a, _b, _c;
+  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;
@@ -1844,7 +2143,7 @@ function handleStickyRecycling(ctx, state, stickyArray, scroll, scrollBuffer, cu
     const nextIndex = stickyArray[arrayIdx + 1];
     let shouldRecycle = false;
     if (nextIndex) {
-      const nextId = (_a = state.idCache[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 {
@@ -1861,8 +2160,8 @@ function handleStickyRecycling(ctx, state, stickyArray, scroll, scrollBuffer, cu
   }
 }
 function calculateItemsInView(ctx, state, params = {}) {
-  batchedUpdates(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  reactDom.unstable_batchedUpdates(() => {
+    var _a3, _b, _c, _d, _e, _f, _g, _h, _i;
     const {
       columns,
       containerItemKeys,
@@ -1938,7 +2237,7 @@ function calculateItemsInView(ctx, state, params = {}) {
       idCache.length = 0;
       positions.clear();
     }
-    const startIndex = dataChanged ? 0 : (_a = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _a : 0;
+    const startIndex = dataChanged ? 0 : (_a3 = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _a3 : 0;
     updateItemPositions(ctx, state, dataChanged, { scrollBottomBuffered, startIndex });
     if (minIndexSizeChanged !== void 0) {
       state.minIndexSizeChanged = void 0;
@@ -2113,6 +2412,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     if (stickyIndicesArr.length > 0) {
       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)) {
@@ -2144,6 +2444,7 @@ function calculateItemsInView(ctx, state, params = {}) {
             const prevData = peek$(ctx, `containerItemData${i}`);
             if (position > POSITION_OUT_OF_VIEW && position !== prevPos) {
               set$(ctx, `containerPosition${i}`, position);
+              didChangePositions = true;
             }
             if (column >= 0 && column !== prevColumn) {
               set$(ctx, `containerColumn${i}`, column);
@@ -2155,6 +2456,9 @@ function calculateItemsInView(ctx, state, params = {}) {
         }
       }
     }
+    if (didChangePositions) {
+      set$(ctx, "lastPositionUpdate", Date.now());
+    }
     if (!queuedInitialLayout && endBuffered !== null) {
       if (checkAllSizesKnown(state)) {
         setDidLayout(ctx, state);
@@ -2184,10 +2488,10 @@ function doMaintainScrollAtEnd(ctx, state, animated) {
       state.scroll = 0;
     }
     requestAnimationFrame(() => {
-      var _a;
+      var _a3;
       if (state == null ? void 0 : state.isAtEnd) {
         state.maintainingScrollAtEnd = true;
-        (_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
+        (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
           animated
         });
         setTimeout(
@@ -2204,6 +2508,7 @@ function doMaintainScrollAtEnd(ctx, state, animated) {
 
 // src/utils/checkAtTop.ts
 function checkAtTop(state) {
+  var _a3;
   if (!state) {
     return;
   }
@@ -2219,20 +2524,25 @@ function checkAtTop(state) {
     false,
     onStartReachedThreshold * scrollLength,
     state.isStartReached,
-    state.startReachedBlockedByTimer,
+    state.startReachedSnapshot,
+    {
+      scrollPosition: scroll,
+      contentSize: state.totalSize,
+      dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length
+    },
     (distance) => {
-      var _a, _b;
-      return (_b = (_a = state.props).onStartReached) == null ? void 0 : _b.call(_a, { distanceFromStart: distance });
+      var _a4, _b;
+      return (_b = (_a4 = state.props).onStartReached) == null ? void 0 : _b.call(_a4, { distanceFromStart: distance });
     },
-    (block) => {
-      state.startReachedBlockedByTimer = block;
+    (snapshot) => {
+      state.startReachedSnapshot = snapshot;
     }
   );
 }
 
 // src/utils/updateAveragesOnDataChange.ts
 function updateAveragesOnDataChange(state, oldData, newData) {
-  var _a;
+  var _a3;
   const {
     averageSizes,
     sizesKnown,
@@ -2258,7 +2568,7 @@ function updateAveragesOnDataChange(state, oldData, newData) {
       const oldItem = oldData[oldIndex];
       const areEqual = itemsAreEqual(oldItem, newItem, newIndex, newData);
       if (areEqual) {
-        const itemType = getItemType ? (_a = getItemType(newItem, newIndex)) != null ? _a : "" : "";
+        const itemType = getItemType ? (_a3 = getItemType(newItem, newIndex)) != null ? _a3 : "" : "";
         let typeData = itemTypesToPreserve[itemType];
         if (!typeData) {
           typeData = itemTypesToPreserve[itemType] = { count: 0, totalSize: 0 };
@@ -2306,7 +2616,7 @@ function checkResetContainers(ctx, state, isFirst, dataProp) {
 
 // src/core/doInitialAllocateContainers.ts
 function doInitialAllocateContainers(ctx, state) {
-  var _a, _b, _c;
+  var _a3, _b, _c;
   const {
     scrollLength,
     props: {
@@ -2327,7 +2637,7 @@ function doInitialAllocateContainers(ctx, state) {
       const num = Math.min(20, data.length);
       for (let i = 0; i < num; i++) {
         const item = data[i];
-        const itemType = getItemType ? (_a = getItemType(item, i)) != null ? _a : "" : "";
+        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;
@@ -2341,7 +2651,7 @@ function doInitialAllocateContainers(ctx, state) {
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * state.props.initialContainerPoolRatio);
-    if (!IsNewArchitecture || state.lastLayout) {
+    if (state.lastLayout) {
       if (state.props.initialScroll) {
         requestAnimationFrame(() => {
           calculateItemsInView(ctx, state, { dataChanged: true, doMVCP: true });
@@ -2388,7 +2698,7 @@ 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.`
@@ -2400,7 +2710,7 @@ function handleLayout(ctx, state, layout, setCanRender) {
 
 // src/core/onScroll.ts
 function onScroll(ctx, state, event) {
-  var _a, _b, _c;
+  var _a3, _b, _c;
   const {
     scrollProcessingEnabled,
     props: { onScroll: onScrollProp }
@@ -2408,7 +2718,7 @@ function onScroll(ctx, state, event) {
   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) {
+  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"];
@@ -2482,7 +2792,7 @@ var ScrollAdjustHandler = class {
 
 // src/core/updateItemSize.ts
 function updateItemSize(ctx, state, itemKey, sizeObj) {
-  var _a;
+  var _a3;
   const {
     sizesKnown,
     props: {
@@ -2505,7 +2815,7 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
     if (itemData === void 0) {
       return;
     }
-    const type = getItemType ? (_a = getItemType(itemData, index)) != null ? _a : "" : "";
+    const type = getItemType ? (_a3 = getItemType(itemData, index)) != null ? _a3 : "" : "";
     const size2 = getFixedItemSize(index, itemData, type);
     if (size2 !== void 0 && size2 === sizesKnown.get(itemKey)) {
       return;
@@ -2551,13 +2861,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}.`
       );
@@ -2580,7 +2890,7 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
   }
 }
 function updateOneItemSize(state, itemKey, sizeObj) {
-  var _a;
+  var _a3;
   const {
     sizes,
     indexByKey,
@@ -2591,10 +2901,11 @@ function updateOneItemSize(state, itemKey, sizeObj) {
   if (!data) return 0;
   const index = indexByKey.get(itemKey);
   const prevSize = getItemSize(state, itemKey, index, data[index]);
-  const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
+  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 };
@@ -2609,7 +2920,7 @@ function updateOneItemSize(state, itemKey, sizeObj) {
   return 0;
 }
 var useCombinedRef = (...refs) => {
-  const callback = React2.useCallback((element) => {
+  const callback = React3.useCallback((element) => {
     for (const ref of refs) {
       if (!ref) {
         continue;
@@ -2624,6 +2935,16 @@ var useCombinedRef = (...refs) => {
   return callback;
 };
 
+// src/platform/RefreshControl.tsx
+function RefreshControl(_props) {
+  return null;
+}
+
+// src/platform/useStickyScrollHandler.ts
+function useStickyScrollHandler(_stickyIndices, _horizontal, _ctx, onScroll2) {
+  return onScroll2;
+}
+
 // src/utils/createColumnWrapperStyle.ts
 function createColumnWrapperStyle(contentContainerStyle) {
   const { gap, columnGap, rowGap } = contentContainerStyle;
@@ -2639,7 +2960,7 @@ function createColumnWrapperStyle(contentContainerStyle) {
   }
 }
 function getRenderedItem(ctx, state, key) {
-  var _a;
+  var _a3;
   if (!state) {
     return null;
   }
@@ -2660,23 +2981,23 @@ function getRenderedItem(ctx, state, key) {
       extraData,
       index,
       item,
-      type: getItemType ? (_a = getItemType(item, index)) != null ? _a : "" : ""
+      type: getItemType ? (_a3 = getItemType(item, index)) != null ? _a3 : "" : ""
     };
-    renderedItem = isFunction(renderItem) ? renderItem(itemProps) : React2__namespace.default.createElement(renderItem, itemProps);
+    renderedItem = isFunction(renderItem) ? renderItem(itemProps) : React3__namespace.default.createElement(renderItem, itemProps);
   }
   return { index, item: data[index], renderedItem };
 }
 function useThrottleDebounce(mode) {
-  const timeoutRef = React2.useRef(null);
-  const lastCallTimeRef = React2.useRef(0);
-  const lastArgsRef = React2.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 = React2.useCallback(
+  const execute = React3.useCallback(
     (callback, delay, ...args) => {
       {
         const now = Date.now();
@@ -2721,18 +3042,18 @@ var LegendList = typedMemo(
     const isChildrenMode = children !== void 0 && dataProp === void 0;
     const processedProps = isChildrenMode ? {
       ...restProps,
-      data: (isArray(children) ? children : React2__namespace.Children.toArray(children)).flat(1),
+      data: (isArray(children) ? children : React3__namespace.Children.toArray(children)).flat(1),
       renderItem: ({ item }) => item
     } : {
       ...restProps,
       data: dataProp || [],
       renderItem: renderItemProp
     };
-    return /* @__PURE__ */ React2__namespace.createElement(StateProvider, null, /* @__PURE__ */ React2__namespace.createElement(LegendListInner, { ...processedProps, ref: forwardedRef }));
+    return /* @__PURE__ */ React3__namespace.createElement(StateProvider, null, /* @__PURE__ */ React3__namespace.createElement(LegendListInner, { ...processedProps, ref: forwardedRef }));
   })
 );
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a;
+  var _a3;
   const {
     alignItemsAtEnd = false,
     columnWrapperStyle,
@@ -2786,24 +3107,24 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     waitForInitialLayout = true,
     ...rest
   } = props;
-  const [renderNum, setRenderNum] = React2.useState(0);
+  const [renderNum, setRenderNum] = React3.useState(0);
   const initialScroll = initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? { index: initialScrollIndexProp.index || 0, viewOffset: initialScrollIndexProp.viewOffset || 0 } : { index: initialScrollIndexProp || 0, viewOffset: initialScrollOffsetProp || 0 } : void 0;
-  const [canRender, setCanRender] = React2__namespace.useState(!IsNewArchitecture);
-  const contentContainerStyle = { ...reactNative.StyleSheet.flatten(contentContainerStyleProp) };
-  const style = { ...reactNative.StyleSheet.flatten(styleProp) };
+  const [canRender, setCanRender] = React3__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 ctx = useStateContext();
   ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
-  const refScroller = React2.useRef(null);
+  const refScroller = React3.useRef(null);
   const combinedRef = useCombinedRef(refScroller, refScrollView);
   const estimatedItemSize = estimatedItemSizeProp != null ? estimatedItemSizeProp : DEFAULT_ITEM_SIZE;
   const scrollBuffer = (drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE) || 1;
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (_item, index) => index.toString();
-  const refState = React2.useRef();
+  const refState = React3.useRef();
   if (!refState.current) {
     if (!ctx.internalState) {
-      const initialScrollLength = (estimatedListSize != null ? estimatedListSize : IsNewArchitecture ? { height: 0, width: 0 } : reactNative.Dimensions.get("window"))[horizontal ? "width" : "height"];
+      const initialScrollLength = (estimatedListSize != null ? estimatedListSize : { height: 0, width: 0 } )[horizontal ? "width" : "height"];
       ctx.internalState = {
         activeStickyIndex: void 0,
         averageSizes: {},
@@ -2814,7 +3135,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         enableScrollForNextCalculateItemsInView: true,
         endBuffered: -1,
         endNoBuffer: -1,
-        endReachedBlockedByTimer: false,
+        endReachedSnapshot: void 0,
         firstFullyOnScreenIndex: -1,
         idCache: [],
         idsInView: [],
@@ -2847,7 +3168,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,
@@ -2897,13 +3218,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     scrollBuffer,
     snapToIndices,
     stickyIndicesArr: stickyIndices != null ? stickyIndices : [],
-    stickyIndicesSet: React2.useMemo(() => new Set(stickyIndices != null ? stickyIndices : []), [stickyIndices == null ? void 0 : stickyIndices.join(",")]),
+    stickyIndicesSet: React3.useMemo(() => new Set(stickyIndices != null ? stickyIndices : []), [stickyIndices == null ? void 0 : stickyIndices.join(",")]),
     stylePaddingBottom: stylePaddingBottomState,
     stylePaddingTop: stylePaddingTopState,
     suggestEstimatedItemSize: !!suggestEstimatedItemSize
   };
   state.refScroller = refScroller;
-  const memoizedLastItemKeys = React2.useMemo(() => {
+  const memoizedLastItemKeys = React3.useMemo(() => {
     if (!dataProp.length) return [];
     return Array.from(
       { length: Math.min(numColumnsProp, dataProp.length) },
@@ -2917,7 +3238,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     setPaddingTop(ctx, state, { stylePaddingTop: stylePaddingTopState });
     refState.current.props.stylePaddingBottom = stylePaddingBottomState;
     let paddingDiff = stylePaddingTopState - prevPaddingTop;
-    if (maintainVisibleContentPosition && paddingDiff && prevPaddingTop !== void 0 && reactNative.Platform.OS === "ios") {
+    if (maintainVisibleContentPosition && paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
       if (state.scroll < 0) {
         paddingDiff += state.scroll;
       }
@@ -2933,7 +3254,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       true
     );
   }
-  const initialContentOffset = React2.useMemo(() => {
+  const initialContentOffset = React3.useMemo(() => {
     if (initialScroll) {
       const { index, viewOffset } = initialScroll;
       let initialContentOffset2 = viewOffset || 0;
@@ -2957,7 +3278,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
     refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirst && didDataChange) {
-      __DEV__ && warnDevOnce(
+      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."
       );
@@ -2965,27 +3286,23 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       refState.current.positions.clear();
     }
   }
-  const onLayoutHeader = React2.useCallback((rect, fromLayoutEffect) => {
+  const onLayoutHeader = React3.useCallback((rect, fromLayoutEffect) => {
     const size = rect[horizontal ? "width" : "height"];
     set$(ctx, "headerSize", size);
     if ((initialScroll == null ? void 0 : initialScroll.index) !== void 0) {
-      if (IsNewArchitecture && reactNative.Platform.OS !== "android") {
+      {
         if (fromLayoutEffect) {
           setRenderNum((v) => v + 1);
         }
-      } else {
-        setTimeout(() => {
-          scrollToIndex(ctx, state, { ...initialScroll, animated: false });
-        }, 17);
       }
     }
   }, []);
-  React2.useLayoutEffect(() => {
+  React3.useLayoutEffect(() => {
     if (snapToIndices) {
       updateSnapToOffsets(ctx, state);
     }
   }, [snapToIndices]);
-  React2.useLayoutEffect(() => {
+  React3.useLayoutEffect(() => {
     const didAllocateContainers = dataProp.length > 0 && doInitialAllocateContainers(ctx, state);
     if (!didAllocateContainers) {
       checkResetContainers(
@@ -2997,16 +3314,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       );
     }
   }, [dataProp, numColumnsProp]);
-  React2.useLayoutEffect(() => {
+  React3.useLayoutEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
-  React2.useLayoutEffect(initializeStateVars, [
+  React3.useLayoutEffect(initializeStateVars, [
     memoizedLastItemKeys.join(","),
     numColumnsProp,
     stylePaddingTopState,
     stylePaddingBottomState
   ]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     const viewability = setupViewability({
       onViewableItemsChanged,
       viewabilityConfig,
@@ -3015,12 +3332,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     state.viewabilityConfigCallbackPairs = viewability;
     state.enableScrollForNextCalculateItemsInView = !viewability;
   }, [viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged]);
-  if (!IsNewArchitecture) {
-    useInit(() => {
-      doInitialAllocateContainers(ctx, state);
-    });
-  }
-  const onLayoutChange = React2.useCallback((layout) => {
+  const onLayoutChange = React3.useCallback((layout) => {
     handleLayout(ctx, state, layout, setCanRender);
   }, []);
   const { onLayout } = useOnLayoutSync({
@@ -3029,7 +3341,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     ref: refScroller
     // the type of ScrollView doesn't include measure?
   });
-  React2.useImperativeHandle(forwardedRef, () => {
+  React3.useImperativeHandle(forwardedRef, () => {
     const scrollIndexIntoView = (options) => {
       const state2 = refState.current;
       if (state2) {
@@ -3111,14 +3423,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
     };
   }, []);
-  if (reactNative.Platform.OS === "web") {
-    React2.useEffect(() => {
+  {
+    React3.useEffect(() => {
       if (initialContentOffset) {
-        scrollTo(state, { animated: false, offset: initialContentOffset });
+        scrollTo(state, { animated: false, offset: initialContentOffset, ...initialScroll || {} });
       }
     }, []);
   }
-  const fns = React2.useMemo(
+  const fns = React3.useMemo(
     () => ({
       getRenderedItem: (key) => getRenderedItem(ctx, state, key),
       onScroll: (event) => onScroll(ctx, state, event),
@@ -3126,18 +3438,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }),
     []
   );
-  const onScrollHandler = React2.useMemo(() => {
-    const onScrollFn = fns.onScroll;
-    if (stickyIndices == null ? void 0 : stickyIndices.length) {
-      const { animatedScrollY } = ctx;
-      return reactNative.Animated.event([{ nativeEvent: { contentOffset: { [horizontal ? "x" : "y"]: animatedScrollY } } }], {
-        listener: onScrollFn,
-        useNativeDriver: true
-      });
-    }
-    return onScrollFn;
-  }, [stickyIndices == null ? void 0 : stickyIndices.length, horizontal, scrollEventThrottle]);
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(
+  const onScrollHandler = useStickyScrollHandler(stickyIndices, horizontal, ctx, fns.onScroll);
+  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, /* @__PURE__ */ React3__namespace.createElement(
     ListComponent,
     {
       ...rest,
@@ -3153,14 +3455,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       onLayout,
       onLayoutHeader,
       onMomentumScrollEnd: (event) => {
-        if (IsNewArchitecture) {
+        {
           requestAnimationFrame(() => {
             finishScrollTo(refState.current);
           });
-        } else {
-          setTimeout(() => {
-            finishScrollTo(refState.current);
-          }, 1e3);
         }
         if (onMomentumScrollEnd) {
           onMomentumScrollEnd(event);
@@ -3168,10 +3466,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       },
       onScroll: onScrollHandler,
       recycleItems,
-      refreshControl: refreshControl ? stylePaddingTopState > 0 ? React2__namespace.cloneElement(refreshControl, {
+      refreshControl: refreshControl ? stylePaddingTopState > 0 ? React3__namespace.cloneElement(refreshControl, {
         progressViewOffset: (refreshControl.props.progressViewOffset || 0) + stylePaddingTopState
-      }) : refreshControl : onRefresh && /* @__PURE__ */ React2__namespace.createElement(
-        reactNative.RefreshControl,
+      }) : refreshControl : onRefresh && /* @__PURE__ */ React3__namespace.createElement(
+        RefreshControl,
         {
           onRefresh,
           progressViewOffset: (progressViewOffset || 0) + stylePaddingTopState,
@@ -3179,15 +3477,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       ),
       refScrollView: combinedRef,
-      scrollAdjustHandler: (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler,
-      scrollEventThrottle: reactNative.Platform.OS === "web" ? 16 : void 0,
+      scrollAdjustHandler: (_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler,
+      scrollEventThrottle: 16 ,
       snapToIndices,
       stickyIndices,
       style,
       updateItemSize: fns.updateItemSize,
       waitForInitialLayout
     }
-  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React2__namespace.createElement(DebugView, { state: refState.current }));
+  ), IS_DEV && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React3__namespace.createElement(DebugView, { state: refState.current }));
 });
 
 exports.LegendList = LegendList;