@legendapp/list 2.0.0 → 2.1.0-beta.0

package/index.mjs

@@ -1,14 +1,27 @@
-import * as React3 from 'react';
-import React3__default, { useReducer, useEffect, createContext, useRef, useState, useMemo, useLayoutEffect, useCallback, useImperativeHandle, forwardRef, memo, useContext } from 'react';
-import { View, Text, Platform, Animated, StyleSheet, Dimensions, RefreshControl, unstable_batchedUpdates } from 'react-native';
+import * as React4 from 'react';
+import React4__default, { forwardRef, useReducer, useEffect, createContext, useRef, useState, useMemo, useImperativeHandle, useCallback, useLayoutEffect, memo, useContext } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { unstable_batchedUpdates } from 'react-dom';
 
 // src/components/LegendList.tsx
-var ContextState = React3.createContext(null);
+var AnimatedView = forwardRef(function AnimatedView2(props, ref) {
+  return /* @__PURE__ */ React4.createElement("div", { ref, ...props });
+});
+var View = forwardRef(function View2(props, ref) {
+  return /* @__PURE__ */ React4.createElement("div", { ref, ...props });
+});
+var Text = View;
+
+// src/platform/Animated.tsx
+var createAnimatedValue = (value) => value;
+
+// src/state/state.tsx
+var ContextState = React4.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React3.useState(() => ({
-    animatedScrollY: new Animated.Value(0),
+  const [value] = React4.useState(() => ({
+    animatedScrollY: createAnimatedValue(0),
     columnWrapperStyle: void 0,
+    internalState: void 0,
     listeners: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
@@ -24,10 +37,10 @@ function StateProvider({ children }) {
     ]),
     viewRefs: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React3.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React4.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React3.useContext(ContextState);
+  return React4.useContext(ContextState);
 }
 function createSelectorFunctionsArr(ctx, signalNames) {
   let lastValues = [];
@@ -97,23 +110,23 @@ function getContentSize(ctx) {
   return headerSize + footerSize + totalSize + stylePaddingTop;
 }
 function useArr$(signalNames) {
-  const ctx = React3.useContext(ContextState);
-  const { subscribe, get } = React3.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const ctx = React4.useContext(ContextState);
+  const { subscribe, get } = React4.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
   const value = useSyncExternalStore(subscribe, get);
   return value;
 }
 function useSelector$(signalName, selector) {
-  const ctx = React3.useContext(ContextState);
-  const { subscribe, get } = React3.useMemo(() => createSelectorFunctionsArr(ctx, [signalName]), [ctx, signalName]);
+  const ctx = React4.useContext(ContextState);
+  const { subscribe, get } = React4.useMemo(() => createSelectorFunctionsArr(ctx, [signalName]), [ctx, signalName]);
   const value = useSyncExternalStore(subscribe, () => selector(get()[0]));
   return value;
 }
 
 // src/components/DebugView.tsx
 var DebugRow = ({ children }) => {
-  return /* @__PURE__ */ React3.createElement(View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
+  return /* @__PURE__ */ React4.createElement(View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
 };
-var DebugView = React3.memo(function DebugView2({ state }) {
+var DebugView = React4.memo(function DebugView2({ state }) {
   const ctx = useStateContext();
   const [totalSize = 0, scrollAdjust = 0, rawScroll = 0, scroll = 0, _numContainers = 0, _numContainersPooled = 0] = useArr$([
     "totalSize",
@@ -128,7 +141,7 @@ var DebugView = React3.memo(function DebugView2({ state }) {
   useInterval(() => {
     forceUpdate();
   }, 100);
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React4.createElement(
     View,
     {
       pointerEvents: "none",
@@ -144,14 +157,12 @@ var DebugView = React3.memo(function DebugView2({ state }) {
         top: 0
       }
     },
-    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "TotalSize:"), /* @__PURE__ */ React3.createElement(Text, null, totalSize.toFixed(2))),
-    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "ContentSize:"), /* @__PURE__ */ React3.createElement(Text, null, contentSize.toFixed(2))),
-    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "At end:"), /* @__PURE__ */ React3.createElement(Text, null, String(state.isAtEnd))),
-    /* @__PURE__ */ React3.createElement(Text, null),
-    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "ScrollAdjust:"), /* @__PURE__ */ React3.createElement(Text, null, scrollAdjust.toFixed(2))),
-    /* @__PURE__ */ React3.createElement(Text, null),
-    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "RawScroll: "), /* @__PURE__ */ React3.createElement(Text, null, rawScroll.toFixed(2))),
-    /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "ComputedScroll: "), /* @__PURE__ */ React3.createElement(Text, null, scroll.toFixed(2)))
+    /* @__PURE__ */ React4.createElement(DebugRow, null, /* @__PURE__ */ React4.createElement(Text, null, "TotalSize:"), /* @__PURE__ */ React4.createElement(Text, null, totalSize.toFixed(2))),
+    /* @__PURE__ */ React4.createElement(DebugRow, null, /* @__PURE__ */ React4.createElement(Text, null, "ContentSize:"), /* @__PURE__ */ React4.createElement(Text, null, contentSize.toFixed(2))),
+    /* @__PURE__ */ React4.createElement(DebugRow, null, /* @__PURE__ */ React4.createElement(Text, null, "At end:"), /* @__PURE__ */ React4.createElement(Text, null, String(state.isAtEnd))),
+    /* @__PURE__ */ React4.createElement(DebugRow, null, /* @__PURE__ */ React4.createElement(Text, null, "ScrollAdjust:"), /* @__PURE__ */ React4.createElement(Text, null, scrollAdjust.toFixed(2))),
+    /* @__PURE__ */ React4.createElement(DebugRow, null, /* @__PURE__ */ React4.createElement(Text, null, "RawScroll: "), /* @__PURE__ */ React4.createElement(Text, null, rawScroll.toFixed(2))),
+    /* @__PURE__ */ React4.createElement(DebugRow, null, /* @__PURE__ */ React4.createElement(Text, null, "ComputedScroll: "), /* @__PURE__ */ React4.createElement(Text, null, scroll.toFixed(2)))
   );
 });
 function useInterval(callback, delay) {
@@ -160,57 +171,90 @@ function useInterval(callback, delay) {
     return () => clearInterval(interval);
   }, [delay]);
 }
-var LeanViewComponent = React3.forwardRef((props, ref) => {
-  return React3.createElement("RCTView", { ...props, ref });
-});
-LeanViewComponent.displayName = "RCTView";
-var LeanView = Platform.OS === "android" || Platform.OS === "ios" ? LeanViewComponent : View;
-
-// 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 useRef(new 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);
-  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 === 0) {
-            queueMicrotask(fn);
-          } else {
-            setTimeout(fn, delayValue);
+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);
           }
         }
