@legendapp/list 1.0.0-beta.11 → 1.0.0-beta.12

package/index.mjs

@@ -1,11 +1,11 @@
-import * as React5 from 'react';
-import React5__default, { createContext, useMemo, forwardRef, useRef, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useContext, useState, useLayoutEffect } from 'react';
-import { Animated, ScrollView, View, Dimensions, StyleSheet, Platform, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
+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, Animated, ScrollView, Dimensions, StyleSheet, Platform, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
 
 // src/LegendList.tsx
-var ContextState = React5.createContext(null);
+var ContextState = React6.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React5.useState(() => ({
+  const [value] = React6.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map(),
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
@@ -13,10 +13,10 @@ function StateProvider({ children }) {
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityAmountValues: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React5.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React6.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React5.useContext(ContextState);
+  return React6.useContext(ContextState);
 }
 function createSelectorFunctions(ctx, signalName) {
   return {
@@ -25,8 +25,8 @@ function createSelectorFunctions(ctx, signalName) {
   };
 }
 function use$(signalName) {
-  const ctx = React5.useContext(ContextState);
-  const { subscribe, get } = React5.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const ctx = React6.useContext(ContextState);
+  const { subscribe, get } = React6.useMemo(() => createSelectorFunctions(ctx, signalName), []);
   const value = useSyncExternalStore(subscribe, get);
   return value;
 }
@@ -141,8 +141,37 @@ function useRecyclingState(valueOrFun) {
   });
   return stateInfo;
 }
-var LeanView = React5.forwardRef((props, ref) => {
-  return React5.createElement("RCTView", { ...props, ref });
+var DebugView = memo(function DebugView2({ state }) {
+  const paddingTop = use$("paddingTop");
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  useInterval(() => {
+    forceUpdate();
+  }, 100);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        paddingLeft: 4,
+        paddingBottom: 4,
+        // height: 100,
+        backgroundColor: "#FFFFFFCC"
+      }
+    },
+    /* @__PURE__ */ React.createElement(Text, null, "PaddingTop: ", paddingTop),
+    /* @__PURE__ */ React.createElement(Text, null, "At end: ", String(state.isAtBottom))
+  );
+});
+function useInterval(callback, delay) {
+  useEffect(() => {
+    const interval = setInterval(callback, delay);
+    return () => clearInterval(interval);
+  }, [delay]);
+}
+var LeanView = React6.forwardRef((props, ref) => {
+  return React6.createElement("RCTView", { ...props, ref });
 });
 LeanView.displayName = "RCTView";
 
@@ -153,6 +182,8 @@ var ANCHORED_POSITION_OUT_OF_VIEW = {
   relativeCoordinate: POSITION_OUT_OF_VIEW,
   top: POSITION_OUT_OF_VIEW
 };
+var ENABLE_DEVMODE = __DEV__ && false;
+var ENABLE_DEBUG_VIEW = __DEV__ && false;
 
 // src/Container.tsx
 var isNewArchitecture = global.nativeFabricUIManager != null;
@@ -164,7 +195,6 @@ var Container = ({
   updateItemSize,
   ItemSeparatorComponent
 }) => {
-  useStateContext();
   const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
@@ -223,12 +253,16 @@ var Container = ({
     () => ({ containerId: id, itemKey, index, value: data }),
     [id, itemKey, index, data]
   );
-  const contentFragment = /* @__PURE__ */ React5__default.createElement(React5__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React5__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent));
+  const contentFragment = /* @__PURE__ */ React6__default.createElement(React6__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
-    return /* @__PURE__ */ React5__default.createElement(LeanView, { style }, /* @__PURE__ */ React5__default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment));
+    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__ */ React5__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
+  return /* @__PURE__ */ React6__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
 var useAnimatedValue = useAnimatedValue$1 || ((initialValue) => {
   return useRef(new Animated.Value(initialValue)).current;
@@ -256,7 +290,7 @@ function useValue$(key, getValue, useMicrotask) {
 }
 
 // src/Containers.tsx
-var Containers = React5.memo(function Containers2({
+var Containers = React6.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -275,7 +309,7 @@ var Containers = React5.memo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React5.createElement(
+      /* @__PURE__ */ React6.createElement(
         Container,
         {
           id: i,
@@ -290,20 +324,71 @@ var Containers = React5.memo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
-  return /* @__PURE__ */ React5.createElement(Animated.View, { style }, containers);
+  return /* @__PURE__ */ React6.createElement(Animated.View, { style }, containers);
 });
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React5.isValidElement(Component)) {
+  if (React6.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React5.createElement(Component, null);
+    return /* @__PURE__ */ React6.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React5.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 = React6.memo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -327,14 +412,11 @@ var ListComponent = React5.memo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
-  const animPaddingTop = useValue$("paddingTop");
-  const animScrollAdjust = useValue$("scrollAdjust");
   const ScrollComponent = renderScrollComponent ? useMemo(
-    () => React5.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    () => React6.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
   ) : ScrollView;
-  const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     ScrollComponent,
     {
       ...rest,
@@ -352,8 +434,8 @@ var ListComponent = React5.memo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScrollView
     },
-    /* @__PURE__ */ React5.createElement(Animated.View, { style: additionalSize }),
-    ListHeaderComponent && /* @__PURE__ */ React5.createElement(
+    ENABLE_DEVMODE ? /* @__PURE__ */ React6.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6.createElement(PaddingAndAdjust, null),
+    ListHeaderComponent && /* @__PURE__ */ React6.createElement(
       Animated.View,
       {
         style: ListHeaderComponentStyle,
@@ -368,7 +450,7 @@ var ListComponent = React5.memo(function ListComponent2({
       getComponent(ListHeaderComponent)
     ),
     ListEmptyComponent && getComponent(ListEmptyComponent),
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       Containers,
       {
         horizontal,
@@ -379,7 +461,7 @@ var ListComponent = React5.memo(function ListComponent2({
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React5.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React6.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
 
@@ -390,7 +472,6 @@ var ScrollAdjustHandler = class {
     this.appliedAdjust = 0;
     this.pendingAdjust = 0;
     this.busy = false;
-    this.firstAdjust = true;
     this.context = ctx;
   }
   requestAdjust(adjust, onAdjusted) {
@@ -407,18 +488,14 @@ var ScrollAdjustHandler = class {
     };
     if (!this.busy) {
       this.busy = true;
-      if (this.firstAdjust) {
-        this.firstAdjust = false;
-        setTimeout(doAjdust, 50);
-      } else {
-        doAjdust();
-      }
+      doAjdust();
     }
   }
   getAppliedAdjust() {
     return this.appliedAdjust;
   }
 };
+var typedForwardRef = forwardRef;
 var useCombinedRef = (...refs) => {
   const callback = useCallback((element) => {
     for (const ref of refs) {
@@ -585,13 +662,13 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
 // src/LegendList.tsx
 var DEFAULT_DRAW_DISTANCE = 250;
 var DEFAULT_ITEM_SIZE = 100;
-var LegendList = forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React5.createElement(StateProvider, null, /* @__PURE__ */ React5.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, _e, _f, _g;
   const {
-    data,
+    data: dataProp,
     initialScrollIndex,
     initialScrollOffset,
     horizontal,
@@ -633,24 +710,25 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   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 data = dataProp;
     if (index) {
       let offset = 0;
       if (getEstimatedItemSize) {
@@ -677,7 +755,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       isEndReached: false,
       isAtBottom: false,
       isAtTop: false,
-      data,
+      data: dataProp,
       idsInFirstRender: void 0,
       hasScrolled: false,
       scrollLength: initialScrollLength,
@@ -709,14 +787,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       enableScrollForNextCalculateItemsInView: true,
       minIndexSizeChanged: 0
     };
-    refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
+    refState.current.idsInFirstRender = new Set(dataProp.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)
@@ -739,7 +817,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   };
   const addTotalSize = useCallback((key, add, totalSizeBelowAnchor) => {
     const state = refState.current;
-    const { scrollLength, indexByKey, anchorElement } = state;
+    const { indexByKey, anchorElement } = state;
     const index = key === null ? 0 : indexByKey.get(key);
     let isAboveAnchor = false;
     if (maintainVisibleContentPosition) {
@@ -756,10 +834,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         state.totalSizeBelowAnchor += add;
       }
     }
-    let applyAdjustValue = void 0;
-    const totalSize = state.totalSize;
-    let resultSize = totalSize;
-    if (maintainVisibleContentPosition) {
+    let applyAdjustValue = 0;
+    let resultSize = state.totalSize;
+    if (maintainVisibleContentPosition && anchorElement !== void 0) {
       const newAdjust = anchorElement.coordinate - state.totalSizeBelowAnchor;
       applyAdjustValue = -newAdjust;
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
@@ -777,7 +854,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
   }, []);
   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]);
@@ -830,7 +907,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   const calculateItemsInView = useCallback((speed) => {
     const state = refState.current;
     const {
-      data: data2,
+      data,
       scrollLength,
       scroll: scrollState,
       startBufferedId: startBufferedIdOrig,
@@ -841,7 +918,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (state.waitingForMicrotask) {
       state.waitingForMicrotask = false;
     }
-    if (!data2) {
+    if (!data) {
       return;
     }
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
@@ -887,7 +964,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;
@@ -916,9 +993,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
       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) {
         top = getInitialTop(i);
@@ -1006,13 +1083,13 @@ 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, `containerItemData${containerId}`, data[index]);
             set$(ctx, `containerPosition${containerId}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
@@ -1033,13 +1110,13 @@ 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}`).top;
             const pos = positions.get(id) || 0;
-            const size = getItemSize(id, itemIndex, data2[i]);
+            const size = getItemSize(id, itemIndex, data[i]);
             if (pos + size >= scroll && pos <= scrollBottom || prevPos + size >= scroll && prevPos <= scrollBottom) {
               set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
             }
@@ -1053,7 +1130,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             if (maintainVisibleContentPosition && itemIndex < anchorElementIndex) {
               const currentRow = Math.floor(itemIndex / numColumnsProp);
               const rowHeight = getRowHeight(currentRow);
-              const elementHeight = getItemSize(id, itemIndex, data2[i]);
+              const elementHeight = getItemSize(id, itemIndex, data[i]);
               const diff = rowHeight - elementHeight;
               pos.relativeCoordinate = pos.top + getRowHeight(currentRow) - diff;
               pos.type = "bottom";
@@ -1068,7 +1145,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
               set$(ctx, `containerColumn${i}`, column2);
             }
             if (prevData !== item) {
-              set$(ctx, `containerItemData${i}`, data2[itemIndex]);
+              set$(ctx, `containerItemData${i}`, data[itemIndex]);
             }
           }
         }
@@ -1098,7 +1175,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   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({
@@ -1114,21 +1194,19 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
     const { scrollLength, scroll, totalSize } = refState.current;
     if (totalSize > 0) {
-      const distanceFromEnd = totalSize - scroll - scrollLength;
+      const distanceFromEnd = totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0);
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
-      const { onEndReached } = callbacks.current;
-      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;
-          }
+      if (!refState.current.isEndReached) {
+        if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
+          refState.current.isEndReached = true;
+          const { onEndReached } = callbacks.current;
+          onEndReached == null ? void 0 : onEndReached({ distanceFromEnd });
+        }
+      } else {
+        if (distanceFromEnd >= onEndReachedThreshold * scrollLength) {
+          refState.current.isEndReached = false;
         }
       }
     }
@@ -1140,29 +1218,27 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const { scrollLength, scroll } = refState.current;
     const distanceFromTop = scroll;
     refState.current.isAtTop = distanceFromTop < 0;
-    const { onStartReached } = callbacks.current;
-    if (onStartReached) {
-      if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
-        if (distanceFromTop < onStartReachedThreshold * scrollLength) {
-          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;
-        }
+    if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
+      if (distanceFromTop < onStartReachedThreshold * scrollLength) {
+        refState.current.isStartReached = true;
+        const { onStartReached } = callbacks.current;
+        onStartReached == null ? void 0 : 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 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++) {
@@ -1178,28 +1254,28 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           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) {
+  if (isFirst || dataProp !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
+    if (!keyExtractorProp && !isFirst && dataProp !== refState.current.data) {
       refState.current.positions.clear();
     }
-    refState.current.data = data;
+    refState.current.data = dataProp;
     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++) {
+    for (let i = 0; i < dataProp.length; i++) {
       const key = getId(i);
       if (__DEV__) {
         if (indexByKey.has(key)) {
@@ -1218,7 +1294,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (!isFirst) {
       if (maintainVisibleContentPosition) {
         if (refState.current.anchorElement == null || indexByKey.get(refState.current.anchorElement.id) == null) {
-          if (data.length) {
+          if (dataProp.length) {
             const newAnchorElement = {
               coordinate: 0,
               id: getId(0)
@@ -1235,7 +1311,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         }
       } else {
         if (refState.current.startBufferedId != null && newPositions.get(refState.current.startBufferedId) == null) {
-          if (data.length) {
+          if (dataProp.length) {
             refState.current.startBufferedId = getId(0);
           } else {
             refState.current.startBufferedId = void 0;
@@ -1248,9 +1324,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
     }
     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) {
@@ -1269,15 +1345,15 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   }
   useEffect(() => {
     checkResetContainers(
-      /*reset*/
-      !isFirst
+      /*isFirst*/
+      isFirst
     );
-  }, [isFirst, data, numColumnsProp]);
+  }, [isFirst, dataProp, numColumnsProp]);
   useEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   refState.current.renderItem = renderItem;
-  const lastItemKey = data.length > 0 ? getId(data.length - 1) : void 0;
+  const lastItemKey = dataProp.length > 0 ? getId(dataProp.length - 1) : void 0;
   const stylePaddingTop = (_g = (_f = (_d = StyleSheet.flatten(style)) == null ? void 0 : _d.paddingTop) != null ? _f : (_e = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _e.paddingTop) != null ? _g : 0;
   const initalizeStateVars = () => {
     set$(ctx, "lastItemKey", lastItemKey);
@@ -1294,7 +1370,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (!state) {
       return null;
     }
-    const { data: data2, indexByKey } = state;
+    const { data, indexByKey } = state;
     const index = indexByKey.get(key);
     if (index === void 0) {
       return null;
@@ -1312,7 +1388,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       return useRecyclingState(valueOrFun);
     };
     const renderedItem = (_b2 = (_a2 = refState.current).renderItem) == null ? void 0 : _b2.call(_a2, {
-      item: data2[index],
+      item: data[index],
       index,
       useViewability: useViewability2,
       useViewabilityAmount: useViewabilityAmount2,
@@ -1328,7 +1404,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     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 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);
@@ -1336,31 +1412,33 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * 2);
-    calculateItemsInView(state.scrollVelocity);
+    if (initialScrollIndex) {
+      requestAnimationFrame(() => {
+        calculateItemsInView(state.scrollVelocity);
+      });
+    } else {
+      calculateItemsInView(state.scrollVelocity);
+    }
   });
   const updateItemSize = useCallback((containerId, itemKey, size) => {
     const state = refState.current;
-    const { sizes, indexByKey, columns, sizesLaidOut, data: data2 } = state;
-    if (!data2) {
+    const { sizes, indexByKey, columns, sizesLaidOut, data, rowHeights } = state;
+    if (!data) {
       return;
     }
     const index = indexByKey.get(itemKey);
     const numColumns = peek$(ctx, "numColumns");
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
-    const prevSize = getItemSize(itemKey, index, data2);
+    const prevSize = getItemSize(itemKey, index, data);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
       if (numColumns > 1) {
+        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 - prevSize;
+        rowHeights.delete(rowNumber);
+        const sizeInRow = getRowHeight(rowNumber);
+        diff = sizeInRow - prevSizeInRow;
       } else {
         sizes.set(itemKey, size);
         diff = size - prevSize;
@@ -1402,7 +1480,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         }
       }
       if (onItemSizeChanged) {
-        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data2[index] });
+        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data[index] });
       }
     }
   }, []);
@@ -1496,6 +1574,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           refScroller.current.scrollTo({ ...offsetObj, animated });
         },
         scrollToItem: ({ item, animated }) => {
+          const { data } = refState.current;
           const index = data.indexOf(item);
           if (index !== -1) {
             scrollToIndex({ index, animated });
@@ -1506,7 +1585,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     },
     []
   );
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
     ListComponent,
     {
       ...rest,
@@ -1519,13 +1598,13 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       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,
       style
     }
-  );
+  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React6.createElement(DebugView, { state: refState.current }));
 });
 
 export { LegendList, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };