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

package/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React5 = require('react');
+var React6 = require('react');
 var reactNative = require('react-native');
 
 function _interopNamespace(e) {
@@ -21,12 +21,12 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 
 // src/LegendList.tsx
-var ContextState = React5__namespace.createContext(null);
+var ContextState = React6__namespace.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React5__namespace.useState(() => ({
+  const [value] = React6__namespace.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map(),
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
@@ -34,10 +34,10 @@ function StateProvider({ children }) {
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityAmountValues: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React5__namespace.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React6__namespace.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React5__namespace.useContext(ContextState);
+  return React6__namespace.useContext(ContextState);
 }
 function createSelectorFunctions(ctx, signalName) {
   return {
@@ -46,9 +46,9 @@ function createSelectorFunctions(ctx, signalName) {
   };
 }
 function use$(signalName) {
-  const ctx = React5__namespace.useContext(ContextState);
-  const { subscribe, get } = React5__namespace.useMemo(() => createSelectorFunctions(ctx, signalName), []);
-  const value = React5.useSyncExternalStore(subscribe, get);
+  const ctx = React6__namespace.useContext(ContextState);
+  const { subscribe, get } = React6__namespace.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const value = React6.useSyncExternalStore(subscribe, get);
   return value;
 }
 function listen$(ctx, signalName, cb) {
@@ -79,7 +79,7 @@ function set$(ctx, signalName, value) {
 }
 var symbolFirst = Symbol();
 function useInit(cb) {
-  const refValue = React5.useRef(symbolFirst);
+  const refValue = React6.useRef(symbolFirst);
   if (refValue.current === symbolFirst) {
     refValue.current = cb();
   }
@@ -87,10 +87,10 @@ function useInit(cb) {
 }
 
 // src/ContextContainer.ts
-var ContextContainer = React5.createContext(null);
+var ContextContainer = React6.createContext(null);
 function useViewability(configId, callback) {
   const ctx = useStateContext();
-  const { containerId } = React5.useContext(ContextContainer);
+  const { containerId } = React6.useContext(ContextContainer);
   const key = containerId + configId;
   useInit(() => {
     const value = ctx.mapViewabilityValues.get(key);
@@ -99,7 +99,7 @@ function useViewability(configId, callback) {
     }
   });
   ctx.mapViewabilityCallbacks.set(key, callback);
-  React5.useEffect(
+  React6.useEffect(
     () => () => {
       ctx.mapViewabilityCallbacks.delete(key);
     },
@@ -108,7 +108,7 @@ function useViewability(configId, callback) {
 }
 function useViewabilityAmount(callback) {
   const ctx = useStateContext();
-  const { containerId } = React5.useContext(ContextContainer);
+  const { containerId } = React6.useContext(ContextContainer);
   useInit(() => {
     const value = ctx.mapViewabilityAmountValues.get(containerId);
     if (value) {
@@ -116,7 +116,7 @@ function useViewabilityAmount(callback) {
     }
   });
   ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
-  React5.useEffect(
+  React6.useEffect(
     () => () => {
       ctx.mapViewabilityAmountCallbacks.delete(containerId);
     },
@@ -124,12 +124,12 @@ function useViewabilityAmount(callback) {
   );
 }
 function useRecyclingEffect(effect) {
-  const { index, value } = React5.useContext(ContextContainer);
-  const prevValues = React5.useRef({
+  const { index, value } = React6.useContext(ContextContainer);
+  const prevValues = React6.useRef({
     prevIndex: void 0,
     prevItem: void 0
   });
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     let ret = void 0;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
@@ -147,8 +147,8 @@ function useRecyclingEffect(effect) {
   }, [index, value]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value } = React5.useContext(ContextContainer);
-  const stateInfo = React5.useState(
+  const { index, value } = React6.useContext(ContextContainer);
+  const stateInfo = React6.useState(
     () => typeof valueOrFun === "function" ? valueOrFun({
       index,
       item: value,
@@ -162,10 +162,40 @@ function useRecyclingState(valueOrFun) {
   });
   return stateInfo;
 }
-var LeanView = React5__namespace.forwardRef((props, ref) => {
-  return React5__namespace.createElement("RCTView", { ...props, ref });
+var DebugView = React6.memo(function DebugView2({ state }) {
+  const paddingTop = use$("paddingTop");
+  const [, forceUpdate] = React6.useReducer((x) => x + 1, 0);
+  useInterval(() => {
+    forceUpdate();
+  }, 100);
+  return /* @__PURE__ */ React.createElement(
+    reactNative.View,
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        paddingLeft: 4,
+        paddingBottom: 4,
+        // height: 100,
+        backgroundColor: "#FFFFFFCC"
+      }
+    },
+    /* @__PURE__ */ React.createElement(reactNative.Text, null, "PaddingTop: ", paddingTop),
+    /* @__PURE__ */ React.createElement(reactNative.Text, null, "At end: ", String(state.isAtBottom))
+  );
+});
+function useInterval(callback, delay) {
+  React6.useEffect(() => {
+    const interval = setInterval(callback, delay);
+    return () => clearInterval(interval);
+  }, [delay]);
+}
+var LeanViewComponent = React6__namespace.forwardRef((props, ref) => {
+  return React6__namespace.createElement("RCTView", { ...props, ref });
 });
-LeanView.displayName = "RCTView";
+LeanViewComponent.displayName = "RCTView";
+var LeanView = reactNative.Platform.OS === "android" || reactNative.Platform.OS === "ios" ? LeanViewComponent : reactNative.View;
 
 // src/constants.ts
 var POSITION_OUT_OF_VIEW = -1e7;
@@ -174,6 +204,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;
@@ -185,7 +217,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;
@@ -210,7 +241,7 @@ var Container = ({
   const itemKey = use$(`containerItemKey${id}`);
   const data = use$(`containerItemData${id}`);
   const extraData = use$("extraData");
-  const renderedItemInfo = React5.useMemo(
+  const renderedItemInfo = React6.useMemo(
     () => itemKey !== void 0 && getRenderedItem(itemKey),
     [itemKey, data, extraData]
   );
@@ -225,9 +256,9 @@ var Container = ({
       updateItemSize(id, itemKey, size);
     }
   };
-  const ref = React5.useRef(null);
+  const ref = React6.useRef(null);
   if (isNewArchitecture) {
-    React5.useLayoutEffect(() => {
+    React6.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);
@@ -240,25 +271,31 @@ var Container = ({
       }
     }, [itemKey]);
   }
-  const contextValue = React5.useMemo(
+  const contextValue = React6.useMemo(
     () => ({ containerId: id, itemKey, index, value: data }),
     [id, itemKey, index, data]
   );
-  const contentFragment = /* @__PURE__ */ React5__namespace.default.createElement(React5__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React5__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent));
+  const contentFragment = /* @__PURE__ */ React6__namespace.default.createElement(React6__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
-    return /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style }, /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment));
+    if (ENABLE_DEVMODE) {
+      anchorStyle.borderColor = position.type === "top" ? "red" : "blue";
+      anchorStyle.borderWidth = 1;
+    }
+    return /* @__PURE__ */ React6__namespace.default.createElement(LeanView, { style }, /* @__PURE__ */ React6__namespace.default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment, ENABLE_DEVMODE && /* @__PURE__ */ React6__namespace.default.createElement(reactNative.Text, { style: { position: "absolute", top: 0, left: 0, zIndex: 1e3 } }, position.top)));
   }
-  return /* @__PURE__ */ React5__namespace.default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
+  return /* @__PURE__ */ React6__namespace.default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
 var useAnimatedValue = reactNative.useAnimatedValue || ((initialValue) => {
-  return React5.useRef(new reactNative.Animated.Value(initialValue)).current;
+  return React6.useRef(new reactNative.Animated.Value(initialValue)).current;
 });
+
+// src/useValue$.ts
 function useValue$(key, getValue, useMicrotask) {
   var _a;
   const ctx = useStateContext();
   const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
-  React5.useMemo(() => {
+  React6.useMemo(() => {
     let newValue = void 0;
     listen$(ctx, key, (v) => {
       if (useMicrotask && newValue === void 0) {
@@ -277,7 +314,7 @@ function useValue$(key, getValue, useMicrotask) {
 }
 
 // src/Containers.tsx
-var Containers = React5__namespace.memo(function Containers2({
+var Containers = React6__namespace.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -296,7 +333,7 @@ var Containers = React5__namespace.memo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React5__namespace.createElement(
+      /* @__PURE__ */ React6__namespace.createElement(
         Container,
         {
           id: i,
@@ -311,20 +348,71 @@ var Containers = React5__namespace.memo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
-  return /* @__PURE__ */ React5__namespace.createElement(reactNative.Animated.View, { style }, containers);
+  return /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style }, containers);
 });
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React5__namespace.isValidElement(Component)) {
+  if (React6__namespace.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React5__namespace.createElement(Component, null);
+    return /* @__PURE__ */ React6__namespace.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React5__namespace.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__namespace.createElement(reactNative.Animated.View, { style: additionalSize });
+};
+var PaddingAndAdjustDevMode = () => {
+  const animPaddingTop = useValue$("paddingTop", (v) => v, true);
+  const animScrollAdjust = useValue$("scrollAdjust", (v) => v, true);
+  return /* @__PURE__ */ React6__namespace.createElement(React6__namespace.Fragment, null, /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style: { marginTop: animScrollAdjust } }), /* @__PURE__ */ React6__namespace.createElement(reactNative.Animated.View, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React6__namespace.createElement(
+    reactNative.Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: reactNative.Animated.add(animScrollAdjust, reactNative.Animated.multiply(animScrollAdjust, -1)),
+        height: animPaddingTop,
+        left: 0,
+        right: 0,
+        backgroundColor: "green"
+      }
+    }
+  ), /* @__PURE__ */ React6__namespace.createElement(
+    reactNative.Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: animPaddingTop,
+        height: animScrollAdjust,
+        left: -16,
+        right: -16,
+        backgroundColor: "lightblue"
+      }
+    }
+  ), /* @__PURE__ */ React6__namespace.createElement(
+    reactNative.Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: animPaddingTop,
+        height: reactNative.Animated.multiply(animScrollAdjust, -1),
+        width: 8,
+        right: 4,
+        borderStyle: "dashed",
+        borderColor: "blue",
+        borderWidth: 1,
+        backgroundColor: "lightblue"
+        //backgroundColor: "blue",
+      }
+    }
+  ));
+};
+var ListComponent = React6__namespace.memo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -348,14 +436,11 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
-  const animPaddingTop = useValue$("paddingTop");
-  const animScrollAdjust = useValue$("scrollAdjust");
-  const ScrollComponent = renderScrollComponent ? React5.useMemo(
-    () => React5__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+  const ScrollComponent = renderScrollComponent ? React6.useMemo(
+    () => React6__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
   ) : reactNative.ScrollView;
-  const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
-  return /* @__PURE__ */ React5__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     ScrollComponent,
     {
       ...rest,
@@ -373,8 +458,8 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScrollView
     },
-    /* @__PURE__ */ React5__namespace.createElement(reactNative.Animated.View, { style: additionalSize }),
-    ListHeaderComponent && /* @__PURE__ */ React5__namespace.createElement(
+    ENABLE_DEVMODE ? /* @__PURE__ */ React6__namespace.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6__namespace.createElement(PaddingAndAdjust, null),
+    ListHeaderComponent && /* @__PURE__ */ React6__namespace.createElement(
       reactNative.Animated.View,
       {
         style: ListHeaderComponentStyle,
@@ -389,7 +474,7 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
       getComponent(ListHeaderComponent)
     ),
     ListEmptyComponent && getComponent(ListEmptyComponent),
-    /* @__PURE__ */ React5__namespace.createElement(
+    /* @__PURE__ */ React6__namespace.createElement(
       Containers,
       {
         horizontal,
@@ -400,7 +485,7 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React5__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React6__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
 
@@ -411,7 +496,6 @@ var ScrollAdjustHandler = class {
     this.appliedAdjust = 0;
     this.pendingAdjust = 0;
     this.busy = false;
-    this.firstAdjust = true;
     this.context = ctx;
   }
   requestAdjust(adjust, onAdjusted) {
@@ -428,20 +512,16 @@ 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 = React6.forwardRef;
 var useCombinedRef = (...refs) => {
-  const callback = React5.useCallback((element) => {
+  const callback = React6.useCallback((element) => {
     for (const ref of refs) {
       if (!ref) {
         continue;
@@ -606,13 +686,13 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
 // src/LegendList.tsx
 var DEFAULT_DRAW_DISTANCE = 250;
 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 = typedForwardRef(function LegendList2(props, forwardedRef) {
+  return /* @__PURE__ */ React6__namespace.createElement(StateProvider, null, /* @__PURE__ */ React6__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
-var LegendListInner = React5.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,
@@ -640,38 +720,39 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     ...rest
   } = props;
   const { style, contentContainerStyle } = props;
-  const callbacks = React5.useRef({
+  const callbacks = React6.useRef({
     onStartReached: rest.onStartReached,
     onEndReached: rest.onEndReached
   });
   callbacks.current.onStartReached = rest.onStartReached;
   callbacks.current.onEndReached = rest.onEndReached;
   const ctx = useStateContext();
-  const refScroller = React5.useRef(null);
+  const refScroller = React6.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 = React5.useRef();
+  const refState = React6.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) {
@@ -685,7 +766,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     return 0;
   };
-  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React5.useMemo(calculateInitialOffset, []);
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React6.useMemo(calculateInitialOffset, []);
   if (!refState.current) {
     const initialScrollLength = reactNative.Dimensions.get("window")[horizontal ? "width" : "height"];
     refState.current = {
@@ -698,7 +779,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       isEndReached: false,
       isAtBottom: false,
       isAtTop: false,
-      data,
+      data: dataProp,
       idsInFirstRender: void 0,
       hasScrolled: false,
       scrollLength: initialScrollLength,
@@ -730,14 +811,14 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       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)
@@ -758,9 +839,9 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     return void 0;
   };
-  const addTotalSize = React5.useCallback((key, add, totalSizeBelowAnchor) => {
+  const addTotalSize = React6.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) {
@@ -777,10 +858,9 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         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();
@@ -798,7 +878,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
   }, []);
   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]);
@@ -848,10 +928,10 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     return res;
   };
-  const calculateItemsInView = React5.useCallback((speed) => {
+  const calculateItemsInView = React6.useCallback((speed) => {
     const state = refState.current;
     const {
-      data: data2,
+      data,
       scrollLength,
       scroll: scrollState,
       startBufferedId: startBufferedIdOrig,
@@ -862,7 +942,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     if (state.waitingForMicrotask) {
       state.waitingForMicrotask = false;
     }
-    if (!data2) {
+    if (!data) {
       return;
     }
     const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
@@ -908,7 +988,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       }
       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;
@@ -937,9 +1017,9 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       }
       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);
@@ -1027,13 +1107,13 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
           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")) {
@@ -1054,13 +1134,13 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       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);
             }
@@ -1074,7 +1154,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
             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";
@@ -1089,7 +1169,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
               set$(ctx, `containerColumn${i}`, column2);
             }
             if (prevData !== item) {
-              set$(ctx, `containerItemData${i}`, data2[itemIndex]);
+              set$(ctx, `containerItemData${i}`, data[itemIndex]);
             }
           }
         }
@@ -1119,7 +1199,10 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
   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({
@@ -1135,21 +1218,19 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     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;
         }
       }
     }
@@ -1161,29 +1242,27 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     const { scrollLength, scroll } = refState.current;
     const distanceFromTop = scroll;
     refState.current.isAtTop = distanceFromTop < 0;
-    const { onStartReached } = callbacks.current;
-    if (onStartReached) {
-      if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
-        if (distanceFromTop < onStartReachedThreshold * scrollLength) {
-          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++) {
@@ -1199,28 +1278,28 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
           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)) {
@@ -1239,7 +1318,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     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)
@@ -1256,7 +1335,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         }
       } 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;
@@ -1269,9 +1348,9 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       }
     }
     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) {
@@ -1288,17 +1367,17 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   }
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     checkResetContainers(
-      /*reset*/
-      !isFirst
+      /*isFirst*/
+      isFirst
     );
-  }, [isFirst, data, numColumnsProp]);
-  React5.useEffect(() => {
+  }, [isFirst, dataProp, numColumnsProp]);
+  React6.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 = reactNative.StyleSheet.flatten(style)) == null ? void 0 : _d.paddingTop) != null ? _f : (_e = reactNative.StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _e.paddingTop) != null ? _g : 0;
   const initalizeStateVars = () => {
     set$(ctx, "lastItemKey", lastItemKey);
@@ -1308,14 +1387,14 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
   if (isFirst) {
     initalizeStateVars();
   }
-  React5.useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
-  const getRenderedItem = React5.useCallback((key) => {
+  React6.useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
+  const getRenderedItem = React6.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;
@@ -1333,7 +1412,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       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,
@@ -1349,7 +1428,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     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);
@@ -1357,31 +1436,33 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * 2);
-    calculateItemsInView(state.scrollVelocity);
+    if (initialScrollIndex) {
+      requestAnimationFrame(() => {
+        calculateItemsInView(state.scrollVelocity);
+      });
+    } else {
+      calculateItemsInView(state.scrollVelocity);
+    }
   });
-  const updateItemSize = React5.useCallback((containerId, itemKey, size) => {
+  const updateItemSize = React6.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;
@@ -1423,16 +1504,16 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
         }
       }
       if (onItemSizeChanged) {
-        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data2[index] });
+        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data[index] });
       }
     }
   }, []);
-  const handleScrollDebounced = React5.useCallback((velocity) => {
+  const handleScrollDebounced = React6.useCallback((velocity) => {
     calculateItemsInView(velocity);
     checkAtBottom();
     checkAtTop();
   }, []);
-  const onLayout = React5.useCallback((event) => {
+  const onLayout = React6.useCallback((event) => {
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
     const didChange = scrollLength !== refState.current.scrollLength;
     refState.current.scrollLength = scrollLength;
@@ -1456,7 +1537,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       onLayoutProp(event);
     }
   }, []);
-  const handleScroll = React5.useCallback(
+  const handleScroll = React6.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) {
@@ -1498,7 +1579,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     },
     []
   );
-  React5.useImperativeHandle(
+  React6.useImperativeHandle(
     forwardedRef,
     () => {
       const scrollToIndex = ({ index, animated }) => {
@@ -1517,6 +1598,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
           refScroller.current.scrollTo({ ...offsetObj, animated });
         },
         scrollToItem: ({ item, animated }) => {
+          const { data } = refState.current;
           const index = data.indexOf(item);
           if (index !== -1) {
             scrollToIndex({ index, animated });
@@ -1527,7 +1609,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     },
     []
   );
-  return /* @__PURE__ */ React5__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(React6__namespace.Fragment, null, /* @__PURE__ */ React6__namespace.createElement(
     ListComponent,
     {
       ...rest,
@@ -1540,13 +1622,13 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       onLayout,
       recycleItems,
       alignItemsAtEnd,
-      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
+      ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
       maintainVisibleContentPosition,
       scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : reactNative.Platform.OS === "web" ? 16 : void 0,
       waitForInitialLayout,
       style
     }
-  );
+  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React6__namespace.createElement(DebugView, { state: refState.current }));
 });
 
 exports.LegendList = LegendList;