@legendapp/list 1.0.0-beta.2 → 1.0.0-beta.21

package/index.mjs

@@ -1,22 +1,23 @@
-import * as React4 from 'react';
-import React4__default, { useMemo, forwardRef, useRef, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useState } from 'react';
-import { Animated, ScrollView, View, Dimensions, StyleSheet, Platform, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
+import * as React6 from 'react';
+import React6__default, { createContext, memo, useReducer, useEffect, useMemo, useRef, useCallback, useImperativeHandle, useSyncExternalStore, useContext, useState, forwardRef, useLayoutEffect } from 'react';
+import { View, Text, Platform, Animated, ScrollView, Dimensions, StyleSheet, RefreshControl } from 'react-native';
 
 // src/LegendList.tsx
-var ContextState = React4.createContext(null);
+var ContextState = React6.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React4.useState(() => ({
+  const [value] = React6.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map(),
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityValues: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
-    mapViewabilityAmountValues: /* @__PURE__ */ new Map()
+    mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
+    columnWrapperStyle: void 0
   }));
-  return /* @__PURE__ */ React4.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React6.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React4.useContext(ContextState);
+  return React6.useContext(ContextState);
 }
 function createSelectorFunctions(ctx, signalName) {
   return {
@@ -25,8 +26,8 @@ function createSelectorFunctions(ctx, signalName) {
   };
 }
 function use$(signalName) {
-  const ctx = React4.useContext(ContextState);
-  const { subscribe, get } = React4.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const ctx = React6.useContext(ContextState);
+  const { subscribe, get } = React6.useMemo(() => createSelectorFunctions(ctx, signalName), []);
   const value = useSyncExternalStore(subscribe, get);
   return value;
 }
@@ -56,76 +57,278 @@ function set$(ctx, signalName, value) {
     }
   }
 }
+function getContentSize(ctx) {
+  const { values } = ctx;
+  const stylePaddingTop = values.get("stylePaddingTop") || 0;
+  const headerSize = values.get("headerSize") || 0;
+  const footerSize = values.get("footerSize") || 0;
+  const totalSize = values.get("totalSize") || 0;
+  return headerSize + footerSize + totalSize + stylePaddingTop;
+}
+var symbolFirst = Symbol();
+function useInit(cb) {
+  const refValue = 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 DebugView = memo(function DebugView2({ state }) {
+  const ctx = useStateContext();
+  const totalSize = use$("totalSize");
+  const contentSize = getContentSize(ctx);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  useInterval(() => {
+    forceUpdate();
+  }, 100);
+  return /* @__PURE__ */ React6.createElement(
+    View,
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        paddingLeft: 4,
+        paddingBottom: 4,
+        // height: 100,
+        backgroundColor: "#FFFFFFCC"
+      }
+    },
+    /* @__PURE__ */ React6.createElement(Text, null, "TotalSize: ", totalSize),
+    /* @__PURE__ */ React6.createElement(Text, null, "ContentSize: ", contentSize),
+    /* @__PURE__ */ React6.createElement(Text, null, "At end: ", String(state.isAtBottom))
+  );
+});
+function useInterval(callback, delay) {
+  useEffect(() => {
+    const interval = setInterval(callback, delay);
+    return () => clearInterval(interval);
+  }, [delay]);
+}
+var LeanViewComponent = React6.forwardRef((props, ref) => {
+  return React6.createElement("RCTView", { ...props, ref });
+});
+LeanViewComponent.displayName = "RCTView";
+var LeanView = Platform.OS === "android" || Platform.OS === "ios" ? LeanViewComponent : View;
+
+// src/constants.ts
+var POSITION_OUT_OF_VIEW = -1e7;
+var ANCHORED_POSITION_OUT_OF_VIEW = {
+  type: "top",
+  relativeCoordinate: POSITION_OUT_OF_VIEW,
+  top: POSITION_OUT_OF_VIEW
+};
+var ENABLE_DEVMODE = __DEV__ && false;
+var ENABLE_DEBUG_VIEW = __DEV__ && false;
 
 // src/Container.tsx
+var isNewArchitecture = global.nativeFabricUIManager != null;
 var Container = ({
   id,
   recycleItems,
   horizontal,
-  waitForInitialLayout,
   getRenderedItem,
   updateItemSize,
   ItemSeparatorComponent
 }) => {
   const ctx = useStateContext();
-  const position = use$(`containerPosition${id}`);
+  const columnWrapperStyle = ctx.columnWrapperStyle;
+  const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
+  const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
   const numColumns = use$("numColumns");
+  const lastItemKeys = use$("lastItemKeys");
+  const itemKey = use$(`containerItemKey${id}`);
+  const data = use$(`containerItemData${id}`);
+  const extraData = use$("extraData");
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
+  let verticalPaddingStyles;
+  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    verticalPaddingStyles = {
+      paddingBottom: !lastItemKeys.has(itemKey) ? rowGap || gap || void 0 : void 0,
+      // Apply horizontal padding based on column position (first, middle, or last)
+      paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
+      paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : 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,
+    ...verticalPaddingStyles || {}
   };
-  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 extraData = use$("extraData");
-  const renderedItem = useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey, data, extraData]);
-  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 renderedItemInfo = useMemo(
+    () => itemKey !== void 0 ? getRenderedItem(itemKey) : null,
+    [itemKey, data, extraData]
+  );
+  const { index, renderedItem } = renderedItemInfo || {};
+  const onLayout = (event) => {
+    if (itemKey !== void 0) {
+      const layout = event.nativeEvent.layout;
+      const size = Math.floor(layout[horizontal ? "width" : "height"] * 8) / 8;
+      if (size === 0) {
+        if (layout.x !== POSITION_OUT_OF_VIEW && layout.y !== POSITION_OUT_OF_VIEW) {
+          console.log(
+            "[WARN] Container 0 height reported, possible bug in LegendList",
+            id,
+            itemKey,
+            event.nativeEvent
+          );
         }
+        return;
       }
-    },
-    /* @__PURE__ */ React4__default.createElement(React4__default.Fragment, { key: recycleItems ? void 0 : itemKey }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent)
+      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);
+          }
+        }
+      }
+    }, [itemKey]);
+  }
+  const contextValue = useMemo(
+    () => ({ containerId: id, itemKey, index, value: data }),
+    [id, itemKey, index, data]
   );
+  const contentFragment = /* @__PURE__ */ React6__default.createElement(React6__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.has(itemKey) && /* @__PURE__ */ React6__default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
+  if (maintainVisibleContentPosition) {
+    const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
+    if (ENABLE_DEVMODE) {
+      anchorStyle.borderColor = position.type === "top" ? "red" : "blue";
+      anchorStyle.borderWidth = 1;
+    }
+    return /* @__PURE__ */ React6__default.createElement(LeanView, { style }, /* @__PURE__ */ React6__default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment, ENABLE_DEVMODE && /* @__PURE__ */ React6__default.createElement(Text, { style: { position: "absolute", top: 0, left: 0, zIndex: 1e3 } }, position.top)));
+  }
+  return /* @__PURE__ */ React6__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
-var useAnimatedValue = useAnimatedValue$1 || ((initialValue) => {
+var typedForwardRef = forwardRef;
+var typedMemo = memo;
+var useAnimatedValue = (initialValue) => {
   return useRef(new Animated.Value(initialValue)).current;
-});
-function useValue$(key, getValue, key2) {
+};
+
+// src/useValue$.ts
+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 = typedMemo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -134,18 +337,23 @@ var Containers = React4.memo(function Containers2({
   getRenderedItem
 }) {
   const numContainers = use$("numContainersPooled");
-  const animSize = useValue$("totalSize");
+  const animSize = useValue$(
+    "totalSizeWithScrollAdjust",
+    void 0,
+    /*useMicrotask*/
+    true
+  );
+  const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ React6.createElement(
         Container,
         {
           id: i,
           key: i,
           recycleItems,
           horizontal,
-          waitForInitialLayout,
           getRenderedItem,
           updateItemSize,
           ItemSeparatorComponent
@@ -153,21 +361,72 @@ 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__ */ React6.createElement(Animated.View, { style }, containers);
 });
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React4.isValidElement(Component)) {
+  if (React6.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React4.createElement(Component, null);
+    return /* @__PURE__ */ React6.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React4.memo(function ListComponent2({
+var PaddingAndAdjust = () => {
+  const animPaddingTop = useValue$("paddingTop", (v) => v, true);
+  const animScrollAdjust = useValue$("scrollAdjust", (v) => v, true);
+  const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
+  return /* @__PURE__ */ React6.createElement(Animated.View, { style: additionalSize });
+};
+var PaddingAndAdjustDevMode = () => {
+  const animPaddingTop = useValue$("paddingTop", (v) => v, true);
+  const animScrollAdjust = useValue$("scrollAdjust", (v) => v, true);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(Animated.View, { style: { marginTop: animScrollAdjust } }), /* @__PURE__ */ React6.createElement(Animated.View, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React6.createElement(
+    Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: Animated.add(animScrollAdjust, Animated.multiply(animScrollAdjust, -1)),
+        height: animPaddingTop,
+        left: 0,
+        right: 0,
+        backgroundColor: "green"
+      }
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: animPaddingTop,
+        height: animScrollAdjust,
+        left: -16,
+        right: -16,
+        backgroundColor: "lightblue"
+      }
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: animPaddingTop,
+        height: Animated.multiply(animScrollAdjust, -1),
+        width: 8,
+        right: 4,
+        borderStyle: "dashed",
+        borderColor: "blue",
+        borderWidth: 1,
+        backgroundColor: "lightblue"
+        //backgroundColor: "blue",
+      }
+    }
+  ));
+};
+var ListComponent = typedMemo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -183,28 +442,27 @@ var ListComponent = React4.memo(function ListComponent2({
   ListFooterComponent,
   ListFooterComponentStyle,
   ListEmptyComponent,
-  ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
   refScrollView,
   maintainVisibleContentPosition,
   renderScrollComponent,
+  onRefresh,
+  refreshing,
+  progressViewOffset,
   ...rest
 }) {
   const ctx = useStateContext();
-  const animPaddingTop = useValue$("paddingTop");
-  const animScrollAdjust = useValue$("scrollAdjust");
   const ScrollComponent = renderScrollComponent ? useMemo(
-    () => React4.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    () => React6.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
   ) : ScrollView;
-  const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React6.createElement(
     ScrollComponent,
     {
       ...rest,
       style,
-      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
+      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
       contentContainerStyle: [
         contentContainerStyle,
         horizontal ? {
@@ -217,34 +475,41 @@ 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(
-      Animated.View,
+    ENABLE_DEVMODE ? /* @__PURE__ */ React6.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6.createElement(PaddingAndAdjust, null),
+    ListHeaderComponent && /* @__PURE__ */ React6.createElement(
+      View,
       {
         style: ListHeaderComponentStyle,
         onLayout: (event) => {
           const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
-          const prevSize = peek$(ctx, "headerSize") || 0;
-          if (size !== prevSize) {
-            set$(ctx, "headerSize", size);
-          }
+          set$(ctx, "headerSize", size);
         }
       },
       getComponent(ListHeaderComponent)
     ),
-    ListEmptyComponent && /* @__PURE__ */ React4.createElement(Animated.View, { style: ListEmptyComponentStyle }, getComponent(ListEmptyComponent)),
-    /* @__PURE__ */ React4.createElement(
+    ListEmptyComponent && getComponent(ListEmptyComponent),
+    /* @__PURE__ */ React6.createElement(
       Containers,
       {
         horizontal,
         recycleItems,
         waitForInitialLayout,
         getRenderedItem,
-        ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
+        ItemSeparatorComponent,
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React4.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React6.createElement(
+      View,
+      {
+        style: ListFooterComponentStyle,
+        onLayout: (event) => {
+          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+          set$(ctx, "footerSize", size);
+        }
+      },
+      getComponent(ListFooterComponent)
+    )
   );
 });
 
@@ -253,45 +518,57 @@ var ScrollAdjustHandler = class {
   constructor(ctx) {
     this.ctx = ctx;
     this.appliedAdjust = 0;
-    this.pendingAdjust = 0;
     this.busy = false;
-    this.firstAdjust = true;
+    this.isPaused = false;
     this.context = ctx;
   }
+  doAjdust() {
+    set$(this.context, "scrollAdjust", this.appliedAdjust);
+    this.busy = false;
+  }
   requestAdjust(adjust, onAdjusted) {
     const oldAdjustTop = peek$(this.context, "scrollAdjust");
     if (oldAdjustTop === adjust) {
       return;
     }
     this.appliedAdjust = adjust;
-    this.pendingAdjust = adjust;
-    const doAjdust = () => {
-      set$(this.context, "scrollAdjust", this.pendingAdjust);
-      onAdjusted(oldAdjustTop - this.pendingAdjust);
-      this.busy = false;
-    };
-    if (!this.busy) {
+    if (!this.busy && !this.isPaused) {
       this.busy = true;
-      if (this.firstAdjust) {
-        this.firstAdjust = false;
-        setTimeout(doAjdust, 50);
-      } else {
-        doAjdust();
-      }
+      this.doAjdust();
+      onAdjusted(oldAdjustTop - adjust);
     }
   }
   getAppliedAdjust() {
     return this.appliedAdjust;
   }
-};
-var symbolFirst = Symbol();
-function useInit(cb) {
-  const refValue = useRef(symbolFirst);
-  if (refValue.current === symbolFirst) {
-    refValue.current = cb();
+  pauseAdjust() {
+    this.isPaused = true;
   }
-  return refValue.current;
-}
+  // return true if it was paused
+  unPauseAdjust() {
+    if (this.isPaused) {
+      this.isPaused = false;
+      this.doAjdust();
+      return true;
+    }
+    return false;
+  }
+};
+var useCombinedRef = (...refs) => {
+  const callback = useCallback((element) => {
+    for (const ref of refs) {
+      if (!ref) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(element);
+      } else {
+        ref.current = element;
+      }
+    }
+  }, refs);
+  return callback;
+};
 
 // src/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
@@ -442,15 +719,14 @@ 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 }));
+var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
+  return /* @__PURE__ */ React6.createElement(StateProvider, null, /* @__PURE__ */ React6.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
-var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef) {
+var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
   var _a, _b, _c, _d;
   const {
-    data,
+    data: dataProp,
     initialScrollIndex,
     initialScrollOffset,
     horizontal,
@@ -463,51 +739,73 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     alignItemsAtEnd = false,
     maintainVisibleContentPosition = false,
     onScroll: onScrollProp,
+    onMomentumScrollEnd,
     numColumns: numColumnsProp = 1,
+    columnWrapperStyle,
     keyExtractor: keyExtractorProp,
     renderItem,
     estimatedItemSize,
     getEstimatedItemSize,
-    onEndReached,
-    onStartReached,
     ListEmptyComponent,
     onItemSizeChanged,
     scrollEventThrottle,
     refScrollView,
+    waitForInitialLayout = true,
     extraData,
+    onLayout: onLayoutProp,
+    onRefresh,
+    refreshing,
+    progressViewOffset,
+    refreshControl,
     ...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();
+  ctx.columnWrapperStyle = columnWrapperStyle;
   const refScroller = useRef(null);
+  const combinedRef = useCombinedRef(refScroller, refScrollView);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (item, index) => index.toString();
   const refState = useRef();
   const getId = (index) => {
     var _a2;
-    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
-    if (!data2) {
+    const data = (_a2 = refState.current) == null ? void 0 : _a2.data;
+    if (!data) {
       return "";
     }
-    const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
+    const ret = index < data.length ? keyExtractor ? keyExtractor(data[index], index) : index : null;
     return `${ret}`;
   };
-  const getItemSize = (key, index, data2) => {
+  const getItemSize = (key, index, data) => {
     var _a2;
     const sizeKnown = refState.current.sizes.get(key);
     if (sizeKnown !== void 0) {
       return sizeKnown;
     }
-    const size = (_a2 = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize) != null ? _a2 : DEFAULT_ITEM_SIZE;
+    const size = (_a2 = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize) != null ? _a2 : DEFAULT_ITEM_SIZE;
     refState.current.sizes.set(key, size);
     return size;
   };
-  const calculateInitialOffset = (index = initialScrollIndex) => {
+  const calculateOffsetForIndex = (index = initialScrollIndex) => {
+    const data = dataProp;
     if (index) {
       let offset = 0;
-      if (getEstimatedItemSize) {
+      const canGetSize = !!refState.current;
+      if (canGetSize || getEstimatedItemSize) {
+        const sizeFn = (index2) => {
+          if (canGetSize) {
+            return getItemSize(getId(index2), index2, data[index2]);
+          }
+          return getEstimatedItemSize(index2, data[index2]);
+        };
         for (let i = 0; i < index; i++) {
-          offset += getEstimatedItemSize(i, data[i]);
+          offset += sizeFn(i);
         }
       } else if (estimatedItemSize) {
         offset = index * estimatedItemSize;
@@ -516,7 +814,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
     return 0;
   };
-  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(calculateInitialOffset, []);
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(calculateOffsetForIndex, []);
   if (!refState.current) {
     const initialScrollLength = Dimensions.get("window")[horizontal ? "width" : "height"];
     refState.current = {
@@ -524,13 +822,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       positions: /* @__PURE__ */ new Map(),
       columns: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
-      animFrameLayout: null,
       isStartReached: initialContentOffset < initialScrollLength * onStartReachedThreshold,
       isEndReached: false,
       isAtBottom: false,
       isAtTop: false,
-      data,
-      idsInFirstRender: void 0,
+      data: dataProp,
       hasScrolled: false,
       scrollLength: initialScrollLength,
       startBuffered: 0,
@@ -557,18 +853,19 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       belowAnchorElementPositions: void 0,
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
-      layoutsPending: /* @__PURE__ */ new Set(),
+      endReachedBlockedByTimer: false,
       scrollForNextCalculateItemsInView: void 0,
-      enableScrollForNextCalculateItemsInView: true
+      enableScrollForNextCalculateItemsInView: true,
+      minIndexSizeChanged: 0,
+      numPendingInitialLayout: 0
     };
-    refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
       if (initialScrollIndex) {
         refState.current.anchorElement = {
           coordinate: initialContentOffset,
           id: getId(initialScrollIndex)
         };
-      } else if (data.length) {
+      } else if (dataProp.length) {
         refState.current.anchorElement = {
           coordinate: initialContentOffset,
           id: getId(0)
@@ -578,8 +875,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
     }
     set$(ctx, "scrollAdjust", 0);
+    set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
     set$(ctx, "extraData", extraData);
   }
+  const didDataChange = refState.current.data !== dataProp;
+  refState.current.data = dataProp;
   const getAnchorElementIndex = () => {
     const state = refState.current;
     if (state.anchorElement) {
@@ -590,14 +890,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 { 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;
@@ -607,28 +907,28 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         state.totalSizeBelowAnchor += add;
       }
     }
-    let applyAdjustValue = void 0;
-    if (maintainVisibleContentPosition) {
-      const newAdjust = state.anchorElement.coordinate - state.totalSizeBelowAnchor;
+    let applyAdjustValue = 0;
+    let resultSize = state.totalSize;
+    if (maintainVisibleContentPosition && anchorElement !== void 0) {
+      const newAdjust = anchorElement.coordinate - state.totalSizeBelowAnchor;
       applyAdjustValue = -newAdjust;
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
       state.rowHeights.clear();
+      if (applyAdjustValue !== void 0) {
+        resultSize -= applyAdjustValue;
+        refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
+          state.scroll -= diff;
+        });
+      }
     }
-    const totalSize = state.totalSize;
-    let resultSize = totalSize;
-    if (applyAdjustValue !== void 0) {
-      resultSize -= applyAdjustValue;
-      refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
-        state.scroll -= diff;
-      });
-    }
-    set$(ctx, "totalSize", resultSize);
+    set$(ctx, "totalSize", state.totalSize);
+    set$(ctx, "totalSizeWithScrollAdjust", resultSize);
     if (alignItemsAtEnd) {
       doUpdatePaddingTop();
     }
   }, []);
   const getRowHeight = (n) => {
-    const { rowHeights } = refState.current;
+    const { rowHeights, data } = refState.current;
     if (numColumnsProp === 1) {
       const id = getId(n);
       return getItemSize(id, n, data[n]);
@@ -668,39 +968,47 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     return map;
   };
   const getElementPositionBelowAchor = (id) => {
+    var _a2;
     const state = refState.current;
     if (!refState.current.belowAnchorElementPositions) {
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
     }
     const res = state.belowAnchorElementPositions.get(id);
     if (res === void 0) {
-      throw new Error("Undefined position below achor");
+      console.warn(`Undefined position below achor ${id} ${(_a2 = state.anchorElement) == null ? void 0 : _a2.id}`);
+      return 0;
     }
     return res;
   };
   const calculateItemsInView = useCallback((speed) => {
+    var _a2;
     const state = refState.current;
     const {
-      data: data2,
+      data,
       scrollLength,
       scroll: scrollState,
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler,
-      layoutsPending
+      scrollAdjustHandler
     } = state;
-    if (state.animFrameLayout) {
-      cancelAnimationFrame(state.animFrameLayout);
-      state.animFrameLayout = null;
-    }
-    if (!data2) {
+    if (!data || scrollLength === 0) {
       return;
     }
     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) {
@@ -713,8 +1021,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);
@@ -727,7 +1038,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
       const top2 = newPosition || positions.get(id);
       if (top2 !== void 0) {
-        const size = getItemSize(id, i, data2[i]);
+        const size = getItemSize(id, i, data[i]);
         const bottom = top2 + size;
         if (bottom > scroll - scrollBuffer) {
           loopStart = i;
@@ -745,22 +1056,22 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     let column = 1;
     let maxSizeInRow = 0;
     const getInitialTop = (i) => {
-      var _a2;
+      var _a3;
       const id = getId(i);
       let topOffset = 0;
       if (positions.get(id)) {
         topOffset = positions.get(id);
       }
-      if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
-        topOffset = initialContentOffset || 0;
+      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+        topOffset = state.anchorElement.coordinate;
       }
       return topOffset;
     };
-    for (let i = loopStart; i < data2.length; i++) {
+    for (let i = loopStart; i < data.length; i++) {
       const id = getId(i);
-      const size = getItemSize(id, i, data2[i]);
+      const size = getItemSize(id, i, data[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
-      if (top === void 0) {
+      if (top === void 0 || id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
         top = getInitialTop(i);
       }
       if (positions.get(id) !== top) {
@@ -772,7 +1083,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;
       }
@@ -780,7 +1091,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;
@@ -834,7 +1145,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) {
@@ -846,14 +1157,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           if (furthestIndex >= 0) {
             set$(ctx, `containerItemKey${furthestIndex}`, id);
             const index = state.indexByKey.get(id);
-            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
+            set$(ctx, `containerItemData${furthestIndex}`, data[index]);
           } else {
             const containerId = numContainers;
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
             const index = state.indexByKey.get(id);
-            set$(ctx, `containerItemData${containerId}`, data2[index]);
-            set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
+            set$(ctx, `containerItemData${containerId}`, data[index]);
+            set$(ctx, `containerPosition${containerId}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
               console.warn(
@@ -873,40 +1184,49 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
         const itemIndex = state.indexByKey.get(itemKey);
-        const item = data2[itemIndex];
+        const item = data[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]);
+            const size = getItemSize(id, itemIndex, data[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, data[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) {
               set$(ctx, `containerColumn${i}`, column2);
             }
             if (prevData !== item) {
-              set$(ctx, `containerItemData${i}`, data2[itemIndex]);
+              set$(ctx, `containerItemData${i}`, data[itemIndex]);
             }
           }
         }
       }
     }
-    if (layoutsPending.size > 0) {
-      for (const containerId of layoutsPending) {
-        set$(ctx, `containerDidLayout${containerId}`, true);
-      }
-      layoutsPending.clear();
+    if (state.numPendingInitialLayout === 0) {
+      state.numPendingInitialLayout = state.endBuffered - state.startBuffered + 1;
     }
     if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
@@ -922,16 +1242,19 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   }, []);
   const doUpdatePaddingTop = () => {
     if (alignItemsAtEnd) {
-      const { scrollLength, totalSize } = refState.current;
-      const listPaddingTop = peek$(ctx, "stylePaddingTop") || 0;
-      const paddingTop = Math.max(0, Math.floor(scrollLength - totalSize - listPaddingTop));
+      const { scrollLength } = refState.current;
+      const contentSize = getContentSize(ctx);
+      const paddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
       set$(ctx, "paddingTop", paddingTop);
     }
   };
   const doMaintainScrollAtEnd = (animated) => {
     const state = refState.current;
     if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd) {
-      state.scroll = state.totalSize - state.scrollLength + peek$(ctx, "paddingTop");
+      const paddingTop = peek$(ctx, "paddingTop") || 0;
+      if (paddingTop > 0) {
+        state.scroll = 0;
+      }
       requestAnimationFrame(() => {
         var _a2;
         (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
@@ -941,28 +1264,48 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       return true;
     }
   };
+  const checkThreshold = (distance, threshold, isReached, isBlockedByTimer, onReached, blockTimer) => {
+    const distanceAbs = Math.abs(distance);
+    const isAtThreshold = distanceAbs < threshold;
+    if (!isReached && !isBlockedByTimer) {
+      if (isAtThreshold) {
+        onReached == null ? void 0 : onReached(distance);
+        blockTimer == null ? void 0 : blockTimer(true);
+        setTimeout(() => {
+          blockTimer == null ? void 0 : blockTimer(false);
+        }, 700);
+        return true;
+      }
+    } else {
+      if (distance >= 1.3 * threshold) {
+        return false;
+      }
+    }
+    return isReached;
+  };
   const checkAtBottom = () => {
     if (!refState.current) {
       return;
     }
-    const { scrollLength, scroll, totalSize } = refState.current;
-    if (totalSize > 0) {
-      const distanceFromEnd = totalSize - scroll - scrollLength;
-      if (refState.current) {
-        refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
-      }
-      if (onEndReached) {
-        if (!refState.current.isEndReached) {
-          if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
-            refState.current.isEndReached = true;
-            onEndReached({ distanceFromEnd });
-          }
-        } else {
-          if (distanceFromEnd >= onEndReachedThreshold * scrollLength) {
-            refState.current.isEndReached = false;
-          }
+    const { scrollLength, scroll, hasScrolled } = refState.current;
+    const contentSize = getContentSize(ctx);
+    if (contentSize > 0 && hasScrolled) {
+      const distanceFromEnd = contentSize - scroll - scrollLength;
+      const distanceFromEndAbs = Math.abs(distanceFromEnd);
+      refState.current.isAtBottom = distanceFromEndAbs < scrollLength * maintainScrollAtEndThreshold;
+      refState.current.isEndReached = checkThreshold(
+        distanceFromEnd,
+        onEndReachedThreshold * scrollLength,
+        refState.current.isEndReached,
+        refState.current.endReachedBlockedByTimer,
+        (distance) => {
+          var _a2, _b2;
+          return (_b2 = (_a2 = callbacks.current).onEndReached) == null ? void 0 : _b2.call(_a2, { distanceFromEnd: distance });
+        },
+        (block) => {
+          refState.current.endReachedBlockedByTimer = block;
         }
-      }
+      );
     }
   };
   const checkAtTop = () => {
@@ -971,74 +1314,114 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
     const { scrollLength, scroll } = refState.current;
     const distanceFromTop = scroll;
-    refState.current.isAtTop = distanceFromTop < 0;
-    if (onStartReached) {
-      if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
-        if (distanceFromTop < onStartReachedThreshold * scrollLength) {
-          refState.current.isStartReached = true;
-          onStartReached({ distanceFromStart: scroll });
-          refState.current.startReachedBlockedByTimer = true;
-          setTimeout(() => {
-            refState.current.startReachedBlockedByTimer = false;
-          }, 700);
-        }
-      } else {
-        if (distanceFromTop >= 1.3 * onStartReachedThreshold * scrollLength) {
-          refState.current.isStartReached = false;
-        }
+    const distanceFromTopAbs = Math.abs(distanceFromTop);
+    refState.current.isAtTop = distanceFromTopAbs < 0;
+    refState.current.isStartReached = checkThreshold(
+      distanceFromTop,
+      onStartReachedThreshold * scrollLength,
+      refState.current.isStartReached,
+      refState.current.startReachedBlockedByTimer,
+      (distance) => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = callbacks.current).onStartReached) == null ? void 0 : _b2.call(_a2, { distanceFromStart: distance });
+      },
+      (block) => {
+        refState.current.startReachedBlockedByTimer = block;
       }
-    }
+    );
   };
-  const checkResetContainers = (reset) => {
+  const checkResetContainers = (isFirst2) => {
     const state = refState.current;
     if (state) {
-      state.data = data;
-      if (reset) {
+      state.data = dataProp;
+      if (!isFirst2) {
         refState.current.scrollForNextCalculateItemsInView = void 0;
         const numContainers = peek$(ctx, "numContainers");
         for (let i = 0; i < numContainers; i++) {
           const itemKey = peek$(ctx, `containerItemKey${i}`);
           if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
             set$(ctx, `containerItemKey${i}`, void 0);
-            set$(ctx, `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);
+        const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
+        if (!didMaintainScrollAtEnd && dataProp.length > state.data.length) {
+          state.isEndReached = false;
+        }
+        checkAtTop();
+        checkAtBottom();
       }
-      const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
-      if (!didMaintainScrollAtEnd && data.length > state.data.length) {
-        state.isEndReached = false;
-      }
-      checkAtTop();
-      checkAtBottom();
     }
   };
-  const isFirst = !refState.current.renderItem;
-  if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
-    if (!keyExtractorProp && !isFirst && data !== refState.current.data) {
-      refState.current.sizes.clear();
-      refState.current.positions.clear();
-    }
-    refState.current.data = data;
+  const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
+    var _a2, _b2, _c2;
     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++) {
+    if (!refState.current) {
+      return;
+    }
+    for (let i = 0; i < dataProp.length; i++) {
       const key = getId(i);
+      if (__DEV__) {
+        if (indexByKey.has(key)) {
+          console.error(
+            `[legend-list] Error: Detected overlapping key (${key}) which causes missing items and gaps and other terrrible things. Check that keyExtractor returns unique values.`
+          );
+        }
+      }
       indexByKey.set(key, i);
+      if (!forgetPositions && refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
+        newPositions.set(key, refState.current.positions.get(key));
+      }
     }
     refState.current.indexByKey = indexByKey;
+    refState.current.positions = newPositions;
+    if (!forgetPositions && !isFirst) {
+      if (maintainVisibleContentPosition) {
+        if (refState.current.anchorElement == null || indexByKey.get(refState.current.anchorElement.id) == null) {
+          if (dataProp.length) {
+            const newAnchorElement = {
+              coordinate: 0,
+              id: getId(0)
+            };
+            refState.current.anchorElement = newAnchorElement;
+            (_a2 = refState.current.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
+            (_b2 = refScroller.current) == null ? void 0 : _b2.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 (dataProp.length) {
+            refState.current.startBufferedId = getId(0);
+          } else {
+            refState.current.startBufferedId = void 0;
+          }
+          (_c2 = refScroller.current) == null ? void 0 : _c2.scrollTo({ x: 0, y: 0, animated: false });
+          setTimeout(() => {
+            calculateItemsInView(0);
+          }, 0);
+        }
+      }
+    }
     const anchorElementIndex = getAnchorElementIndex();
-    for (let i = 0; i < data.length; i++) {
+    for (let i = 0; i < dataProp.length; i++) {
       const key = getId(i);
-      const size = getItemSize(key, i, data[i]);
+      const size = getItemSize(key, i, dataProp[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
       column++;
       if (column > numColumnsProp) {
@@ -1054,170 +1437,134 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       totalSize += maxSizeInRow;
     }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
+  };
+  const isFirst = !refState.current.renderItem;
+  if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
+    if (!keyExtractorProp && !isFirst && didDataChange) {
+      refState.current.sizes.clear();
+      refState.current.positions.clear();
+    }
+    calcTotalSizesAndPositions({ forgetPositions: false });
   }
   useEffect(() => {
     checkResetContainers(
-      /*reset*/
-      !isFirst
+      /*isFirst*/
+      isFirst
     );
-  }, [isFirst, data, numColumnsProp]);
+  }, [isFirst, dataProp, numColumnsProp]);
   useEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   refState.current.renderItem = renderItem;
-  const lastItemKey = getId(data[data.length - 1]);
+  const memoizedLastItemKeys = useMemo(() => {
+    if (!dataProp.length) return [];
+    return new Set(
+      Array.from({ length: Math.min(numColumnsProp, dataProp.length) }, (_, i) => getId(dataProp.length - 1 - i))
+    );
+  }, [dataProp.length, numColumnsProp, dataProp.slice(-numColumnsProp).toString()]);
   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 initalizeStateVars = () => {
-    set$(ctx, "lastItemKey", lastItemKey);
+    set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
     set$(ctx, "stylePaddingTop", stylePaddingTop);
   };
   if (isFirst) {
     initalizeStateVars();
   }
-  useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
-  const getRenderedItem = useCallback((key, containerId) => {
+  useEffect(initalizeStateVars, [memoizedLastItemKeys, numColumnsProp, stylePaddingTop]);
+  const getRenderedItem = useCallback((key) => {
     var _a2, _b2;
     const state = refState.current;
     if (!state) {
       return null;
     }
-    const { data: data2, indexByKey } = state;
+    const { data, indexByKey } = state;
     const index = indexByKey.get(key);
     if (index === void 0) {
       return null;
     }
-    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],
+      item: data[index],
       index,
-      useViewability,
-      useViewabilityAmount,
-      useRecyclingEffect,
-      useRecyclingState
+      useViewability: useViewability2,
+      useViewabilityAmount: useViewabilityAmount2,
+      useRecyclingEffect: useRecyclingEffect2,
+      useRecyclingState: useRecyclingState2
     });
-    return renderedItem;
+    return { index, item: data[index], renderedItem };
   }, []);
-  useInit(() => {
+  const doInitialAllocateContainers = () => {
     var _a2;
+    const state = refState.current;
+    const scrollLength = state.scrollLength;
+    if (scrollLength > 0 && !peek$(ctx, "numContainers")) {
+      const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, dataProp[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
+      const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
+      for (let i = 0; i < numContainers; i++) {
+        set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
+        set$(ctx, `containerColumn${i}`, -1);
+      }
+      set$(ctx, "numContainers", numContainers);
+      set$(ctx, "numContainersPooled", numContainers * 2);
+      if (initialScrollIndex) {
+        requestAnimationFrame(() => {
+          calculateItemsInView(state.scrollVelocity);
+        });
+      } else {
+        calculateItemsInView(state.scrollVelocity);
+      }
+    }
+  };
+  useInit(() => {
     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, `containerColumn${i}`, -1);
-    }
-    set$(ctx, "numContainers", numContainers);
-    set$(ctx, "numContainersPooled", numContainers * 2);
-    calculateItemsInView(state.scrollVelocity);
+    doInitialAllocateContainers();
   });
   const updateItemSize = useCallback((containerId, itemKey, size) => {
-    var _a2;
-    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
-    if (!data2) {
+    const state = refState.current;
+    const { sizes, indexByKey, sizesLaidOut, data, rowHeights } = state;
+    if (!data) {
       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, data);
+    let needsCalculate = false;
+    if (state.numPendingInitialLayout > 0) {
+      state.numPendingInitialLayout--;
+      if (state.numPendingInitialLayout === 0) {
+        needsCalculate = true;
+        state.numPendingInitialLayout = -1;
+        queueMicrotask(() => {
+          set$(ctx, "containersDidLayout", true);
+        });
+      }
     }
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
+      needsCalculate = true;
       if (numColumns > 1) {
-        const prevMaxSizeInRow = getRowHeight(row);
+        const rowNumber = Math.floor(index / numColumnsProp);
+        const prevSizeInRow = getRowHeight(rowNumber);
         sizes.set(itemKey, size);
-        const column = columns.get(itemKey);
-        const loopStart = index - (column - 1);
-        let nextMaxSizeInRow = 0;
-        for (let i = loopStart; i < loopStart + numColumns && i < data2.length; i++) {
-          const id = getId(i);
-          const size2 = getItemSize(id, i, data2[i]);
-          nextMaxSizeInRow = Math.max(nextMaxSizeInRow, size2);
-        }
-        diff = nextMaxSizeInRow - prevMaxSizeInRow;
+        rowHeights.delete(rowNumber);
+        const sizeInRow = getRowHeight(rowNumber);
+        diff = sizeInRow - prevSizeInRow;
       } else {
         sizes.set(itemKey, size);
         diff = size - prevSize;
@@ -1244,22 +1591,21 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       refState.current.scrollForNextCalculateItemsInView = void 0;
       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);
-          });
-        } else {
-          calculateItemsInView(state.scrollVelocity);
-        }
-      }
       if (onItemSizeChanged) {
-        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data2[index] });
+        onItemSizeChanged({
+          size,
+          previous: prevSize,
+          index,
+          itemKey,
+          itemData: data[index]
+        });
+      }
+    }
+    if (needsCalculate) {
+      const scrollVelocity = state.scrollVelocity;
+      if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
+        calculateItemsInView(state.scrollVelocity);
       }
-    } else {
-      set$(ctx, `containerDidLayout${containerId}`, true);
     }
   }, []);
   const handleScrollDebounced = useCallback((velocity) => {
@@ -1269,11 +1615,17 @@ 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;
     refState.current.scrollLength = scrollLength;
+    doInitialAllocateContainers();
     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;
@@ -1283,6 +1635,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         );
       }
     }
+    if (onLayoutProp) {
+      onLayoutProp(event);
+    }
   }, []);
   const handleScroll = useCallback(
     (event, fromSelf) => {
@@ -1329,60 +1684,110 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   useImperativeHandle(
     forwardedRef,
     () => {
-      const scrollToIndex = ({ index, animated }) => {
-        const offsetObj = calculateInitialOffset(index);
-        const offset = horizontal ? { x: offsetObj, y: 0 } : { x: 0, y: offsetObj };
-        refScroller.current.scrollTo({ ...offset, animated });
+      const scrollToIndex = ({
+        index,
+        viewOffset = 0,
+        animated = true
+      }) => {
+        var _a2;
+        const state = refState.current;
+        const firstIndexOffset = calculateOffsetForIndex(index);
+        let firstIndexScrollPostion = firstIndexOffset - viewOffset;
+        const diff = Math.abs(state.scroll - firstIndexScrollPostion);
+        const needsReanchoring = maintainVisibleContentPosition && diff > 100;
+        if (needsReanchoring) {
+          const id = getId(index);
+          state.anchorElement = { id, coordinate: firstIndexOffset };
+          (_a2 = state.belowAnchorElementPositions) == null ? void 0 : _a2.clear();
+          state.positions.clear();
+          calcTotalSizesAndPositions({ forgetPositions: true });
+          state.scrollForNextCalculateItemsInView = void 0;
+          state.startBufferedId = id;
+          state.minIndexSizeChanged = index;
+          firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
+        }
+        state.scrollAdjustHandler.pauseAdjust();
+        setTimeout(
+          () => {
+            const wasAdjusted = state.scrollAdjustHandler.unPauseAdjust();
+            if (wasAdjusted) {
+              refState.current.scrollVelocity = 0;
+              refState.current.scrollHistory = [];
+              calculateItemsInView(0);
+            }
+          },
+          animated ? 1e3 : 50
+        );
+        const offset = horizontal ? { x: firstIndexScrollPostion, y: 0 } : { x: 0, y: firstIndexScrollPostion };
+        if (maintainVisibleContentPosition) {
+          setTimeout(() => {
+            refScroller.current.scrollTo({ ...offset, animated });
+          }, 50);
+        } else {
+          refScroller.current.scrollTo({ ...offset, animated });
+        }
       };
       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 };
           refScroller.current.scrollTo({ ...offsetObj, animated });
         },
         scrollToItem: ({ item, animated }) => {
+          const { data } = refState.current;
           const index = data.indexOf(item);
           if (index !== -1) {
             scrollToIndex({ index, animated });
           }
         },
-        scrollToEnd: refScroller.current.scrollToEnd
+        scrollToEnd: (options) => refScroller.current.scrollToEnd(options)
       };
     },
     []
   );
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
     ListComponent,
     {
       ...rest,
       horizontal,
-      refScrollView: (r) => {
-        refScroller.current = r;
-        if (refScrollView) {
-          if (typeof refScrollView === "function") {
-            refScrollView(r);
-          } else {
-            refScrollView.current = r;
-          }
-        }
-      },
+      refScrollView: combinedRef,
       initialContentOffset,
       getRenderedItem,
       updateItemSize,
       handleScroll,
+      onMomentumScrollEnd: (event) => {
+        const wasPaused = refState.current.scrollAdjustHandler.unPauseAdjust();
+        if (wasPaused) {
+          refState.current.scrollVelocity = 0;
+          refState.current.scrollHistory = [];
+          calculateItemsInView(0);
+        }
+        if (onMomentumScrollEnd) {
+          onMomentumScrollEnd(event);
+        }
+      },
       onLayout,
       recycleItems,
       alignItemsAtEnd,
-      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
+      ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
       maintainVisibleContentPosition,
       scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : Platform.OS === "web" ? 16 : void 0,
+      waitForInitialLayout,
+      refreshControl: refreshControl != null ? refreshControl : onRefresh && /* @__PURE__ */ React6.createElement(
+        RefreshControl,
+        {
+          refreshing: !!refreshing,
+          onRefresh,
+          progressViewOffset
+        }
+      ),
       style
     }
-  );
+  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React6.createElement(DebugView, { state: refState.current }));
 });
 
-export { LegendList };
+export { LegendList, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };