npm - @legendapp/list - Versions diffs - 1.0.0-beta.3 → 1.0.0-beta.30 - Mend

@legendapp/list 1.0.0-beta.3 → 1.0.0-beta.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var React5 = require('react');
+var React6 = require('react');
 var reactNative = require('react-native');
 function _interopNamespace(e) {
@@ -21,23 +21,24 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 // src/LegendList.tsx
-var ContextState = React5__namespace.createContext(null);
+var ContextState = React6__namespace.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React5__namespace.useState(() => ({
+  const [value] = React6__namespace.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map(),
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityValues: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
-    mapViewabilityAmountValues: /* @__PURE__ */ new Map()
+    mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
+    columnWrapperStyle: void 0
   }));
-  return /* @__PURE__ */ React5__namespace.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React6__namespace.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React5__namespace.useContext(ContextState);
+  return React6__namespace.useContext(ContextState);
 }
 function createSelectorFunctions(ctx, signalName) {
   return {
@@ -46,9 +47,9 @@ function createSelectorFunctions(ctx, signalName) {
   };
 }
 function use$(signalName) {
-  const ctx = React5__namespace.useContext(ContextState);
-  const { subscribe, get } = React5__namespace.useMemo(() => createSelectorFunctions(ctx, signalName), []);
-  const value = React5.useSyncExternalStore(subscribe, get);
+  const ctx = React6__namespace.useContext(ContextState);
+  const { subscribe, get } = React6__namespace.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const value = React6.useSyncExternalStore(subscribe, get);
   return value;
 }
 function listen$(ctx, signalName, cb) {
@@ -77,9 +78,17 @@ function set$(ctx, signalName, value) {
     }
   }
 }
+function getContentSize(ctx) {
+  const { values } = ctx;
+  const stylePaddingTop = values.get("stylePaddingTop") || 0;
+  const headerSize = values.get("headerSize") || 0;
+  const footerSize = values.get("footerSize") || 0;
+  const totalSize = values.get("totalSize") || 0;
+  return headerSize + footerSize + totalSize + stylePaddingTop;
+}
 var symbolFirst = Symbol();
 function useInit(cb) {
-  const refValue = React5.useRef(symbolFirst);
+  const refValue = React6.useRef(symbolFirst);
   if (refValue.current === symbolFirst) {
     refValue.current = cb();
   }
@@ -87,10 +96,10 @@ function useInit(cb) {
 }
 // src/ContextContainer.ts
-var ContextContainer = React5.createContext(null);
+var ContextContainer = React6.createContext(null);
 function useViewability(configId, callback) {
   const ctx = useStateContext();
-  const { containerId } = React5.useContext(ContextContainer);
+  const { containerId } = React6.useContext(ContextContainer);
   const key = containerId + configId;
   useInit(() => {
     const value = ctx.mapViewabilityValues.get(key);
@@ -99,7 +108,7 @@ function useViewability(configId, callback) {
     }
   });
   ctx.mapViewabilityCallbacks.set(key, callback);
-  React5.useEffect(
+  React6.useEffect(
     () => () => {
       ctx.mapViewabilityCallbacks.delete(key);
     },
@@ -108,7 +117,7 @@ function useViewability(configId, callback) {
 }
 function useViewabilityAmount(callback) {
   const ctx = useStateContext();
-  const { containerId } = React5.useContext(ContextContainer);
+  const { containerId } = React6.useContext(ContextContainer);
   useInit(() => {
     const value = ctx.mapViewabilityAmountValues.get(containerId);
     if (value) {
@@ -116,7 +125,7 @@ function useViewabilityAmount(callback) {
     }
   });
   ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-  React5.useEffect(
+  React6.useEffect(
     () => () => {
       ctx.mapViewabilityAmountCallbacks.delete(containerId);
     },
@@ -124,12 +133,12 @@ function useViewabilityAmount(callback) {
   );
 }
 function useRecyclingEffect(effect) {
-  const { index, value } = React5.useContext(ContextContainer);
-  const prevValues = React5.useRef({
+  const { index, value } = React6.useContext(ContextContainer);
+  const prevValues = React6.useRef({
     prevIndex: void 0,
     prevItem: void 0
   });
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     let ret = void 0;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
@@ -147,8 +156,8 @@ function useRecyclingEffect(effect) {
   }, [index, value]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value } = React5.useContext(ContextContainer);
-  const stateInfo = React5.useState(
+  const { index, value } = React6.useContext(ContextContainer);
+  const stateInfo = React6.useState(
     () => typeof valueOrFun === "function" ? valueOrFun({
       index,
       item: value,
@@ -162,10 +171,61 @@ function useRecyclingState(valueOrFun) {
   });
   return stateInfo;
 }
-var LeanView = React5__namespace.forwardRef((props, ref) => {
-  return React5__namespace.createElement("RCTView", { ...props, ref });
+var DebugRow = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(reactNative.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" } }, children);
+};
+var DebugView = React6.memo(function DebugView2({ state }) {
+  const ctx = useStateContext();
+  const totalSize = use$("totalSize") || 0;
+  const totalSizeWithScrollAdjust = use$("totalSizeWithScrollAdjust") || 0;
+  const scrollAdjust = use$("scrollAdjust") || 0;
+  const rawScroll = use$("debugRawScroll") || 0;
+  const scroll = use$("debugComputedScroll") || 0;
+  const contentSize = getContentSize(ctx);
+  const [, forceUpdate] = React6.useReducer((x) => x + 1, 0);
+  use$("numContainers");
+  use$("numContainersPooled");
+  useInterval(() => {
+    forceUpdate();
+  }, 100);
+  return /* @__PURE__ */ React.createElement(
+    reactNative.View,
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        paddingLeft: 4,
+        paddingBottom: 4,
+        // height: 100,
+        backgroundColor: "#FFFFFFCC",
+        padding: 4,
+        borderRadius: 4
+      },
+      pointerEvents: "none"
+    },
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "TotalSize:"), /* @__PURE__ */ React.createElement(reactNative.Text, null, totalSize.toFixed(2))),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "ContentSize:"), /* @__PURE__ */ React.createElement(reactNative.Text, null, contentSize.toFixed(2))),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "At end:"), /* @__PURE__ */ React.createElement(reactNative.Text, null, String(state.isAtBottom))),
+    /* @__PURE__ */ React.createElement(reactNative.Text, null),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "ScrollAdjust:"), /* @__PURE__ */ React.createElement(reactNative.Text, null, scrollAdjust.toFixed(2))),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "TotalSizeReal: "), /* @__PURE__ */ React.createElement(reactNative.Text, null, totalSizeWithScrollAdjust.toFixed(2))),
+    /* @__PURE__ */ React.createElement(reactNative.Text, null),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "RawScroll: "), /* @__PURE__ */ React.createElement(reactNative.Text, null, rawScroll.toFixed(2))),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(reactNative.Text, null, "ComputedScroll: "), /* @__PURE__ */ React.createElement(reactNative.Text, null, scroll.toFixed(2)))
+  );
+});
+function useInterval(callback, delay) {
+  React6.useEffect(() => {
+    const interval = setInterval(callback, delay);
+    return () => clearInterval(interval);
+  }, [delay]);
+}
+var LeanViewComponent = React6__namespace.forwardRef((props, ref) => {
+  return React6__namespace.createElement("RCTView", { ...props, ref });
 });
-LeanView.displayName = "RCTView";
+LeanViewComponent.displayName = "RCTView";
+var LeanView = reactNative.Platform.OS === "android" || reactNative.Platform.OS === "ios" ? LeanViewComponent : reactNative.View;
 // src/constants.ts
 var POSITION_OUT_OF_VIEW = -1e7;
@@ -174,8 +234,11 @@ var ANCHORED_POSITION_OUT_OF_VIEW = {
   relativeCoordinate: POSITION_OUT_OF_VIEW,
   top: POSITION_OUT_OF_VIEW
 };
+var ENABLE_DEVMODE = __DEV__ && false;
+var ENABLE_DEBUG_VIEW = __DEV__ && false;
 // src/Container.tsx
