@legendapp/list 2.0.0-next.3 → 2.0.0-next.5

package/index.mjs

@@ -3,21 +3,22 @@ import React3__default, { useReducer, useEffect, createContext, useMemo, useStat
 import { View, Text, Platform, Animated, ScrollView, StyleSheet, Dimensions, RefreshControl } from 'react-native';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
-// src/LegendList.tsx
+// src/components/LazyLegendList.tsx
 var ContextState = React3.createContext(null);
 function StateProvider({ children }) {
   const [value] = React3.useState(() => ({
+    columnWrapperStyle: void 0,
     listeners: /* @__PURE__ */ new Map(),
+    mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
+    mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
+    mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
+    mapViewabilityValues: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map([
       ["alignItemsPaddingTop", 0],
       ["stylePaddingTop", 0],
-      ["headerSize", 0]
+      ["headerSize", 0],
+      ["numContainers", 0]
     ]),
-    mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
-    mapViewabilityValues: /* @__PURE__ */ new Map(),
-    mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
-    mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
-    columnWrapperStyle: void 0,
     viewRefs: /* @__PURE__ */ new Map()
   }));
   return /* @__PURE__ */ React3.createElement(ContextState.Provider, { value }, children);
@@ -29,17 +30,6 @@ function createSelectorFunctionsArr(ctx, signalNames) {
   let lastValues = [];
   let lastSignalValues = [];
   return {
-    subscribe: (cb) => {
-      const listeners = [];
-      for (const signalName of signalNames) {
-        listeners.push(listen$(ctx, signalName, cb));
-      }
-      return () => {
-        for (const listener of listeners) {
-          listener();
-        }
-      };
-    },
     get: () => {
       const currentValues = [];
       let hasChanged = false;
@@ -55,6 +45,17 @@ function createSelectorFunctionsArr(ctx, signalNames) {
         lastValues = currentValues;
       }
       return lastValues;
+    },
+    subscribe: (cb) => {
+      const listeners = [];
+      for (const signalName of signalNames) {
+        listeners.push(listen$(ctx, signalName, cb));
+      }
+      return () => {
+        for (const listener of listeners) {
+          listener();
+        }
+      };
     }
   };
 }
@@ -105,13 +106,13 @@ function useSelector$(signalName, selector) {
   return value;
 }
 
-// src/DebugView.tsx
+// src/components/DebugView.tsx
 var DebugRow = ({ children }) => {
-  return /* @__PURE__ */ React3.createElement(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" } }, children);
+  return /* @__PURE__ */ React3.createElement(View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
 };
 var DebugView = React3.memo(function DebugView2({ state }) {
   const ctx = useStateContext();
-  const [totalSize = 0, scrollAdjust = 0, rawScroll = 0, scroll = 0, numContainers = 0, numContainersPooled = 0] = useArr$([
+  const [totalSize = 0, scrollAdjust = 0, rawScroll = 0, scroll = 0, _numContainers = 0, _numContainersPooled = 0] = useArr$([
     "totalSize",
     "scrollAdjust",
     "debugRawScroll",
@@ -127,18 +128,18 @@ var DebugView = React3.memo(function DebugView2({ state }) {
   return /* @__PURE__ */ React3.createElement(
     View,
     {
+      pointerEvents: "none",
       style: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        paddingLeft: 4,
-        paddingBottom: 4,
         // height: 100,
         backgroundColor: "#FFFFFFCC",
+        borderRadius: 4,
         padding: 4,
-        borderRadius: 4
-      },
-      pointerEvents: "none"
+        paddingBottom: 4,
+        paddingLeft: 4,
+        position: "absolute",
+        right: 0,
+        top: 0
+      }
     },
     /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "TotalSize:"), /* @__PURE__ */ React3.createElement(Text, null, totalSize.toFixed(2))),
     /* @__PURE__ */ React3.createElement(DebugRow, null, /* @__PURE__ */ React3.createElement(Text, null, "ContentSize:"), /* @__PURE__ */ React3.createElement(Text, null, contentSize.toFixed(2))),
@@ -156,8 +157,34 @@ function useInterval(callback, delay) {
     return () => clearInterval(interval);
   }, [delay]);
 }
+var LeanViewComponent = React3.forwardRef((props, ref) => {
+  return React3.createElement("RCTView", { ...props, ref });
+});
+LeanViewComponent.displayName = "RCTView";
+var LeanView = Platform.OS === "android" || Platform.OS === "ios" ? LeanViewComponent : View;
+
+// src/components/Separator.tsx
+function Separator({ ItemSeparatorComponent, itemKey, leadingItem }) {
+  const [lastItemKeys] = useArr$(["lastItemKeys"]);
+  const isALastItem = lastItemKeys.includes(itemKey);
+  return isALastItem ? null : /* @__PURE__ */ React.createElement(ItemSeparatorComponent, { leadingItem });
+}
+
+// src/constants.ts
+var POSITION_OUT_OF_VIEW = -1e7;
+var ENABLE_DEVMODE = __DEV__ && false;
+var ENABLE_DEBUG_VIEW = __DEV__ && false;
+var IsNewArchitecture = global.nativeFabricUIManager != null;
+var symbolFirst = Symbol();
+function useInit(cb) {
+  const refValue = useRef(symbolFirst);
+  if (refValue.current === symbolFirst) {
+    refValue.current = cb();
+  }
+  return refValue.current;
+}
 
-// src/helpers.ts
+// src/utils/helpers.ts
 function isFunction(obj) {
   return typeof obj === "function";
 }
@@ -187,16 +214,8 @@ function getPadding(s, type) {
 function extractPadding(style, contentContainerStyle, type) {
   return getPadding(style, type) + getPadding(contentContainerStyle, type);
 }
-var symbolFirst = Symbol();
-function useInit(cb) {
-  const refValue = useRef(symbolFirst);
-  if (refValue.current === symbolFirst) {
-    refValue.current = cb();
-  }
-  return refValue.current;
-}
 
-// src/ContextContainer.ts
+// src/state/ContextContainer.ts
 var ContextContainer = createContext(null);
 function useViewability(callback, configId) {
   const ctx = useStateContext();
@@ -240,7 +259,7 @@ function useRecyclingEffect(effect) {
     prevItem: void 0
   });
   useEffect(() => {
-    let ret = void 0;
+    let ret;
     if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
       ret = effect({
         index,
@@ -254,7 +273,7 @@ function useRecyclingEffect(effect) {
       prevItem: value
     };
     return ret;
-  }, [index, value]);
+  }, [index, value, effect]);
 }
 function useRecyclingState(valueOrFun) {
   const { index, value, itemKey, triggerLayout } = useContext(ContextContainer);
@@ -292,26 +311,8 @@ function useListScrollSize() {
   const [scrollSize] = useArr$(["scrollSize"]);
   return scrollSize;
 }
-var LeanViewComponent = React3.forwardRef((props, ref) => {
-  return React3.createElement("RCTView", { ...props, ref });
-});
-LeanViewComponent.displayName = "RCTView";
-var LeanView = Platform.OS === "android" || Platform.OS === "ios" ? LeanViewComponent : View;
-
-// src/Separator.tsx
-function Separator({ ItemSeparatorComponent, itemKey, leadingItem }) {
-  const [lastItemKeys] = useArr$(["lastItemKeys"]);
-  const isALastItem = lastItemKeys.includes(itemKey);
-  return isALastItem ? null : /* @__PURE__ */ React.createElement(ItemSeparatorComponent, { leadingItem });
-}
-
-// src/constants.ts
-var POSITION_OUT_OF_VIEW = -1e7;
-var ENABLE_DEVMODE = __DEV__ && false;
-var ENABLE_DEBUG_VIEW = __DEV__ && false;
-var IsNewArchitecture = global.nativeFabricUIManager != null;
 
-// src/Container.tsx
+// src/components/Container.tsx
 var Container = ({
   id,
   recycleItems,
@@ -353,17 +354,17 @@ var Container = ({
   }
   const style = horizontal ? {
     flexDirection: ItemSeparatorComponent ? "row" : void 0,
-    position: "absolute",
-    top: otherAxisPos,
     height: otherAxisSize,
     left: position,
+    position: "absolute",
+    top: otherAxisPos,
     ...paddingStyles || {}
   } : {
-    position: "absolute",
     left: otherAxisPos,
+    position: "absolute",
     right: numColumns > 1 ? null : 0,
-    width: otherAxisSize,
     top: position,
+    width: otherAxisSize,
     ...paddingStyles || {}
   };
   const renderedItemInfo = useMemo(
@@ -376,7 +377,7 @@ var Container = ({
   }, []);
   const contextValue = useMemo(() => {
     ctx.viewRefs.set(id, ref);
-    return { containerId: id, itemKey, index, value: data, triggerLayout };
+    return { containerId: id, index, itemKey, triggerLayout, value: data };
   }, [id, itemKey, index, data]);
   const onLayout = (event) => {
     var _a, _b;
@@ -385,14 +386,14 @@ var Container = ({
       let layout = event.nativeEvent.layout;
       const size = layout[horizontal ? "width" : "height"];
       const doUpdate = () => {
-        refLastSize.current = { width: layout.width, height: layout.height };
+        refLastSize.current = { height: layout.height, width: layout.width };
         updateItemSize2(itemKey, layout);
       };
       if (IsNewArchitecture || size > 0) {
         doUpdate();
       } else {
-        (_b = (_a = ref.current) == null ? void 0 : _a.measure) == null ? void 0 : _b.call(_a, (x, y, width, height) => {
-          layout = { width, height };
+        (_b = (_a = ref.current) == null ? void 0 : _a.measure) == null ? void 0 : _b.call(_a, (_x, _y, width, height) => {
+          layout = { height, width };
           doUpdate();
         });
       }
@@ -425,30 +426,28 @@ var Container = ({
       }
     }, [itemKey]);
   }
-  return /* @__PURE__ */ React3.createElement(LeanView, { style, onLayout, ref, key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React3.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(LeanView, { key: recycleItems ? void 0 : itemKey, onLayout, ref, style }, /* @__PURE__ */ React3.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React3.createElement(
     Separator,
     {
-      itemKey,
       ItemSeparatorComponent,
+      itemKey,
       leadingItem: renderedItemInfo.item
     }
   )));
 };
-var typedForwardRef = forwardRef;
-var typedMemo = memo;
 var useAnimatedValue = (initialValue) => {
   return useRef(new Animated.Value(initialValue)).current;
 };
 
-// src/useValue$.ts
+// src/hooks/useValue$.ts
 function useValue$(key, params) {
   var _a;
   const { getValue, delay } = params || {};
   const ctx = useStateContext();
   const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
   useMemo(() => {
-    let newValue = void 0;
-    let prevValue = void 0;
+    let newValue;
+    let prevValue;
     let didQueueTask = false;
     listen$(ctx, key, (v) => {
       newValue = getValue ? getValue(v) : v;
@@ -476,8 +475,10 @@ function useValue$(key, params) {
   }, []);
   return animValue;
 }
+var typedForwardRef = forwardRef;
+var typedMemo = memo;
 
-// src/Containers.tsx
+// src/components/Containers.tsx
 var Containers = typedMemo(function Containers2({
   horizontal,
   recycleItems,
@@ -501,18 +502,18 @@ var Containers = typedMemo(function Containers2({
       /* @__PURE__ */ React3.createElement(
         Container,
         {
+          getRenderedItem: getRenderedItem2,
+          horizontal,
+          ItemSeparatorComponent,
           id: i,
           key: i,
           recycleItems,
-          horizontal,
-          getRenderedItem: getRenderedItem2,
-          updateItemSize: updateItemSize2,
-          ItemSeparatorComponent
+          updateItemSize: updateItemSize2
         }
       )
     );
   }
-  const style = horizontal ? { width: animSize, opacity: animOpacity, minHeight: otherAxisSize } : { height: animSize, opacity: animOpacity, minWidth: otherAxisSize };
+  const style = horizontal ? { minHeight: otherAxisSize, opacity: animOpacity, width: animSize } : { height: animSize, minWidth: otherAxisSize, opacity: animOpacity };
   if (columnWrapperStyle && numColumns > 1) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     const gapX = columnGap || gap || 0;
@@ -543,20 +544,19 @@ function ScrollAdjust() {
     View,
     {
       style: {
-        position: "absolute",
         height: 0,
-        width: 0,
+        left: 0,
+        position: "absolute",
         top: scrollOffset,
-        left: 0
+        width: 0
       }
     }
   );
 }
 
-// src/SnapWrapper.tsx
+// src/components/SnapWrapper.tsx
 function SnapWrapper({ ScrollComponent, ...props }) {
   const [snapToOffsets] = useArr$(["snapToOffsets"]);
-  console.log("snapToOffsets", snapToOffsets);
   return /* @__PURE__ */ React.createElement(ScrollComponent, { ...props, snapToOffsets });
 }
 function useSyncLayout({
@@ -572,14 +572,14 @@ function useSyncLayout({
   useLayoutEffect(() => {
     if (ref.current) {
       ref.current.measure((x, y, width, height) => {
-        onChange({ x, y, width, height }, true);
+        onChange({ height, width, x, y }, true);
       });
     }
   }, []);
   return { onLayout, ref };
 }
 
-// src/ListComponent.tsx
+// src/components/ListComponent.tsx
 var getComponent = (Component) => {
   if (React3.isValidElement(Component)) {
     return Component;
@@ -599,12 +599,12 @@ var PaddingDevMode = () => {
     Animated.View,
     {
       style: {
-        position: "absolute",
-        top: 0,
+        backgroundColor: "green",
         height: animPaddingTop,
         left: 0,
+        position: "absolute",
         right: 0,
-        backgroundColor: "green"
+        top: 0
       }
     }
   ));
@@ -656,73 +656,51 @@ var ListComponent = typedMemo(function ListComponent2({
     SnapOrScroll,
     {
       ...rest,
-      ScrollComponent: snapToIndices ? ScrollComponent : void 0,
-      style,
-      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
       contentContainerStyle: [
         contentContainerStyle,
         horizontal ? {
           height: "100%"
         } : {}
       ],
-      onScroll: onScroll2,
-      onLayout,
-      horizontal,
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
-      ref: refScrollView
+      horizontal,
+      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
+      onLayout,
+      onScroll: onScroll2,
+      ref: refScrollView,
+      ScrollComponent: snapToIndices ? ScrollComponent : void 0,
+      style
     },
     maintainVisibleContentPosition && /* @__PURE__ */ React3.createElement(ScrollAdjust, null),
     ENABLE_DEVMODE ? /* @__PURE__ */ React3.createElement(PaddingDevMode, null) : /* @__PURE__ */ React3.createElement(Padding, null),
-    ListHeaderComponent && /* @__PURE__ */ React3.createElement(View, { style: ListHeaderComponentStyle, onLayout: onLayoutHeaderSync, ref: refHeader }, getComponent(ListHeaderComponent)),
+    ListHeaderComponent && /* @__PURE__ */ React3.createElement(View, { onLayout: onLayoutHeaderSync, ref: refHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
     ListEmptyComponent && getComponent(ListEmptyComponent),
     canRender && /* @__PURE__ */ React3.createElement(
       Containers,
       {
-        horizontal,
-        recycleItems,
-        waitForInitialLayout,
         getRenderedItem: getRenderedItem2,
+        horizontal,
         ItemSeparatorComponent,
-        updateItemSize: updateItemSize2
+        recycleItems,
+        updateItemSize: updateItemSize2,
+        waitForInitialLayout
       }
     ),
     ListFooterComponent && /* @__PURE__ */ React3.createElement(
       View,
       {
-        style: ListFooterComponentStyle,
         onLayout: (event) => {
           const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
           set$(ctx, "footerSize", size);
-        }
+        },
+        style: ListFooterComponentStyle
       },
       getComponent(ListFooterComponent)
     )
   );
 });
 
-// src/ScrollAdjustHandler.ts
-var ScrollAdjustHandler = class {
-  constructor(ctx) {
-    this.appliedAdjust = 0;
-    this.mounted = false;
-    this.context = ctx;
-  }
-  requestAdjust(add) {
-    const oldAdjustTop = peek$(this.context, "scrollAdjust") || 0;
-    this.appliedAdjust = add + oldAdjustTop;
-    const set = () => set$(this.context, "scrollAdjust", this.appliedAdjust);
-    if (this.mounted) {
-      set();
-    } else {
-      requestAnimationFrame(set);
-    }
-  }
-  setMounted() {
-    this.mounted = true;
-  }
-};
-
-// src/getId.ts
+// src/utils/getId.ts
 function getId(state, index) {
   const { data, keyExtractor } = state.props;
   if (!data) {
@@ -734,7 +712,7 @@ function getId(state, index) {
   return id;
 }
 
-// src/calculateOffsetForIndex.ts
+// src/core/calculateOffsetForIndex.ts
 function calculateOffsetForIndex(ctx, state, index) {
   let position = 0;
   if (index !== void 0) {
@@ -751,7 +729,7 @@ function calculateOffsetForIndex(ctx, state, index) {
   return position;
 }
 
-// src/getItemSize.ts
+// src/utils/getItemSize.ts
 function getItemSize(state, key, index, data, useAverageSize) {
   const {
     sizesKnown,
@@ -780,7 +758,7 @@ function getItemSize(state, key, index, data, useAverageSize) {
   return size;
 }
 
-// src/calculateOffsetWithOffsetPosition.ts
+// src/core/calculateOffsetWithOffsetPosition.ts
 function calculateOffsetWithOffsetPosition(state, offsetParam, params) {
   const { index, viewOffset, viewPosition } = params;
   let offset = offsetParam;
@@ -793,338 +771,76 @@ function calculateOffsetWithOffsetPosition(state, offsetParam, params) {
   return offset;
 }
 
-// src/checkAllSizesKnown.ts
-function checkAllSizesKnown(state) {
-  const { startBuffered, endBuffered, sizesKnown } = state;
-  if (endBuffered !== null) {
-    let areAllKnown = true;
-    for (let i = startBuffered; areAllKnown && i <= endBuffered; i++) {
-      const key = getId(state, i);
-      areAllKnown && (areAllKnown = sizesKnown.has(key));
+// src/utils/requestAdjust.ts
+function requestAdjust(ctx, state, positionDiff) {
+  if (Math.abs(positionDiff) > 0.1) {
+    const doit = () => {
+      state.scrollAdjustHandler.requestAdjust(positionDiff);
+    };
+    state.scroll += positionDiff;
+    state.scrollForNextCalculateItemsInView = void 0;
+    const didLayout = peek$(ctx, "containersDidLayout");
+    if (didLayout) {
+      doit();
+      const threshold = state.scroll - positionDiff / 2;
+      if (!state.ignoreScrollFromMVCP) {
+        state.ignoreScrollFromMVCP = {};
+      }
+      if (positionDiff > 0) {
+        state.ignoreScrollFromMVCP.lt = threshold;
+      } else {
+        state.ignoreScrollFromMVCP.gt = threshold;
+      }
+      if (state.ignoreScrollFromMVCPTimeout) {
+        clearTimeout(state.ignoreScrollFromMVCPTimeout);
+      }
+      state.ignoreScrollFromMVCPTimeout = setTimeout(() => {
+        state.ignoreScrollFromMVCP = void 0;
+      }, 100);
+    } else {
+      requestAnimationFrame(doit);
     }
-    return areAllKnown;
   }
-  return false;
 }
 
-// src/findAvailableContainers.ts
-function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffered, pendingRemoval) {
-  const numContainers = peek$(ctx, "numContainers");
-  const result = [];
-  const availableContainers = [];
-  for (let u = 0; u < numContainers; u++) {
-    const key = peek$(ctx, `containerItemKey${u}`);
-    let isOk = key === void 0;
-    if (!isOk) {
-      const index = pendingRemoval.indexOf(u);
-      if (index !== -1) {
-        pendingRemoval.splice(index, 1);
-        isOk = true;
-      }
-    }
-    if (isOk) {
-      result.push(u);
-      if (result.length >= numNeeded) {
-        return result;
-      }
+// src/core/prepareMVCP.ts
+function prepareMVCP(ctx, state) {
+  const {
+    positions,
+    scrollingTo,
+    props: { maintainVisibleContentPosition }
+  } = state;
+  let prevPosition;
+  let targetId;
+  let targetIndex;
+  const scrollTarget = scrollingTo == null ? void 0 : scrollingTo.index;
+  if (maintainVisibleContentPosition) {
+    const indexByKey = state.indexByKey;
+    if (scrollTarget !== void 0) {
+      targetId = getId(state, scrollTarget);
+      targetIndex = scrollTarget;
+    } else if (state.idsInView.length > 0 && peek$(ctx, "containersDidLayout")) {
+      targetId = state.idsInView.find((id) => indexByKey.get(id) !== void 0);
+      targetIndex = indexByKey.get(targetId);
     }
-  }
-  for (let u = 0; u < numContainers; u++) {
-    const key = peek$(ctx, `containerItemKey${u}`);
-    if (key === void 0) continue;
-    const index = state.indexByKey.get(key);
-    if (index < startBuffered) {
-      availableContainers.push({ index: u, distance: startBuffered - index });
-    } else if (index > endBuffered) {
-      availableContainers.push({ index: u, distance: index - endBuffered });
+    if (targetId !== void 0 && targetIndex !== void 0) {
+      prevPosition = positions.get(targetId);
     }
   }
-  const remaining = numNeeded - result.length;
-  if (remaining > 0) {
-    if (availableContainers.length > 0) {
-      if (availableContainers.length > remaining) {
-        availableContainers.sort(comparatorByDistance);
-        availableContainers.length = remaining;
-      }
-      for (const container of availableContainers) {
-        result.push(container.index);
-      }
-    }
-    const stillNeeded = numNeeded - result.length;
-    if (stillNeeded > 0) {
-      for (let i = 0; i < stillNeeded; i++) {
-        result.push(numContainers + i);
-      }
-      if (__DEV__ && numContainers + stillNeeded > peek$(ctx, "numContainersPooled")) {
-        console.warn(
-          "[legend-list] No unused container available, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio.",
-          {
-            debugInfo: {
-              numContainers,
-              numNeeded,
-              stillNeeded,
-              numContainersPooled: peek$(ctx, "numContainersPooled")
-            }
-          }
-        );
-      }
-    }
-  }
-  return result.sort(comparatorDefault);
-}
-function comparatorByDistance(a, b) {
-  return b.distance - a.distance;
-}
-
-// src/getScrollVelocity.ts
-var getScrollVelocity = (state) => {
-  const { scrollHistory } = state;
-  let velocity = 0;
-  if (scrollHistory.length >= 1) {
-    const newest = scrollHistory[scrollHistory.length - 1];
-    let oldest;
-    let start = 0;
-    for (let i = 0; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      const nextEntry = scrollHistory[i + 1];
-      if (i > 0) {
-        const prevEntry = scrollHistory[i - 1];
-        const prevDirection = entry.scroll - prevEntry.scroll;
-        const currentDirection = nextEntry.scroll - entry.scroll;
-        if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
-          start = i;
-          break;
-        }
-      }
-    }
-    for (let i = start; i < scrollHistory.length - 1; i++) {
-      const entry = scrollHistory[i];
-      if (newest.time - entry.time <= 1e3) {
-        oldest = entry;
-        break;
-      }
-    }
-    if (oldest) {
-      const scrollDiff = newest.scroll - oldest.scroll;
-      const timeDiff = newest.time - oldest.time;
-      velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
-    }
-  }
-  return velocity;
-};
-
-// src/requestAdjust.ts
-function requestAdjust(ctx, state, positionDiff) {
-  if (Math.abs(positionDiff) > 0.1) {
-    const doit = () => {
-      state.scrollAdjustHandler.requestAdjust(positionDiff);
-    };
-    state.scroll += positionDiff;
-    state.scrollForNextCalculateItemsInView = void 0;
-    const didLayout = peek$(ctx, "containersDidLayout");
-    if (didLayout) {
-      doit();
-      const threshold = state.scroll - positionDiff / 2;
-      if (!state.ignoreScrollFromMVCP) {
-        state.ignoreScrollFromMVCP = {};
-      }
-      if (positionDiff > 0) {
-        state.ignoreScrollFromMVCP.lt = threshold;
-      } else {
-        state.ignoreScrollFromMVCP.gt = threshold;
-      }
-      if (state.ignoreScrollFromMVCPTimeout) {
-        clearTimeout(state.ignoreScrollFromMVCPTimeout);
-      }
-      state.ignoreScrollFromMVCPTimeout = setTimeout(() => {
-        state.ignoreScrollFromMVCP = void 0;
-      }, 100);
-    } else {
-      requestAnimationFrame(doit);
-    }
-  }
-}
-
-// src/prepareMVCP.ts
-function prepareMVCP(ctx, state) {
-  const {
-    positions,
-    scrollingTo,
-    props: { maintainVisibleContentPosition }
-  } = state;
-  let prevPosition;
-  let targetId;
-  let targetIndex;
-  const scrollTarget = scrollingTo == null ? void 0 : scrollingTo.index;
-  if (maintainVisibleContentPosition) {
-    const indexByKey = state.indexByKey;
-    if (scrollTarget !== void 0) {
-      targetId = getId(state, scrollTarget);
-      targetIndex = scrollTarget;
-    } else if (state.idsInView.length > 0 && peek$(ctx, "containersDidLayout")) {
-      targetId = state.idsInView.find((id) => indexByKey.get(id) !== void 0);
-      targetIndex = indexByKey.get(targetId);
-    }
-    if (targetId !== void 0 && targetIndex !== void 0) {
-      prevPosition = positions.get(targetId);
-    }
-  }
-  return () => {
-    if (targetId !== void 0 && prevPosition !== void 0) {
-      const newPosition = positions.get(targetId);
-      if (newPosition !== void 0) {
-        const positionDiff = newPosition - prevPosition;
-        if (Math.abs(positionDiff) > 0.1) {
-          requestAdjust(ctx, state, positionDiff);
-        }
+  return () => {
+    if (targetId !== void 0 && prevPosition !== void 0) {
+      const newPosition = positions.get(targetId);
+      if (newPosition !== void 0) {
+        const positionDiff = newPosition - prevPosition;
+        if (Math.abs(positionDiff) > 0.1) {
+          requestAdjust(ctx, state, positionDiff);
+        }
       }
     }
   };
 }
 
-// src/checkThreshold.ts
-var checkThreshold = (distance, atThreshold, threshold, isReached, isBlockedByTimer, onReached, blockTimer) => {
-  const distanceAbs = Math.abs(distance);
-  const isAtThreshold = atThreshold || distanceAbs < threshold;
-  if (!isReached && !isBlockedByTimer) {
-    if (isAtThreshold) {
-      onReached == null ? void 0 : onReached(distance);
-      blockTimer == null ? void 0 : blockTimer(true);
-      setTimeout(() => {
-        blockTimer == null ? void 0 : blockTimer(false);
-      }, 700);
-      return true;
-    }
-  } else {
-    if (distance >= 1.3 * threshold) {
-      return false;
-    }
-  }
-  return isReached;
-};
-
-// src/checkAtBottom.ts
-function checkAtBottom(ctx, state) {
-  if (!state) {
-    return;
-  }
-  const {
-    queuedInitialLayout,
-    scrollLength,
-    scroll,
-    maintainingScrollAtEnd,
-    props: { maintainScrollAtEndThreshold, onEndReachedThreshold }
-  } = state;
-  const contentSize = getContentSize(ctx);
-  if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
-    const distanceFromEnd = contentSize - scroll - scrollLength;
-    const isContentLess = contentSize < scrollLength;
-    state.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
-    state.isEndReached = checkThreshold(
-      distanceFromEnd,
-      isContentLess,
-      onEndReachedThreshold * scrollLength,
-      state.isEndReached,
-      state.endReachedBlockedByTimer,
-      (distance) => {
-        var _a, _b;
-        return (_b = (_a = state.props).onEndReached) == null ? void 0 : _b.call(_a, { distanceFromEnd: distance });
-      },
-      (block) => {
-        state.endReachedBlockedByTimer = block;
-      }
-    );
-  }
-}
-
-// src/finishScrollTo.ts
-var finishScrollTo = (state) => {
-  if (state) {
-    state.scrollingTo = void 0;
-    state.scrollHistory.length = 0;
-  }
-};
-
-// src/scrollTo.ts
-function scrollTo(state, params = {}) {
-  var _a;
-  const { animated } = params;
-  const {
-    refScroller,
-    props: { horizontal }
-  } = state;
-  const offset = calculateOffsetWithOffsetPosition(state, params.offset, params);
-  state.scrollHistory.length = 0;
-  state.scrollingTo = params;
-  state.scrollPending = offset;
-  (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
-    x: horizontal ? offset : 0,
-    y: horizontal ? 0 : offset,
-    animated: !!animated
-  });
-  if (!animated) {
-    state.scroll = offset;
-    setTimeout(() => finishScrollTo(state), 100);
-  }
-}
-
-// src/scrollToIndex.ts
-function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, viewPosition }) {
-  if (index >= state.props.data.length) {
-    index = state.props.data.length - 1;
-  } else if (index < 0) {
-    index = 0;
-  }
-  const firstIndexOffset = calculateOffsetForIndex(ctx, state, index);
-  const isLast = index === state.props.data.length - 1;
-  if (isLast && viewPosition === void 0) {
-    viewPosition = 1;
-  }
-  const firstIndexScrollPostion = firstIndexOffset - viewOffset;
-  state.scrollForNextCalculateItemsInView = void 0;
-  scrollTo(state, {
-    offset: firstIndexScrollPostion,
-    animated,
-    index,
-    viewPosition: viewPosition != null ? viewPosition : 0,
-    viewOffset
-  });
-}
-
-// src/setDidLayout.ts
-function setDidLayout(ctx, state) {
-  const {
-    loadStartTime,
-    initialScroll,
-    props: { onLoad }
-  } = state;
-  state.queuedInitialLayout = true;
-  checkAtBottom(ctx, state);
-  if (!IsNewArchitecture && initialScroll) {
-    scrollToIndex(ctx, state, { ...initialScroll, animated: false });
-  }
-  set$(ctx, "containersDidLayout", true);
-  if (onLoad) {
-    onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
-  }
-}
-
-// src/updateSnapToOffsets.ts
-function updateSnapToOffsets(ctx, state) {
-  const {
-    positions,
-    props: { snapToIndices }
-  } = state;
-  const snapToOffsets = Array(snapToIndices.length);
-  for (let i = 0; i < snapToIndices.length; i++) {
-    const idx = snapToIndices[i];
-    const key = getId(state, idx);
-    snapToOffsets[i] = positions.get(key);
-  }
-  set$(ctx, "snapToOffsets", snapToOffsets);
-}
-
-// src/setPaddingTop.ts
+// src/utils/setPaddingTop.ts
 function setPaddingTop(ctx, { stylePaddingTop, alignItemsPaddingTop }) {
   if (stylePaddingTop !== void 0) {
     const prevStylePaddingTop = peek$(ctx, "stylePaddingTop") || 0;
@@ -1142,7 +858,7 @@ function setPaddingTop(ctx, { stylePaddingTop, alignItemsPaddingTop }) {
   }
 }
 
-// src/updateAlignItemsPaddingTop.ts
+// src/utils/updateAlignItemsPaddingTop.ts
 function updateAlignItemsPaddingTop(ctx, state) {
   const {
     scrollLength,
@@ -1158,7 +874,7 @@ function updateAlignItemsPaddingTop(ctx, state) {
   }
 }
 
-// src/updateTotalSize.ts
+// src/core/updateTotalSize.ts
 function updateTotalSize(ctx, state) {
   const {
     positions,
@@ -1191,7 +907,59 @@ function addTotalSize(ctx, state, key, add) {
   }
 }
 
-// src/updateAllPositions.ts
+// src/utils/getScrollVelocity.ts
+var getScrollVelocity = (state) => {
+  const { scrollHistory } = state;
+  let velocity = 0;
+  if (scrollHistory.length >= 1) {
+    const newest = scrollHistory[scrollHistory.length - 1];
+    let oldest;
+    let start = 0;
+    for (let i = 0; i < scrollHistory.length - 1; i++) {
+      const entry = scrollHistory[i];
+      const nextEntry = scrollHistory[i + 1];
+      if (i > 0) {
+        const prevEntry = scrollHistory[i - 1];
+        const prevDirection = entry.scroll - prevEntry.scroll;
+        const currentDirection = nextEntry.scroll - entry.scroll;
+        if (prevDirection > 0 && currentDirection < 0 || prevDirection < 0 && currentDirection > 0) {
+          start = i;
+          break;
+        }
+      }
+    }
+    for (let i = start; i < scrollHistory.length - 1; i++) {
+      const entry = scrollHistory[i];
+      if (newest.time - entry.time <= 1e3) {
+        oldest = entry;
+        break;
+      }
+    }
+    if (oldest) {
+      const scrollDiff = newest.scroll - oldest.scroll;
+      const timeDiff = newest.time - oldest.time;
+      velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
+    }
+  }
+  return velocity;
+};
+
+// src/utils/updateSnapToOffsets.ts
+function updateSnapToOffsets(ctx, state) {
+  const {
+    positions,
+    props: { snapToIndices }
+  } = state;
+  const snapToOffsets = Array(snapToIndices.length);
+  for (let i = 0; i < snapToIndices.length; i++) {
+    const idx = snapToIndices[i];
+    const key = getId(state, idx);
+    snapToOffsets[i] = positions.get(key);
+  }
+  set$(ctx, "snapToOffsets", snapToOffsets);
+}
+
+// src/core/updateAllPositions.ts
 function updateAllPositions(ctx, state, dataChanged) {
   var _a, _b, _c, _d, _e;
   const {
@@ -1288,7 +1056,7 @@ function updateAllPositions(ctx, state, dataChanged) {
   }
 }
 
-// src/viewability.ts
+// src/core/viewability.ts
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
@@ -1296,27 +1064,31 @@ function setupViewability(props) {
     viewabilityConfigCallbackPairs = [
       ...viewabilityConfigCallbackPairs || [],
       {
+        onViewableItemsChanged,
         viewabilityConfig: viewabilityConfig || {
           viewAreaCoveragePercentThreshold: 0
-        },
-        onViewableItemsChanged
+        }
       }
     ];
   }
   if (viewabilityConfigCallbackPairs) {
     for (const pair of viewabilityConfigCallbackPairs) {
       mapViewabilityConfigCallbackPairs.set(pair.viewabilityConfig.id, {
-        viewableItems: [],
-        start: -1,
         end: -1,
+        previousEnd: -1,
         previousStart: -1,
-        previousEnd: -1
+        start: -1,
+        viewableItems: []
       });
     }
   }
   return viewabilityConfigCallbackPairs;
 }
 function updateViewableItems(state, ctx, viewabilityConfigCallbackPairs, scrollSize, start, end) {
+  const {
+    timeouts,
+    props: { data }
+  } = state;
   for (const viewabilityConfigCallbackPair of viewabilityConfigCallbackPairs) {
     const viewabilityState = mapViewabilityConfigCallbackPairs.get(
       viewabilityConfigCallbackPair.viewabilityConfig.id
@@ -1325,12 +1097,12 @@ function updateViewableItems(state, ctx, viewabilityConfigCallbackPairs, scrollS
     viewabilityState.end = end;
     if (viewabilityConfigCallbackPair.viewabilityConfig.minimumViewTime) {
       const timer = setTimeout(() => {
-        state.timeouts.delete(timer);
-        updateViewableItemsWithConfig(state.data, viewabilityConfigCallbackPair, state, ctx, scrollSize);
+        timeouts.delete(timer);
+        updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, state, ctx, scrollSize);
       }, viewabilityConfigCallbackPair.viewabilityConfig.minimumViewTime);
-      state.timeouts.add(timer);
+      timeouts.add(timer);
     } else {
-      updateViewableItemsWithConfig(state.data, viewabilityConfigCallbackPair, state, ctx, scrollSize);
+      updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, state, ctx, scrollSize);
     }
   }
 }
@@ -1382,11 +1154,11 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, stat
       const containerId = findContainerId(ctx, key);
       if (isViewable(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, i)) {
         const viewToken = {
-          item,
-          key,
+          containerId,
           index: i,
           isViewable: true,
-          containerId
+          item,
+          key
         };
         viewableItems.push(viewToken);
         if (!(previousViewableItems == null ? void 0 : previousViewableItems.find((v) => v.key === viewToken.key))) {
@@ -1396,9 +1168,9 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, stat
     }
   }
   Object.assign(viewabilityState, {
-    viewableItems,
+    previousEnd: end,
     previousStart: start,
-    previousEnd: end
+    viewableItems
   });
   if (changed.length > 0) {
     viewabilityState.viewableItems = viewableItems;
@@ -1407,74 +1179,284 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, stat
       maybeUpdateViewabilityCallback(ctx, configId, change.containerId, change);
     }
     if (onViewableItemsChanged) {
-      onViewableItemsChanged({ viewableItems, changed });
+      onViewableItemsChanged({ changed, viewableItems });
+    }
+  }
+  for (const [containerId, value] of ctx.mapViewabilityAmountValues) {
+    if (value.sizeVisible < 0) {
+      ctx.mapViewabilityAmountValues.delete(containerId);
+    }
+  }
+}
+function computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
+  const { sizes, positions, scroll: scrollState } = state;
+  const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+  const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
+  const viewAreaMode = viewAreaCoveragePercentThreshold != null;
+  const viewablePercentThreshold = viewAreaMode ? viewAreaCoveragePercentThreshold : itemVisiblePercentThreshold;
+  const scroll = scrollState - topPad;
+  const top = positions.get(key) - scroll;
+  const size = sizes.get(key) || 0;
+  const bottom = top + size;
+  const isEntirelyVisible = top >= 0 && bottom <= scrollSize && bottom > top;
+  const sizeVisible = isEntirelyVisible ? size : Math.min(bottom, scrollSize) - Math.max(top, 0);
+  const percentVisible = size ? isEntirelyVisible ? 100 : 100 * (sizeVisible / size) : 0;
+  const percentOfScroller = size ? 100 * (sizeVisible / scrollSize) : 0;
+  const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
+  const isViewable2 = percent >= viewablePercentThreshold;
+  const value = {
+    containerId,
+    index,
+    isViewable: isViewable2,
+    item,
+    key,
+    percentOfScroller,
+    percentVisible,
+    scrollSize,
+    size,
+    sizeVisible
+  };
+  if (JSON.stringify(value) !== JSON.stringify(ctx.mapViewabilityAmountValues.get(containerId))) {
+    ctx.mapViewabilityAmountValues.set(containerId, value);
+    const cb = ctx.mapViewabilityAmountCallbacks.get(containerId);
+    if (cb) {
+      cb(value);
+    }
+  }
+  return value;
+}
+function isViewable(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
+  const value = ctx.mapViewabilityAmountValues.get(containerId) || computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index);
+  return value.isViewable;
+}
+function findContainerId(ctx, key) {
+  const numContainers = peek$(ctx, "numContainers");
+  for (let i = 0; i < numContainers; i++) {
+    const itemKey = peek$(ctx, `containerItemKey${i}`);
+    if (itemKey === key) {
+      return i;
+    }
+  }
+  return -1;
+}
+function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
+  const key = containerId + configId;
+  ctx.mapViewabilityValues.set(key, viewToken);
+  const cb = ctx.mapViewabilityCallbacks.get(key);
+  cb == null ? void 0 : cb(viewToken);
+}
+
+// src/utils/checkAllSizesKnown.ts
+function checkAllSizesKnown(state) {
+  const { startBuffered, endBuffered, sizesKnown } = state;
+  if (endBuffered !== null) {
+    let areAllKnown = true;
+    for (let i = startBuffered; areAllKnown && i <= endBuffered; i++) {
+      const key = getId(state, i);
+      areAllKnown && (areAllKnown = sizesKnown.has(key));
+    }
+    return areAllKnown;
+  }
+  return false;
+}
+
+// src/utils/findAvailableContainers.ts
+function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffered, pendingRemoval) {
+  const numContainers = peek$(ctx, "numContainers");
+  const result = [];
+  const availableContainers = [];
+  for (let u = 0; u < numContainers; u++) {
+    const key = peek$(ctx, `containerItemKey${u}`);
+    let isOk = key === void 0;
+    if (!isOk) {
+      const index = pendingRemoval.indexOf(u);
+      if (index !== -1) {
+        pendingRemoval.splice(index, 1);
+        isOk = true;
+      }
+    }
+    if (isOk) {
+      result.push(u);
+      if (result.length >= numNeeded) {
+        return result;
+      }
+    }
+  }
+  for (let u = 0; u < numContainers; u++) {
+    const key = peek$(ctx, `containerItemKey${u}`);
+    if (key === void 0) continue;
+    const index = state.indexByKey.get(key);
+    if (index < startBuffered) {
+      availableContainers.push({ distance: startBuffered - index, index: u });
+    } else if (index > endBuffered) {
+      availableContainers.push({ distance: index - endBuffered, index: u });
     }
   }
-  for (const [containerId, value] of ctx.mapViewabilityAmountValues) {
-    if (value.sizeVisible < 0) {
-      ctx.mapViewabilityAmountValues.delete(containerId);
+  const remaining = numNeeded - result.length;
+  if (remaining > 0) {
+    if (availableContainers.length > 0) {
+      if (availableContainers.length > remaining) {
+        availableContainers.sort(comparatorByDistance);
+        availableContainers.length = remaining;
+      }
+      for (const container of availableContainers) {
+        result.push(container.index);
+      }
+    }
+    const stillNeeded = numNeeded - result.length;
+    if (stillNeeded > 0) {
+      for (let i = 0; i < stillNeeded; i++) {
+        result.push(numContainers + i);
+      }
+      if (__DEV__ && numContainers + stillNeeded > peek$(ctx, "numContainersPooled")) {
+        console.warn(
+          "[legend-list] No unused container available, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio.",
+          {
+            debugInfo: {
+              numContainers,
+              numContainersPooled: peek$(ctx, "numContainersPooled"),
+              numNeeded,
+              stillNeeded
+            }
+          }
+        );
+      }
     }
   }
+  return result.sort(comparatorDefault);
 }
-function computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
-  const { sizes, positions, scroll: scrollState } = state;
-  const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
-  const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
-  const viewAreaMode = viewAreaCoveragePercentThreshold != null;
-  const viewablePercentThreshold = viewAreaMode ? viewAreaCoveragePercentThreshold : itemVisiblePercentThreshold;
-  const scroll = scrollState - topPad;
-  const top = positions.get(key) - scroll;
-  const size = sizes.get(key) || 0;
-  const bottom = top + size;
-  const isEntirelyVisible = top >= 0 && bottom <= scrollSize && bottom > top;
-  const sizeVisible = isEntirelyVisible ? size : Math.min(bottom, scrollSize) - Math.max(top, 0);
-  const percentVisible = size ? isEntirelyVisible ? 100 : 100 * (sizeVisible / size) : 0;
-  const percentOfScroller = size ? 100 * (sizeVisible / scrollSize) : 0;
-  const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
-  const isViewable2 = percent >= viewablePercentThreshold;
-  const value = {
-    index,
-    isViewable: isViewable2,
-    item,
-    key,
-    percentVisible,
-    percentOfScroller,
-    sizeVisible,
-    size,
-    scrollSize,
-    containerId
-  };
-  if (JSON.stringify(value) !== JSON.stringify(ctx.mapViewabilityAmountValues.get(containerId))) {
-    ctx.mapViewabilityAmountValues.set(containerId, value);
-    const cb = ctx.mapViewabilityAmountCallbacks.get(containerId);
-    if (cb) {
-      cb(value);
-    }
+function comparatorByDistance(a, b) {
+  return b.distance - a.distance;
+}
+
+// src/core/finishScrollTo.ts
+var finishScrollTo = (state) => {
+  if (state) {
+    state.scrollingTo = void 0;
+    state.scrollHistory.length = 0;
+  }
+};
+
+// src/core/scrollTo.ts
+function scrollTo(state, params = {}) {
+  var _a;
+  const { animated } = params;
+  const {
+    refScroller,
+    props: { horizontal }
+  } = state;
+  const offset = calculateOffsetWithOffsetPosition(state, params.offset, params);
+  state.scrollHistory.length = 0;
+  state.scrollingTo = params;
+  state.scrollPending = offset;
+  (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
+    animated: !!animated,
+    x: horizontal ? offset : 0,
+    y: horizontal ? 0 : offset
+  });
+  if (!animated) {
+    state.scroll = offset;
+    setTimeout(() => finishScrollTo(state), 100);
   }
-  return value;
 }
-function isViewable(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
-  const value = ctx.mapViewabilityAmountValues.get(containerId) || computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index);
-  return value.isViewable;
+
+// src/core/scrollToIndex.ts
+function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, viewPosition }) {
+  if (index >= state.props.data.length) {
+    index = state.props.data.length - 1;
+  } else if (index < 0) {
+    index = 0;
+  }
+  const firstIndexOffset = calculateOffsetForIndex(ctx, state, index);
+  const isLast = index === state.props.data.length - 1;
+  if (isLast && viewPosition === void 0) {
+    viewPosition = 1;
+  }
+  const firstIndexScrollPostion = firstIndexOffset - viewOffset;
+  state.scrollForNextCalculateItemsInView = void 0;
+  scrollTo(state, {
+    animated,
+    index,
+    offset: firstIndexScrollPostion,
+    viewOffset,
+    viewPosition: viewPosition != null ? viewPosition : 0
+  });
 }
-function findContainerId(ctx, key) {
-  const numContainers = peek$(ctx, "numContainers");
-  for (let i = 0; i < numContainers; i++) {
-    const itemKey = peek$(ctx, `containerItemKey${i}`);
-    if (itemKey === key) {
-      return i;
+
+// src/utils/checkThreshold.ts
+var checkThreshold = (distance, atThreshold, threshold, isReached, isBlockedByTimer, onReached, blockTimer) => {
+  const distanceAbs = Math.abs(distance);
+  const isAtThreshold = atThreshold || distanceAbs < threshold;
+  if (!isReached && !isBlockedByTimer) {
+    if (isAtThreshold) {
+      onReached == null ? void 0 : onReached(distance);
+      blockTimer == null ? void 0 : blockTimer(true);
+      setTimeout(() => {
+        blockTimer == null ? void 0 : blockTimer(false);
+      }, 700);
+      return true;
+    }
+  } else {
+    if (distance >= 1.3 * threshold) {
+      return false;
     }
   }
-  return -1;
+  return isReached;
+};
+
+// src/utils/checkAtBottom.ts
+function checkAtBottom(ctx, state) {
+  if (!state) {
+    return;
+  }
+  const {
+    queuedInitialLayout,
+    scrollLength,
+    scroll,
+    maintainingScrollAtEnd,
+    props: { maintainScrollAtEndThreshold, onEndReachedThreshold }
+  } = state;
+  const contentSize = getContentSize(ctx);
+  if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
+    const distanceFromEnd = contentSize - scroll - scrollLength;
+    const isContentLess = contentSize < scrollLength;
+    state.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
+    state.isEndReached = checkThreshold(
+      distanceFromEnd,
+      isContentLess,
+      onEndReachedThreshold * scrollLength,
+      state.isEndReached,
+      state.endReachedBlockedByTimer,
+      (distance) => {
+        var _a, _b;
+        return (_b = (_a = state.props).onEndReached) == null ? void 0 : _b.call(_a, { distanceFromEnd: distance });
+      },
+      (block) => {
+        state.endReachedBlockedByTimer = block;
+      }
+    );
+  }
 }
-function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
-  const key = containerId + configId;
-  ctx.mapViewabilityValues.set(key, viewToken);
-  const cb = ctx.mapViewabilityCallbacks.get(key);
-  cb == null ? void 0 : cb(viewToken);
+
+// src/utils/setDidLayout.ts
+function setDidLayout(ctx, state) {
+  const {
+    loadStartTime,
+    initialScroll,
+    props: { onLoad }
+  } = state;
+  state.queuedInitialLayout = true;
+  checkAtBottom(ctx, state);
+  if (!IsNewArchitecture && initialScroll) {
+    scrollToIndex(ctx, state, { ...initialScroll, animated: false });
+  }
+  set$(ctx, "containersDidLayout", true);
+  if (onLoad) {
+    onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
+  }
 }
 
-// src/calculateItemsInView.ts
+// src/core/calculateItemsInView.ts
 function calculateItemsInView(ctx, state, params = {}) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const {
@@ -1491,7 +1473,8 @@ function calculateItemsInView(ctx, state, params = {}) {
     minIndexSizeChanged
   } = state;
   const data = state.props.data;
-  if (!data || scrollLength === 0) {
+  const prevNumContainers = peek$(ctx, "numContainers");
+  if (!data || scrollLength === 0 || !prevNumContainers) {
     return;
   }
   const totalSize = peek$(ctx, "totalSize");
@@ -1573,7 +1556,6 @@ function calculateItemsInView(ctx, state, params = {}) {
   let foundEnd = false;
   let nextTop;
   let nextBottom;
-  const prevNumContainers = ctx.values.get("numContainers");
   let maxIndexRendered = 0;
   for (let i = 0; i < prevNumContainers; i++) {
     const key = peek$(ctx, `containerItemKey${i}`);
@@ -1619,18 +1601,18 @@ function calculateItemsInView(ctx, state, params = {}) {
     idsInView.push(id);
   }
   Object.assign(state, {
-    startBuffered,
-    startBufferedId,
-    startNoBuffer,
     endBuffered,
     endNoBuffer,
+    firstFullyOnScreenIndex,
     idsInView,
-    firstFullyOnScreenIndex
+    startBuffered,
+    startBufferedId,
+    startNoBuffer
   });
   if (enableScrollForNextCalculateItemsInView && nextTop !== void 0 && nextBottom !== void 0) {
     state.scrollForNextCalculateItemsInView = nextTop !== void 0 && nextBottom !== void 0 ? {
-      top: nextTop,
-      bottom: nextBottom
+      bottom: nextBottom,
+      top: nextTop
     } : void 0;
   }
   const numContainers = peek$(ctx, "numContainers");
@@ -1718,70 +1700,27 @@ function calculateItemsInView(ctx, state, params = {}) {
             set$(ctx, `containerItemData${i}`, data[itemIndex]);
           }
         }
-      }
-    }
-  }
-  if (!queuedInitialLayout && endBuffered !== null) {
-    if (checkAllSizesKnown(state)) {
-      setDidLayout(ctx, state);
-    }
-  }
-  if (state.props.viewabilityConfigCallbackPairs) {
-    updateViewableItems(
-      state,
-      ctx,
-      state.props.viewabilityConfigCallbackPairs,
-      scrollLength,
-      startNoBuffer,
-      endNoBuffer
-    );
-  }
-}
-
-// src/checkAtTop.ts
-function checkAtTop(state) {
-  if (!state) {
-    return;
-  }
-  const {
-    scrollLength,
-    scroll,
-    props: { onStartReachedThreshold }
-  } = state;
-  const distanceFromTop = scroll;
-  state.isAtStart = distanceFromTop <= 0;
-  state.isStartReached = checkThreshold(
-    distanceFromTop,
-    false,
-    onStartReachedThreshold * scrollLength,
-    state.isStartReached,
-    state.startReachedBlockedByTimer,
-    (distance) => {
-      var _a, _b;
-      return (_b = (_a = state.props).onStartReached) == null ? void 0 : _b.call(_a, { distanceFromStart: distance });
-    },
-    (block) => {
-      state.startReachedBlockedByTimer = block;
-    }
-  );
-}
-
-// src/createColumnWrapperStyle.ts
-function createColumnWrapperStyle(contentContainerStyle) {
-  const { gap, columnGap, rowGap } = contentContainerStyle;
-  if (gap || columnGap || rowGap) {
-    contentContainerStyle.gap = void 0;
-    contentContainerStyle.columnGap = void 0;
-    contentContainerStyle.rowGap = void 0;
-    return {
-      gap,
-      columnGap,
-      rowGap
-    };
+      }
+    }
+  }
+  if (!queuedInitialLayout && endBuffered !== null) {
+    if (checkAllSizesKnown(state)) {
+      setDidLayout(ctx, state);
+    }
+  }
+  if (state.props.viewabilityConfigCallbackPairs) {
+    updateViewableItems(
+      state,
+      ctx,
+      state.props.viewabilityConfigCallbackPairs,
+      scrollLength,
+      startNoBuffer,
+      endNoBuffer
+    );
   }
 }
 
-// src/doInitialAllocateContainers.ts
+// src/core/doInitialAllocateContainers.ts
 function doInitialAllocateContainers(ctx, state) {
   const { scrollLength } = state;
   const data = state.props.data;
@@ -1810,7 +1749,7 @@ function doInitialAllocateContainers(ctx, state) {
   }
 }
 
-// src/doMaintainScrollAtEnd.ts
+// src/core/doMaintainScrollAtEnd.ts
 function doMaintainScrollAtEnd(ctx, state, animated) {
   const {
     refScroller,
@@ -1837,31 +1776,36 @@ function doMaintainScrollAtEnd(ctx, state, animated) {
     return true;
   }
 }
-function getRenderedItem(ctx, state, key) {
+
+// src/utils/checkAtTop.ts
+function checkAtTop(state) {
   if (!state) {
-    return null;
+    return;
   }
   const {
-    indexByKey,
-    props: { data, renderItem: renderItem2 }
+    scrollLength,
+    scroll,
+    props: { onStartReachedThreshold }
   } = state;
-  const index = indexByKey.get(key);
-  if (index === void 0) {
-    return null;
-  }
-  let renderedItem = null;
-  if (renderItem2) {
-    const itemProps = {
-      item: data[index],
-      index,
-      extraData: peek$(ctx, "extraData")
-    };
-    renderedItem = React3__default.createElement(renderItem2, itemProps);
-  }
-  return { index, item: data[index], renderedItem };
+  const distanceFromTop = scroll;
+  state.isAtStart = distanceFromTop <= 0;
+  state.isStartReached = checkThreshold(
+    distanceFromTop,
+    false,
+    onStartReachedThreshold * scrollLength,
+    state.isStartReached,
+    state.startReachedBlockedByTimer,
+    (distance) => {
+      var _a, _b;
+      return (_b = (_a = state.props).onStartReached) == null ? void 0 : _b.call(_a, { distanceFromStart: distance });
+    },
+    (block) => {
+      state.startReachedBlockedByTimer = block;
+    }
+  );
 }
 
-// src/handleLayout.ts
+// src/core/handleLayout.ts
 function handleLayout(ctx, state, layout, setCanRender) {
   const { maintainScrollAtEnd } = state.props;
   const scrollLength = layout[state.props.horizontal ? "width" : "height"];
@@ -1879,7 +1823,7 @@ function handleLayout(ctx, state, layout, setCanRender) {
     calculateItemsInView(ctx, state, { doMVCP: true });
   }
   if (didChange || otherAxisSize !== prevOtherAxisSize) {
-    set$(ctx, "scrollSize", { width: layout.width, height: layout.height });
+    set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
   }
   if (maintainScrollAtEnd === true || maintainScrollAtEnd.onLayout) {
     doMaintainScrollAtEnd(ctx, state, false);
@@ -1899,7 +1843,7 @@ function handleLayout(ctx, state, layout, setCanRender) {
   setCanRender(true);
 }
 
-// src/onScroll.ts
+// src/core/onScroll.ts
 function onScroll(ctx, state, event) {
   var _a, _b, _c, _d, _e;
   if (((_b = (_a = event.nativeEvent) == null ? void 0 : _a.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
@@ -1937,7 +1881,29 @@ function updateScroll(ctx, state, newScroll) {
   checkAtTop(state);
 }
 
-// src/updateItemSize.ts
+// src/core/ScrollAdjustHandler.ts
+var ScrollAdjustHandler = class {
+  constructor(ctx) {
+    this.appliedAdjust = 0;
+    this.mounted = false;
+    this.context = ctx;
+  }
+  requestAdjust(add) {
+    const oldAdjustTop = peek$(this.context, "scrollAdjust") || 0;
+    this.appliedAdjust = add + oldAdjustTop;
+    const set = () => set$(this.context, "scrollAdjust", this.appliedAdjust);
+    if (this.mounted) {
+      set();
+    } else {
+      requestAnimationFrame(set);
+    }
+  }
+  setMounted() {
+    this.mounted = true;
+  }
+};
+
+// src/core/updateItemSize.ts
 function updateItemSizes(ctx, state, itemUpdates) {
   var _a;
   const {
@@ -1951,7 +1917,8 @@ function updateItemSizes(ctx, state, itemUpdates) {
     }
   } = state;
   if (!data) return;
-  let needsRecalculate = false;
+  const containersDidLayout = peek$(ctx, "containersDidLayout");
+  let needsRecalculate = !containersDidLayout;
   let shouldMaintainScrollAtEnd = false;
   let minIndexSizeChanged;
   let maxOtherAxisSize = peek$(ctx, "otherAxisSize") || 0;
@@ -1962,7 +1929,7 @@ function updateItemSizes(ctx, state, itemUpdates) {
     const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
     if (diff !== 0) {
       minIndexSizeChanged = minIndexSizeChanged !== void 0 ? Math.min(minIndexSizeChanged, index) : index;
-      if (((_a = state.scrollingTo) == null ? void 0 : _a.viewPosition) && maintainVisibleContentPosition && index === state.scrollingTo.index) {
+      if (((_a = state.scrollingTo) == null ? void 0 : _a.viewPosition) && maintainVisibleContentPosition && index === state.scrollingTo.index && diff > 0) {
         requestAdjust(ctx, state, diff * state.scrollingTo.viewPosition);
       }
       const { startBuffered, endBuffered } = state;
@@ -1984,11 +1951,11 @@ function updateItemSizes(ctx, state, itemUpdates) {
         shouldMaintainScrollAtEnd = true;
       }
       onItemSizeChanged == null ? void 0 : onItemSizeChanged({
-        size,
-        previous: size - diff,
         index,
+        itemData: state.props.data[index],
         itemKey,
-        itemData: state.props.data[index]
+        previous: size - diff,
+        size
       });
     }
   }
@@ -2011,7 +1978,6 @@ function updateItemSizes(ctx, state, itemUpdates) {
   if (!cur || maxOtherAxisSize > cur) {
     set$(ctx, "otherAxisSize", maxOtherAxisSize);
   }
-  const containersDidLayout = peek$(ctx, "containersDidLayout");
   if (containersDidLayout || checkAllSizesKnown(state)) {
     if (needsRecalculate) {
       state.scrollForNextCalculateItemsInView = void 0;
@@ -2027,7 +1993,7 @@ function updateItemSizes(ctx, state, itemUpdates) {
 function updateItemSize(ctx, state, itemKey, sizeObj) {
   if (IsNewArchitecture) {
     const { sizesKnown } = state;
-    const numContainers = ctx.values.get("numContainers");
+    const numContainers = peek$(ctx, "numContainers");
     const changes = [];
     for (let i = 0; i < numContainers; i++) {
       const containerItemKey = peek$(ctx, `containerItemKey${i}`);
@@ -2038,7 +2004,7 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
         if (containerRef == null ? void 0 : containerRef.current) {
           let measured;
           containerRef.current.measure((x, y, width, height) => {
-            measured = { x, y, width, height };
+            measured = { height, width, x, y };
           });
           if (measured) {
             changes.push({ itemKey: containerItemKey, sizeObj: measured });
@@ -2069,7 +2035,7 @@ function updateOneItemSize(state, itemKey, sizeObj) {
   const itemType = "";
   let averages = averageSizes[itemType];
   if (!averages) {
-    averages = averageSizes[itemType] = { num: 0, avg: 0 };
+    averages = averageSizes[itemType] = { avg: 0, num: 0 };
   }
   averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
   averages.num++;
@@ -2095,7 +2061,45 @@ var useCombinedRef = (...refs) => {
   return callback;
 };
 
-// src/LegendList.tsx
+// src/utils/createColumnWrapperStyle.ts
+function createColumnWrapperStyle(contentContainerStyle) {
+  const { gap, columnGap, rowGap } = contentContainerStyle;
+  if (gap || columnGap || rowGap) {
+    contentContainerStyle.gap = void 0;
+    contentContainerStyle.columnGap = void 0;
+    contentContainerStyle.rowGap = void 0;
+    return {
+      columnGap,
+      gap,
+      rowGap
+    };
+  }
+}
+function getRenderedItem(ctx, state, key) {
+  if (!state) {
+    return null;
+  }
+  const {
+    indexByKey,
+    props: { data, renderItem: renderItem2 }
+  } = state;
+  const index = indexByKey.get(key);
+  if (index === void 0) {
+    return null;
+  }
+  let renderedItem = null;
+  if (renderItem2) {
+    const itemProps = {
+      extraData: peek$(ctx, "extraData"),
+      index,
+      item: data[index]
+    };
+    renderedItem = React3__default.createElement(renderItem2, itemProps);
+  }
+  return { index, item: data[index], renderedItem };
+}
+
+// src/components/LegendList.tsx
 var DEFAULT_DRAW_DISTANCE = 250;
 var DEFAULT_ITEM_SIZE = 100;
 var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
@@ -2163,55 +2167,55 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const combinedRef = useCombinedRef(refScroller, refScrollView);
   const estimatedItemSize = estimatedItemSizeProp != null ? estimatedItemSizeProp : DEFAULT_ITEM_SIZE;
   const scrollBuffer = (drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE) || 1;
-  const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (item, index) => index.toString();
+  const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (_item, index) => index.toString();
   const refState = useRef();
   if (!refState.current) {
-    const initialScrollLength = (estimatedListSize != null ? estimatedListSize : IsNewArchitecture ? { width: 0, height: 0 } : Dimensions.get("window"))[horizontal ? "width" : "height"];
+    const initialScrollLength = (estimatedListSize != null ? estimatedListSize : IsNewArchitecture ? { height: 0, width: 0 } : Dimensions.get("window"))[horizontal ? "width" : "height"];
     refState.current = {
-      sizes: /* @__PURE__ */ new Map(),
-      positions: /* @__PURE__ */ new Map(),
+      averageSizes: {},
       columns: /* @__PURE__ */ new Map(),
-      pendingAdjust: 0,
-      isStartReached: false,
-      isEndReached: false,
-      isAtEnd: false,
-      isAtStart: false,
-      scrollLength: initialScrollLength,
-      startBuffered: -1,
-      startNoBuffer: -1,
+      containerItemKeys: /* @__PURE__ */ new Set(),
+      enableScrollForNextCalculateItemsInView: true,
       endBuffered: -1,
       endNoBuffer: -1,
+      endReachedBlockedByTimer: false,
       firstFullyOnScreenIndex: -1,
+      idCache: /* @__PURE__ */ new Map(),
+      idsInView: [],
+      indexByKey: /* @__PURE__ */ new Map(),
+      initialScroll,
+      isAtEnd: false,
+      isAtStart: false,
+      isEndReached: false,
+      isStartReached: false,
+      lastBatchingAction: Date.now(),
+      lastLayout: void 0,
+      loadStartTime: Date.now(),
+      minIndexSizeChanged: 0,
+      nativeMarginTop: 0,
+      pendingAdjust: 0,
+      positions: /* @__PURE__ */ new Map(),
+      props: {},
+      queuedCalculateItemsInView: 0,
+      refScroller: void 0,
       scroll: 0,
-      totalSize: 0,
-      timeouts: /* @__PURE__ */ new Set(),
-      viewabilityConfigCallbackPairs: void 0,
       scrollAdjustHandler: new ScrollAdjustHandler(ctx),
-      nativeMarginTop: 0,
+      scrollForNextCalculateItemsInView: void 0,
+      scrollHistory: [],
+      scrollLength: initialScrollLength,
+      scrollPending: 0,
       scrollPrev: 0,
       scrollPrevTime: 0,
       scrollTime: 0,
-      scrollPending: 0,
-      indexByKey: /* @__PURE__ */ new Map(),
-      scrollHistory: [],
+      sizes: /* @__PURE__ */ new Map(),
       sizesKnown: /* @__PURE__ */ new Map(),
-      timeoutSizeMessage: 0,
+      startBuffered: -1,
+      startNoBuffer: -1,
       startReachedBlockedByTimer: false,
-      endReachedBlockedByTimer: false,
-      scrollForNextCalculateItemsInView: void 0,
-      enableScrollForNextCalculateItemsInView: true,
-      minIndexSizeChanged: 0,
-      queuedCalculateItemsInView: 0,
-      lastBatchingAction: Date.now(),
-      averageSizes: {},
-      idsInView: [],
-      containerItemKeys: /* @__PURE__ */ new Set(),
-      idCache: /* @__PURE__ */ new Map(),
-      props: {},
-      refScroller: void 0,
-      loadStartTime: Date.now(),
-      initialScroll,
-      lastLayout: void 0
+      timeoutSizeMessage: 0,
+      timeouts: /* @__PURE__ */ new Set(),
+      totalSize: 0,
+      viewabilityConfigCallbackPairs: void 0
     };
     set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
     set$(ctx, "extraData", extraData);
@@ -2223,29 +2227,29 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     alignItemsAtEnd,
     data: dataProp,
     estimatedItemSize,
+    getEstimatedItemSize,
+    horizontal: !!horizontal,
+    initialContainerPoolRatio,
+    initialScroll,
+    keyExtractor,
     maintainScrollAtEnd,
     maintainScrollAtEndThreshold,
-    onEndReachedThreshold,
-    onStartReachedThreshold,
-    stylePaddingBottom: stylePaddingBottomState,
-    horizontal: !!horizontal,
     maintainVisibleContentPosition,
+    numColumns: numColumnsProp,
+    onEndReached,
+    onEndReachedThreshold,
     onItemSizeChanged,
-    suggestEstimatedItemSize: !!suggestEstimatedItemSize,
-    keyExtractor,
+    onLoad,
     onScroll: onScrollProp,
-    getEstimatedItemSize,
     onStartReached,
-    onEndReached,
-    onLoad,
+    onStartReachedThreshold,
     renderItem: renderItem2,
-    initialScroll,
     scrollBuffer,
-    viewabilityConfigCallbackPairs: void 0,
-    numColumns: numColumnsProp,
-    initialContainerPoolRatio,
+    snapToIndices,
+    stylePaddingBottom: stylePaddingBottomState,
     stylePaddingTop: stylePaddingTopState,
-    snapToIndices
+    suggestEstimatedItemSize: !!suggestEstimatedItemSize,
+    viewabilityConfigCallbackPairs: void 0
   };
   state.refScroller = refScroller;
   const checkResetContainers = (isFirst2) => {
@@ -2293,7 +2297,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const initialContentOffset2 = initialScrollOffset || calculateOffsetForIndex(ctx, state, initialScrollIndex);
     refState.current.isStartReached = initialContentOffset2 < refState.current.scrollLength * onStartReachedThreshold;
     if (initialContentOffset2 > 0) {
-      scrollTo(state, { offset: initialContentOffset2, animated: false, index: initialScrollIndex });
+      scrollTo(state, { animated: false, index: initialScrollIndex, offset: initialContentOffset2 });
     }
     return initialContentOffset2;
   }, [renderNum]);
@@ -2312,7 +2316,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (IsNewArchitecture) {
       let measured;
       refScroller.current.measure((x, y, width, height) => {
-        measured = { x, y, width, height };
+        measured = { height, width, x, y };
       });
       if (measured) {
         const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
@@ -2368,9 +2372,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   };
   useEffect(() => {
     const viewability = setupViewability({
+      onViewableItemsChanged,
       viewabilityConfig,
-      viewabilityConfigCallbackPairs,
-      onViewableItemsChanged
+      viewabilityConfigCallbackPairs
     });
     state.viewabilityConfigCallbackPairs = viewability;
     state.props.viewabilityConfigCallbackPairs = viewability;
@@ -2388,98 +2392,94 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       onLayoutProp(event);
     }
   }, []);
-  useImperativeHandle(
-    forwardedRef,
-    () => {
-      const scrollIndexIntoView = (options) => {
+  useImperativeHandle(forwardedRef, () => {
+    const scrollIndexIntoView = (options) => {
+      const state2 = refState.current;
+      if (state2) {
+        const { index, ...rest2 } = options;
+        const { startNoBuffer, endNoBuffer } = state2;
+        if (index < startNoBuffer || index > endNoBuffer) {
+          const viewPosition = index < startNoBuffer ? 0 : 1;
+          scrollToIndex(ctx, state2, {
+            ...rest2,
+            index,
+            viewPosition
+          });
+        }
+      }
+    };
+    return {
+      flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
+      getNativeScrollRef: () => refScroller.current,
+      getScrollableNode: () => refScroller.current.getScrollableNode(),
+      getScrollResponder: () => refScroller.current.getScrollResponder(),
+      getState: () => {
         const state2 = refState.current;
-        if (state2) {
-          const { index, ...rest2 } = options;
-          const { startNoBuffer, endNoBuffer } = state2;
-          if (index < startNoBuffer || index > endNoBuffer) {
-            const viewPosition = index < startNoBuffer ? 0 : 1;
-            scrollToIndex(ctx, state2, {
-              ...rest2,
-              viewPosition,
-              index
-            });
-          }
+        return state2 ? {
+          contentLength: state2.totalSize,
+          end: state2.endNoBuffer,
+          endBuffered: state2.endBuffered,
+          isAtEnd: state2.isAtEnd,
+          isAtStart: state2.isAtStart,
+          positions: state2.positions,
+          scroll: state2.scroll,
+          scrollLength: state2.scrollLength,
+          sizeAtIndex: (index) => state2.sizesKnown.get(getId(state2, index)),
+          sizes: state2.sizesKnown,
+          start: state2.startNoBuffer,
+          startBuffered: state2.startBuffered
+        } : {};
+      },
+      scrollIndexIntoView,
+      scrollItemIntoView: ({ item, ...props2 }) => {
+        const data = refState.current.props.data;
+        const index = data.indexOf(item);
+        if (index !== -1) {
+          scrollIndexIntoView({ index, ...props2 });
         }
-      };
-      return {
-        flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
-        getNativeScrollRef: () => refScroller.current,
-        getScrollableNode: () => refScroller.current.getScrollableNode(),
-        getScrollResponder: () => refScroller.current.getScrollResponder(),
-        getState: () => {
-          const state2 = refState.current;
-          return state2 ? {
-            contentLength: state2.totalSize,
-            end: state2.endNoBuffer,
-            endBuffered: state2.endBuffered,
-            isAtEnd: state2.isAtEnd,
-            isAtStart: state2.isAtStart,
-            positions: state2.positions,
-            scroll: state2.scroll,
-            scrollLength: state2.scrollLength,
-            start: state2.startNoBuffer,
-            startBuffered: state2.startBuffered,
-            sizes: state2.sizesKnown,
-            sizeAtIndex: (index) => state2.sizesKnown.get(getId(state2, index))
-          } : {};
-        },
-        scrollIndexIntoView,
-        scrollItemIntoView: ({ item, ...props2 }) => {
-          const data = refState.current.props.data;
-          const index = data.indexOf(item);
-          if (index !== -1) {
-            scrollIndexIntoView({ index, ...props2 });
-          }
-        },
-        scrollToIndex: (params) => scrollToIndex(ctx, state, params),
-        scrollToItem: ({ item, ...props2 }) => {
-          const data = refState.current.props.data;
-          const index = data.indexOf(item);
-          if (index !== -1) {
-            scrollToIndex(ctx, state, { index, ...props2 });
-          }
-        },
-        scrollToOffset: (params) => scrollTo(state, params),
-        scrollToEnd: (options) => {
-          const data = refState.current.props.data;
-          const stylePaddingBottom = refState.current.props.stylePaddingBottom;
-          const index = data.length - 1;
-          if (index !== -1) {
-            const paddingBottom = stylePaddingBottom || 0;
-            const footerSize = peek$(ctx, "footerSize") || 0;
-            scrollToIndex(ctx, state, {
-              index,
-              viewPosition: 1,
-              viewOffset: -paddingBottom - footerSize,
-              ...options
-            });
-          }
-        },
-        setVisibleContentAnchorOffset: (value) => {
-          const val = typeof value === "function" ? value(peek$(ctx, "scrollAdjustUserOffset") || 0) : value;
-          set$(ctx, "scrollAdjustUserOffset", val);
+      },
+      scrollToEnd: (options) => {
+        const data = refState.current.props.data;
+        const stylePaddingBottom = refState.current.props.stylePaddingBottom;
+        const index = data.length - 1;
+        if (index !== -1) {
+          const paddingBottom = stylePaddingBottom || 0;
+          const footerSize = peek$(ctx, "footerSize") || 0;
+          scrollToIndex(ctx, state, {
+            index,
+            viewOffset: -paddingBottom - footerSize,
+            viewPosition: 1,
+            ...options
+          });
         }
-      };
-    },
-    []
-  );
+      },
+      scrollToIndex: (params) => scrollToIndex(ctx, state, params),
+      scrollToItem: ({ item, ...props2 }) => {
+        const data = refState.current.props.data;
+        const index = data.indexOf(item);
+        if (index !== -1) {
+          scrollToIndex(ctx, state, { index, ...props2 });
+        }
+      },
+      scrollToOffset: (params) => scrollTo(state, params),
+      setVisibleContentAnchorOffset: (value) => {
+        const val = typeof value === "function" ? value(peek$(ctx, "scrollAdjustUserOffset") || 0) : value;
+        set$(ctx, "scrollAdjustUserOffset", val);
+      }
+    };
+  }, []);
   if (Platform.OS === "web") {
     useEffect(() => {
       if (initialContentOffset) {
-        scrollTo(state, { offset: initialContentOffset, animated: false });
+        scrollTo(state, { animated: false, offset: initialContentOffset });
       }
     }, []);
   }
   const fns = useMemo(
     () => ({
-      updateItemSize: (itemKey, sizeObj) => updateItemSize(ctx, state, itemKey, sizeObj),
       getRenderedItem: (key) => getRenderedItem(ctx, state, key),
-      onScroll: (event) => onScroll(ctx, state, event)
+      onScroll: (event) => onScroll(ctx, state, event),
+      updateItemSize: (itemKey, sizeObj) => updateItemSize(ctx, state, itemKey, sizeObj)
     }),
     []
   );
@@ -2487,13 +2487,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     ListComponent,
     {
       ...rest,
+      alignItemsAtEnd,
       canRender,
+      contentContainerStyle,
+      getRenderedItem: fns.getRenderedItem,
       horizontal,
-      refScrollView: combinedRef,
       initialContentOffset,
-      getRenderedItem: fns.getRenderedItem,
-      updateItemSize: fns.updateItemSize,
-      onScroll: fns.onScroll,
+      ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
+      ListHeaderComponent,
+      maintainVisibleContentPosition,
+      onLayout,
+      onLayoutHeader,
       onMomentumScrollEnd: (event) => {
         requestAnimationFrame(() => {
           finishScrollTo(refState.current);
@@ -2502,32 +2506,30 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           onMomentumScrollEnd(event);
         }
       },
-      onLayout,
+      onScroll: fns.onScroll,
       recycleItems,
-      alignItemsAtEnd,
-      ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
-      ListHeaderComponent,
-      maintainVisibleContentPosition,
-      scrollEventThrottle: Platform.OS === "web" ? 16 : void 0,
-      waitForInitialLayout,
       refreshControl: refreshControl ? stylePaddingTopState > 0 ? React3.cloneElement(refreshControl, {
         progressViewOffset: (refreshControl.props.progressViewOffset || 0) + stylePaddingTopState
       }) : refreshControl : onRefresh && /* @__PURE__ */ React3.createElement(
         RefreshControl,
         {
-          refreshing: !!refreshing,
           onRefresh,
-          progressViewOffset: (progressViewOffset || 0) + stylePaddingTopState
+          progressViewOffset: (progressViewOffset || 0) + stylePaddingTopState,
+          refreshing: !!refreshing
         }
       ),
-      style,
-      contentContainerStyle,
+      refScrollView: combinedRef,
       scrollAdjustHandler: (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler,
-      onLayoutHeader,
-      snapToIndices
+      scrollEventThrottle: Platform.OS === "web" ? 16 : void 0,
+      snapToIndices,
+      style,
+      updateItemSize: fns.updateItemSize,
+      waitForInitialLayout
     }
   ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React3.createElement(DebugView, { state: refState.current }));
 });
+
+// src/components/LazyLegendList.tsx
 var typedForwardRef2 = forwardRef;
 var renderItem = ({ item }) => item;
 var LazyLegendList = typedForwardRef2(function LazyLegendList2(props, forwardedRef) {
@@ -2536,7 +2538,7 @@ var LazyLegendList = typedForwardRef2(function LazyLegendList2(props, forwardedR
   const data = (isArray(children) ? children : React3.Children.toArray(children)).flat(1);
   return (
     // @ts-expect-error TODO: Fix this type
-    /* @__PURE__ */ React3.createElement(LegendListComponent, { ...rest, data, renderItem, ref: forwardedRef })
+    /* @__PURE__ */ React3.createElement(LegendListComponent, { ...rest, data, ref: forwardedRef, renderItem })
   );
 });