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

package/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React4 = require('react');
+var React5 = require('react');
 var reactNative = require('react-native');
 
 function _interopNamespace(e) {
@@ -21,12 +21,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 
 // src/LegendList.tsx
-var ContextState = React4__namespace.createContext(null);
+var ContextState = React5__namespace.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React4__namespace.useState(() => ({
+  const [value] = React5__namespace.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map(),
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
@@ -34,10 +34,10 @@ function StateProvider({ children }) {
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityAmountValues: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React4__namespace.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React5__namespace.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React4__namespace.useContext(ContextState);
+  return React5__namespace.useContext(ContextState);
 }
 function createSelectorFunctions(ctx, signalName) {
   return {
@@ -46,9 +46,9 @@ function createSelectorFunctions(ctx, signalName) {
   };
 }
 function use$(signalName) {
-  const ctx = React4__namespace.useContext(ContextState);
-  const { subscribe, get } = React4__namespace.useMemo(() => createSelectorFunctions(ctx, signalName), []);
-  const value = React4.useSyncExternalStore(subscribe, get);
+  const ctx = React5__namespace.useContext(ContextState);
+  const { subscribe, get } = React5__namespace.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const value = React5.useSyncExternalStore(subscribe, get);
   return value;
 }
 function listen$(ctx, signalName, cb) {
@@ -77,75 +77,207 @@ function set$(ctx, signalName, value) {
     }
   }
 }
+var symbolFirst = Symbol();
+function useInit(cb) {
+  const refValue = React5.useRef(symbolFirst);
+  if (refValue.current === symbolFirst) {
+    refValue.current = cb();
+  }
+  return refValue.current;
+}
+
+// src/ContextContainer.ts
+var ContextContainer = React5.createContext(null);
+function useViewability(configId, callback) {
+  const ctx = useStateContext();
+  const { containerId } = React5.useContext(ContextContainer);
+  const key = containerId + configId;
+  useInit(() => {
+    const value = ctx.mapViewabilityValues.get(key);
+    if (value) {
+      callback(value);
+    }
+  });
+  ctx.mapViewabilityCallbacks.set(key, callback);
+  React5.useEffect(
+    () => () => {
+      ctx.mapViewabilityCallbacks.delete(key);
+    },
+    []
+  );
+}
+function useViewabilityAmount(callback) {
+  const ctx = useStateContext();
+  const { containerId } = React5.useContext(ContextContainer);
+  useInit(() => {
+    const value = ctx.mapViewabilityAmountValues.get(containerId);
+    if (value) {
+      callback(value);
+    }
+  });
+  ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
+  React5.useEffect(
+    () => () => {
+      ctx.mapViewabilityAmountCallbacks.delete(containerId);
+    },
+    []
+  );
+}
+function useRecyclingEffect(effect) {
+  const { index, value } = React5.useContext(ContextContainer);
+  const prevValues = React5.useRef({
+    prevIndex: void 0,
+    prevItem: void 0
+  });
+  React5.useEffect(() => {
+    let ret = void 0;
+    if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
+      ret = effect({
+        index,
+        item: value,
+        prevIndex: prevValues.current.prevIndex,
+        prevItem: prevValues.current.prevItem
+      });
+    }
+    prevValues.current = {
+      prevIndex: index,
+      prevItem: value
+    };
+    return ret;
+  }, [index, value]);
+}
+function useRecyclingState(valueOrFun) {
+  const { index, value } = React5.useContext(ContextContainer);
+  const stateInfo = React5.useState(
+    () => typeof valueOrFun === "function" ? valueOrFun({
+      index,
+      item: value,
+      prevIndex: void 0,
+      prevItem: void 0
+    }) : valueOrFun
+  );
+  useRecyclingEffect((state) => {
+    const newState = typeof valueOrFun === "function" ? valueOrFun(state) : valueOrFun;
+    stateInfo[1](newState);
+  });
+  return stateInfo;
+}
+var LeanView = React5__namespace.forwardRef((props, ref) => {
+  return React5__namespace.createElement("RCTView", { ...props, ref });
+});
+LeanView.displayName = "RCTView";
+
+// src/constants.ts
+var POSITION_OUT_OF_VIEW = -1e7;
+var ANCHORED_POSITION_OUT_OF_VIEW = {
+  type: "top",
+  relativeCoordinate: POSITION_OUT_OF_VIEW,
+  top: POSITION_OUT_OF_VIEW
+};
 
 // src/Container.tsx
+var isNewArchitecture = global.nativeFabricUIManager != null;
 var Container = ({
   id,
   recycleItems,
   horizontal,
-  waitForInitialLayout,
   getRenderedItem,
   updateItemSize,
   ItemSeparatorComponent
 }) => {
-  const ctx = useStateContext();
-  const position = use$(`containerPosition${id}`);
+  useStateContext();
+  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 otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
   const style = horizontal ? {
-    flexDirection: "row",
+    flexDirection: ItemSeparatorComponent ? "row" : void 0,
     position: "absolute",
     top: otherAxisPos,
     bottom: numColumns > 1 ? null : 0,
     height: otherAxisSize,
-    left: position
+    left: position.relativeCoordinate
   } : {
     position: "absolute",
     left: otherAxisPos,
     right: numColumns > 1 ? null : 0,
     width: otherAxisSize,
-    top: position
+    top: position.relativeCoordinate
   };
-  if (waitForInitialLayout) {
-    const visible = use$(`containerDidLayout${id}`);
-    style.opacity = visible ? 1 : 0;
-  }
   const lastItemKey = use$("lastItemKey");
   const itemKey = use$(`containerItemKey${id}`);
   const data = use$(`containerItemData${id}`);
-  const renderedItem = React4.useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey, data]);
-  return /* @__PURE__ */ React4__namespace.default.createElement(
-    reactNative.View,
-    {
-      style,
-      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);
+  const extraData = use$("extraData");
+  const renderedItemInfo = React5.useMemo(
+    () => itemKey !== void 0 && getRenderedItem(itemKey),
+    [itemKey, data, extraData]
+  );
+  const { index, renderedItem } = renderedItemInfo || {};
+  const onLayout = (event) => {
+    if (itemKey !== void 0) {
+      const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
+      if (size === 0) {
+        console.log("[WARN] Container 0 height reported, possible bug in LegendList", id, itemKey);
+        return;
+      }
+      updateItemSize(id, itemKey, size);
+    }
+  };
+  const ref = React5.useRef(null);
+  if (isNewArchitecture) {
+    React5.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(id, itemKey, size);
+          }
         }
       }
-    },
-    /* @__PURE__ */ React4__namespace.default.createElement(React4__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent)
+    }, [itemKey]);
+  }
+  const contextValue = React5.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));
+  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 }, /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment));
+  }
+  return /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
 var useAnimatedValue = reactNative.useAnimatedValue || ((initialValue) => {
-  return React4.useRef(new reactNative.Animated.Value(initialValue)).current;
+  return React5.useRef(new reactNative.Animated.Value(initialValue)).current;
 });
-function useValue$(key, getValue, key2) {
+function useValue$(key, getValue, useMicrotask) {
   var _a;
   const ctx = useStateContext();
-  const animValue = useAnimatedValue((_a = peek$(ctx, key)) != null ? _a : 0);
-  React4.useMemo(() => {
-    listen$(ctx, key, (v) => animValue.setValue(v));
+  const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
+  React5.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 = React4__namespace.memo(function Containers2({
+var Containers = React5__namespace.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -154,18 +286,23 @@ var Containers = React4__namespace.memo(function Containers2({
   getRenderedItem
 }) {
   const numContainers = use$("numContainersPooled");
-  const animSize = useValue$("totalSize");
+  const animSize = useValue$(
+    "totalSize",
+    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__ */ React4__namespace.createElement(
+      /* @__PURE__ */ React5__namespace.createElement(
         Container,
         {
           id: i,
           key: i,
           recycleItems,
           horizontal,
-          waitForInitialLayout,
           getRenderedItem,
           updateItemSize,
           ItemSeparatorComponent
@@ -173,21 +310,21 @@ var Containers = React4__namespace.memo(function Containers2({
       )
     );
   }
-  const style = horizontal ? { width: animSize } : { height: animSize };
-  return /* @__PURE__ */ React4__namespace.createElement(reactNative.Animated.View, { style }, containers);
+  const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
+  return /* @__PURE__ */ React5__namespace.createElement(reactNative.Animated.View, { style }, containers);
 });
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React4__namespace.isValidElement(Component)) {
+  if (React5__namespace.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React4__namespace.createElement(Component, null);
+    return /* @__PURE__ */ React5__namespace.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React4__namespace.memo(function ListComponent2({
+var ListComponent = React5__namespace.memo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -203,7 +340,6 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
   ListFooterComponent,
   ListFooterComponentStyle,
   ListEmptyComponent,
-  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   refScrollView,
@@ -214,17 +350,17 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
   const ctx = useStateContext();
   const animPaddingTop = useValue$("paddingTop");
   const animScrollAdjust = useValue$("scrollAdjust");
-  const ScrollComponent = renderScrollComponent ? React4.useMemo(
-    () => React4__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+  const ScrollComponent = renderScrollComponent ? React5.useMemo(
+    () => React5__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
   ) : reactNative.ScrollView;
   const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
-  return /* @__PURE__ */ React4__namespace.createElement(
+  return /* @__PURE__ */ React5__namespace.createElement(
     ScrollComponent,
     {
       ...rest,
       style,
-      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
+      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
       contentContainerStyle: [
         contentContainerStyle,
         horizontal ? {
@@ -237,8 +373,8 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScrollView
     },
-    /* @__PURE__ */ React4__namespace.createElement(reactNative.Animated.View, { style: additionalSize }),
-    ListHeaderComponent && /* @__PURE__ */ React4__namespace.createElement(
+    /* @__PURE__ */ React5__namespace.createElement(reactNative.Animated.View, { style: additionalSize }),
+    ListHeaderComponent && /* @__PURE__ */ React5__namespace.createElement(
       reactNative.Animated.View,
       {
         style: ListHeaderComponentStyle,
@@ -252,8 +388,8 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
-    ListEmptyComponent && /* @__PURE__ */ React4__namespace.createElement(reactNative.Animated.View, { style: ListEmptyComponentStyle }, getComponent(ListEmptyComponent)),
-    /* @__PURE__ */ React4__namespace.createElement(
+    ListEmptyComponent && getComponent(ListEmptyComponent),
+    /* @__PURE__ */ React5__namespace.createElement(
       Containers,
       {
         horizontal,
@@ -264,7 +400,7 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React4__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React5__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
 
@@ -304,14 +440,6 @@ var ScrollAdjustHandler = class {
     return this.appliedAdjust;
   }
 };
-var symbolFirst = Symbol();
-function useInit(cb) {
-  const refValue = React4.useRef(symbolFirst);
-  if (refValue.current === symbolFirst) {
-    refValue.current = cb();
-  }
-  return refValue.current;
-}
 
 // src/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
@@ -462,13 +590,12 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
 
 // src/LegendList.tsx
 var DEFAULT_DRAW_DISTANCE = 250;
-var POSITION_OUT_OF_VIEW = -1e7;
 var DEFAULT_ITEM_SIZE = 100;
-var LegendList = React4.forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React4__namespace.createElement(StateProvider, null, /* @__PURE__ */ React4__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+var LegendList = React5.forwardRef(function LegendList2(props, forwardedRef) {
+  return /* @__PURE__ */ React5__namespace.createElement(StateProvider, null, /* @__PURE__ */ React5__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
-var LegendListInner = React4.forwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b, _c, _d;
+var LegendListInner = React5.forwardRef(function LegendListInner2(props, forwardedRef) {
+  var _a, _b, _c, _d, _e, _f, _g;
   const {
     data,
     initialScrollIndex,
@@ -488,20 +615,27 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     renderItem,
     estimatedItemSize,
     getEstimatedItemSize,
-    onEndReached,
-    onStartReached,
     ListEmptyComponent,
     onItemSizeChanged,
     scrollEventThrottle,
     refScrollView,
+    waitForInitialLayout = true,
+    extraData,
+    onLayout: onLayoutProp,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
+  const callbacks = React5.useRef({
+    onStartReached: rest.onStartReached,
+    onEndReached: rest.onEndReached
+  });
+  callbacks.current.onStartReached = rest.onStartReached;
+  callbacks.current.onEndReached = rest.onEndReached;
   const ctx = useStateContext();
-  const refScroller = React4.useRef(null);
+  const refScroller = React5.useRef(null);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (item, index) => index.toString();
-  const refState = React4.useRef();
+  const refState = React5.useRef();
   const getId = (index) => {
     var _a2;
     const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
@@ -535,7 +669,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     }
     return 0;
   };
-  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React4.useMemo(calculateInitialOffset, []);
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React5.useMemo(calculateInitialOffset, []);
   if (!refState.current) {
     const initialScrollLength = reactNative.Dimensions.get("window")[horizontal ? "width" : "height"];
     refState.current = {
@@ -543,7 +677,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       positions: /* @__PURE__ */ new Map(),
       columns: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
-      animFrameLayout: null,
+      waitingForMicrotask: false,
       isStartReached: initialContentOffset < initialScrollLength * onStartReachedThreshold,
       isEndReached: false,
       isAtBottom: false,
@@ -576,8 +710,9 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       belowAnchorElementPositions: void 0,
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
-      layoutsPending: /* @__PURE__ */ new Set(),
-      scrollForNextCalculateItemsInView: void 0
+      scrollForNextCalculateItemsInView: void 0,
+      enableScrollForNextCalculateItemsInView: true,
+      minIndexSizeChanged: 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -596,6 +731,8 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
     }
     set$(ctx, "scrollAdjust", 0);
+    set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
+    set$(ctx, "extraData", extraData);
   }
   const getAnchorElementIndex = () => {
     const state = refState.current;
@@ -605,16 +742,16 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     }
     return void 0;
   };
-  const addTotalSize = React4.useCallback((key, add, totalSizeBelowAnchor) => {
+  const addTotalSize = React5.useCallback((key, add, totalSizeBelowAnchor) => {
     const state = refState.current;
-    const index = key === null ? 0 : state.indexByKey.get(key);
+    const { scrollLength, 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;
@@ -625,19 +762,19 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
     }
     let applyAdjustValue = void 0;
-    if (maintainVisibleContentPosition) {
-      const newAdjust = state.anchorElement.coordinate - state.totalSizeBelowAnchor;
+    const totalSize = state.totalSize;
+    let resultSize = totalSize;
+    if (maintainVisibleContentPosition && totalSize > scrollLength) {
+      const newAdjust = anchorElement.coordinate - state.totalSizeBelowAnchor;
       applyAdjustValue = -newAdjust;
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
       state.rowHeights.clear();
-    }
-    const totalSize = state.totalSize;
-    let resultSize = totalSize;
-    if (applyAdjustValue !== void 0) {
-      resultSize -= applyAdjustValue;
-      refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
-        state.scroll -= diff;
-      });
+      if (applyAdjustValue !== void 0) {
+        resultSize -= applyAdjustValue;
+        refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
+          state.scroll -= diff;
+        });
+      }
     }
     set$(ctx, "totalSize", resultSize);
     if (alignItemsAtEnd) {
@@ -655,7 +792,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     }
     let rowHeight = 0;
     const startEl = n * numColumnsProp;
-    for (let i = startEl; i < startEl + numColumnsProp; i++) {
+    for (let i = startEl; i < startEl + numColumnsProp && i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       rowHeight = Math.max(rowHeight, size);
@@ -695,8 +832,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     }
     return res;
   };
-  const calculateItemsInView = React4.useCallback((speed) => {
-    var _a2, _b2, _c2, _d2;
+  const calculateItemsInView = React5.useCallback((speed) => {
     const state = refState.current;
     const {
       data: data2,
@@ -705,12 +841,10 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler,
-      layoutsPending
+      scrollAdjustHandler
     } = state;
-    if (state.animFrameLayout) {
-      cancelAnimationFrame(state.animFrameLayout);
-      state.animFrameLayout = null;
+    if (state.waitingForMicrotask) {
+      state.waitingForMicrotask = false;
     }
     if (!data2) {
       return;
@@ -718,9 +852,19 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
-    const scroll = scrollState - previousScrollAdjust - topPad - scrollExtra;
-    if (refState.current.scrollForNextCalculateItemsInView) {
-      const { top: top2, bottom } = refState.current.scrollForNextCalculateItemsInView;
+    const scroll = scrollState - previousScrollAdjust - topPad;
+    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) {
         return;
       }
@@ -731,8 +875,11 @@ var LegendListInner = React4.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);
@@ -763,13 +910,13 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     let column = 1;
     let maxSizeInRow = 0;
     const getInitialTop = (i) => {
-      var _a3;
+      var _a2;
       const id = getId(i);
       let topOffset = 0;
       if (positions.get(id)) {
         topOffset = positions.get(id);
       }
-      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+      if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
         topOffset = initialContentOffset || 0;
       }
       return topOffset;
@@ -790,7 +937,7 @@ var LegendListInner = React4.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;
       }
@@ -798,7 +945,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         if (top <= scrollBottom) {
           endNoBuffer = i;
         }
-        if (top <= scrollBottom + scrollBuffer) {
+        if (top <= scrollBottom + scrollBufferBottom) {
           endBuffered = i;
         } else {
           break;
@@ -811,21 +958,23 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         maxSizeInRow = 0;
       }
     }
-    Object.assign(refState.current, {
+    Object.assign(state, {
       startBuffered,
       startBufferedId,
       startNoBuffer,
       endBuffered,
       endNoBuffer
     });
-    const nextTop = Math.ceil(startBuffered ? positions.get(startBufferedId) + scrollBuffer : 0);
+    const nextTop = Math.ceil(startBuffered !== null ? positions.get(startBufferedId) + scrollBuffer : 0);
     const nextBottom = Math.floor(
-      endBuffered ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
+      endBuffered !== null ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
     );
-    refState.current.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
-      top: nextTop,
-      bottom: nextBottom
-    } : void 0;
+    if (state.enableScrollForNextCalculateItemsInView) {
+      state.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
+        top: nextTop,
+        bottom: nextBottom
+      } : void 0;
+    }
     if (startBuffered !== null && endBuffered !== null) {
       const prevNumContainers = ctx.values.get("numContainers");
       let numContainers = prevNumContainers;
@@ -849,8 +998,8 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
               furthestIndex = u;
               break;
             }
-            const index = (_a2 = refState.current) == null ? void 0 : _a2.indexByKey.get(key);
-            const pos = peek$(ctx, `containerPosition${u}`);
+            const index = state.indexByKey.get(key);
+            const pos = peek$(ctx, `containerPosition${u}`).top;
             if (index < startBuffered || index > endBuffered) {
               const distance = Math.abs(pos - top2);
               if (index < 0 || distance > furthestDistance) {
@@ -861,15 +1010,15 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
           }
           if (furthestIndex >= 0) {
             set$(ctx, `containerItemKey${furthestIndex}`, id);
-            const index = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(id);
+            const index = state.indexByKey.get(id);
             set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
           } else {
             const containerId = numContainers;
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
-            const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
+            const index = state.indexByKey.get(id);
             set$(ctx, `containerItemData${containerId}`, data2[index]);
-            set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
+            set$(ctx, `containerPosition${containerId}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
               console.warn(
@@ -888,24 +1037,36 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
-        const itemIndex = (_d2 = refState.current) == null ? void 0 : _d2.indexByKey.get(itemKey);
+        const itemIndex = state.indexByKey.get(itemKey);
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
           if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
-            const prevPos = peek$(ctx, `containerPosition${i}`);
+            const prevPos = peek$(ctx, `containerPosition${i}`).top;
             const pos = positions.get(id) || 0;
             const size = getItemSize(id, itemIndex, data2[i]);
             if (pos + size >= scroll && pos <= scrollBottom || prevPos + size >= scroll && prevPos <= scrollBottom) {
-              set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+              set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
             }
           } else {
-            const pos = positions.get(id) || 0;
+            const pos = {
+              type: "top",
+              relativeCoordinate: positions.get(id) || 0,
+              top: positions.get(id) || 0
+            };
             const column2 = columns.get(id) || 1;
+            if (maintainVisibleContentPosition && itemIndex < anchorElementIndex) {
+              const currentRow = Math.floor(itemIndex / numColumnsProp);
+              const rowHeight = getRowHeight(currentRow);
+              const elementHeight = getItemSize(id, itemIndex, data2[i]);
+              const diff = rowHeight - elementHeight;
+              pos.relativeCoordinate = pos.top + getRowHeight(currentRow) - diff;
+              pos.type = "bottom";
+            }
             const prevPos = peek$(ctx, `containerPosition${i}`);
             const prevColumn = peek$(ctx, `containerColumn${i}`);
             const prevData = peek$(ctx, `containerItemData${i}`);
-            if (pos > POSITION_OUT_OF_VIEW && pos !== prevPos) {
+            if (pos.relativeCoordinate > POSITION_OUT_OF_VIEW && pos.top !== prevPos.top) {
               set$(ctx, `containerPosition${i}`, pos);
             }
             if (column2 >= 0 && column2 !== prevColumn) {
@@ -918,17 +1079,12 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         }
       }
     }
-    if (layoutsPending.size > 0) {
-      for (const containerId of layoutsPending) {
-        set$(ctx, `containerDidLayout${containerId}`, true);
-      }
-      layoutsPending.clear();
-    }
-    if (refState.current.viewabilityConfigCallbackPairs) {
+    set$(ctx, "containersDidLayout", true);
+    if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
-        refState.current,
+        state,
         ctx,
-        refState.current.viewabilityConfigCallbackPairs,
+        state.viewabilityConfigCallbackPairs,
         getId,
         scrollLength,
         startNoBuffer,
@@ -967,6 +1123,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
+      const { onEndReached } = callbacks.current;
       if (onEndReached) {
         if (!refState.current.isEndReached) {
           if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
@@ -988,6 +1145,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     const { scrollLength, scroll } = refState.current;
     const distanceFromTop = scroll;
     refState.current.isAtTop = distanceFromTop < 0;
+    const { onStartReached } = callbacks.current;
     if (onStartReached) {
       if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
         if (distanceFromTop < onStartReachedThreshold * scrollLength) {
@@ -1016,13 +1174,13 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
           const itemKey = peek$(ctx, `containerItemKey${i}`);
           if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
             set$(ctx, `containerItemKey${i}`, void 0);
-            set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+            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;
+          state.positions.clear();
         }
         calculateItemsInView(state.scrollVelocity);
       }
@@ -1037,20 +1195,63 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
   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;
     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 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) {
+        newPositions.set(key, refState.current.positions.get(key));
+      }
     }
     refState.current.indexByKey = indexByKey;
+    refState.current.positions = newPositions;
+    if (!isFirst) {
+      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();
+            (_b = refScroller.current) == null ? void 0 : _b.scrollTo({ x: 0, y: 0, animated: false });
+            setTimeout(() => {
+              calculateItemsInView(0);
+            }, 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;
+          }
+          (_c = refScroller.current) == null ? void 0 : _c.scrollTo({ x: 0, y: 0, animated: false });
+          setTimeout(() => {
+            calculateItemsInView(0);
+          }, 0);
+        }
+      }
+    }
     const anchorElementIndex = getAnchorElementIndex();
     for (let i = 0; i < data.length; i++) {
       const key = getId(i);
@@ -1066,17 +1267,23 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         maxSizeInRow = 0;
       }
     }
+    if (maxSizeInRow > 0) {
+      totalSize += maxSizeInRow;
+    }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   }
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     checkResetContainers(
       /*reset*/
       !isFirst
     );
   }, [isFirst, data, numColumnsProp]);
+  React5.useEffect(() => {
+    set$(ctx, "extraData", extraData);
+  }, [extraData]);
   refState.current.renderItem = renderItem;
-  const lastItemKey = getId(data[data.length - 1]);
-  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;
+  const lastItemKey = data.length > 0 ? getId(data.length - 1) : void 0;
+  const stylePaddingTop = (_g = (_f = (_d = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _d.paddingTop) != null ? _f : (_e = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _e.paddingTop) != null ? _g : 0;
   const initalizeStateVars = () => {
     set$(ctx, "lastItemKey", lastItemKey);
     set$(ctx, "numColumns", numColumnsProp);
@@ -1085,8 +1292,8 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
   if (isFirst) {
     initalizeStateVars();
   }
-  React4.useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
-  const getRenderedItem = React4.useCallback((key, containerId) => {
+  React5.useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
+  const getRenderedItem = React5.useCallback((key) => {
     var _a2, _b2;
     const state = refState.current;
     if (!state) {
@@ -1097,134 +1304,68 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     if (index === void 0) {
       return null;
     }
-    const useViewability = (configId, callback) => {
-      const key2 = containerId + configId;
-      useInit(() => {
-        const value = ctx.mapViewabilityValues.get(key2);
-        if (value) {
-          callback(value);
-        }
-      });
-      ctx.mapViewabilityCallbacks.set(key2, callback);
-      React4.useEffect(
-        () => () => {
-          ctx.mapViewabilityCallbacks.delete(key2);
-        },
-        []
-      );
+    const useViewability2 = (configId, callback) => {
+      useViewability(configId, callback);
     };
-    const useViewabilityAmount = (callback) => {
-      useInit(() => {
-        const value = ctx.mapViewabilityAmountValues.get(containerId);
-        if (value) {
-          callback(value);
-        }
-      });
-      ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-      React4.useEffect(
-        () => () => {
-          ctx.mapViewabilityAmountCallbacks.delete(containerId);
-        },
-        []
-      );
+    const useViewabilityAmount2 = (callback) => {
+      useViewabilityAmount(callback);
     };
-    const useRecyclingEffect = (effect) => {
-      React4.useEffect(() => {
-        const state2 = refState.current;
-        let prevIndex = index;
-        let prevItem = state2.data[index];
-        const signal = `containerItemKey${containerId}`;
-        const run = () => {
-          const data3 = state2.data;
-          if (data3) {
-            const newKey = peek$(ctx, signal);
-            const newIndex = state2.indexByKey.get(newKey);
-            const newItem = data3[newIndex];
-            if (newItem) {
-              effect({
-                index: newIndex,
-                item: newItem,
-                prevIndex,
-                prevItem
-              });
-            }
-            prevIndex = newIndex;
-            prevItem = newItem;
-          }
-        };
-        run();
-        return listen$(ctx, signal, run);
-      }, []);
+    const useRecyclingEffect2 = (effect) => {
+      useRecyclingEffect(effect);
     };
-    const useRecyclingState = (valueOrFun) => {
-      const stateInfo = React4.useState(
-        () => typeof valueOrFun === "function" ? valueOrFun({
-          index,
-          item: refState.current.data[index],
-          prevIndex: void 0,
-          prevItem: void 0
-        }) : valueOrFun
-      );
-      useRecyclingEffect((state2) => {
-        const newState = typeof valueOrFun === "function" ? valueOrFun(state2) : valueOrFun;
-        stateInfo[1](newState);
-      });
-      return stateInfo;
+    const useRecyclingState2 = (valueOrFun) => {
+      return useRecyclingState(valueOrFun);
     };
     const renderedItem = (_b2 = (_a2 = refState.current).renderItem) == null ? void 0 : _b2.call(_a2, {
       item: data2[index],
       index,
-      useViewability,
-      useViewabilityAmount,
-      useRecyclingEffect,
-      useRecyclingState
+      useViewability: useViewability2,
+      useViewabilityAmount: useViewabilityAmount2,
+      useRecyclingEffect: useRecyclingEffect2,
+      useRecyclingState: useRecyclingState2
     });
-    return renderedItem;
+    return { index, renderedItem };
   }, []);
   useInit(() => {
     var _a2;
-    refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
-    const scrollLength = refState.current.scrollLength;
+    const state = refState.current;
+    const viewability = setupViewability(props);
+    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}`, POSITION_OUT_OF_VIEW);
+      set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
       set$(ctx, `containerColumn${i}`, -1);
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * 2);
-    calculateItemsInView(refState.current.scrollVelocity);
+    calculateItemsInView(state.scrollVelocity);
   });
-  const updateItemSize = React4.useCallback((containerId, itemKey, size) => {
-    var _a2;
-    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
+  const updateItemSize = React5.useCallback((containerId, itemKey, size) => {
+    const state = refState.current;
+    const { sizes, indexByKey, columns, sizesLaidOut, data: data2 } = state;
     if (!data2) {
       return;
     }
-    const state = refState.current;
-    const { sizes, indexByKey, idsInFirstRender, columns, sizesLaidOut } = state;
     const index = indexByKey.get(itemKey);
     const numColumns = peek$(ctx, "numColumns");
-    const row = Math.floor(index / numColumns);
-    const prevSize = getRowHeight(row);
-    const measured = peek$(ctx, `containerDidLayout${containerId}`);
-    if (!measured) {
-      state.layoutsPending.add(containerId);
-    }
+    state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
+    const prevSize = getItemSize(itemKey, index, data2);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
       if (numColumns > 1) {
-        const prevMaxSizeInRow = getRowHeight(row);
         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++) {
+        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;
+        diff = nextMaxSizeInRow - prevSize;
       } else {
         sizes.set(itemKey, size);
         diff = size - prevSize;
@@ -1252,11 +1393,14 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       addTotalSize(itemKey, diff, 0);
       doMaintainScrollAtEnd(true);
       const scrollVelocity = state.scrollVelocity;
-      if (!state.animFrameLayout && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
-        if (!peek$(ctx, `containerDidLayout${containerId}`)) {
-          state.animFrameLayout = requestAnimationFrame(() => {
-            state.animFrameLayout = null;
-            calculateItemsInView(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);
+            }
           });
         } else {
           calculateItemsInView(state.scrollVelocity);
@@ -1265,22 +1409,24 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       if (onItemSizeChanged) {
         onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data2[index] });
       }
-    } else {
-      set$(ctx, `containerDidLayout${containerId}`, true);
     }
   }, []);
-  const handleScrollDebounced = React4.useCallback((velocity) => {
+  const handleScrollDebounced = React5.useCallback((velocity) => {
     calculateItemsInView(velocity);
     checkAtBottom();
     checkAtTop();
   }, []);
-  const onLayout = React4.useCallback((event) => {
+  const onLayout = React5.useCallback((event) => {
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
+    const didChange = scrollLength !== refState.current.scrollLength;
     refState.current.scrollLength = scrollLength;
     doMaintainScrollAtEnd(false);
     doUpdatePaddingTop();
     checkAtBottom();
     checkAtTop();
+    if (didChange) {
+      calculateItemsInView(0);
+    }
     if (__DEV__) {
       const isWidthZero = event.nativeEvent.layout.width === 0;
       const isHeightZero = event.nativeEvent.layout.height === 0;
@@ -1290,8 +1436,11 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         );
       }
     }
+    if (onLayoutProp) {
+      onLayoutProp(event);
+    }
   }, []);
-  const handleScroll = React4.useCallback(
+  const handleScroll = React5.useCallback(
     (event, fromSelf) => {
       var _a2, _b2, _c2;
       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) {
@@ -1333,7 +1482,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     },
     []
   );
-  React4.useImperativeHandle(
+  React5.useImperativeHandle(
     forwardedRef,
     () => {
       const scrollToIndex = ({ index, animated }) => {
@@ -1343,9 +1492,9 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       };
       return {
         getNativeScrollRef: () => refScroller.current,
-        getScrollableNode: refScroller.current.getScrollableNode,
-        getScrollResponder: refScroller.current.getScrollResponder,
-        flashScrollIndicators: refScroller.current.flashScrollIndicators,
+        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 };
@@ -1357,12 +1506,12 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
             scrollToIndex({ index, animated });
           }
         },
-        scrollToEnd: refScroller.current.scrollToEnd
+        scrollToEnd: () => refScroller.current.scrollToEnd()
       };
     },
     []
   );
-  return /* @__PURE__ */ React4__namespace.createElement(
+  return /* @__PURE__ */ React5__namespace.createElement(
     ListComponent,
     {
       ...rest,
@@ -1387,9 +1536,14 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
       maintainVisibleContentPosition,
       scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : reactNative.Platform.OS === "web" ? 16 : void 0,
+      waitForInitialLayout,
       style
     }
   );
 });
 
 exports.LegendList = LegendList;
+exports.useRecyclingEffect = useRecyclingEffect;
+exports.useRecyclingState = useRecyclingState;
+exports.useViewability = useViewability;
+exports.useViewabilityAmount = useViewabilityAmount;