+var isNewArchitecture = global.nativeFabricUIManager != null;
 var Container = ({
   id,
   recycleItems,
@@ -185,12 +248,26 @@ var Container = ({
   ItemSeparatorComponent
 }) => {
   const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
   const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
   const numColumns = use$("numColumns");
+  const lastItemKeys = use$("lastItemKeys");
+  const itemKey = use$(`containerItemKey${id}`);
+  const data = use$(`containerItemData${id}`);
+  const extraData = use$("extraData");
+  const refLastSize = React6.useRef();
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
+  let verticalPaddingStyles;
+  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    verticalPaddingStyles = {
+      paddingBottom: !lastItemKeys.has(itemKey) ? rowGap || gap || void 0 : void 0,
+      paddingHorizontal: (columnGap || gap || 0) / 2
+    };
+  }
   const style = horizontal ? {
     flexDirection: ItemSeparatorComponent ? "row" : void 0,
     position: "absolute",
@@ -203,76 +280,96 @@ var Container = ({
     left: otherAxisPos,
     right: numColumns > 1 ? null : 0,
     width: otherAxisSize,
-    top: position.relativeCoordinate
+    top: position.relativeCoordinate,
+    ...verticalPaddingStyles || {}
   };
-  const lastItemKey = use$("lastItemKey");
-  const itemKey = use$(`containerItemKey${id}`);
-  const data = use$(`containerItemData${id}`);
-  const extraData = use$("extraData");
-  const refLastSize = React5.useRef();
-  const renderedItemInfo = React5.useMemo(
-    () => itemKey !== void 0 && getRenderedItem(itemKey),
+  const renderedItemInfo = React6.useMemo(
+    () => itemKey !== void 0 ? getRenderedItem(itemKey) : null,
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
-  React5.useEffect(() => {
-    if (itemKey) {
-      const timeout = setTimeout(() => {
-        if (refLastSize.current) {
-          updateItemSize(id, itemKey, refLastSize.current);
-        }
-      }, 16);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-  }, [itemKey]);
   const onLayout = (event) => {
-    const key = peek$(ctx, `containerItemKey${id}`);
-    if (key !== void 0) {
-      const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
-      updateItemSize(id, key, size);
+    if (itemKey !== void 0) {
+      const layout = event.nativeEvent.layout;
+      const size = Math.floor(layout[horizontal ? "width" : "height"] * 8) / 8;
+      refLastSize.current = size;
+      updateItemSize(itemKey, size);
     }
   };
-  const ref = React5.useRef(null);
-  React5.useLayoutEffect(() => {
-    var _a, _b;
-    if (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) {
-          updateItemSize(id, itemKey, size);
+  const ref = React6.useRef(null);
+  if (isNewArchitecture) {
+    React6.useLayoutEffect(() => {
+      var _a, _b;
+      if (itemKey !== void 0) {
+        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) {
+            updateItemSize(itemKey, size);
+          }
         }
       }
-    }
-  }, [itemKey]);
-  const contextValue = React5.useMemo(
+    }, [itemKey]);
+  } else {
+    React6.useEffect(() => {
+      if (itemKey) {
+        const timeout = setTimeout(() => {
+          if (refLastSize.current) {
+            updateItemSize(itemKey, refLastSize.current);
+          }
+        }, 16);
+        return () => {
+          clearTimeout(timeout);
+        };
+      }
+    }, [itemKey]);
+  }
+  const contextValue = React6.useMemo(
     () => ({ containerId: id, itemKey, index, value: data }),
     [id, itemKey, index, data]
   );
-  const contentFragment = /* @__PURE__ */ React5__namespace.default.createElement(React5__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React5__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent));
+  const contentFragment = /* @__PURE__ */ React6__namespace.default.createElement(React6__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.has(itemKey) && /* @__PURE__ */ React6__namespace.default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
-    return /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style, ref }, /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style: anchorStyle, onLayout }, contentFragment));
+    if (ENABLE_DEVMODE) {
+      anchorStyle.borderColor = position.type === "top" ? "red" : "blue";
+      anchorStyle.borderWidth = 1;
+    }
+    return /* @__PURE__ */ React6__namespace.default.createElement(LeanView, { style }, /* @__PURE__ */ React6__namespace.default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment, ENABLE_DEVMODE && /* @__PURE__ */ React6__namespace.default.createElement(reactNative.Text, { style: { position: "absolute", top: 0, left: 0, zIndex: 1e3 } }, position.top)));
   }
-  return /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
+  return /* @__PURE__ */ React6__namespace.default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
-var useAnimatedValue = reactNative.useAnimatedValue || ((initialValue) => {
-  return React5.useRef(new reactNative.Animated.Value(initialValue)).current;
-});
-function useValue$(key, getValue, key2) {
+var typedForwardRef = React6.forwardRef;
+var typedMemo = React6.memo;
+var useAnimatedValue = (initialValue) => {
+  return React6.useRef(new reactNative.Animated.Value(initialValue)).current;
+};
+// src/useValue$.ts
+function useValue$(key, getValue, useMicrotask) {
   var _a;
   const ctx = useStateContext();
   const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
-  React5.useMemo(() => {
-    listen$(ctx, key, (v) => animValue.setValue(getValue ? getValue(v) : v));
+  React6.useMemo(() => {
+    let newValue = void 0;
+    listen$(ctx, key, (v) => {
+      if (useMicrotask && newValue === void 0) {
+        queueMicrotask(() => {
+          animValue.setValue(newValue);
+          newValue = void 0;
+        });
+      }
+      newValue = getValue ? getValue(v) : v;
+      if (!useMicrotask) {
+        animValue.setValue(newValue);
+      }
+    });
   }, []);
   return animValue;
 }
 // src/Containers.tsx
-var Containers = React5__namespace.memo(function Containers2({
+var Containers = typedMemo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -280,13 +377,21 @@ var Containers = React5__namespace.memo(function Containers2({
   updateItemSize,
   getRenderedItem
 }) {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
+  const numColumns = use$("numColumns");
   const numContainers = use$("numContainersPooled");
-  const animSize = useValue$("totalSize");
+  const animSize = useValue$(
+    "totalSizeWithScrollAdjust",
+    void 0,
+    /*useMicrotask*/
+    true
+  );
   const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React5__namespace.createElement(
+      /* @__PURE__ */ React6__namespace.createElement(
         Container,
         {
           id: i,
@@ -301,20 +406,78 @@ var Containers = React5__namespace.memo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
-  return /* @__PURE__ */ React5__namespace.createElement(reactNative.Animated.View, { style }, containers);
+  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    const mx = (columnGap || gap || 0) / 2;
+    if (mx) {
+      style.marginHorizontal = -mx;
+    }
+  }
+  return /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style }, containers);
 });
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React5__namespace.isValidElement(Component)) {
+  if (React6__namespace.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React5__namespace.createElement(Component, null);
+    return /* @__PURE__ */ React6__namespace.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React5__namespace.memo(function ListComponent2({
+var PaddingAndAdjust = () => {
+  const animPaddingTop = useValue$("paddingTop", (v) => v, true);
+  const animScrollAdjust = useValue$("scrollAdjust", (v) => v, true);
+  const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
+  return /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style: additionalSize });
+};
+var PaddingAndAdjustDevMode = () => {
+  const animPaddingTop = useValue$("paddingTop", (v) => v, true);
+  const animScrollAdjust = useValue$("scrollAdjust", (v) => v, true);
+  return /* @__PURE__ */ React6__namespace.createElement(React6__namespace.Fragment, null, /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style: { marginTop: animScrollAdjust } }), /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React6__namespace.createElement(
+    reactNative.Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: reactNative.Animated.add(animScrollAdjust, reactNative.Animated.multiply(animScrollAdjust, -1)),
+        height: animPaddingTop,
+        left: 0,
+        right: 0,
+        backgroundColor: "green"
+      }
+    }
+  ), /* @__PURE__ */ React6__namespace.createElement(
+    reactNative.Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: animPaddingTop,
+        height: animScrollAdjust,
+        left: -16,
+        right: -16,
+        backgroundColor: "lightblue"
+      }
+    }
+  ), /* @__PURE__ */ React6__namespace.createElement(
+    reactNative.Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: animPaddingTop,
+        height: reactNative.Animated.multiply(animScrollAdjust, -1),
+        width: 8,
+        right: 4,
+        borderStyle: "dashed",
+        borderColor: "blue",
+        borderWidth: 1,
+        backgroundColor: "lightblue"
+        //backgroundColor: "blue",
+      }
+    }
+  ));
+};
+var ListComponent = typedMemo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -330,28 +493,27 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
   ListFooterComponent,
   ListFooterComponentStyle,
   ListEmptyComponent,
-  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   refScrollView,
   maintainVisibleContentPosition,
   renderScrollComponent,
+  onRefresh,
+  refreshing,
+  progressViewOffset,
   ...rest
 }) {
   const ctx = useStateContext();
-  const animPaddingTop = useValue$("paddingTop");
-  const animScrollAdjust = useValue$("scrollAdjust");
-  const ScrollComponent = renderScrollComponent ? React5.useMemo(
-    () => React5__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+  const ScrollComponent = renderScrollComponent ? React6.useMemo(
+    () => React6__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
   ) : reactNative.ScrollView;
-  const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
-  return /* @__PURE__ */ React5__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     ScrollComponent,
     {
       ...rest,
       style,
-      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
+      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
       contentContainerStyle: [
         contentContainerStyle,
         horizontal ? {
@@ -364,34 +526,41 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScrollView
     },
-    /* @__PURE__ */ React5__namespace.createElement(reactNative.Animated.View, { style: additionalSize }),
-    ListHeaderComponent && /* @__PURE__ */ React5__namespace.createElement(
-      reactNative.Animated.View,
+    ENABLE_DEVMODE ? /* @__PURE__ */ React6__namespace.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6__namespace.createElement(PaddingAndAdjust, null),
+    ListHeaderComponent && /* @__PURE__ */ React6__namespace.createElement(
+      reactNative.View,
       {
         style: ListHeaderComponentStyle,
         onLayout: (event) => {
           const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
-          const prevSize = peek$(ctx, "headerSize") || 0;
-          if (size !== prevSize) {
-            set$(ctx, "headerSize", size);
-          }
+          set$(ctx, "headerSize", size);
         }
       },
       getComponent(ListHeaderComponent)
     ),
-    ListEmptyComponent && /* @__PURE__ */ React5__namespace.createElement(reactNative.Animated.View, { style: ListEmptyComponentStyle }, getComponent(ListEmptyComponent)),
-    /* @__PURE__ */ React5__namespace.createElement(
+    ListEmptyComponent && getComponent(ListEmptyComponent),
+    /* @__PURE__ */ React6__namespace.createElement(
       Containers,
       {
         horizontal,
         recycleItems,
         waitForInitialLayout,
         getRenderedItem,
-        ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
+        ItemSeparatorComponent,
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React5__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React6__namespace.createElement(
+      reactNative.View,
+      {
+        style: ListFooterComponentStyle,
+        onLayout: (event) => {
+          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+          set$(ctx, "footerSize", size);
+        }
+      },
+      getComponent(ListFooterComponent)
+    )
   );
 });
@@ -400,36 +569,63 @@ var ScrollAdjustHandler = class {
   constructor(ctx) {
     this.ctx = ctx;
     this.appliedAdjust = 0;
-    this.pendingAdjust = 0;
     this.busy = false;
-    this.firstAdjust = true;
+    this.isPaused = false;
+    this.isDisabled = false;
     this.context = ctx;
   }
+  doAjdust() {
+    set$(this.context, "scrollAdjust", this.appliedAdjust);
+    this.busy = false;
+  }
   requestAdjust(adjust, onAdjusted) {
+    if (this.isDisabled) {
+      return;
+    }
     const oldAdjustTop = peek$(this.context, "scrollAdjust");
     if (oldAdjustTop === adjust) {
       return;
     }
     this.appliedAdjust = adjust;
-    this.pendingAdjust = adjust;
-    const doAjdust = () => {
-      set$(this.context, "scrollAdjust", this.pendingAdjust);
-      onAdjusted(oldAdjustTop - this.pendingAdjust);
-      this.busy = false;
-    };
-    if (!this.busy) {
+    if (!this.busy && !this.isPaused) {
       this.busy = true;
-      if (this.firstAdjust) {
-        this.firstAdjust = false;
-        setTimeout(doAjdust, 50);
-      } else {
-        doAjdust();
-      }
+      this.doAjdust();
+      onAdjusted(oldAdjustTop - adjust);
     }
   }
   getAppliedAdjust() {
     return this.appliedAdjust;
   }
+  pauseAdjust() {
+    this.isPaused = true;
+  }
+  setDisableAdjust(disable) {
+    this.isDisabled = disable;
+  }
+  // return true if it was paused
+  unPauseAdjust() {
+    if (this.isPaused) {
+      this.isPaused = false;
+      this.doAjdust();
+      return true;
+    }
+    return false;
+  }
+};
+var useCombinedRef = (...refs) => {
+  const callback = React6.useCallback((element) => {
+    for (const ref of refs) {
+      if (!ref) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(element);
+      } else {
+        ref.current = element;
+      }
+    }
+  }, refs);
+  return callback;
 };
 // src/viewability.ts
@@ -528,11 +724,13 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   }
 }
 function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
-  const { sizes, positions, scroll } = state;
+  const { sizes, positions, scroll: scrollState, scrollAdjustHandler } = state;
   const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
   const viewAreaMode = viewAreaCoveragePercentThreshold != null;
   const viewablePercentThreshold = viewAreaMode ? viewAreaCoveragePercentThreshold : itemVisiblePercentThreshold;
+  const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
+  const scroll = scrollState - previousScrollAdjust - topPad;
   const top = positions.get(key) - scroll + topPad;
   const size = sizes.get(key) || 0;
   const bottom = top + size;
@@ -582,13 +780,13 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
 // src/LegendList.tsx
 var DEFAULT_DRAW_DISTANCE = 250;
 var DEFAULT_ITEM_SIZE = 100;
-var LegendList = React5.forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React5__namespace.createElement(StateProvider, null, /* @__PURE__ */ React5__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
+  return /* @__PURE__ */ React6__namespace.createElement(StateProvider, null, /* @__PURE__ */ React6__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
-var LegendListInner = React5.forwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b, _c, _d, _e;
+var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
+  var _a, _b, _c, _d;
   const {
-    data,
+    data: dataProp,
     initialScrollIndex,
     initialScrollOffset,
     horizontal,
@@ -601,52 +799,77 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     alignItemsAtEnd = false,
     maintainVisibleContentPosition = false,
     onScroll: onScrollProp,
+    onMomentumScrollEnd,
     numColumns: numColumnsProp = 1,
+    columnWrapperStyle,
     keyExtractor: keyExtractorProp,
     renderItem,
     estimatedItemSize,
     getEstimatedItemSize,
-    onEndReached,
-    onStartReached,
     ListEmptyComponent,
     onItemSizeChanged,
     scrollEventThrottle,
     refScrollView,
     waitForInitialLayout = true,
     extraData,
+    onLayout: onLayoutProp,
+    onRefresh,
+    refreshing,
+    progressViewOffset,
+    refreshControl,
+    initialContainerPoolRatio = 2,
+    viewabilityConfig,
+    viewabilityConfigCallbackPairs,
+    onViewableItemsChanged,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
+  const callbacks = React6.useRef({
+    onStartReached: rest.onStartReached,
+    onEndReached: rest.onEndReached
+  });
+  callbacks.current.onStartReached = rest.onStartReached;
+  callbacks.current.onEndReached = rest.onEndReached;
   const ctx = useStateContext();
-  const refScroller = React5.useRef(null);
-  const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
+  ctx.columnWrapperStyle = columnWrapperStyle;
+  const refScroller = React6.useRef(null);
+  const combinedRef = useCombinedRef(refScroller, refScrollView);
+  const scrollBuffer = (drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE) || 1;
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (item, index) => index.toString();
-  const refState = React5.useRef();
+  const refState = React6.useRef();
   const getId = (index) => {
     var _a2;
-    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
-    if (!data2) {
+    const data = (_a2 = refState.current) == null ? void 0 : _a2.data;
+    if (!data) {
       return "";
     }
-    const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
+    const ret = index < data.length ? keyExtractor ? keyExtractor(data[index], index) : index : null;
     return `${ret}`;
   };
-  const getItemSize = (key, index, data2) => {
+  const getItemSize = (key, index, data) => {
     var _a2;
     const sizeKnown = refState.current.sizes.get(key);
     if (sizeKnown !== void 0) {
       return sizeKnown;
     }
-    const size = (_a2 = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize) != null ? _a2 : DEFAULT_ITEM_SIZE;
+    const size = (_a2 = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize) != null ? _a2 : DEFAULT_ITEM_SIZE;
     refState.current.sizes.set(key, size);
     return size;
   };
-  const calculateInitialOffset = (index = initialScrollIndex) => {
+  const calculateOffsetForIndex = (index = initialScrollIndex) => {
+    const data = dataProp;
     if (index) {
       let offset = 0;
-      if (getEstimatedItemSize) {
+      const canGetSize = !!refState.current;
+      if (canGetSize || getEstimatedItemSize) {
+        const sizeFn = (index2) => {
+          if (canGetSize) {
+            return getItemSize(getId(index2), index2, data[index2]);
+          }
+          return getEstimatedItemSize(index2, data[index2]);
+        };
         for (let i = 0; i < index; i++) {
-          offset += getEstimatedItemSize(i, data[i]);
+          offset += sizeFn(i);
         }
       } else if (estimatedItemSize) {
         offset = index * estimatedItemSize;
@@ -655,7 +878,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     return 0;
   };
-  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React5.useMemo(calculateInitialOffset, []);
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React6.useMemo(calculateOffsetForIndex, []);
   if (!refState.current) {
     const initialScrollLength = reactNative.Dimensions.get("window")[horizontal ? "width" : "height"];
     refState.current = {
@@ -663,14 +886,11 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       positions: /* @__PURE__ */ new Map(),
       columns: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
-      waitingForMicrotask: false,
       isStartReached: initialContentOffset < initialScrollLength * onStartReachedThreshold,
       isEndReached: false,
       isAtBottom: false,
       isAtTop: false,
-      data,
-      idsInFirstRender: void 0,
-      hasScrolled: false,
+      data: dataProp,
       scrollLength: initialScrollLength,
       startBuffered: 0,
       startNoBuffer: 0,
@@ -696,17 +916,22 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       belowAnchorElementPositions: void 0,
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
+      endReachedBlockedByTimer: false,
       scrollForNextCalculateItemsInView: void 0,
-      enableScrollForNextCalculateItemsInView: true
+      enableScrollForNextCalculateItemsInView: true,
+      minIndexSizeChanged: 0,
+      numPendingInitialLayout: 0,
+      queuedCalculateItemsInView: 0,
+      lastBatchingAction: Date.now(),
+      onScroll: onScrollProp
     };
-    refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
         refState.current.anchorElement = {
           coordinate: initialContentOffset,
           id: getId(initialScrollIndex)
         };
-      } else if (data.length) {
+      } else if (dataProp.length) {
         refState.current.anchorElement = {
           coordinate: initialContentOffset,
           id: getId(0)
@@ -719,6 +944,9 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
     set$(ctx, "extraData", extraData);
   }
+  const didDataChange = refState.current.data !== dataProp;
+  refState.current.data = dataProp;
+  refState.current.onScroll = onScrollProp;
   const getAnchorElementIndex = () => {
     const state = refState.current;
     if (state.anchorElement) {
@@ -727,16 +955,16 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     return void 0;
   };
-  const addTotalSize = React5.useCallback((key, add, totalSizeBelowAnchor) => {
+  const addTotalSize = React6.useCallback((key, add, totalSizeBelowAnchor) => {
     const state = refState.current;
-    const index = key === null ? 0 : state.indexByKey.get(key);
+    const { indexByKey, anchorElement } = state;
+    const index = key === null ? 0 : indexByKey.get(key);
     let isAboveAnchor = false;
     if (maintainVisibleContentPosition) {
-      if (state.anchorElement && index < getAnchorElementIndex()) {
+      if (anchorElement && index < getAnchorElementIndex()) {
         isAboveAnchor = true;
       }
     }
-    state.totalSize;
     if (key === null) {
       state.totalSize = add;
       state.totalSizeBelowAnchor = totalSizeBelowAnchor;
@@ -746,29 +974,30 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         state.totalSizeBelowAnchor += add;
       }
     }
-    let applyAdjustValue = void 0;
-    if (maintainVisibleContentPosition) {
-      const newAdjust = state.anchorElement.coordinate - state.totalSizeBelowAnchor;
+    let applyAdjustValue = 0;
+    let resultSize = state.totalSize;
+    if (maintainVisibleContentPosition && anchorElement !== void 0) {
+      const newAdjust = anchorElement.coordinate - state.totalSizeBelowAnchor;
       applyAdjustValue = -newAdjust;
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
       state.rowHeights.clear();
+      if (applyAdjustValue !== void 0) {
+        resultSize -= applyAdjustValue;
+        refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
+          state.scroll -= diff;
+        });
+      }
     }
-    const totalSize = state.totalSize;
-    let resultSize = totalSize;
-    if (applyAdjustValue !== void 0) {
-      resultSize -= applyAdjustValue;
-      refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
-        state.scroll -= diff;
-      });
-    }
-    set$(ctx, "totalSize", resultSize);
+    set$(ctx, "totalSize", state.totalSize);
+    set$(ctx, "totalSizeWithScrollAdjust", resultSize);
     if (alignItemsAtEnd) {
       doUpdatePaddingTop();
     }
   }, []);
   const getRowHeight = (n) => {
-    const { rowHeights } = refState.current;
-    if (numColumnsProp === 1) {
+    const { rowHeights, data } = refState.current;
+    const numColumns = peek$(ctx, "numColumns");
+    if (numColumns === 1) {
       const id = getId(n);
       return getItemSize(id, n, data[n]);
     }
@@ -776,8 +1005,8 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       return rowHeights.get(n) || 0;
     }
     let rowHeight = 0;
-    const startEl = n * numColumnsProp;
-    for (let i = startEl; i < startEl + numColumnsProp && i < data.length; i++) {
+    const startEl = n * numColumns;
+    for (let i = startEl; i < startEl + numColumns && i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       rowHeight = Math.max(rowHeight, size);
@@ -796,10 +1025,11 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       return /* @__PURE__ */ new Map();
     }
     const map = state.belowAnchorElementPositions || /* @__PURE__ */ new Map();
+    const numColumns = peek$(ctx, "numColumns");
     for (let i = anchorIndex - 1; i >= 0; i--) {
       const id = getId(i);
-      const rowNumber = Math.floor(i / numColumnsProp);
-      if (i % numColumnsProp === 0) {
+      const rowNumber = Math.floor(i / numColumns);
+      if (i % numColumns === 0) {
         top -= getRowHeight(rowNumber);
       }
       map.set(id, top);
@@ -807,37 +1037,53 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     return map;
   };
   const getElementPositionBelowAchor = (id) => {
+    var _a2;
     const state = refState.current;
     if (!refState.current.belowAnchorElementPositions) {
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
     }
     const res = state.belowAnchorElementPositions.get(id);
     if (res === void 0) {
-      throw new Error("Undefined position below achor");
+      console.warn(`Undefined position below achor ${id} ${(_a2 = state.anchorElement) == null ? void 0 : _a2.id}`);
+      return 0;
     }
     return res;
   };
-  const calculateItemsInView = React5.useCallback((speed) => {
+  const calculateItemsInView = React6.useCallback(() => {
+    var _a2;
     const state = refState.current;
     const {
-      data: data2,
+      data,
       scrollLength,
       scroll: scrollState,
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler
+      scrollAdjustHandler,
+      scrollVelocity: speed
     } = state;
-    if (state.waitingForMicrotask) {
-      state.waitingForMicrotask = false;
-    }
-    if (!data2) {
+    if (!data || scrollLength === 0) {
       return;
     }
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+    const numColumns = peek$(ctx, "numColumns");
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
-    const scroll = scrollState - previousScrollAdjust - topPad - scrollExtra;
+    const scroll = scrollState - previousScrollAdjust - topPad;
+    if (ENABLE_DEBUG_VIEW) {
+      set$(ctx, "debugRawScroll", scrollState);
+      set$(ctx, "debugComputedScroll", scroll);
+    }
+    let scrollBufferTop = scrollBuffer;
+    let scrollBufferBottom = scrollBuffer;
+    if (scrollExtra > 8) {
+      scrollBufferTop = 0;
+      scrollBufferBottom = scrollBuffer + scrollExtra;
+    }
+    if (scrollExtra < -8) {
+      scrollBufferTop = scrollBuffer - scrollExtra;
+      scrollBufferBottom = 0;
+    }
     if (state.scrollForNextCalculateItemsInView) {
       const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
       if (scroll > top2 && scroll < bottom) {
@@ -850,8 +1096,11 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    const originalStartId = startBufferedIdOrig && state.indexByKey.get(startBufferedIdOrig);
-    let loopStart = originalStartId || 0;
+    let loopStart = startBufferedIdOrig ? state.indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    if (state.minIndexSizeChanged !== void 0) {
+      loopStart = Math.min(state.minIndexSizeChanged, loopStart);
+      state.minIndexSizeChanged = void 0;
+    }
     const anchorElementIndex = getAnchorElementIndex();
     for (let i = loopStart; i >= 0; i--) {
       const id = getId(i);
@@ -864,7 +1113,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       }
       const top2 = newPosition || positions.get(id);
       if (top2 !== void 0) {
-        const size = getItemSize(id, i, data2[i]);
+        const size = getItemSize(id, i, data[i]);
         const bottom = top2 + size;
         if (bottom > scroll - scrollBuffer) {
           loopStart = i;
@@ -873,7 +1122,6 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         }
       }
     }
-    const numColumns = peek$(ctx, "numColumns");
     const loopStartMod = loopStart % numColumns;
     if (loopStartMod > 0) {
       loopStart -= loopStartMod;
@@ -882,22 +1130,22 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     let column = 1;
     let maxSizeInRow = 0;
     const getInitialTop = (i) => {
-      var _a2;
+      var _a3;
       const id = getId(i);
       let topOffset = 0;
       if (positions.get(id)) {
         topOffset = positions.get(id);
       }
-      if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
-        topOffset = initialContentOffset || 0;
+      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+        topOffset = state.anchorElement.coordinate;
       }
       return topOffset;
     };
-    for (let i = loopStart; i < data2.length; i++) {
+    for (let i = loopStart; i < data.length; i++) {
       const id = getId(i);
-      const size = getItemSize(id, i, data2[i]);
+      const size = getItemSize(id, i, data[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
-      if (top === void 0) {
+      if (top === void 0 || id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
         top = getInitialTop(i);
       }
       if (positions.get(id) !== top) {
@@ -909,7 +1157,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       if (startNoBuffer === null && top + size > scroll) {
         startNoBuffer = i;
       }
-      if (startBuffered === null && top + size > scroll - scrollBuffer) {
+      if (startBuffered === null && top + size > scroll - scrollBufferTop) {
         startBuffered = i;
         startBufferedId = id;
       }
@@ -917,7 +1165,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         if (top <= scrollBottom) {
           endNoBuffer = i;
         }
-        if (top <= scrollBottom + scrollBuffer) {
+        if (top <= scrollBottom + scrollBufferBottom) {
           endBuffered = i;
         } else {
           break;
@@ -950,6 +1198,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     if (startBuffered !== null && endBuffered !== null) {
       const prevNumContainers = ctx.values.get("numContainers");
       let numContainers = prevNumContainers;
+      let didWarnMoreContainers = false;
       for (let i = startBuffered; i <= endBuffered; i++) {
         let isContained = false;
         const id = getId(i);
@@ -983,18 +1232,19 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
           if (furthestIndex >= 0) {
             set$(ctx, `containerItemKey${furthestIndex}`, id);
             const index = state.indexByKey.get(id);
-            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
+            set$(ctx, `containerItemData${furthestIndex}`, data[index]);
           } else {
             const containerId = numContainers;
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
             const index = state.indexByKey.get(id);
-            set$(ctx, `containerItemData${containerId}`, data2[index]);
+            set$(ctx, `containerItemData${containerId}`, data[index]);
             set$(ctx, `containerPosition${containerId}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
-            if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
+            if (__DEV__ && !didWarnMoreContainers && numContainers > peek$(ctx, "numContainersPooled")) {
+              didWarnMoreContainers = true;
               console.warn(
-                "[legend-list] No container to recycle, so creating one on demand. This can be a performance issue and is likely caused by the estimatedItemSize being too small. Consider increasing estimatedItemSize. numContainers:",
+                "[legend-list] No container to recycle, 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. numContainers:",
                 numContainers
               );
             }
@@ -1004,19 +1254,19 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       if (numContainers !== prevNumContainers) {
         set$(ctx, "numContainers", numContainers);
         if (numContainers > peek$(ctx, "numContainersPooled")) {
-          set$(ctx, "numContainersPooled", numContainers);
+          set$(ctx, "numContainersPooled", Math.ceil(numContainers * 1.5));
         }
       }
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
         const itemIndex = state.indexByKey.get(itemKey);
-        const item = data2[itemIndex];
-        if (item) {
+        const item = data[itemIndex];
+        if (item !== void 0) {
           const id = getId(itemIndex);
           if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
             const prevPos = peek$(ctx, `containerPosition${i}`).top;
             const pos = positions.get(id) || 0;
-            const size = getItemSize(id, itemIndex, data2[i]);
+            const size = getItemSize(id, itemIndex, data[i]);
             if (pos + size >= scroll && pos <= scrollBottom || prevPos + size >= scroll && prevPos <= scrollBottom) {
               set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
             }
@@ -1028,9 +1278,9 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
             };
             const column2 = columns.get(id) || 1;
             if (maintainVisibleContentPosition && itemIndex < anchorElementIndex) {
-              const currentRow = Math.floor(itemIndex / numColumnsProp);
+              const currentRow = Math.floor(itemIndex / numColumns);
               const rowHeight = getRowHeight(currentRow);
-              const elementHeight = getItemSize(id, itemIndex, data2[i]);
+              const elementHeight = getItemSize(id, itemIndex, data[i]);
               const diff = rowHeight - elementHeight;
               pos.relativeCoordinate = pos.top + getRowHeight(currentRow) - diff;
               pos.type = "bottom";
@@ -1045,13 +1295,15 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
               set$(ctx, `containerColumn${i}`, column2);
             }
             if (prevData !== item) {
-              set$(ctx, `containerItemData${i}`, data2[itemIndex]);
+              set$(ctx, `containerItemData${i}`, data[itemIndex]);
             }
           }
         }
       }
     }
-    set$(ctx, "containersDidLayout", true);
+    if (state.numPendingInitialLayout === 0) {
+      state.numPendingInitialLayout = state.endBuffered - state.startBuffered + 1;
+    }
     if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
         state,
@@ -1066,16 +1318,27 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
   }, []);
   const doUpdatePaddingTop = () => {
     if (alignItemsAtEnd) {
-      const { scrollLength, totalSize } = refState.current;
-      const listPaddingTop = peek$(ctx, "stylePaddingTop") || 0;
-      const paddingTop = Math.max(0, Math.floor(scrollLength - totalSize - listPaddingTop));
+      const { scrollLength } = refState.current;
+      const contentSize = getContentSize(ctx);
+      const paddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
       set$(ctx, "paddingTop", paddingTop);
     }
   };
+  const scrollTo = (offset, animated) => {
+    var _a2;
+    (_a2 = refScroller.current) == null ? void 0 : _a2.scrollTo({
+      x: horizontal ? offset : 0,
+      y: horizontal ? 0 : offset,
+      animated: !!animated
+    });
+  };
   const doMaintainScrollAtEnd = (animated) => {
     const state = refState.current;
     if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd) {
-      state.scroll = state.totalSize - state.scrollLength + peek$(ctx, "paddingTop");
+      const paddingTop = peek$(ctx, "paddingTop") || 0;
+      if (paddingTop > 0) {
+        state.scroll = 0;
+      }
       requestAnimationFrame(() => {
         var _a2;
         (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
@@ -1085,28 +1348,48 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       return true;
     }
   };
+  const checkThreshold = (distance, threshold, isReached, isBlockedByTimer, onReached, blockTimer) => {
+    const distanceAbs = Math.abs(distance);
+    const isAtThreshold = distanceAbs < threshold;
+    if (!isReached && !isBlockedByTimer) {
+      if (isAtThreshold) {
+        onReached == null ? void 0 : onReached(distance);
+        blockTimer == null ? void 0 : blockTimer(true);
+        setTimeout(() => {
+          blockTimer == null ? void 0 : blockTimer(false);
+        }, 700);
+        return true;
+      }
+    } else {
+      if (distance >= 1.3 * threshold) {
+        return false;
+      }
+    }
+    return isReached;
+  };
   const checkAtBottom = () => {
     if (!refState.current) {
       return;
     }
-    const { scrollLength, scroll, totalSize } = refState.current;
-    if (totalSize > 0) {
-      const distanceFromEnd = totalSize - scroll - scrollLength;
-      if (refState.current) {
-        refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
-      }
-      if (onEndReached) {
-        if (!refState.current.isEndReached) {
-          if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
-            refState.current.isEndReached = true;
-            onEndReached({ distanceFromEnd });
-          }
-        } else {
-          if (distanceFromEnd >= onEndReachedThreshold * scrollLength) {
-            refState.current.isEndReached = false;
-          }
+    const { scrollLength, scroll, hasScrolled } = refState.current;
+    const contentSize = getContentSize(ctx);
+    if (contentSize > 0 && hasScrolled) {
+      const distanceFromEnd = contentSize - scroll - scrollLength;
+      const distanceFromEndAbs = Math.abs(distanceFromEnd);
+      refState.current.isAtBottom = distanceFromEndAbs < scrollLength * maintainScrollAtEndThreshold;
+      refState.current.isEndReached = checkThreshold(
+        distanceFromEnd,
+        onEndReachedThreshold * scrollLength,
+        refState.current.isEndReached,
+        refState.current.endReachedBlockedByTimer,
+        (distance) => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = callbacks.current).onEndReached) == null ? void 0 : _b2.call(_a2, { distanceFromEnd: distance });
+        },
+        (block) => {
+          refState.current.endReachedBlockedByTimer = block;
         }
-      }
+      );
     }
   };
   const checkAtTop = () => {
@@ -1115,112 +1398,118 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     const { scrollLength, scroll } = refState.current;
     const distanceFromTop = scroll;
-    refState.current.isAtTop = distanceFromTop < 0;
-    if (onStartReached) {
-      if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
-        if (distanceFromTop < onStartReachedThreshold * scrollLength) {
-          refState.current.isStartReached = true;
-          onStartReached({ distanceFromStart: scroll });
-          refState.current.startReachedBlockedByTimer = true;
-          setTimeout(() => {
-            refState.current.startReachedBlockedByTimer = false;
-          }, 700);
-        }
-      } else {
-        if (distanceFromTop >= 1.3 * onStartReachedThreshold * scrollLength) {
-          refState.current.isStartReached = false;
-        }
+    const distanceFromTopAbs = Math.abs(distanceFromTop);
+    refState.current.isAtTop = distanceFromTopAbs < 0;
+    refState.current.isStartReached = checkThreshold(
+      distanceFromTop,
+      onStartReachedThreshold * scrollLength,
+      refState.current.isStartReached,
+      refState.current.startReachedBlockedByTimer,
+      (distance) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = callbacks.current).onStartReached) == null ? void 0 : _b2.call(_a2, { distanceFromStart: distance });
+      },
+      (block) => {
+        refState.current.startReachedBlockedByTimer = block;
       }
-    }
+    );
   };
-  const checkResetContainers = (reset) => {
+  const checkResetContainers = (isFirst2) => {
     const state = refState.current;
     if (state) {
-      state.data = data;
-      if (reset) {
+      state.data = dataProp;
+      if (!isFirst2) {
         refState.current.scrollForNextCalculateItemsInView = void 0;
         const numContainers = peek$(ctx, "numContainers");
         for (let i = 0; i < numContainers; i++) {
           const itemKey = peek$(ctx, `containerItemKey${i}`);
           if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
             set$(ctx, `containerItemKey${i}`, void 0);
+            set$(ctx, `containerItemData${i}`, void 0);
             set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${i}`, -1);
           }
         }
         if (!keyExtractorProp) {
-          state.sizes.clear();
           state.positions.clear();
         }
-        calculateItemsInView(state.scrollVelocity);
-      }
-      const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
-      if (!didMaintainScrollAtEnd && data.length > state.data.length) {
-        state.isEndReached = false;
+        calculateItemsInView();
+        const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
+        if (!didMaintainScrollAtEnd && dataProp.length > state.data.length) {
+          state.isEndReached = false;
+        }
+        checkAtTop();
+        checkAtBottom();
       }
-      checkAtTop();
-      checkAtBottom();
     }
   };
-  const isFirst = !refState.current.renderItem;
-  if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
-    if (!keyExtractorProp && !isFirst && data !== refState.current.data) {
-      refState.current.sizes.clear();
-      refState.current.positions.clear();
-    }
-    refState.current.data = data;
+  const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
+    var _a2, _b2;
     let totalSize = 0;
     let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
     const newPositions = /* @__PURE__ */ new Map();
     let column = 1;
     let maxSizeInRow = 0;
-    for (let i = 0; i < data.length; i++) {
+    const numColumns = (_a2 = peek$(ctx, "numColumns")) != null ? _a2 : numColumnsProp;
+    if (!refState.current) {
+      return;
+    }
+    for (let i = 0; i < dataProp.length; i++) {
       const key = getId(i);
+      if (__DEV__) {
+        if (indexByKey.has(key)) {
+          console.error(
+            `[legend-list] Error: Detected overlapping key (${key}) which causes missing items and gaps and other terrrible things. Check that keyExtractor returns unique values.`
+          );
+        }
+      }
       indexByKey.set(key, i);
-      if (refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
+      if (!forgetPositions && refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
         newPositions.set(key, refState.current.positions.get(key));
       }
     }
     refState.current.indexByKey = indexByKey;
     refState.current.positions = newPositions;
-    if (maintainVisibleContentPosition) {
-      if (refState.current.anchorElement == null || indexByKey.get(refState.current.anchorElement.id) == null) {
-        if (data.length) {
-          const newAnchorElement = {
-            coordinate: 0,
-            id: getId(0)
-          };
-          refState.current.anchorElement = newAnchorElement;
-          (_a = refState.current.belowAnchorElementPositions) == null ? void 0 : _a.clear();
-          refScroller.current.scrollTo({ x: 0, y: 0, animated: false });
+    if (!forgetPositions && !isFirst) {
+      if (maintainVisibleContentPosition) {
+        if (refState.current.anchorElement == null || indexByKey.get(refState.current.anchorElement.id) == null) {
+          if (dataProp.length) {
+            const newAnchorElement = {
+              coordinate: 0,
+              id: getId(0)
+            };
+            refState.current.anchorElement = newAnchorElement;
+            (_b2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _b2.clear();
+            scrollTo(0, false);
+            setTimeout(() => {
+              calculateItemsInView();
+            }, 0);
+          } else {
+            refState.current.startBufferedId = void 0;
+          }
+        }
+      } else {
+        if (refState.current.startBufferedId != null && newPositions.get(refState.current.startBufferedId) == null) {
+          if (dataProp.length) {
+            refState.current.startBufferedId = getId(0);
+          } else {
+            refState.current.startBufferedId = void 0;
+          }
+          scrollTo(0, false);
           setTimeout(() => {
-            calculateItemsInView(0);
+            calculateItemsInView();
           }, 0);
-        } else {
-          refState.current.startBufferedId = void 0;
-        }
-      }
-    } else {
-      if (refState.current.startBufferedId != null && newPositions.get(refState.current.startBufferedId) == null) {
-        if (data.length) {
-          refState.current.startBufferedId = getId(0);
-        } else {
-          refState.current.startBufferedId = void 0;
         }
-        refScroller.current.scrollTo({ x: 0, y: 0, animated: false });
-        setTimeout(() => {
-          calculateItemsInView(0);
-        }, 0);
       }
     }
     const anchorElementIndex = getAnchorElementIndex();
-    for (let i = 0; i < data.length; i++) {
+    for (let i = 0; i < dataProp.length; i++) {
       const key = getId(i);
-      const size = getItemSize(key, i, data[i]);
+      const size = getItemSize(key, i, dataProp[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
       column++;
-      if (column > numColumnsProp) {
+      if (column > numColumns) {
         if (maintainVisibleContentPosition && anchorElementIndex !== void 0 && i < anchorElementIndex) {
           totalSizeBelowIndex += maxSizeInRow;
         }
@@ -1232,36 +1521,58 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     if (maxSizeInRow > 0) {
       totalSize += maxSizeInRow;
     }
+    const state = refState.current;
+    state.ignoreScrollFromCalcTotal = true;
+    requestAnimationFrame(() => {
+      state.ignoreScrollFromCalcTotal = false;
+    });
     addTotalSize(null, totalSize, totalSizeBelowIndex);
-  }
-  React5.useEffect(() => {
-    checkResetContainers(
-      /*reset*/
-      !isFirst
+  };
+  const isFirst = !refState.current.renderItem;
+  const memoizedLastItemKeys = React6.useMemo(() => {
+    if (!dataProp.length) return /* @__PURE__ */ new Set();
+    return new Set(
+      Array.from({ length: Math.min(numColumnsProp, dataProp.length) }, (_, i) => getId(dataProp.length - 1 - i))
     );
-  }, [isFirst, data, numColumnsProp]);
-  React5.useEffect(() => {
-    set$(ctx, "extraData", extraData);
-  }, [extraData]);
-  refState.current.renderItem = renderItem;
-  const lastItemKey = getId(data[data.length - 1]);
-  const stylePaddingTop = (_e = (_d = (_b = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _b.paddingTop) != null ? _d : (_c = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _c.paddingTop) != null ? _e : 0;
+  }, [dataProp.length, numColumnsProp, dataProp.slice(-numColumnsProp).toString()]);
   const initalizeStateVars = () => {
-    set$(ctx, "lastItemKey", lastItemKey);
+    set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
     set$(ctx, "stylePaddingTop", stylePaddingTop);
   };
   if (isFirst) {
     initalizeStateVars();
   }
-  React5.useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
-  const getRenderedItem = React5.useCallback((key) => {
+  if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
+    refState.current.lastBatchingAction = Date.now();
+    if (!keyExtractorProp && !isFirst && didDataChange) {
+      refState.current.sizes.clear();
+      refState.current.positions.clear();
+    }
+    calcTotalSizesAndPositions({ forgetPositions: false });
+  }
+  React6.useEffect(() => {
+    const didAllocateContainers = doInitialAllocateContainers();
+    if (!didAllocateContainers) {
+      checkResetContainers(
+        /*isFirst*/
+        isFirst
+      );
+    }
+  }, [isFirst, dataProp, numColumnsProp]);
+  React6.useEffect(() => {
+    set$(ctx, "extraData", extraData);
+  }, [extraData]);
+  refState.current.renderItem = renderItem;
+  const stylePaddingTop = (_d = (_c = (_a = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _b.paddingTop) != null ? _d : 0;
+  React6.useEffect(initalizeStateVars, [memoizedLastItemKeys, numColumnsProp, stylePaddingTop]);
+  const getRenderedItem = React6.useCallback((key) => {
     var _a2, _b2;
     const state = refState.current;
     if (!state) {
       return null;
     }
-    const { data: data2, indexByKey } = state;
+    const { data, indexByKey } = state;
     const index = indexByKey.get(key);
     if (index === void 0) {
       return null;
@@ -1279,58 +1590,82 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       return useRecyclingState(valueOrFun);
     };
     const renderedItem = (_b2 = (_a2 = refState.current).renderItem) == null ? void 0 : _b2.call(_a2, {
-      item: data2[index],
+      item: data[index],
       index,
+      extraData: peek$(ctx, "extraData"),
       useViewability: useViewability2,
       useViewabilityAmount: useViewabilityAmount2,
       useRecyclingEffect: useRecyclingEffect2,
       useRecyclingState: useRecyclingState2
     });
-    return { index, renderedItem };
+    return { index, item: data[index], renderedItem };
   }, []);
-  useInit(() => {
+  const doInitialAllocateContainers = () => {
     var _a2;
     const state = refState.current;
-    const viewability = setupViewability(props);
+    const { scrollLength, data } = state;
+    if (scrollLength > 0 && data.length > 0 && !peek$(ctx, "numContainers")) {
+      const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
+      const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
+      for (let i = 0; i < numContainers; i++) {
+        set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
+        set$(ctx, `containerColumn${i}`, -1);
+      }
+      set$(ctx, "numContainers", numContainers);
+      set$(ctx, "numContainersPooled", numContainers * initialContainerPoolRatio);
+      if (initialScrollIndex) {
+        requestAnimationFrame(() => {
+          calculateItemsInView();
+        });
+      } else {
+        calculateItemsInView();
+      }
+      return true;
+    }
+  };
+  React6.useEffect(() => {
+    const state = refState.current;
+    const viewability = setupViewability({
+      viewabilityConfig,
+      viewabilityConfigCallbackPairs,
+      onViewableItemsChanged
+    });
     state.viewabilityConfigCallbackPairs = viewability;
     state.enableScrollForNextCalculateItemsInView = !viewability;
-    const scrollLength = state.scrollLength;
-    const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
-    for (let i = 0; i < numContainers; i++) {
-      set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
-      set$(ctx, `containerColumn${i}`, -1);
-    }
-    set$(ctx, "numContainers", numContainers);
-    set$(ctx, "numContainersPooled", numContainers * 2);
-    calculateItemsInView(state.scrollVelocity);
+  }, [viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged]);
+  useInit(() => {
+    doInitialAllocateContainers();
   });
-  const updateItemSize = React5.useCallback((containerId, itemKey, size) => {
-    var _a2;
-    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
-    if (!data2) {
+  const updateItemSize = React6.useCallback((itemKey, size) => {
+    const state = refState.current;
+    const { sizes, indexByKey, sizesLaidOut, data, rowHeights } = state;
+    if (!data) {
       return;
     }
-    const state = refState.current;
-    const { sizes, indexByKey, columns, sizesLaidOut } = state;
     const index = indexByKey.get(itemKey);
     const numColumns = peek$(ctx, "numColumns");
-    const row = Math.floor(index / numColumns);
-    const prevSize = getRowHeight(row);
+    state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
+    const prevSize = getItemSize(itemKey, index, data);
+    let needsCalculate = false;
+    let needsUpdateContainersDidLayout = false;
+    if (state.numPendingInitialLayout > 0) {
+      state.numPendingInitialLayout--;
+      if (state.numPendingInitialLayout === 0) {
+        needsCalculate = true;
+        state.numPendingInitialLayout = -1;
+        needsUpdateContainersDidLayout = true;
+      }
+    }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
+      needsCalculate = true;
       if (numColumns > 1) {
-        const prevMaxSizeInRow = getRowHeight(row);
+        const rowNumber = Math.floor(index / numColumnsProp);
+        const prevSizeInRow = getRowHeight(rowNumber);
         sizes.set(itemKey, size);
-        const column = columns.get(itemKey);
-        const loopStart = index - (column - 1);
-        let nextMaxSizeInRow = 0;
-        for (let i = loopStart; i < loopStart + numColumns && i < data2.length; i++) {
-          const id = getId(i);
-          const size2 = getItemSize(id, i, data2[i]);
-          nextMaxSizeInRow = Math.max(nextMaxSizeInRow, size2);
-        }
-        diff = nextMaxSizeInRow - prevMaxSizeInRow;
+        rowHeights.delete(rowNumber);
+        const sizeInRow = getRowHeight(rowNumber);
+        diff = sizeInRow - prevSizeInRow;
       } else {
         sizes.set(itemKey, size);
         diff = size - prevSize;
@@ -1356,38 +1691,77 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       }
       refState.current.scrollForNextCalculateItemsInView = void 0;
       addTotalSize(itemKey, diff, 0);
-      doMaintainScrollAtEnd(true);
+      doMaintainScrollAtEnd(false);
+      if (onItemSizeChanged) {
+        onItemSizeChanged({
+          size,
+          previous: prevSize,
+          index,
+          itemKey,
+          itemData: data[index]
+        });
+      }
+    }
+    if (needsCalculate) {
+      let fixingScroll = false;
+      if (needsUpdateContainersDidLayout && initialScrollIndex && !state.didInitialScroll) {
+        const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
+        state.didInitialScroll = true;
+        if (updatedOffset !== initialContentOffset) {
+          fixingScroll = true;
+          scrollTo(updatedOffset, false);
+          requestAnimationFrame(() => {
+            const updatedOffset2 = calculateOffsetForIndex(initialScrollIndex);
+            scrollTo(updatedOffset2, false);
+          });
+        }
+      }
       const scrollVelocity = state.scrollVelocity;
-      if (!state.waitingForMicrotask && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
-        if (!peek$(ctx, "containersDidLayout")) {
-          state.waitingForMicrotask = true;
-          queueMicrotask(() => {
-            if (state.waitingForMicrotask) {
-              state.waitingForMicrotask = false;
-              calculateItemsInView(state.scrollVelocity);
+      if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
+        const setDidLayout = () => {
+          set$(ctx, "containersDidLayout", true);
+          if (reactNative.Platform.OS === "web") {
+            setTimeout(() => {
+              state.scrollAdjustHandler.setDisableAdjust(false);
+            }, 32);
+          }
+        };
+        if (Date.now() - state.lastBatchingAction < 500) {
+          state.queuedCalculateItemsInView = requestAnimationFrame(() => {
+            state.queuedCalculateItemsInView = void 0;
+            calculateItemsInView();
+            if (needsUpdateContainersDidLayout) {
+              setDidLayout();
             }
           });
         } else {
-          calculateItemsInView(state.scrollVelocity);
+          calculateItemsInView();
+          if (needsUpdateContainersDidLayout) {
+            if (fixingScroll) {
+              requestAnimationFrame(setDidLayout);
+            } else {
+              queueMicrotask(setDidLayout);
+            }
+          }
         }
       }
-      if (onItemSizeChanged) {
-        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data2[index] });
-      }
     }
   }, []);
-  const handleScrollDebounced = React5.useCallback((velocity) => {
-    calculateItemsInView(velocity);
-    checkAtBottom();
-    checkAtTop();
-  }, []);
-  const onLayout = React5.useCallback((event) => {
+  const onLayout = React6.useCallback((event) => {
+    const state = refState.current;
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
-    refState.current.scrollLength = scrollLength;
+    const didChange = scrollLength !== state.scrollLength;
+    state.scrollLength = scrollLength;
+    state.lastBatchingAction = Date.now();
+    state.scrollForNextCalculateItemsInView = void 0;
+    doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
     doUpdatePaddingTop();
     checkAtBottom();
     checkAtTop();
+    if (didChange) {
+      calculateItemsInView();
+    }
     if (__DEV__) {
       const isWidthZero = event.nativeEvent.layout.width === 0;
       const isHeightZero = event.nativeEvent.layout.height === 0;
@@ -1397,17 +1771,24 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         );
       }
     }
+    if (onLayoutProp) {
+      onLayoutProp(event);
+    }
   }, []);
-  const handleScroll = React5.useCallback(
+  const handleScroll = React6.useCallback(
     (event, fromSelf) => {
-      var _a2, _b2, _c2;
+      var _a2, _b2, _c2, _d2;
       if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c2 = event.nativeEvent.contentSize) == null ? void 0 : _c2.width) === 0) {
         return;
       }
       const state = refState.current;
+      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+      if (state.ignoreScrollFromCalcTotal && newScroll !== 0) {
+        return;
+      }
       state.hasScrolled = true;
+      state.lastBatchingAction = Date.now();
       const currentTime = performance.now();
-      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
       if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
         state.scrollHistory.push({ scroll: newScroll, time: currentTime });
       }
@@ -1433,71 +1814,173 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       state.scroll = newScroll;
       state.scrollTime = currentTime;
       state.scrollVelocity = velocity;
-      handleScrollDebounced(velocity);
+      calculateItemsInView();
+      checkAtBottom();
+      checkAtTop();
       if (!fromSelf) {
-        onScrollProp == null ? void 0 : onScrollProp(event);
+        (_d2 = state.onScroll) == null ? void 0 : _d2.call(state, event);
       }
     },
     []
   );
-  React5.useImperativeHandle(
+  React6.useImperativeHandle(
     forwardedRef,
     () => {
-      const scrollToIndex = ({ index, animated }) => {
-        const offsetObj = calculateInitialOffset(index);
-        const offset = horizontal ? { x: offsetObj, y: 0 } : { x: 0, y: offsetObj };
-        refScroller.current.scrollTo({ ...offset, animated });
+      const scrollToIndex = ({
+        index,
+        viewOffset = 0,
+        animated = true,
+        viewPosition = 0
+      }) => {
+        var _a2;
+        const state = refState.current;
+        const firstIndexOffset = calculateOffsetForIndex(index);
+        let firstIndexScrollPostion = firstIndexOffset - viewOffset;
+        const diff = Math.abs(state.scroll - firstIndexScrollPostion);
+        const needsReanchoring = maintainVisibleContentPosition && diff > 100;
+        state.scrollForNextCalculateItemsInView = void 0;
+        if (needsReanchoring) {
+          const id = getId(index);
+          state.anchorElement = { id, coordinate: firstIndexOffset };
+          (_a2 = state.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
+          state.positions.clear();
+          calcTotalSizesAndPositions({ forgetPositions: true });
+          state.startBufferedId = id;
+          state.minIndexSizeChanged = index;
+          firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
+        }
+        state.scrollAdjustHandler.setDisableAdjust(true);
+        setTimeout(
+          () => {
+            state.scrollAdjustHandler.setDisableAdjust(false);
+            calculateItemsInView();
+          },
+          animated ? 150 : 50
+        );
+        if (viewPosition) {
+          firstIndexScrollPostion -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
+        }
+        scrollTo(firstIndexScrollPostion, animated);
+        const totalSizeWithScrollAdjust = peek$(ctx, "totalSizeWithScrollAdjust");
+        if (maintainVisibleContentPosition && totalSizeWithScrollAdjust - firstIndexScrollPostion < state.scrollLength) {
+          const doScrollTo = () => {
+            scrollTo(firstIndexScrollPostion, animated);
+          };
+          setTimeout(doScrollTo, animated ? 150 : 50);
+          if (animated) {
+            setTimeout(doScrollTo, 350);
+          }
+        }
+      };
+      const scrollIndexIntoView = (options) => {
+        if (refState.current) {
+          const { index, ...rest2 } = options;
+          const { startNoBuffer, endNoBuffer } = refState.current;
+          if (index < startNoBuffer || index > endNoBuffer) {
+            const viewPosition = index < startNoBuffer ? 0 : 1;
+            scrollToIndex({
+              ...rest2,
+              viewPosition,
+              index
+            });
+          }
+        }
       };
       return {
+        flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
         getNativeScrollRef: () => refScroller.current,
-        getScrollableNode: refScroller.current.getScrollableNode,
-        getScrollResponder: refScroller.current.getScrollResponder,
-        flashScrollIndicators: refScroller.current.flashScrollIndicators,
-        scrollToIndex,
-        scrollToOffset: ({ offset, animated }) => {
-          const offsetObj = horizontal ? { x: offset, y: 0 } : { x: 0, y: offset };
-          refScroller.current.scrollTo({ ...offsetObj, animated });
+        getScrollableNode: () => refScroller.current.getScrollableNode(),
+        getScrollResponder: () => refScroller.current.getScrollResponder(),
+        getState: () => {
+          const state = refState.current;
+          return state ? {
+            contentLength: state.totalSize,
+            end: state.endNoBuffer,
+            endBuffered: state.endBuffered,
+            isAtEnd: state.isAtBottom,
+            isAtStart: state.isAtTop,
+            scroll: state.scroll,
+            scrollLength: state.scrollLength,
+            start: state.startNoBuffer,
+            startBuffered: state.startBuffered
+          } : {};
+        },
+        scrollIndexIntoView,
+        scrollItemIntoView: ({ item, ...props2 }) => {
+          const { data } = refState.current;
+          const index = data.indexOf(item);
+          if (index !== -1) {
+            scrollIndexIntoView({ index, ...props2 });
+          }
         },
-        scrollToItem: ({ item, animated }) => {
+        scrollToIndex,
+        scrollToItem: ({ item, ...props2 }) => {
+          const { data } = refState.current;
           const index = data.indexOf(item);
           if (index !== -1) {
-            scrollToIndex({ index, animated });
+            scrollToIndex({ index, ...props2 });
           }
         },
-        scrollToEnd: refScroller.current.scrollToEnd
+        scrollToOffset: ({ offset, animated }) => {
+          scrollTo(offset, animated);
+        },
+        scrollToEnd: (options) => refScroller.current.scrollToEnd(options)
       };
     },
     []
   );
-  return /* @__PURE__ */ React5__namespace.createElement(
+  if (reactNative.Platform.OS === "web") {
+    React6.useEffect(() => {
+      var _a2;
+      if (initialContentOffset) {
+        (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(true);
+        scrollTo(initialContentOffset, false);
+        setTimeout(() => {
+          var _a3;
+          (_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler.setDisableAdjust(false);
+        }, 0);
+      }
+    }, []);
+  }
+  return /* @__PURE__ */ React6__namespace.createElement(React6__namespace.Fragment, null, /* @__PURE__ */ React6__namespace.createElement(
     ListComponent,
     {
       ...rest,
       horizontal,
-      refScrollView: (r) => {
-        refScroller.current = r;
-        if (refScrollView) {
-          if (typeof refScrollView === "function") {
-            refScrollView(r);
-          } else {
-            refScrollView.current = r;
-          }
-        }
-      },
+      refScrollView: combinedRef,
       initialContentOffset,
       getRenderedItem,
       updateItemSize,
       handleScroll,
+      onMomentumScrollEnd: (event) => {
+        const wasPaused = refState.current.scrollAdjustHandler.unPauseAdjust();
+        if (wasPaused) {
+          refState.current.scrollVelocity = 0;
+          refState.current.scrollHistory = [];
+          calculateItemsInView();
+        }
+        if (onMomentumScrollEnd) {
+          onMomentumScrollEnd(event);
+        }
+      },
       onLayout,
       recycleItems,
       alignItemsAtEnd,
-      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
+      ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
       maintainVisibleContentPosition,
       scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : reactNative.Platform.OS === "web" ? 16 : void 0,
       waitForInitialLayout,
+      refreshControl: refreshControl != null ? refreshControl : onRefresh && /* @__PURE__ */ React6__namespace.createElement(
+        reactNative.RefreshControl,
+        {
+          refreshing: !!refreshing,
+          onRefresh,
+          progressViewOffset
+        }
+      ),
       style
     }
-  );
+  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React6__namespace.createElement(DebugView, { state: refState.current }));
 });
 exports.LegendList = LegendList;