-      } else {
-        animValue.setValue(newValue);
       }
     });
+  }
+  return globalResizeObserver;
+}
+var callbackMap = /* @__PURE__ */ new WeakMap();
+function useResizeObserver(element, callback) {
+  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]);
+}
+
+// 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,
+    useCallback(
+      (entry) => {
+        onLayoutChange(entry.contentRect, false);
+      },
+      [onLayoutChange]
+    )
+  );
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      onLayoutChange(
+        {
+          height: rect.height,
+          width: rect.width,
+          x: rect.left,
+          y: rect.top
+        },
+        true
+      );
+    }
   }, []);
-  return animValue;
+  return {};
 }
+
+// src/components/LayoutView.tsx
+var LayoutView = ({ onLayoutChange, refView, children, ...rest }) => {
+  const ref = refView != null ? refView : useRef();
+  useSyncLayout({ onLayoutChange, ref });
+  return /* @__PURE__ */ React4.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 = forwardRef;
 var typedMemo = memo;
 
@@ -223,70 +267,45 @@ var PositionViewState = typedMemo(function PositionView({
   ...rest
 }) {
   const [position = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
-  return /* @__PURE__ */ React3.createElement(
-    LeanView,
-    {
-      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
-  });
-  return /* @__PURE__ */ React3.createElement(
-    Animated.View,
-    {
-      ref: refView,
-      style: [
-        style,
-        horizontal ? { transform: [{ translateX: position$ }] } : { transform: [{ translateY: position$ }] }
-      ],
-      ...rest
-    }
-  );
+  const base = Array.isArray(style) ? Object.assign({}, ...style) : style;
+  const combinedStyle = horizontal ? { ...base, left: position } : { ...base, top: position };
+  return /* @__PURE__ */ React4.createElement(LayoutView, { 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 = React3.useMemo(() => {
-    if (animatedScrollY && stickyOffset) {
-      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 = React3.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
-  return /* @__PURE__ */ React3.createElement(Animated.View, { ref: refView, style: viewStyle, ...rest });
+  const [position = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
+  const viewStyle = React4.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.createElement(LayoutView, { refView, style: viewStyle, ...rest });
 });
-var PositionView3 = IsNewArchitecture ? PositionViewState : PositionViewAnimated;
+var PositionView2 = PositionViewState;
 function Separator({ ItemSeparatorComponent, itemKey, leadingItem }) {
   const [lastItemKeys] = useArr$(["lastItemKeys"]);
   const isALastItem = lastItemKeys.includes(itemKey);
-  return isALastItem ? null : /* @__PURE__ */ React3.createElement(ItemSeparatorComponent, { leadingItem });
+  return isALastItem ? null : /* @__PURE__ */ React4.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 = useRef(symbolFirst);
@@ -423,14 +442,10 @@ function useListScrollSize() {
   const [scrollSize] = useArr$(["scrollSize"]);
   return scrollSize;
 }
-var noop = () => {
-};
-function useSyncLayout() {
-  if (IsNewArchitecture) {
+function useSyncLayout2() {
+  {
     const { triggerLayout: syncLayout } = useContext(ContextContainer);
     return syncLayout;
-  } else {
-    return noop;
   }
 }
 
@@ -444,35 +459,37 @@ var Container = typedMemo(function Container2({
   ItemSeparatorComponent
 }) {
   const ctx = useStateContext();
-  const { columnWrapperStyle, animatedScrollY } = ctx;
-  const [column = 0, data, itemKey, numColumns, extraData, isSticky, stickyOffset] = useArr$([
+  const { columnWrapperStyle } = ctx;
+  const [column = 0, data, itemKey, numColumns, extraData, isSticky] = useArr$([
     `containerColumn${id}`,
     `containerItemData${id}`,
     `containerItemKey${id}`,
     "numColumns",
     "extraData",
-    `containerSticky${id}`,
-    `containerStickyOffset${id}`
+    `containerSticky${id}`
   ]);
   const refLastSize = useRef();
   const ref = useRef(null);
-  const [layoutRenderCount, forceLayoutRender] = useState(0);
+  const [_, forceLayoutRender] = useState(0);
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
-  let didLayout = false;
   const style = 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,
-          paddingVertical: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
+          paddingTop: py
         };
       } else {
+        const px = numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0;
         paddingStyles = {
           paddingBottom: rowGap || gap || void 0,
-          paddingHorizontal: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
+          paddingLeft: px,
+          paddingRight: px
         };
       }
     }
@@ -486,7 +503,7 @@ var Container = typedMemo(function Container2({
     } : {
       left: otherAxisPos,
       position: "absolute",
-      right: numColumns > 1 ? null : 0,
+      right: numColumns > 1 ? void 0 : 0,
       top: 0,
       width: otherAxisSize,
       ...paddingStyles || {}
@@ -509,79 +526,183 @@ var Container = typedMemo(function Container2({
       value: data
     };
   }, [id, itemKey, index, data]);
-  const onLayout = (event) => {
-    var _a, _b;
+  const onLayoutChange = (rectangle) => {
     if (!isNullOrUndefined(itemKey)) {
-      didLayout = true;
-      let layout = event.nativeEvent.layout;
-      const size = layout[horizontal ? "width" : "height"];
+      let layout = rectangle;
+      layout[horizontal ? "width" : "height"];
       const doUpdate = () => {
         refLastSize.current = { height: layout.height, width: layout.width };
         updateItemSize2(itemKey, layout);
       };
-      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();
-        });
       }
     }
   };
-  if (IsNewArchitecture) {
-    useLayoutEffect(() => {
-      var _a, _b;
-      if (!isNullOrUndefined(itemKey)) {
-        const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
-        if (measured) {
-          const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
-          if (size) {
-            updateItemSize2(itemKey, measured);
-          }
-        }
-      }
-    }, [itemKey, layoutRenderCount]);
-  } else {
-    useEffect(() => {
-      if (!isNullOrUndefined(itemKey)) {
-        const timeout = setTimeout(() => {
-          if (!didLayout && refLastSize.current) {
-            updateItemSize2(itemKey, refLastSize.current);
-          }
-        }, 16);
-        return () => {
-          clearTimeout(timeout);
-        };
-      }
-    }, [itemKey]);
-  }
-  const PositionComponent = isSticky ? PositionViewSticky : PositionView3;
-  return /* @__PURE__ */ React3.createElement(
+  const PositionComponent = isSticky ? PositionViewSticky : PositionView2;
+  return /* @__PURE__ */ React4.createElement(ContextContainer.Provider, { value: contextValue }, /* @__PURE__ */ React4.createElement(
     PositionComponent,
     {
-      animatedScrollY: isSticky ? animatedScrollY : void 0,
       horizontal,
       id,
       index,
       key: recycleItems ? void 0 : itemKey,
-      onLayout,
+      onLayoutChange,
       refView: ref,
-      stickyOffset: isSticky ? stickyOffset : void 0,
       style
     },
-    /* @__PURE__ */ React3.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React3.createElement(
+    renderedItem,
+    renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React4.createElement(
       Separator,
       {
         ItemSeparatorComponent,
         itemKey,
         leadingItem: renderedItemInfo.item
       }
-    ))
-  );
+    )
+  ));
 });
 
+// src/utils/reordering.ts
+var mapFn = (element) => {
+  const indexStr = element.getAttribute("index");
+  return [element, indexStr === null ? null : parseInt(indexStr)];
+};
+function sortDOMElementsPatience(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 = useRef(void 0);
+  useEffect(() => {
+    const unsubscribe = listen$(ctx, "lastPositionUpdate", () => {
+      if (debounceRef.current !== void 0) {
+        clearTimeout(debounceRef.current);
+      }
+      debounceRef.current = setTimeout(() => {
+        const parent = ref.current;
+        if (parent) {
+          sortDOMElementsPatience(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 = 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__ */ React4.createElement("div", { ref, style }, children);
+});
 var Containers = typedMemo(function Containers2({
   horizontal,
   recycleItems,
@@ -590,19 +711,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
-    delay: (value, prevValue) => !prevValue || value - prevValue > 20 ? 0 : 200
-  });
-  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__ */ React3.createElement(
+      /* @__PURE__ */ React4.createElement(
         Container,
         {
           getRenderedItem: getRenderedItem2,
@@ -616,45 +729,209 @@ 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__ */ React4.createElement(ContainersInner, { horizontal, numColumns, waitForInitialLayout }, containers);
+});
+var DevNumbers = __DEV__ && React4.memo(function DevNumbers2() {
+  return Array.from({ length: 100 }).map((_, index) => /* @__PURE__ */ React4.createElement(
+    View,
+    {
+      key: index,
+      style: {
+        height: 100,
+        pointerEvents: "none",
+        position: "absolute",
+        top: index * 100,
+        width: "100%"
       }
-      if (gapX) {
-        style.marginRight = -gapX;
+    },
+    /* @__PURE__ */ React4.createElement(Text, { style: { color: "red" } }, index * 100)
+  ));
+});
+var ListComponentScrollView = forwardRef(function ListComponentScrollView2({
+  children,
+  style,
+  contentContainerStyle,
+  horizontal = false,
+  contentOffset,
+  maintainVisibleContentPosition,
+  onScroll: onScroll2,
+  onMomentumScrollEnd,
+  showsHorizontalScrollIndicator = true,
+  showsVerticalScrollIndicator = true,
+  refreshControl,
+  onLayout,
+  ScrollComponent,
+  ...props
+}, ref) {
+  const scrollRef = useRef(null);
+  const contentRef = useRef(null);
+  const momentumTimeout = useRef(null);
+  useImperativeHandle(ref, () => {
+    const api = {
+      getBoundingClientRect: () => {
+        var _a;
+        return (_a = scrollRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      },
+      getScrollableNode: () => scrollRef.current,
+      getScrollResponder: () => scrollRef.current,
+      scrollBy: (options) => {
+        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 });
+      },
+      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 });
+        }
       }
-    } else {
-      if (gapX) {
-        style.marginHorizontal = -gapX;
+    };
+    return api;
+  }, [horizontal]);
+  const handleScroll = useCallback(
+    (event) => {
+      if (!onScroll2 || !(event == null ? void 0 : event.target)) {
+        return;
       }
-      if (gapY) {
-        style.marginBottom = -gapY;
+      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);
       }
+    },
+    [onScroll2, onMomentumScrollEnd]
+  );
+  useLayoutEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    element.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      element.removeEventListener("scroll", handleScroll);
+    };
+  }, [handleScroll]);
+  useLayoutEffect(() => {
+    if (contentOffset && scrollRef.current) {
+      scrollRef.current.scrollLeft = contentOffset.x || 0;
+      scrollRef.current.scrollTop = contentOffset.y || 0;
     }
-  }
-  return /* @__PURE__ */ React3.createElement(Animated.View, { style }, containers);
+  }, [contentOffset]);
+  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
+    ...style
+  };
+  const contentStyle = {
+    display: horizontal ? "flex" : "block",
+    flexDirection: horizontal ? "row" : void 0,
+    minHeight: horizontal ? void 0 : "100%",
+    minWidth: horizontal ? "100%" : void 0,
+    ...contentContainerStyle
+  };
+  return /* @__PURE__ */ React4.createElement("div", { ref: scrollRef, style: scrollViewStyle, ...props }, refreshControl, /* @__PURE__ */ React4.createElement("div", { ref: contentRef, style: contentStyle }, children));
 });
+function useValueListener$(key, callback) {
+  const ctx = useStateContext();
+  useLayoutEffect(() => {
+    listen$(ctx, key, (value) => {
+      callback(value);
+    });
+  }, []);
+}
+
+// src/components/ScrollAdjust.tsx
 function ScrollAdjust() {
-  const bias = 1e7;
-  const [scrollAdjust, scrollAdjustUserOffset] = useArr$(["scrollAdjust", "scrollAdjustUserOffset"]);
-  const scrollOffset = (scrollAdjust || 0) + (scrollAdjustUserOffset || 0) + bias;
-  return /* @__PURE__ */ React3.createElement(
-    View,
-    {
-      style: {
-        height: 0,
-        left: 0,
-        position: "absolute",
-        top: scrollOffset,
-        width: 0
-      }
+  const ctx = useStateContext();
+  const lastScrollOffsetRef = React4.useRef(0);
+  const callback = React4.useCallback(() => {
+    var _a;
+    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;
+    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;
 }
 
 // src/components/SnapWrapper.tsx
@@ -662,87 +939,31 @@ function SnapWrapper({ ScrollComponent, ...props }) {
   const [snapToOffsets] = useArr$(["snapToOffsets"]);
   return /* @__PURE__ */ React.createElement(ScrollComponent, { ...props, snapToOffsets });
 }
-function useThrottleDebounce(mode) {
-  const timeoutRef = useRef(null);
-  const lastCallTimeRef = useRef(0);
-  const lastArgsRef = useRef(null);
-  const clearTimeoutRef = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  };
-  const execute = useCallback(
-    (callback, delay, ...args) => {
-      {
-        const now = Date.now();
-        lastArgsRef.current = args;
-        if (now - lastCallTimeRef.current >= delay) {
-          lastCallTimeRef.current = now;
-          callback(...args);
-          clearTimeoutRef();
-        } else {
-          clearTimeoutRef();
-          timeoutRef.current = setTimeout(
-            () => {
-              if (lastArgsRef.current) {
-                lastCallTimeRef.current = Date.now();
-                callback(...lastArgsRef.current);
-                timeoutRef.current = null;
-                lastArgsRef.current = null;
-              }
-            },
-            delay - (now - lastCallTimeRef.current)
-          );
-        }
-      }
-    },
-    [mode]
-  );
-  return execute;
-}
 
-// src/hooks/useSyncLayout.tsx
-function useSyncLayout2({
-  onChange
-}) {
-  const ref = useRef(null);
-  const onLayout = useCallback(
-    (event) => {
-      onChange(event.nativeEvent.layout, false);
-    },
-    [onChange]
-  );
-  if (IsNewArchitecture) {
-    useLayoutEffect(() => {
-      if (ref.current) {
-        ref.current.measure((x, y, width, height) => {
-          onChange({ height, width, x, y }, true);
-        });
-      }
-    }, []);
-  }
-  return { onLayout, ref };
+// src/hooks/useValue$.ts
+function useValue$(key, params) {
+  const [value] = useArr$([key]);
+  return value;
 }
 
 // src/components/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React3.isValidElement(Component)) {
+  if (React4.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React3.createElement(Component, null);
+    return /* @__PURE__ */ React4.createElement(Component, null);
   }
   return null;
 };
 var Padding = () => {
-  const animPaddingTop = useValue$("alignItemsPaddingTop", { delay: 0 });
-  return /* @__PURE__ */ React3.createElement(Animated.View, { style: { paddingTop: animPaddingTop } });
+  const animPaddingTop = useValue$("alignItemsPaddingTop");
+  return /* @__PURE__ */ React4.createElement(AnimatedView, { style: { paddingTop: animPaddingTop } });
 };
 var PaddingDevMode = () => {
-  const animPaddingTop = useValue$("alignItemsPaddingTop", { delay: 0 });
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Animated.View, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React3.createElement(
-    Animated.View,
+  const animPaddingTop = useValue$("alignItemsPaddingTop");
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(AnimatedView, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React4.createElement(
+    AnimatedView,
     {
       style: {
         backgroundColor: "green",
@@ -784,14 +1005,12 @@ var ListComponent = typedMemo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
-  const { onLayout: onLayoutHeaderSync, ref: refHeader } = useSyncLayout2({
-    onChange: onLayoutHeader
-  });
+  const refHeader = React4.useRef(null);
   const ScrollComponent = renderScrollComponent ? useMemo(
-    () => React3.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    () => React4.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
-  ) : Animated.ScrollView;
-  React3.useEffect(() => {
+  ) : ListComponentScrollView;
+  React4.useEffect(() => {
     if (canRender) {
       setTimeout(() => {
         scrollAdjustHandler.setMounted();
@@ -799,16 +1018,17 @@ var ListComponent = typedMemo(function ListComponent2({
     }
   }, [canRender]);
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
-  return /* @__PURE__ */ React3.createElement(
+  const contentContainerStyleWeb = 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.createElement(
     SnapOrScroll,
     {
       ...rest,
-      contentContainerStyle: [
-        contentContainerStyle,
-        horizontal ? {
-          height: "100%"
-        } : {}
-      ],
+      contentContainerStyle: contentContainerStyleWeb,
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       horizontal,
       maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
@@ -818,11 +1038,19 @@ var ListComponent = typedMemo(function ListComponent2({
       ScrollComponent: snapToIndices ? ScrollComponent : void 0,
       style
     },
-    maintainVisibleContentPosition && /* @__PURE__ */ React3.createElement(ScrollAdjust, null),
-    ENABLE_DEVMODE ? /* @__PURE__ */ React3.createElement(PaddingDevMode, null) : /* @__PURE__ */ React3.createElement(Padding, null),
-    ListHeaderComponent && /* @__PURE__ */ React3.createElement(View, { onLayout: onLayoutHeaderSync, ref: refHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
+    maintainVisibleContentPosition && /* @__PURE__ */ React4.createElement(ScrollAdjust, null),
+    ENABLE_DEVMODE ? /* @__PURE__ */ React4.createElement(PaddingDevMode, null) : /* @__PURE__ */ React4.createElement(Padding, null),
+    ListHeaderComponent && /* @__PURE__ */ React4.createElement(
+      LayoutView,
+      {
+        onLayoutChange: onLayoutHeader,
+        refView: refHeader,
+        style: ListHeaderComponentStyle
+      },
+      getComponent(ListHeaderComponent)
+    ),
     ListEmptyComponent && getComponent(ListEmptyComponent),
-    canRender && /* @__PURE__ */ React3.createElement(
+    canRender && /* @__PURE__ */ React4.createElement(
       Containers,
       {
         getRenderedItem: getRenderedItem2,
@@ -833,36 +1061,20 @@ var ListComponent = typedMemo(function ListComponent2({
         waitForInitialLayout
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React3.createElement(
-      View,
+    ListFooterComponent && /* @__PURE__ */ React4.createElement(
+      LayoutView,
       {
-        onLayout: (event) => {
-          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+        onLayoutChange: (layout) => {
+          const size = layout[horizontal ? "width" : "height"];
           set$(ctx, "footerSize", size);
         },
         style: ListFooterComponentStyle
       },
       getComponent(ListFooterComponent)
     ),
-    __DEV__ && ENABLE_DEVMODE && /* @__PURE__ */ React3.createElement(DevNumbers, null)
+    __DEV__ && ENABLE_DEVMODE && /* @__PURE__ */ React4.createElement(DevNumbers, null)
   );
 });
-var DevNumbers = __DEV__ && React3.memo(function DevNumbers2() {
-  return Array.from({ length: 100 }).map((_, index) => /* @__PURE__ */ React3.createElement(
-    View,
-    {
-      key: index,
-      style: {
-        height: 100,
-        pointerEvents: "none",
-        position: "absolute",
-        top: index * 100,
-        width: "100%"
-      }
-    },
-    /* @__PURE__ */ React3.createElement(Text, { style: { color: "red" } }, index * 100)
-  ));
-});
 
 // src/utils/getId.ts
 function getId(state, index) {
@@ -983,14 +1195,8 @@ function scrollTo(state, params = {}) {
 // src/utils/requestAdjust.ts
 function requestAdjust(ctx, state, positionDiff, dataChanged) {
   if (Math.abs(positionDiff) > 0.1) {
-    const needsScrollWorkaround = Platform.OS === "android" && !IsNewArchitecture && dataChanged && state.scroll <= positionDiff;
     const doit = () => {
-      if (needsScrollWorkaround) {
-        scrollTo(state, {
-          noScrollingTo: true,
-          offset: state.scroll
-        });
-      } else {
+      {
         state.scrollAdjustHandler.requestAdjust(positionDiff);
       }
     };
@@ -1015,7 +1221,7 @@ function requestAdjust(ctx, state, positionDiff, dataChanged) {
         () => {
           state.ignoreScrollFromMVCP = void 0;
         },
-        needsScrollWorkaround ? 250 : 100
+        100
       );
     } else {
       requestAnimationFrame(doit);
@@ -1075,7 +1281,7 @@ function prepareMVCP(ctx, state, dataChanged) {
       }
     }
     if (positionDiff !== void 0 && Math.abs(positionDiff) > 0.1) {
-      requestAdjust(ctx, state, positionDiff, dataChanged);
+      requestAdjust(ctx, state, positionDiff);
     }
   };
 }
@@ -1251,21 +1457,6 @@ 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,
@@ -1435,12 +1626,11 @@ function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
   const cb = ctx.mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
-var batchedUpdates = unstable_batchedUpdates || ((callback) => callback());
 
 // src/utils/checkAllSizesKnown.ts
 function checkAllSizesKnown(state) {
   const { startBuffered, endBuffered, sizesKnown } = state;
-  if (endBuffered !== null) {
+  if (endBuffered !== null && startBuffered >= 0 && endBuffered >= 0) {
     let areAllKnown = true;
     for (let i = startBuffered; areAllKnown && i <= endBuffered; i++) {
       const key = getId(state, i);
@@ -1698,19 +1888,7 @@ function setDidLayout(ctx, state) {
       onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
     }
   };
-  if (Platform.OS === "android" || !IsNewArchitecture) {
-    if (initialScroll) {
-      queueMicrotask(() => {
-        scrollToIndex(ctx, state, { ...initialScroll, animated: false });
-        requestAnimationFrame(() => {
-          scrollToIndex(ctx, state, { ...initialScroll, animated: false });
-          setIt();
-        });
-      });
-    } else {
-      queueMicrotask(setIt);
-    }
-  } else {
+  {
     setIt();
   }
 }
@@ -1779,7 +1957,7 @@ function handleStickyRecycling(ctx, state, stickyArray, scroll, scrollBuffer, pe
   }
 }
 function calculateItemsInView(ctx, state, params = {}) {
-  batchedUpdates(() => {
+  unstable_batchedUpdates(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const {
       columns,
@@ -2007,10 +2185,9 @@ function calculateItemsInView(ctx, state, params = {}) {
           if (stickyIndicesSet.has(i)) {
             set$(ctx, `containerSticky${containerIndex}`, true);
             const topPadding = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
-            set$(ctx, `containerStickyOffset${containerIndex}`, new Animated.Value(topPadding));
+            set$(ctx, `containerStickyOffset${containerIndex}`, createAnimatedValue(topPadding));
             state.stickyContainerPool.add(containerIndex);
           } else {
-            set$(ctx, `containerSticky${containerIndex}`, false);
             state.stickyContainerPool.delete(containerIndex);
           }
           if (containerIndex >= numContainers2) {
@@ -2028,6 +2205,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     if (stickyIndicesArr.length > 0) {
       handleStickyRecycling(ctx, state, stickyIndicesArr, scroll, scrollBuffer, pendingRemoval);
     }
+    let didChangePositions = false;
     for (let i = 0; i < numContainers; i++) {
       const itemKey = peek$(ctx, `containerItemKey${i}`);
       if (pendingRemoval.includes(i)) {
@@ -2059,6 +2237,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);
@@ -2070,6 +2249,9 @@ function calculateItemsInView(ctx, state, params = {}) {
         }
       }
     }
+    if (didChangePositions) {
+      set$(ctx, "lastPositionUpdate", Date.now());
+    }
     if (!queuedInitialLayout && endBuffered !== null) {
       if (checkAllSizesKnown(state)) {
         setDidLayout(ctx, state);
@@ -2117,7 +2299,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 });
@@ -2191,7 +2373,9 @@ function checkAtTop(state) {
 // src/core/handleLayout.ts
 function handleLayout(ctx, state, layout, setCanRender) {
   const { maintainScrollAtEnd } = state.props;
-  const scrollLength = layout[state.props.horizontal ? "width" : "height"];
+  const measuredLength = layout[state.props.horizontal ? "width" : "height"];
+  const previousLength = state.scrollLength;
+  const scrollLength = measuredLength > 0 ? measuredLength : previousLength;
   const otherAxisSize = layout[state.props.horizontal ? "height" : "width"];
   const needsCalculate = !state.lastLayout || scrollLength > state.scrollLength || state.lastLayout.x !== layout.x || state.lastLayout.y !== layout.y;
   state.lastLayout = layout;
@@ -2202,7 +2386,9 @@ function handleLayout(ctx, state, layout, setCanRender) {
     state.otherAxisSize = otherAxisSize;
     state.lastBatchingAction = Date.now();
     state.scrollForNextCalculateItemsInView = void 0;
-    doInitialAllocateContainers(ctx, state);
+    if (scrollLength > 0) {
+      doInitialAllocateContainers(ctx, state);
+    }
     if (needsCalculate) {
       calculateItemsInView(ctx, state, { doMVCP: true });
     }
@@ -2218,7 +2404,7 @@ function handleLayout(ctx, state, layout, setCanRender) {
     if (state) {
       state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
     }
-    if (__DEV__ && scrollLength === 0) {
+    if (__DEV__ && measuredLength === 0) {
       warnDevOnce(
         "height0",
         `List ${state.props.horizontal ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
@@ -2250,7 +2436,15 @@ function onScroll(ctx, state, event) {
     }
   }
   state.scrollPending = newScroll;
-  updateScroll(ctx, state, 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) {
@@ -2416,7 +2610,8 @@ function updateOneItemSize(state, itemKey, sizeObj) {
   if (!data) return 0;
   const index = indexByKey.get(itemKey);
   const prevSize = getItemSize(state, itemKey, index, data);
-  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 : "" : "";
@@ -2449,6 +2644,28 @@ var useCombinedRef = (...refs) => {
   return callback;
 };
 
+// src/platform/RefreshControl.tsx
+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) {
+  return onScroll2;
+}
+
 // src/utils/createColumnWrapperStyle.ts
 function createColumnWrapperStyle(contentContainerStyle) {
   const { gap, columnGap, rowGap } = contentContainerStyle;
@@ -2485,10 +2702,49 @@ function getRenderedItem(ctx, state, key) {
       item: data[index],
       type: getItemType ? (_a = getItemType(data[index], index)) != null ? _a : "" : ""
     };
-    renderedItem = isFunction(renderItem) ? renderItem(itemProps) : React3__default.createElement(renderItem, itemProps);
+    renderedItem = isFunction(renderItem) ? renderItem(itemProps) : React4__default.createElement(renderItem, itemProps);
   }
   return { index, item: data[index], renderedItem };
 }
+function useThrottleDebounce(mode) {
+  const timeoutRef = useRef(null);
+  const lastCallTimeRef = useRef(0);
+  const lastArgsRef = useRef(null);
+  const clearTimeoutRef = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+  const execute = useCallback(
+    (callback, delay, ...args) => {
+      {
+        const now = Date.now();
+        lastArgsRef.current = args;
+        if (now - lastCallTimeRef.current >= delay) {
+          lastCallTimeRef.current = now;
+          callback(...args);
+          clearTimeoutRef();
+        } else {
+          clearTimeoutRef();
+          timeoutRef.current = setTimeout(
+            () => {
+              if (lastArgsRef.current) {
+                lastCallTimeRef.current = Date.now();
+                callback(...lastArgsRef.current);
+                timeoutRef.current = null;
+                lastArgsRef.current = null;
+              }
+            },
+            delay - (now - lastCallTimeRef.current)
+          );
+        }
+      }
+    },
+    [mode]
+  );
+  return execute;
+}
 
 // src/utils/throttledOnScroll.ts
 function useThrottledOnScroll(originalHandler, scrollEventThrottle) {
@@ -2557,18 +2813,17 @@ var LegendList = typedMemo(
     const isChildrenMode = children !== void 0 && dataProp === void 0;
     const processedProps = isChildrenMode ? {
       ...restProps,
-      data: (isArray(children) ? children : React3.Children.toArray(children)).flat(1),
+      data: (isArray(children) ? children : React4.Children.toArray(children)).flat(1),
       renderItem: ({ item }) => item
     } : {
       ...restProps,
       data: dataProp || [],
       renderItem: renderItemProp
     };
-    return /* @__PURE__ */ React3.createElement(StateProvider, null, /* @__PURE__ */ React3.createElement(LegendListInner, { ...processedProps, ref: forwardedRef }));
+    return /* @__PURE__ */ React4.createElement(StateProvider, null, /* @__PURE__ */ React4.createElement(LegendListInner, { ...processedProps, ref: forwardedRef }));
   })
 );
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a;
   const {
     alignItemsAtEnd = false,
     columnWrapperStyle,
@@ -2604,7 +2859,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onScroll: onScrollProp,
     onStartReached,
     onStartReachedThreshold = 0.5,
-    onViewableItemsChanged,
     progressViewOffset,
     recycleItems = false,
     refreshControl,
@@ -2616,14 +2870,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     stickyIndices,
     style: styleProp,
     suggestEstimatedItemSize,
-    viewabilityConfig,
-    viewabilityConfigCallbackPairs,
     waitForInitialLayout = true,
     ...rest
   } = props;
   const [renderNum, setRenderNum] = 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] = React3.useState(!IsNewArchitecture);
+  const [canRender, setCanRender] = React4.useState(!IsNewArchitecture);
   const contentContainerStyle = { ...StyleSheet.flatten(contentContainerStyleProp) };
   const style = { ...StyleSheet.flatten(styleProp) };
   const stylePaddingTopState = extractPadding(style, contentContainerStyle, "Top");
@@ -2637,64 +2889,70 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (_item, index) => index.toString();
   const refState = useRef();
   if (!refState.current) {
-    const initialScrollLength = (estimatedListSize != null ? estimatedListSize : IsNewArchitecture ? { height: 0, width: 0 } : Dimensions.get("window"))[horizontal ? "width" : "height"];
-    refState.current = {
-      activeStickyIndex: void 0,
-      averageSizes: {},
-      columns: /* @__PURE__ */ new Map(),
-      containerItemKeys: /* @__PURE__ */ new Set(),
-      containerItemTypes: /* @__PURE__ */ new Map(),
-      enableScrollForNextCalculateItemsInView: true,
-      endBuffered: -1,
-      endNoBuffer: -1,
-      endReachedBlockedByTimer: false,
-      firstFullyOnScreenIndex: -1,
-      idCache: /* @__PURE__ */ new Map(),
-      idsInView: [],
-      indexByKey: /* @__PURE__ */ new Map(),
-      initialScroll,
-      isAtEnd: false,
-      isAtStart: false,
-      isEndReached: false,
-      isStartReached: false,
-      lastBatchingAction: Date.now(),
-      lastLayout: void 0,
-      loadStartTime: Date.now(),
-      minIndexSizeChanged: 0,
-      nativeMarginTop: 0,
-      positions: /* @__PURE__ */ new Map(),
-      props: {},
-      queuedCalculateItemsInView: 0,
-      refScroller: void 0,
-      scroll: 0,
-      scrollAdjustHandler: new ScrollAdjustHandler(ctx),
-      scrollForNextCalculateItemsInView: void 0,
-      scrollHistory: [],
-      scrollLength: initialScrollLength,
-      scrollPending: 0,
-      scrollPrev: 0,
-      scrollPrevTime: 0,
-      scrollProcessingEnabled: true,
-      scrollTime: 0,
-      sizes: /* @__PURE__ */ new Map(),
-      sizesKnown: /* @__PURE__ */ new Map(),
-      startBuffered: -1,
-      startNoBuffer: -1,
-      startReachedBlockedByTimer: false,
-      stickyContainerPool: /* @__PURE__ */ new Set(),
-      stickyContainers: /* @__PURE__ */ new Map(),
-      timeoutSizeMessage: 0,
-      timeouts: /* @__PURE__ */ new Set(),
-      totalSize: 0,
-      viewabilityConfigCallbackPairs: void 0
-    };
-    set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
-    set$(ctx, "extraData", extraData);
+    if (!ctx.internalState) {
+      const initialScrollLength = (estimatedListSize != null ? estimatedListSize : { height: 0, width: 0 } )[horizontal ? "width" : "height"];
+      ctx.internalState = {
+        activeStickyIndex: void 0,
+        averageSizes: {},
+        columns: /* @__PURE__ */ new Map(),
+        containerItemKeys: /* @__PURE__ */ new Set(),
+        containerItemTypes: /* @__PURE__ */ new Map(),
+        enableScrollForNextCalculateItemsInView: true,
+        endBuffered: -1,
+        endNoBuffer: -1,
+        endReachedBlockedByTimer: false,
+        firstFullyOnScreenIndex: -1,
+        idCache: /* @__PURE__ */ new Map(),
+        idsInView: [],
+        indexByKey: /* @__PURE__ */ new Map(),
+        initialScroll,
+        isAtEnd: false,
+        isAtStart: false,
+        isEndReached: false,
+        isStartReached: false,
+        lastBatchingAction: Date.now(),
+        lastLayout: void 0,
+        loadStartTime: Date.now(),
+        minIndexSizeChanged: 0,
+        nativeMarginTop: 0,
+        positions: /* @__PURE__ */ new Map(),
+        props: {},
+        queuedCalculateItemsInView: 0,
+        refScroller: void 0,
+        scroll: 0,
+        scrollAdjustHandler: new ScrollAdjustHandler(ctx),
+        scrollForNextCalculateItemsInView: void 0,
+        scrollHistory: [],
+        scrollLength: initialScrollLength,
+        scrollPending: 0,
+        scrollPrev: 0,
+        scrollPrevTime: 0,
+        scrollProcessingEnabled: true,
+        scrollTime: 0,
+        sizes: /* @__PURE__ */ new Map(),
+        sizesKnown: /* @__PURE__ */ new Map(),
+        startBuffered: -1,
+        startNoBuffer: -1,
+        startReachedBlockedByTimer: false,
+        stickyContainerPool: /* @__PURE__ */ new Set(),
+        stickyContainers: /* @__PURE__ */ new Map(),
+        timeoutSizeMessage: 0,
+        timeouts: /* @__PURE__ */ new Set(),
+        totalSize: 0,
+        viewabilityConfigCallbackPairs: void 0
+      };
+      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 = scrollEventThrottle && onScrollProp ? useThrottledOnScroll(onScrollProp, scrollEventThrottle) : onScrollProp;
+  const throttleScrollFn = (
+    // @ts-expect-error TODO Fix this
+    scrollEventThrottle && onScrollProp ? useThrottledOnScroll(onScrollProp, scrollEventThrottle) : onScrollProp
+  );
   state.props = {
     alignItemsAtEnd,
     data: dataProp,
@@ -2792,28 +3050,24 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     return 0;
   }, [renderNum]);
   if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
-    refState.current.lastBatchingAction = Date.now();
+    state.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirst && didDataChange) {
       __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."
       );
-      refState.current.sizes.clear();
-      refState.current.positions.clear();
+      state.sizes.clear();
+      state.positions.clear();
     }
   }
   const onLayoutHeader = useCallback((rect, fromLayoutEffect) => {
     const size = rect[horizontal ? "width" : "height"];
     set$(ctx, "headerSize", size);
     if ((initialScroll == null ? void 0 : initialScroll.index) !== void 0) {
-      if (IsNewArchitecture && Platform.OS !== "android") {
+      {
         if (fromLayoutEffect) {
           setRenderNum((v) => v + 1);
         }
-      } else {
-        setTimeout(() => {
-          scrollToIndex(ctx, state, { ...initialScroll, animated: false });
-        }, 17);
       }
     }
   }, []);
@@ -2834,20 +3088,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   useLayoutEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
-  useLayoutEffect(() => {
-    if (IsNewArchitecture) {
-      let measured;
-      refScroller.current.measure((x, y, width, height) => {
-        measured = { height, width, x, y };
-      });
-      if (measured) {
-        const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
-        if (size) {
-          handleLayout(ctx, state, measured, setCanRender);
-        }
-      }
-    }
-  }, []);
+  const { onLayout } = useSyncLayout({
+    onLayout: onLayoutProp,
+    onLayoutChange: useCallback(
+      (rectangle) => {
+        handleLayout(ctx, state, rectangle, setCanRender);
+      },
+      [ctx, state, setCanRender]
+    ),
+    ref: refScroller
+  });
   useLayoutEffect(initializeStateVars, [
     memoizedLastItemKeys.join(","),
     numColumnsProp,
@@ -2857,27 +3107,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const doInitialAllocateContainersCallback = () => {
     return doInitialAllocateContainers(ctx, state);
   };
-  useEffect(() => {
-    const viewability = setupViewability({
-      onViewableItemsChanged,
-      viewabilityConfig,
-      viewabilityConfigCallbackPairs
-    });
-    state.viewabilityConfigCallbackPairs = viewability;
-    state.enableScrollForNextCalculateItemsInView = !viewability;
-  }, [viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged]);
-  if (!IsNewArchitecture) {
-    useInit(() => {
-      doInitialAllocateContainersCallback();
-    });
-  }
-  const onLayout = useCallback((event) => {
-    const layout = event.nativeEvent.layout;
-    handleLayout(ctx, state, layout, setCanRender);
-    if (onLayoutProp) {
-      onLayoutProp(event);
-    }
-  }, []);
   useImperativeHandle(forwardedRef, () => {
     const scrollIndexIntoView = (options) => {
       const state2 = refState.current;
@@ -2895,10 +3124,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
     };
     return {
-      flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
+      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.getScrollableNode(),
-      getScrollResponder: () => refScroller.current.getScrollResponder(),
+      getScrollableNode: () => refScroller.current,
+      getScrollResponder: () => refScroller.current,
       getState: () => {
         const state2 = refState.current;
         return state2 ? {
@@ -2959,7 +3191,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
     };
   }, []);
-  if (Platform.OS === "web") {
+  {
     useEffect(() => {
       if (initialContentOffset) {
         scrollTo(state, { animated: false, offset: initialContentOffset });
@@ -2974,18 +3206,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }),
     []
   );
-  const onScrollHandler = useMemo(() => {
-    const onScrollFn = fns.onScroll;
-    if (stickyIndices == null ? void 0 : stickyIndices.length) {
-      const { animatedScrollY } = ctx;
-      return Animated.event([{ nativeEvent: { contentOffset: { [horizontal ? "x" : "y"]: animatedScrollY } } }], {
-        listener: onScrollFn,
-        useNativeDriver: true
-      });
-    }
-    return onScrollFn;
-  }, [stickyIndices == null ? void 0 : stickyIndices.length, horizontal, scrollEventThrottle]);
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+  const onScrollHandler = useStickyScrollHandler(stickyIndices, horizontal, ctx, fns.onScroll);
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
     ListComponent,
     {
       ...rest,
@@ -3001,14 +3223,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);
@@ -3016,9 +3234,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       },
       onScroll: onScrollHandler,
       recycleItems,
-      refreshControl: refreshControl ? stylePaddingTopState > 0 ? React3.cloneElement(refreshControl, {
+      refreshControl: refreshControl ? stylePaddingTopState > 0 ? React4.cloneElement(refreshControl, {
         progressViewOffset: (refreshControl.props.progressViewOffset || 0) + stylePaddingTopState
-      }) : refreshControl : onRefresh && /* @__PURE__ */ React3.createElement(
+      }) : refreshControl : onRefresh && /* @__PURE__ */ React4.createElement(
         RefreshControl,
         {
           onRefresh,
@@ -3027,15 +3245,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       ),
       refScrollView: combinedRef,
-      scrollAdjustHandler: (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler,
-      scrollEventThrottle: Platform.OS === "web" ? 16 : void 0,
+      scrollAdjustHandler: state.scrollAdjustHandler,
       snapToIndices,
       stickyIndices,
       style,
       updateItemSize: fns.updateItemSize,
       waitForInitialLayout
     }
-  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React3.createElement(DebugView, { state: refState.current }));
+  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React4.createElement(DebugView, { state: refState.current }));
 });
 
-export { LegendList, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };
+export { LegendList, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout2 as useSyncLayout, useViewability, useViewabilityAmount };