@legendapp/list 0.5.9 → 0.6.1

package/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React5 = require('react');
+var React4 = require('react');
 var reactNative = require('react-native');
 
 function _interopNamespace(e) {
@@ -21,13 +21,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 // src/LegendList.tsx
-var USE_CONTENT_INSET = reactNative.Platform.OS === "ios";
-var ContextState = React5__namespace.createContext(null);
+var ContextState = React4__namespace.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React5__namespace.useState(() => ({
+  const [value] = React4__namespace.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map(),
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
@@ -35,14 +34,14 @@ function StateProvider({ children }) {
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityAmountValues: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React5__namespace.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React4__namespace.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React5__namespace.useContext(ContextState);
+  return React4__namespace.useContext(ContextState);
 }
 function use$(signalName) {
-  const ctx = React5__namespace.useContext(ContextState);
-  const value = React5.useSyncExternalStore(
+  const ctx = React4__namespace.useContext(ContextState);
+  const value = React4.useSyncExternalStore(
     (onStoreChange) => listen$(ctx, signalName, onStoreChange),
     () => ctx.values.get(signalName)
   );
@@ -74,25 +73,6 @@ function set$(ctx, signalName, value) {
     }
   }
 }
-
-// src/$ScrollView.tsx
-var OFFSET_TEST = 0;
-var $ScrollView = React5__namespace.forwardRef(function $ScrollView2(props, ref) {
-  const { style, horizontal, ...rest } = props;
-  const scrollAdjust = use$("scrollAdjust");
-  const adjustProps = {};
-  if (scrollAdjust !== 0) {
-    if (USE_CONTENT_INSET) {
-      adjustProps.contentInset = horizontal ? { left: -scrollAdjust } : { top: -scrollAdjust + OFFSET_TEST };
-    } else {
-      adjustProps.style = horizontal ? { marginLeft: -scrollAdjust } : { marginTop: -scrollAdjust };
-      if (style) {
-        adjustProps.style = reactNative.StyleSheet.compose(style, adjustProps.style);
-      }
-    }
-  }
-  return /* @__PURE__ */ React5__namespace.createElement(reactNative.ScrollView, { ...rest, style, horizontal, ...adjustProps, ref });
-});
 var Container = ({
   id,
   recycleItems,
@@ -108,31 +88,35 @@ var Container = ({
   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 ? {
+  let style = horizontal ? {
     flexDirection: "row",
     position: "absolute",
-    top: visible ? otherAxisPos : -1e7,
+    top: otherAxisPos,
     bottom: numColumns > 1 ? null : 0,
     height: otherAxisSize,
     left: position
   } : {
     position: "absolute",
-    left: visible ? otherAxisPos : -1e7,
+    left: otherAxisPos,
     right: numColumns > 1 ? null : 0,
     width: otherAxisSize,
     top: position
   };
+  {
+    style.opacity = visible ? 1 : 0;
+  }
   const lastItemKey = use$("lastItemKey");
   const itemKey = use$(`containerItemKey${id}`);
-  const renderedItem = React5.useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey]);
-  return /* @__PURE__ */ React5__namespace.default.createElement(
+  const data = use$(`containerItemData${id}`);
+  const renderedItem = React4.useMemo(() => itemKey !== void 0 && getRenderedItem(itemKey, id), [itemKey, data]);
+  return /* @__PURE__ */ React4__namespace.default.createElement(
     reactNative.View,
     {
       style,
       onLayout: (event) => {
         const key = peek$(ctx, `containerItemKey${id}`);
         if (key !== void 0) {
-          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+          const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
           updateItemSize(id, key, size);
           const otherAxisSize2 = horizontal ? event.nativeEvent.layout.width : event.nativeEvent.layout.height;
           set$(ctx, "otherAxisSize", Math.max(otherAxisSize2, peek$(ctx, "otherAxisSize") || 0));
@@ -145,37 +129,36 @@ var Container = ({
         }
       }
     },
-    /* @__PURE__ */ React5__namespace.default.createElement(React5__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent)
+    /* @__PURE__ */ React4__namespace.default.createElement(React4__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent)
   );
 };
 var useAnimatedValue = reactNative.useAnimatedValue || ((initialValue) => {
-  return React5.useRef(new reactNative.Animated.Value(initialValue)).current;
+  return React4.useRef(new reactNative.Animated.Value(initialValue)).current;
 });
 function useValue$(key, getValue, key2) {
   var _a;
   const ctx = useStateContext();
-  const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
-  React5.useMemo(() => {
-    listen$(ctx, key, (v) => animValue.setValue(getValue ? getValue(v) : v));
+  const animValue = useAnimatedValue((_a = peek$(ctx, key)) != null ? _a : 0);
+  React4.useMemo(() => {
+    listen$(ctx, key, (v) => animValue.setValue(v));
   }, []);
   return animValue;
 }
 
 // src/Containers.tsx
-var Containers = React5__namespace.memo(function Containers2({
+var Containers = React4__namespace.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
   updateItemSize,
   getRenderedItem
 }) {
-  const ctx = useStateContext();
   const numContainers = use$("numContainersPooled");
-  const animSize = useValue$("totalSize", (v) => v + peek$(ctx, "scrollAdjust"));
+  const animSize = useValue$("totalSize");
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React5__namespace.createElement(
+      /* @__PURE__ */ React4__namespace.createElement(
         Container,
         {
           id: i,
@@ -190,20 +173,20 @@ var Containers = React5__namespace.memo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize } : { height: animSize };
-  return /* @__PURE__ */ React5__namespace.createElement(reactNative.Animated.View, { style }, containers);
+  return /* @__PURE__ */ React4__namespace.createElement(reactNative.Animated.View, { style }, containers);
 });
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React5__namespace.isValidElement(Component)) {
+  if (React4__namespace.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React5__namespace.createElement(Component, null);
+    return /* @__PURE__ */ React4__namespace.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React5__namespace.memo(function ListComponent2({
+var ListComponent = React4__namespace.memo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -221,18 +204,20 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
   ListEmptyComponentStyle,
   getRenderedItem,
   updateItemSize,
-  addTotalSize,
-  refScroller,
+  refScrollView,
+  maintainVisibleContentPosition,
   ...rest
 }) {
   const ctx = useStateContext();
   const animPaddingTop = useValue$("paddingTop");
   const animScrollAdjust = useValue$("scrollAdjust");
-  return /* @__PURE__ */ React5__namespace.createElement(
-    $ScrollView,
+  const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
+  return /* @__PURE__ */ React4__namespace.createElement(
+    reactNative.ScrollView,
     {
       ...rest,
       style,
+      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
       contentContainerStyle: [
         contentContainerStyle,
         horizontal ? {
@@ -243,15 +228,13 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
       onLayout,
       horizontal,
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
-      ref: refScroller
+      ref: refScrollView
     },
-    alignItemsAtEnd && /* @__PURE__ */ React5__namespace.createElement(reactNative.Animated.View, { style: { height: animPaddingTop } }),
-    ListHeaderComponent && /* @__PURE__ */ React5__namespace.createElement(
+    /* @__PURE__ */ React4__namespace.createElement(reactNative.Animated.View, { style: additionalSize }),
+    ListHeaderComponent && /* @__PURE__ */ React4__namespace.createElement(
       reactNative.Animated.View,
       {
-        style: reactNative.StyleSheet.compose(ListHeaderComponentStyle, {
-          top: animScrollAdjust
-        }),
+        style: ListHeaderComponentStyle,
         onLayout: (event) => {
           const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
           const prevSize = peek$(ctx, "headerSize") || 0;
@@ -262,16 +245,8 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
       },
       getComponent(ListHeaderComponent)
     ),
-    ListEmptyComponent && /* @__PURE__ */ React5__namespace.createElement(
-      reactNative.Animated.View,
-      {
-        style: reactNative.StyleSheet.compose(ListEmptyComponentStyle, {
-          top: animScrollAdjust
-        })
-      },
-      getComponent(ListEmptyComponent)
-    ),
-    /* @__PURE__ */ React5__namespace.createElement(
+    ListEmptyComponent && /* @__PURE__ */ React4__namespace.createElement(reactNative.Animated.View, { style: ListEmptyComponentStyle }, getComponent(ListEmptyComponent)),
+    /* @__PURE__ */ React4__namespace.createElement(
       Containers,
       {
         horizontal,
@@ -281,12 +256,49 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React5__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React4__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
+
+// src/ScrollAdjustHandler.ts
+var ScrollAdjustHandler = class {
+  constructor(ctx) {
+    this.ctx = ctx;
+    this.appliedAdjust = 0;
+    this.pendingAdjust = 0;
+    this.busy = false;
+    this.firstAdjust = true;
+    this.context = ctx;
+  }
+  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) {
+      this.busy = true;
+      if (this.firstAdjust) {
+        this.firstAdjust = false;
+        setTimeout(doAjdust, 50);
+      } else {
+        doAjdust();
+      }
+    }
+  }
+  getAppliedAdjust() {
+    return this.appliedAdjust;
+  }
+};
 var symbolFirst = Symbol();
 function useInit(cb) {
-  const refValue = React5.useRef(symbolFirst);
+  const refValue = React4.useRef(symbolFirst);
   if (refValue.current === symbolFirst) {
     refValue.current = cb();
   }
@@ -442,14 +454,13 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
 
 // src/LegendList.tsx
 var DEFAULT_DRAW_DISTANCE = 250;
-var INITIAL_SCROLL_ADJUST = 1e4;
 var POSITION_OUT_OF_VIEW = -1e7;
 var DEFAULT_ITEM_SIZE = 100;
-var LegendList = React5.forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React5__namespace.createElement(StateProvider, null, /* @__PURE__ */ React5__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+var LegendList = React4.forwardRef(function LegendList2(props, forwardedRef) {
+  return /* @__PURE__ */ React4__namespace.createElement(StateProvider, null, /* @__PURE__ */ React4__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
-var LegendListInner = React5.forwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b, _c, _d, _e, _f;
+var LegendListInner = React4.forwardRef(function LegendListInner2(props, forwardedRef) {
+  var _a, _b, _c, _d, _e;
   const {
     data,
     initialScrollIndex,
@@ -473,15 +484,15 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     onEndReached,
     onStartReached,
     ListEmptyComponent,
+    refScrollView,
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
   const ctx = useStateContext();
-  const internalRef = React5.useRef(null);
-  const refScroller = internalRef;
+  const refScroller = React4.useRef(null);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (item, index) => index.toString();
-  const refState = React5.useRef();
+  const refState = React4.useRef();
   const getId = (index) => {
     var _a2;
     const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
@@ -511,37 +522,38 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       } else if (estimatedItemSize) {
         offset = index * estimatedItemSize;
       }
-      return offset + (maintainVisibleContentPosition ? INITIAL_SCROLL_ADJUST : 0);
+      return offset / numColumnsProp;
     }
-    return void 0;
+    return 0;
   };
-  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React5.useMemo(calculateInitialOffset, []);
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React4.useMemo(calculateInitialOffset, []);
   if (!refState.current) {
+    const initialScrollLength = reactNative.Dimensions.get("window")[horizontal ? "width" : "height"];
     refState.current = {
       sizes: /* @__PURE__ */ new Map(),
       positions: /* @__PURE__ */ new Map(),
       columns: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
       animFrameLayout: null,
-      animFrameTotalSize: null,
-      isStartReached: true,
+      isStartReached: initialContentOffset < initialScrollLength * onStartReachedThreshold,
       isEndReached: false,
       isAtBottom: false,
       isAtTop: false,
       data,
       idsInFirstRender: void 0,
       hasScrolled: false,
-      scrollLength: reactNative.Dimensions.get("window")[horizontal ? "width" : "height"],
+      scrollLength: initialScrollLength,
       startBuffered: 0,
       startNoBuffer: 0,
       endBuffered: 0,
       endNoBuffer: 0,
       scroll: initialContentOffset || 0,
       totalSize: 0,
+      totalSizeBelowAnchor: 0,
       timeouts: /* @__PURE__ */ new Set(),
       viewabilityConfigCallbackPairs: void 0,
       renderItem: void 0,
-      scrollAdjustPending: maintainVisibleContentPosition ? INITIAL_SCROLL_ADJUST : 0,
+      scrollAdjustHandler: new ScrollAdjustHandler(ctx),
       nativeMarginTop: 0,
       scrollPrev: 0,
       scrollPrevTime: 0,
@@ -552,54 +564,141 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       contentSize: { width: 0, height: 0 },
       sizesLaidOut: __DEV__ ? /* @__PURE__ */ new Map() : void 0,
       timeoutSizeMessage: 0,
-      scrollTimer: void 0
+      scrollTimer: void 0,
+      belowAnchorElementPositions: void 0,
+      rowHeights: /* @__PURE__ */ new Map(),
+      startReachedBlockedByTimer: false
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
-    set$(ctx, "scrollAdjust", refState.current.scrollAdjustPending);
+    if (maintainVisibleContentPosition) {
+      if (initialScrollIndex) {
+        refState.current.anchorElement = {
+          coordinate: initialContentOffset,
+          id: getId(initialScrollIndex)
+        };
+      } else if (data.length) {
+        refState.current.anchorElement = {
+          coordinate: initialContentOffset,
+          id: getId(0)
+        };
+      } else {
+        console.warn("[legend-list] maintainVisibleContentPosition was not able to find an anchor element");
+      }
+    }
+    set$(ctx, "scrollAdjust", 0);
   }
-  const adjustScroll = (diff) => {
-    if (maintainVisibleContentPosition && refScroller.current) {
-      refState.current.scrollAdjustPending -= diff;
+  const getAnchorElementIndex = () => {
+    const state = refState.current;
+    if (state.anchorElement) {
+      const el = state.indexByKey.get(state.anchorElement.id);
+      return el;
     }
+    return void 0;
   };
-  const addTotalSize = React5.useCallback((key, add) => {
+  const addTotalSize = React4.useCallback((key, add, totalSizeBelowAnchor) => {
     const state = refState.current;
     const index = key === null ? 0 : state.indexByKey.get(key);
-    const isAbove = key !== null && index < (state.startNoBuffer || 0);
-    const prev = state.totalSize;
+    let isAboveAnchor = false;
+    if (maintainVisibleContentPosition) {
+      if (state.anchorElement && index < getAnchorElementIndex()) {
+        isAboveAnchor = true;
+      }
+    }
+    state.totalSize;
     if (key === null) {
       state.totalSize = add;
+      state.totalSizeBelowAnchor = totalSizeBelowAnchor;
     } else {
       state.totalSize += add;
+      if (isAboveAnchor) {
+        state.totalSizeBelowAnchor += add;
+      }
+    }
+    let applyAdjustValue = void 0;
+    if (maintainVisibleContentPosition) {
+      const newAdjust = state.anchorElement.coordinate - state.totalSizeBelowAnchor;
+      applyAdjustValue = -newAdjust;
+      state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
+      state.rowHeights.clear();
     }
     const doAdd = () => {
       const totalSize = state.totalSize;
-      state.animFrameTotalSize = null;
-      set$(ctx, "totalSize", totalSize);
+      let resultSize = totalSize;
+      if (applyAdjustValue !== void 0) {
+        resultSize -= applyAdjustValue;
+        refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
+          state.scroll -= diff;
+        });
+      }
+      set$(ctx, "totalSize", resultSize);
       if (alignItemsAtEnd) {
         doUpdatePaddingTop();
       }
     };
-    if (isAbove) {
-      adjustScroll(add);
+    doAdd();
+  }, []);
+  const getRowHeight = (n) => {
+    const { rowHeights } = refState.current;
+    if (numColumnsProp === 1) {
+      const id = getId(n);
+      return getItemSize(id, n, data[n]);
     }
-    if (!prev || key === null) {
-      doAdd();
-    } else if (!state.animFrameTotalSize) {
-      state.animFrameTotalSize = requestAnimationFrame(doAdd);
+    if (rowHeights.has(n)) {
+      return rowHeights.get(n) || 0;
     }
-  }, []);
-  const calculateItemsInView = React5.useCallback((speed = 0) => {
-    var _a2, _b2, _c2;
+    let rowHeight = 0;
+    const startEl = n * numColumnsProp;
+    for (let i = startEl; i < startEl + numColumnsProp; i++) {
+      const id = getId(i);
+      const size = getItemSize(id, i, data[i]);
+      rowHeight = Math.max(rowHeight, size);
+    }
+    rowHeights.set(n, rowHeight);
+    return rowHeight;
+  };
+  const buildElementPositionsBelowAnchor = () => {
+    const state = refState.current;
+    if (!state.anchorElement) {
+      return /* @__PURE__ */ new Map();
+    }
+    let top = state.anchorElement.coordinate;
+    const anchorIndex = state.indexByKey.get(state.anchorElement.id);
+    if (anchorIndex === 0) {
+      return /* @__PURE__ */ new Map();
+    }
+    const map = state.belowAnchorElementPositions || /* @__PURE__ */ new Map();
+    for (let i = anchorIndex - 1; i >= 0; i--) {
+      const id = getId(i);
+      const rowNumber = Math.floor(i / numColumnsProp);
+      if (i % numColumnsProp === 0) {
+        top -= getRowHeight(rowNumber);
+      }
+      map.set(id, top);
+    }
+    return map;
+  };
+  const getElementPositionBelowAchor = (id) => {
+    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");
+    }
+    return res;
+  };
+  const calculateItemsInView = React4.useCallback((speed) => {
+    var _a2, _b2, _c2, _d2;
     const state = refState.current;
     const {
       data: data2,
       scrollLength,
       scroll: scrollState,
-      startBuffered: startBufferedState,
+      startBufferedId: startBufferedIdOrig,
       positions,
-      sizes,
-      columns
+      columns,
+      scrollAdjustHandler
     } = state;
     if (state.animFrameLayout) {
       cancelAnimationFrame(state.animFrameLayout);
@@ -609,30 +708,35 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       return;
     }
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
-    const scrollAdjustPending = (_a2 = state.scrollAdjustPending) != null ? _a2 : 0;
+    const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
-    const scroll = Math.max(
-      0,
-      scrollState - topPad - (USE_CONTENT_INSET ? scrollAdjustPending : 0) + scrollExtra
-    );
+    const scroll = scrollState - previousScrollAdjust - topPad - scrollExtra;
     const scrollBottom = scroll + scrollLength;
     let startNoBuffer = null;
     let startBuffered = null;
+    let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    let loopStart = startBufferedState || 0;
-    if (startBufferedState) {
-      for (let i = startBufferedState; i >= 0; i--) {
-        const id = getId(i);
-        const top2 = positions.get(id);
-        if (top2 !== void 0) {
-          const size = getItemSize(id, i, data2[i]);
-          const bottom = top2 + size;
-          if (bottom > scroll - scrollBuffer) {
-            loopStart = i;
-          } else {
-            break;
-          }
+    const originalStartId = startBufferedIdOrig && state.indexByKey.get(startBufferedIdOrig);
+    let loopStart = originalStartId || 0;
+    const anchorElementIndex = getAnchorElementIndex();
+    for (let i = loopStart; i >= 0; i--) {
+      const id = getId(i);
+      let newPosition;
+      if (maintainVisibleContentPosition && anchorElementIndex && i < anchorElementIndex) {
+        newPosition = getElementPositionBelowAchor(id);
+        if (newPosition !== void 0) {
+          positions.set(id, newPosition);
+        }
+      }
+      const top2 = newPosition || positions.get(id);
+      if (top2 !== void 0) {
+        const size = getItemSize(id, i, data2[i]);
+        const bottom = top2 + size;
+        if (bottom > scroll - scrollBuffer) {
+          loopStart = i;
+        } else {
+          break;
         }
       }
     }
@@ -641,13 +745,28 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     if (loopStartMod > 0) {
       loopStart -= loopStartMod;
     }
-    let top = loopStart > 0 ? positions.get(getId(loopStart)) : 0;
+    let top = void 0;
     let column = 1;
     let maxSizeInRow = 0;
+    const getInitialTop = (i) => {
+      var _a3;
+      const id = getId(i);
+      let topOffset = 0;
+      if (positions.get(id)) {
+        topOffset = positions.get(id);
+      }
+      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+        topOffset = initialContentOffset || 0;
+      }
+      return topOffset;
+    };
     for (let i = loopStart; i < data2.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data2[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
+      if (top === void 0) {
+        top = getInitialTop(i);
+      }
       if (positions.get(id) !== top) {
         positions.set(id, top);
       }
@@ -659,6 +778,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       }
       if (startBuffered === null && top + size > scroll - scrollBuffer) {
         startBuffered = i;
+        startBufferedId = id;
       }
       if (startNoBuffer !== null) {
         if (top <= scrollBottom) {
@@ -679,6 +799,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     Object.assign(refState.current, {
       startBuffered,
+      startBufferedId,
       startNoBuffer,
       endBuffered,
       endNoBuffer
@@ -697,7 +818,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
           }
         }
         if (!isContained) {
-          const top2 = (positions.get(id) || 0) + scrollAdjustPending;
+          const top2 = positions.get(id) || 0;
           let furthestIndex = -1;
           let furthestDistance = 0;
           for (let u = 0; u < numContainers; u++) {
@@ -706,7 +827,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
               furthestIndex = u;
               break;
             }
-            const index = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(key);
+            const index = (_a2 = refState.current) == null ? void 0 : _a2.indexByKey.get(key);
             const pos = peek$(ctx, `containerPosition${u}`);
             if (index < startBuffered || index > endBuffered) {
               const distance = Math.abs(pos - top2);
@@ -718,10 +839,14 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
           }
           if (furthestIndex >= 0) {
             set$(ctx, `containerItemKey${furthestIndex}`, id);
+            const index = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(id);
+            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
           } else {
             const containerId = numContainers;
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
+            const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
+            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
             set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
@@ -741,28 +866,32 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       }
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
-        const itemIndex = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(itemKey);
+        const itemIndex = (_d2 = refState.current) == null ? void 0 : _d2.indexByKey.get(itemKey);
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
           if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
-            const prevPos = peek$(ctx, `containerPosition${i}`) - scrollAdjustPending;
+            const prevPos = peek$(ctx, `containerPosition${i}`);
             const pos = positions.get(id) || 0;
-            const size = sizes.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);
             }
           } else {
-            const pos = (positions.get(id) || 0) + scrollAdjustPending;
+            const pos = positions.get(id) || 0;
             const column2 = columns.get(id) || 1;
             const prevPos = peek$(ctx, `containerPosition${i}`);
             const prevColumn = peek$(ctx, `containerColumn${i}`);
-            if (pos >= 0 && pos !== prevPos) {
+            const prevData = peek$(ctx, `containerItemData${i}`);
+            if (pos > POSITION_OUT_OF_VIEW && pos !== prevPos) {
               set$(ctx, `containerPosition${i}`, pos);
             }
             if (column2 >= 0 && column2 !== prevColumn) {
               set$(ctx, `containerColumn${i}`, column2);
             }
+            if (prevData !== item) {
+              set$(ctx, `containerItemData${i}`, data2[itemIndex]);
+            }
           }
         }
       }
@@ -829,17 +958,20 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       return;
     }
     const { scrollLength, scroll } = refState.current;
-    const scrollAdjust = peek$(ctx, "scrollAdjust") || 0;
-    const distanceFromTop = scroll - scrollAdjust;
+    const distanceFromTop = scroll;
     refState.current.isAtTop = distanceFromTop < 0;
     if (onStartReached) {
-      if (!refState.current.isStartReached) {
+      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 >= onStartReachedThreshold * scrollLength) {
+        if (distanceFromTop >= 1.3 * onStartReachedThreshold * scrollLength) {
           refState.current.isStartReached = false;
         }
       }
@@ -853,43 +985,36 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     refState.current.data = data;
     let totalSize = 0;
+    let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
     let column = 1;
     let maxSizeInRow = 0;
     for (let i = 0; i < data.length; i++) {
       const key = getId(i);
       indexByKey.set(key, i);
+    }
+    refState.current.indexByKey = indexByKey;
+    const anchorElementIndex = getAnchorElementIndex();
+    for (let i = 0; i < data.length; i++) {
+      const key = getId(i);
       const size = getItemSize(key, i, data[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
-      if (maintainVisibleContentPosition && i < refState.current.startNoBuffer && !refState.current.indexByKey.has(key)) {
-        const size2 = getItemSize(key, i, data[i]);
-        adjustScroll(size2);
-      }
       column++;
       if (column > numColumnsProp) {
+        if (maintainVisibleContentPosition && anchorElementIndex !== void 0 && i < anchorElementIndex) {
+          totalSizeBelowIndex += maxSizeInRow;
+        }
         totalSize += maxSizeInRow;
         column = 1;
         maxSizeInRow = 0;
       }
     }
-    addTotalSize(null, totalSize);
-    if (maintainVisibleContentPosition) {
-      for (const [key, index] of refState.current.indexByKey) {
-        if (index < refState.current.startNoBuffer && !indexByKey.has(key)) {
-          const size = (_a = refState.current.sizes.get(key)) != null ? _a : 0;
-          if (size) {
-            adjustScroll(-size);
-          }
-        }
-      }
-    }
-    refState.current.indexByKey = indexByKey;
+    addTotalSize(null, totalSize, totalSizeBelowIndex);
     if (!isFirst) {
-      refState.current.isEndReached = false;
       const numContainers = peek$(ctx, "numContainers");
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
-        if (!keyExtractorProp || itemKey && ((_b = refState.current) == null ? void 0 : _b.indexByKey.get(itemKey)) === void 0) {
+        if (!keyExtractorProp || itemKey && ((_a = refState.current) == null ? void 0 : _a.indexByKey.get(itemKey)) === void 0) {
           set$(ctx, `containerItemKey${i}`, void 0);
           set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
           set$(ctx, `containerColumn${i}`, -1);
@@ -899,10 +1024,12 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         refState.current.sizes.clear();
         refState.current.positions;
       }
-      calculateItemsInView();
-      doMaintainScrollAtEnd(false);
-      checkAtTop();
-      checkAtBottom();
+      setTimeout(() => {
+        calculateItemsInView(refState.current.scrollVelocity);
+        doMaintainScrollAtEnd(false);
+        checkAtTop();
+        checkAtBottom();
+      }, 0);
     }
   }
   refState.current.renderItem = renderItem;
@@ -911,9 +1038,9 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
   set$(
     ctx,
     "stylePaddingTop",
-    (_f = (_e = (_c = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _c.paddingTop) != null ? _e : (_d = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _d.paddingTop) != null ? _f : 0
+    (_e = (_d = (_b = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _b.paddingTop) != null ? _d : (_c = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _c.paddingTop) != null ? _e : 0
   );
-  const getRenderedItem = React5.useCallback((key, containerId) => {
+  const getRenderedItem = React4.useCallback((key, containerId) => {
     var _a2, _b2;
     const state = refState.current;
     if (!state) {
@@ -933,7 +1060,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         }
       });
       ctx.mapViewabilityCallbacks.set(key2, callback);
-      React5.useEffect(
+      React4.useEffect(
         () => () => {
           ctx.mapViewabilityCallbacks.delete(key2);
         },
@@ -948,7 +1075,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         }
       });
       ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-      React5.useEffect(
+      React4.useEffect(
         () => () => {
           ctx.mapViewabilityAmountCallbacks.delete(containerId);
         },
@@ -956,7 +1083,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       );
     };
     const useRecyclingEffect = (effect) => {
-      React5.useEffect(() => {
+      React4.useEffect(() => {
         const state2 = refState.current;
         let prevIndex = index;
         let prevItem = state2.data[index];
@@ -984,7 +1111,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       }, []);
     };
     const useRecyclingState = (valueOrFun) => {
-      const stateInfo = React5.useState(
+      const stateInfo = React4.useState(
         () => typeof valueOrFun === "function" ? valueOrFun({
           index,
           item: refState.current.data[index],
@@ -1020,9 +1147,9 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * 2);
-    calculateItemsInView();
+    calculateItemsInView(refState.current.scrollVelocity);
   });
-  const updateItemSize = React5.useCallback((containerId, itemKey, size) => {
+  const updateItemSize = React4.useCallback((containerId, itemKey, size) => {
     var _a2;
     const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
     if (!data2) {
@@ -1031,21 +1158,16 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     const state = refState.current;
     const { sizes, indexByKey, idsInFirstRender, columns, sizesLaidOut } = state;
     const index = indexByKey.get(itemKey);
-    const wasInFirstRender = idsInFirstRender.has(itemKey);
-    const prevSize = sizes.get(itemKey) || (wasInFirstRender ? getItemSize(itemKey, index, data2[index]) : 0);
+    const numColumns = peek$(ctx, "numColumns");
+    const row = Math.floor(index / numColumns);
+    const prevSize = getRowHeight(row);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
-      const numColumns = peek$(ctx, "numColumns");
       if (numColumns > 1) {
+        const prevMaxSizeInRow = getRowHeight(row);
+        sizes.set(itemKey, size);
         const column = columns.get(itemKey);
         const loopStart = index - (column - 1);
-        let prevMaxSizeInRow = 0;
-        for (let i = loopStart; i < loopStart + numColumns; i++) {
-          const id = getId(i);
-          const size2 = getItemSize(id, i, data2[i]);
-          prevMaxSizeInRow = Math.max(prevMaxSizeInRow, size2);
-        }
-        sizes.set(itemKey, size);
         let nextMaxSizeInRow = 0;
         for (let i = loopStart; i < loopStart + numColumns; i++) {
           const id = getId(i);
@@ -1076,7 +1198,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
           );
         }, 1e3);
       }
-      addTotalSize(itemKey, diff);
+      addTotalSize(itemKey, diff, 0);
       doMaintainScrollAtEnd(true);
       const scrollVelocity = state.scrollVelocity;
       if (!state.animFrameLayout && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
@@ -1091,19 +1213,13 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       }
     }
   }, []);
-  const handleScrollDebounced = React5.useCallback((velocity) => {
-    var _a2, _b2;
-    const scrollAdjustPending = (_b2 = (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustPending) != null ? _b2 : 0;
-    set$(ctx, "scrollAdjust", scrollAdjustPending);
+  const handleScrollDebounced = React4.useCallback((velocity) => {
     calculateItemsInView(velocity);
     checkAtBottom();
     checkAtTop();
   }, []);
-  const onLayout = React5.useCallback((event) => {
-    let scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
-    if (!USE_CONTENT_INSET) {
-      scrollLength += event.nativeEvent.layout[horizontal ? "x" : "y"];
-    }
+  const onLayout = React4.useCallback((event) => {
+    const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
     refState.current.scrollLength = scrollLength;
     if (refState.current.hasScrolled) {
       doMaintainScrollAtEnd(false);
@@ -1121,7 +1237,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       }
     }
   }, []);
-  const handleScroll = React5.useCallback(
+  const handleScroll = React4.useCallback(
     (event, fromSelf) => {
       var _a2, _b2, _c2;
       if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c2 = event.nativeEvent.contentSize) == null ? void 0 : _c2.width) === 0) {
@@ -1164,7 +1280,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     },
     []
   );
-  React5.useImperativeHandle(
+  React4.useImperativeHandle(
     forwardedRef,
     () => {
       const scrollToIndex = ({ index, animated }) => {
@@ -1193,12 +1309,21 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     },
     []
   );
-  return /* @__PURE__ */ React5__namespace.createElement(
+  return /* @__PURE__ */ React4__namespace.createElement(
     ListComponent,
     {
       ...rest,
       horizontal,
-      refScroller,
+      refScrollView: (r) => {
+        refScroller.current = r;
+        if (refScrollView) {
+          if (typeof refScrollView === "function") {
+            refScrollView(r);
+          } else {
+            refScrollView.current = r;
+          }
+        }
+      },
       initialContentOffset,
       getRenderedItem,
       updateItemSize,
@@ -1206,8 +1331,8 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       onLayout,
       recycleItems,
       alignItemsAtEnd,
-      addTotalSize,
       ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
+      maintainVisibleContentPosition,
       style
     }
   );