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

package/index.mjs

@@ -1,11 +1,11 @@
-import * as React4 from 'react';
-import React4__default, { useMemo, forwardRef, useRef, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useState } from 'react';
+import * as React5 from 'react';
+import React5__default, { createContext, useMemo, forwardRef, useRef, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useContext, useState, useLayoutEffect } from 'react';
 import { Animated, ScrollView, View, Dimensions, StyleSheet, Platform, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
 
 // src/LegendList.tsx
-var ContextState = React4.createContext(null);
+var ContextState = React5.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React4.useState(() => ({
+  const [value] = React5.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map(),
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
@@ -13,10 +13,10 @@ function StateProvider({ children }) {
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityAmountValues: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React4.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React5.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React4.useContext(ContextState);
+  return React5.useContext(ContextState);
 }
 function createSelectorFunctions(ctx, signalName) {
   return {
@@ -25,8 +25,8 @@ function createSelectorFunctions(ctx, signalName) {
   };
 }
 function use$(signalName) {
-  const ctx = React4.useContext(ContextState);
-  const { subscribe, get } = React4.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const ctx = React5.useContext(ContextState);
+  const { subscribe, get } = React5.useMemo(() => createSelectorFunctions(ctx, signalName), []);
   const value = useSyncExternalStore(subscribe, get);
   return value;
 }
@@ -56,75 +56,207 @@ function set$(ctx, signalName, value) {
     }
   }
 }
+var symbolFirst = Symbol();
+function useInit(cb) {
+  const refValue = useRef(symbolFirst);
+  if (refValue.current === symbolFirst) {
+    refValue.current = cb();
+  }
+  return refValue.current;
+}
+
+// src/ContextContainer.ts
+var ContextContainer = createContext(null);
+function useViewability(configId, callback) {
+  const ctx = useStateContext();
+  const { containerId } = useContext(ContextContainer);
+  const key = containerId + configId;
+  useInit(() => {
+    const value = ctx.mapViewabilityValues.get(key);
+    if (value) {
+      callback(value);
+    }
+  });
+  ctx.mapViewabilityCallbacks.set(key, callback);
+  useEffect(
+    () => () => {
+      ctx.mapViewabilityCallbacks.delete(key);
+    },
+    []
+  );
+}
+function useViewabilityAmount(callback) {
+  const ctx = useStateContext();
+  const { containerId } = useContext(ContextContainer);
+  useInit(() => {
+    const value = ctx.mapViewabilityAmountValues.get(containerId);
+    if (value) {
+      callback(value);
+    }
+  });
+  ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
+  useEffect(
+    () => () => {
+      ctx.mapViewabilityAmountCallbacks.delete(containerId);
+    },
+    []
+  );
+}
+function useRecyclingEffect(effect) {
+  const { index, value } = useContext(ContextContainer);
+  const prevValues = useRef({
+    prevIndex: void 0,
+    prevItem: void 0
+  });
+  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 } = useContext(ContextContainer);
+  const stateInfo = 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.forwardRef((props, ref) => {
+  return React5.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 = useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey, data]);
-  return /* @__PURE__ */ React4__default.createElement(
-    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 = 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 = useRef(null);
+  if (isNewArchitecture) {
+    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__default.createElement(React4__default.Fragment, { key: recycleItems ? void 0 : itemKey }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent)
+    }, [itemKey]);
+  }
+  const contextValue = useMemo(
+    () => ({ containerId: id, itemKey, index, value: data }),
+    [id, itemKey, index, data]
   );
+  const contentFragment = /* @__PURE__ */ React5__default.createElement(React5__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React5__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__default.createElement(LeanView, { style }, /* @__PURE__ */ React5__default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment));
+  }
+  return /* @__PURE__ */ React5__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
 var useAnimatedValue = useAnimatedValue$1 || ((initialValue) => {
   return useRef(new 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);
+  const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
   useMemo(() => {
-    listen$(ctx, key, (v) => animValue.setValue(v));
+    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.memo(function Containers2({
+var Containers = React5.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -133,18 +265,23 @@ var Containers = React4.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.createElement(
+      /* @__PURE__ */ React5.createElement(
         Container,
         {
           id: i,
           key: i,
           recycleItems,
           horizontal,
-          waitForInitialLayout,
           getRenderedItem,
           updateItemSize,
           ItemSeparatorComponent
@@ -152,21 +289,21 @@ var Containers = React4.memo(function Containers2({
       )
     );
   }
-  const style = horizontal ? { width: animSize } : { height: animSize };
-  return /* @__PURE__ */ React4.createElement(Animated.View, { style }, containers);
+  const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
+  return /* @__PURE__ */ React5.createElement(Animated.View, { style }, containers);
 });
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React4.isValidElement(Component)) {
+  if (React5.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React4.createElement(Component, null);
+    return /* @__PURE__ */ React5.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React4.memo(function ListComponent2({
+var ListComponent = React5.memo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -182,7 +319,6 @@ var ListComponent = React4.memo(function ListComponent2({
   ListFooterComponent,
   ListFooterComponentStyle,
   ListEmptyComponent,
-  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   refScrollView,
@@ -194,16 +330,16 @@ var ListComponent = React4.memo(function ListComponent2({
   const animPaddingTop = useValue$("paddingTop");
   const animScrollAdjust = useValue$("scrollAdjust");
   const ScrollComponent = renderScrollComponent ? useMemo(
-    () => React4.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    () => React5.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
   ) : ScrollView;
   const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     ScrollComponent,
     {
       ...rest,
       style,
-      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
+      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
       contentContainerStyle: [
         contentContainerStyle,
         horizontal ? {
@@ -216,8 +352,8 @@ var ListComponent = React4.memo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScrollView
     },
-    /* @__PURE__ */ React4.createElement(Animated.View, { style: additionalSize }),
-    ListHeaderComponent && /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(Animated.View, { style: additionalSize }),
+    ListHeaderComponent && /* @__PURE__ */ React5.createElement(
       Animated.View,
       {
         style: ListHeaderComponentStyle,
@@ -231,8 +367,8 @@ var ListComponent = React4.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
-    ListEmptyComponent && /* @__PURE__ */ React4.createElement(Animated.View, { style: ListEmptyComponentStyle }, getComponent(ListEmptyComponent)),
-    /* @__PURE__ */ React4.createElement(
+    ListEmptyComponent && getComponent(ListEmptyComponent),
+    /* @__PURE__ */ React5.createElement(
       Containers,
       {
         horizontal,
@@ -243,7 +379,7 @@ var ListComponent = React4.memo(function ListComponent2({
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React4.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React5.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
 
@@ -283,14 +419,6 @@ var ScrollAdjustHandler = class {
     return this.appliedAdjust;
   }
 };
-var symbolFirst = Symbol();
-function useInit(cb) {
-  const refValue = useRef(symbolFirst);
-  if (refValue.current === symbolFirst) {
-    refValue.current = cb();
-  }
-  return refValue.current;
-}
 
 // src/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
@@ -441,13 +569,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 = forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React4.createElement(StateProvider, null, /* @__PURE__ */ React4.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+  return /* @__PURE__ */ React5.createElement(StateProvider, null, /* @__PURE__ */ React5.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   const {
     data,
     initialScrollIndex,
@@ -467,15 +594,22 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     renderItem,
     estimatedItemSize,
     getEstimatedItemSize,
-    onEndReached,
-    onStartReached,
     ListEmptyComponent,
     onItemSizeChanged,
     scrollEventThrottle,
     refScrollView,
+    waitForInitialLayout = true,
+    extraData,
+    onLayout: onLayoutProp,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
+  const callbacks = useRef({
+    onStartReached: rest.onStartReached,
+    onEndReached: rest.onEndReached
+  });
+  callbacks.current.onStartReached = rest.onStartReached;
+  callbacks.current.onEndReached = rest.onEndReached;
   const ctx = useStateContext();
   const refScroller = useRef(null);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
@@ -522,7 +656,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       positions: /* @__PURE__ */ new Map(),
       columns: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
-      animFrameLayout: null,
+      waitingForMicrotask: false,
       isStartReached: initialContentOffset < initialScrollLength * onStartReachedThreshold,
       isEndReached: false,
       isAtBottom: false,
@@ -555,9 +689,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       belowAnchorElementPositions: void 0,
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
-      layoutsPending: /* @__PURE__ */ new Set(),
       scrollForNextCalculateItemsInView: void 0,
-      enableScrollForNextCalculateItemsInView: true
+      enableScrollForNextCalculateItemsInView: true,
+      minIndexSizeChanged: 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -576,6 +710,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
     }
     set$(ctx, "scrollAdjust", 0);
+    set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
+    set$(ctx, "extraData", extraData);
   }
   const getAnchorElementIndex = () => {
     const state = refState.current;
@@ -587,14 +723,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   };
   const addTotalSize = 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;
@@ -605,19 +741,19 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
     }
     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) {
@@ -684,12 +820,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       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;
@@ -697,7 +831,17 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     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;
+    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) {
@@ -710,8 +854,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     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);
@@ -769,7 +916,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       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;
       }
@@ -777,7 +924,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         if (top <= scrollBottom) {
           endNoBuffer = i;
         }
-        if (top <= scrollBottom + scrollBuffer) {
+        if (top <= scrollBottom + scrollBufferBottom) {
           endBuffered = i;
         } else {
           break;
@@ -797,9 +944,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       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
     );
     if (state.enableScrollForNextCalculateItemsInView) {
       state.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
@@ -831,7 +978,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
               break;
             }
             const index = state.indexByKey.get(key);
-            const pos = peek$(ctx, `containerPosition${u}`);
+            const pos = peek$(ctx, `containerPosition${u}`).top;
             if (index < startBuffered || index > endBuffered) {
               const distance = Math.abs(pos - top2);
               if (index < 0 || distance > furthestDistance) {
@@ -850,7 +997,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             set$(ctx, `containerItemKey${containerId}`, 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(
@@ -874,19 +1021,31 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         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) {
@@ -899,12 +1058,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         }
       }
     }
-    if (layoutsPending.size > 0) {
-      for (const containerId of layoutsPending) {
-        set$(ctx, `containerDidLayout${containerId}`, true);
-      }
-      layoutsPending.clear();
-    }
+    set$(ctx, "containersDidLayout", true);
     if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
         state,
@@ -948,6 +1102,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
+      const { onEndReached } = callbacks.current;
       if (onEndReached) {
         if (!refState.current.isEndReached) {
           if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
@@ -969,6 +1124,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     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) {
@@ -997,13 +1153,13 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           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);
       }
@@ -1018,20 +1174,63 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   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);
@@ -1058,9 +1257,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       !isFirst
     );
   }, [isFirst, data, numColumnsProp]);
+  useEffect(() => {
+    set$(ctx, "extraData", extraData);
+  }, [extraData]);
   refState.current.renderItem = renderItem;
-  const lastItemKey = getId(data[data.length - 1]);
-  const stylePaddingTop = (_d = (_c = (_a = StyleSheet.flatten(style)) == null ? void 0 : _a.paddingTop) != null ? _c : (_b = 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 = StyleSheet.flatten(style)) == null ? void 0 : _d.paddingTop) != null ? _f : (_e = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _e.paddingTop) != null ? _g : 0;
   const initalizeStateVars = () => {
     set$(ctx, "lastItemKey", lastItemKey);
     set$(ctx, "numColumns", numColumnsProp);
@@ -1070,7 +1272,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     initalizeStateVars();
   }
   useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
-  const getRenderedItem = useCallback((key, containerId) => {
+  const getRenderedItem = useCallback((key) => {
     var _a2, _b2;
     const state = refState.current;
     if (!state) {
@@ -1081,89 +1283,27 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     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);
-      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);
-      useEffect(
-        () => () => {
-          ctx.mapViewabilityAmountCallbacks.delete(containerId);
-        },
-        []
-      );
+    const useViewabilityAmount2 = (callback) => {
+      useViewabilityAmount(callback);
     };
-    const useRecyclingEffect = (effect) => {
-      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 = 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;
@@ -1175,7 +1315,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     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);
@@ -1183,25 +1323,18 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     calculateItemsInView(state.scrollVelocity);
   });
   const updateItemSize = useCallback((containerId, itemKey, size) => {
-    var _a2;
-    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
+    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);
@@ -1211,7 +1344,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           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;
@@ -1239,11 +1372,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       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);
@@ -1252,8 +1388,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       if (onItemSizeChanged) {
         onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data2[index] });
       }
-    } else {
-      set$(ctx, `containerDidLayout${containerId}`, true);
     }
   }, []);
   const handleScrollDebounced = useCallback((velocity) => {
@@ -1263,11 +1397,15 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   }, []);
   const onLayout = 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;
@@ -1277,6 +1415,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         );
       }
     }
+    if (onLayoutProp) {
+      onLayoutProp(event);
+    }
   }, []);
   const handleScroll = useCallback(
     (event, fromSelf) => {
@@ -1330,9 +1471,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       };
       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 };
@@ -1344,12 +1485,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             scrollToIndex({ index, animated });
           }
         },
-        scrollToEnd: refScroller.current.scrollToEnd
+        scrollToEnd: () => refScroller.current.scrollToEnd()
       };
     },
     []
   );
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     ListComponent,
     {
       ...rest,
@@ -1374,9 +1515,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
       maintainVisibleContentPosition,
       scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : Platform.OS === "web" ? 16 : void 0,
+      waitForInitialLayout,
       style
     }
   );
 });
 
-export { LegendList };
+export { LegendList, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };