@legendapp/list 0.4.5 → 0.5.0

package/index.mjs

@@ -1,15 +1,12 @@
-import * as React6 from 'react';
-import { forwardRef, useRef, useMemo, useCallback, useEffect, useImperativeHandle, useState } from 'react';
-import { ScrollView, View, StyleSheet, Dimensions, unstable_batchedUpdates } from 'react-native';
+import * as React7 from 'react';
+import React7__default, { forwardRef, useRef, useMemo, useCallback, useImperativeHandle, useEffect, useState } from 'react';
+import { Platform, StyleSheet, ScrollView, View, Dimensions } from 'react-native';
 
 // src/LegendList.tsx
-var LeanView = React6.forwardRef((props, ref) => {
-  return React6.createElement("RCTView", { ...props, ref });
-});
-LeanView.displayName = "RCTView";
-var ContextState = React6.createContext(null);
+var USE_CONTENT_INSET = Platform.OS === "ios";
+var ContextState = React7.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React6.useState(() => ({
+  const [value] = React7.useState(() => ({
     hooks: /* @__PURE__ */ new Map(),
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map(),
@@ -18,14 +15,14 @@ function StateProvider({ children }) {
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityAmountValues: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React6.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React7.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React6.useContext(ContextState);
+  return React7.useContext(ContextState);
 }
 function use$(signalName) {
-  const { hooks, values } = React6.useContext(ContextState);
-  const [, forceUpdate] = React6.useReducer((x) => x + 1, 0);
+  const { hooks, values } = React7.useContext(ContextState);
+  const [, forceUpdate] = React7.useReducer((x) => x + 1, 0);
   hooks.set(signalName, forceUpdate);
   return values.get(signalName);
 }
@@ -58,27 +55,46 @@ function set$(ctx, signalName, value) {
   }
 }
 
+// src/$ScrollView.tsx
+var OFFSET_TEST = 0;
+var $ScrollView = React7.forwardRef(function $ScrollView2(props, ref) {
+  const { style, horizontal, ...rest } = props;
+  const scrollAdjust = use$("scrollAdjust");
+  const adjustProps = {};
+  if (scrollAdjust !== 0) {
+    if (USE_CONTENT_INSET) {
+      adjustProps.contentInset = horizontal ? { left: -scrollAdjust } : { top: -scrollAdjust + OFFSET_TEST };
+    } else {
+      adjustProps.style = horizontal ? { marginLeft: -scrollAdjust } : { marginTop: -scrollAdjust };
+      if (style) {
+        adjustProps.style = StyleSheet.compose(style, adjustProps.style);
+      }
+    }
+  }
+  return /* @__PURE__ */ React7.createElement(ScrollView, { ...rest, style, horizontal, ...adjustProps, ref });
+});
+var LeanView = React7.forwardRef((props, ref) => {
+  return React7.createElement("RCTView", { ...props, ref });
+});
+LeanView.displayName = "RCTView";
+
 // src/$View.tsx
-function $View({ $key, $style, ...rest }) {
+function $View({ $key, $key2, $style, ...rest }) {
   use$($key);
+  if ($key2) {
+    use$($key2);
+  }
   const style = $style();
-  return /* @__PURE__ */ React6.createElement(LeanView, { style, ...rest });
+  return /* @__PURE__ */ React7.createElement(LeanView, { style, ...rest });
 }
-function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
-  const itemIndex = use$(`containerIndex${id}`);
-  const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
-  if (itemIndex < 0) {
+function InnerContainer({ containerId, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
+  const lastItemKey = use$("lastItemKey");
+  const itemKey = use$(`containerItemKey${containerId}`);
+  if (itemKey === void 0) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, { key: recycleItems ? void 0 : itemIndex }, /* @__PURE__ */ React6.createElement(RenderedItem, { itemIndex, id, getRenderedItem }), ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
-}
-function RenderedItem({
-  itemIndex,
-  id,
-  getRenderedItem
-}) {
-  const renderedItem = getRenderedItem(itemIndex, id);
-  return renderedItem;
+  const renderedItem = getRenderedItem(itemKey, containerId);
+  return /* @__PURE__ */ React7__default.createElement(React7__default.Fragment, { key: recycleItems ? void 0 : itemKey }, renderedItem, ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent);
 }
 var Container = ({
   id,
@@ -91,38 +107,44 @@ var Container = ({
   const ctx = useStateContext();
   const createStyle = () => {
     const position = peek$(ctx, `containerPosition${id}`);
+    const visible = peek$(ctx, `containerDidLayout${id}`);
     return horizontal ? {
       flexDirection: "row",
       position: "absolute",
-      top: 0,
+      top: visible ? 0 : -1e7,
       bottom: 0,
-      left: position,
-      opacity: position < 0 ? 0 : 1
+      left: position
     } : {
       position: "absolute",
-      left: 0,
+      left: visible ? 0 : -1e7,
       right: 0,
-      top: position,
-      opacity: position < 0 ? 0 : 1
+      top: position
     };
   };
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7__default.createElement(
     $View,
     {
       $key: `containerPosition${id}`,
+      $key2: `containerDidLayout${id}`,
       $style: createStyle,
       onLayout: (event) => {
-        const index = peek$(ctx, `containerIndex${id}`);
-        if (index >= 0) {
+        const key = peek$(ctx, `containerItemKey${id}`);
+        if (key !== void 0) {
           const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
-          onLayout(index, size);
+          onLayout(key, size);
+          const measured = peek$(ctx, `containerDidLayout${id}`);
+          if (!measured) {
+            requestAnimationFrame(() => {
+              set$(ctx, `containerDidLayout${id}`, true);
+            });
+          }
         }
       }
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7__default.createElement(
       InnerContainer,
       {
-        id,
+        containerId: id,
         getRenderedItem,
         recycleItems,
         ItemSeparatorComponent
@@ -132,7 +154,7 @@ var Container = ({
 };
 
 // src/Containers.tsx
-var Containers = React6.memo(function Containers2({
+var Containers = React7.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -140,11 +162,11 @@ var Containers = React6.memo(function Containers2({
   getRenderedItem
 }) {
   const ctx = useStateContext();
-  const numContainers = use$("numContainers");
+  const numContainers = use$("numContainersPooled");
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React7.createElement(
         Container,
         {
           id: i,
@@ -158,14 +180,18 @@ var Containers = React6.memo(function Containers2({
       )
     );
   }
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     $View,
     {
       $key: "totalSize",
-      $style: () => horizontal ? {
-        width: peek$(ctx, "totalSize")
-      } : {
-        height: peek$(ctx, "totalSize")
+      $key2: "scrollAdjust",
+      $style: () => {
+        const size = peek$(ctx, "totalSize") + peek$(ctx, "scrollAdjust");
+        return horizontal ? {
+          width: size
+        } : {
+          height: size
+        };
       }
     },
     containers
@@ -174,15 +200,15 @@ var Containers = React6.memo(function Containers2({
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React6.isValidElement(Component)) {
+  if (React7.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React6.createElement(Component, null);
+    return /* @__PURE__ */ React7.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React6.memo(function ListComponent2({
+var ListComponent = React7.memo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -205,8 +231,8 @@ var ListComponent = React6.memo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
-  return /* @__PURE__ */ React6.createElement(
-    ScrollView,
+  return /* @__PURE__ */ React7.createElement(
+    $ScrollView,
     {
       ...rest,
       style,
@@ -218,29 +244,35 @@ var ListComponent = React6.memo(function ListComponent2({
       ],
       onScroll: handleScroll,
       onLayout,
-      scrollEventThrottle: 32,
       horizontal,
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScroller
     },
-    alignItemsAtEnd && /* @__PURE__ */ React6.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
-    ListHeaderComponent && /* @__PURE__ */ React6.createElement(
-      View,
+    alignItemsAtEnd && /* @__PURE__ */ React7.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
+    ListHeaderComponent && /* @__PURE__ */ React7.createElement(
+      $View,
       {
-        style: ListHeaderComponentStyle,
+        $key: "scrollAdjust",
+        $style: () => StyleSheet.compose(ListHeaderComponentStyle, { top: peek$(ctx, "scrollAdjust") }),
         onLayout: (event) => {
           const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
           const prevSize = peek$(ctx, "headerSize") || 0;
           if (size !== prevSize) {
             set$(ctx, "headerSize", size);
-            addTotalSize(size - prevSize);
           }
         }
       },
       getComponent(ListHeaderComponent)
     ),
-    ListEmptyComponent && /* @__PURE__ */ React6.createElement(View, { style: ListEmptyComponentStyle }, getComponent(ListEmptyComponent)),
-    /* @__PURE__ */ React6.createElement(
+    ListEmptyComponent && /* @__PURE__ */ React7.createElement(
+      $View,
+      {
+        $key: "scrollAdjust",
+        $style: () => StyleSheet.compose(ListEmptyComponentStyle, { top: peek$(ctx, "scrollAdjust") })
+      },
+      getComponent(ListEmptyComponent)
+    ),
+    /* @__PURE__ */ React7.createElement(
       Containers,
       {
         horizontal,
@@ -250,7 +282,7 @@ var ListComponent = React6.memo(function ListComponent2({
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React6.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React7.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
 var symbolFirst = Symbol();
@@ -266,14 +298,17 @@ function useInit(cb) {
 var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new Map();
 function setupViewability(props) {
   let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
-  viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || [
-    {
-      viewabilityConfig: viewabilityConfig || {
-        viewAreaCoveragePercentThreshold: 0
-      },
-      onViewableItemsChanged
-    }
-  ];
+  if (viewabilityConfig || onViewableItemsChanged) {
+    viewabilityConfigCallbackPairs = [
+      ...viewabilityConfigCallbackPairs || [],
+      {
+        viewabilityConfig: viewabilityConfig || {
+          viewAreaCoveragePercentThreshold: 0
+        },
+        onViewableItemsChanged
+      }
+    ];
+  }
   if (viewabilityConfigCallbackPairs) {
     for (const pair of viewabilityConfigCallbackPairs) {
       mapViewabilityConfigCallbackPairs.set(pair.viewabilityConfig.id, {
@@ -369,7 +404,7 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
   const percentOfScroller = size ? 100 * (sizeVisible / scrollSize) : 0;
   const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
   const isViewable2 = percent >= viewablePercentThreshold;
-  const containerId = findContainerId(state, ctx, index);
+  const containerId = findContainerId(ctx, key);
   const value = {
     index,
     isViewable: isViewable2,
@@ -389,11 +424,11 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
   }
   return isViewable2;
 }
-function findContainerId(state, ctx, index) {
+function findContainerId(ctx, key) {
   const numContainers = peek$(ctx, "numContainers");
   for (let i = 0; i < numContainers; i++) {
-    const itemIndex = peek$(ctx, `containerIndex${i}`);
-    if (itemIndex === index) {
+    const itemKey = peek$(ctx, `containerItemKey${i}`);
+    if (itemKey === key) {
       return i;
     }
   }
@@ -407,47 +442,43 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
 }
 
 // src/LegendList.tsx
-var DEFAULT_SCROLL_BUFFER = 0;
-var POSITION_OUT_OF_VIEW = -1e4;
+var DEFAULT_DRAW_DISTANCE = 250;
+var INITIAL_SCROLL_ADJUST = 1e4;
+var POSITION_OUT_OF_VIEW = -1e7;
 var LegendList = forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React6.createElement(StateProvider, null, /* @__PURE__ */ React6.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+  return /* @__PURE__ */ React7.createElement(StateProvider, null, /* @__PURE__ */ React7.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f;
   const {
     data,
     initialScrollIndex,
     initialScrollOffset,
     horizontal,
-    style: styleProp,
-    contentContainerStyle: contentContainerStyleProp,
     initialNumContainers,
     drawDistance = 250,
     recycleItems = false,
     onEndReachedThreshold = 0.5,
+    onStartReachedThreshold = 0.5,
     maintainScrollAtEnd = false,
     maintainScrollAtEndThreshold = 0.1,
     alignItemsAtEnd = false,
+    maintainVisibleContentPosition = false,
     onScroll: onScrollProp,
     keyExtractor,
     renderItem,
     estimatedItemSize,
     getEstimatedItemSize,
     onEndReached,
+    onStartReached,
     ListEmptyComponent,
     ...rest
   } = props;
+  const { style, contentContainerStyle } = rest;
   const ctx = useStateContext();
   const internalRef = useRef(null);
   const refScroller = internalRef;
-  const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_SCROLL_BUFFER;
-  const styleFlattened = StyleSheet.flatten(styleProp);
-  const style = useMemo(() => styleFlattened, [JSON.stringify(styleFlattened)]);
-  const contentContainerStyleFlattened = StyleSheet.flatten(contentContainerStyleProp);
-  const contentContainerStyle = useMemo(
-    () => contentContainerStyleFlattened,
-    [JSON.stringify(contentContainerStyleProp)]
-  );
+  const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
   const refState = useRef();
   const getId = (index) => {
     var _a2;
@@ -458,21 +489,26 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
     return `${ret}`;
   };
-  const getItemSize = (index, data2) => {
-    return getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize;
+  const getItemSize = (key, index, data2) => {
+    const sizeKnown = refState.current.sizes.get(key);
+    if (sizeKnown !== void 0) {
+      return sizeKnown;
+    }
+    const size = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize;
+    refState.current.sizes.set(key, size);
+    return size;
   };
   const calculateInitialOffset = (index = initialScrollIndex) => {
     if (index) {
+      let offset = 0;
       if (getEstimatedItemSize) {
-        let offset = 0;
         for (let i = 0; i < index; i++) {
           offset += getEstimatedItemSize(i, data[i]);
         }
-        return offset;
-      }
-      if (estimatedItemSize) {
-        return index * estimatedItemSize;
+      } else if (estimatedItemSize) {
+        offset = index * estimatedItemSize;
       }
+      return offset + (maintainVisibleContentPosition ? INITIAL_SCROLL_ADJUST : 0);
     }
     return void 0;
   };
@@ -482,12 +518,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       sizes: /* @__PURE__ */ new Map(),
       positions: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
-      animFrameScroll: null,
       animFrameLayout: null,
       animFrameTotalSize: null,
       isStartReached: false,
       isEndReached: false,
       isAtBottom: false,
+      isAtTop: false,
       data,
       idsInFirstRender: void 0,
       hasScrolled: false,
@@ -500,80 +536,355 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       totalSize: 0,
       timeouts: /* @__PURE__ */ new Set(),
       viewabilityConfigCallbackPairs: void 0,
-      renderItem: void 0
+      renderItem: void 0,
+      scrollAdjustPending: maintainVisibleContentPosition ? INITIAL_SCROLL_ADJUST : 0,
+      nativeMarginTop: 0,
+      scrollPrev: 0,
+      scrollPrevTime: 0,
+      scrollTime: 0,
+      indexByKey: /* @__PURE__ */ new Map(),
+      scrollHistory: [],
+      scrollVelocity: 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
+    set$(ctx, "scrollAdjust", refState.current.scrollAdjustPending);
   }
-  refState.current.data = data;
-  refState.current.renderItem = renderItem;
-  set$(ctx, "numItems", data.length);
-  set$(ctx, "stylePaddingTop", (_b = (_a = styleFlattened == null ? void 0 : styleFlattened.paddingTop) != null ? _a : contentContainerStyleFlattened == null ? void 0 : contentContainerStyleFlattened.paddingTop) != null ? _b : 0);
-  const addTotalSize = useCallback((add) => {
-    const prev = refState.current.totalSize;
-    refState.current.totalSize += add;
-    const totalSize = refState.current.totalSize;
+  const adjustScroll = (diff) => {
+    if (maintainVisibleContentPosition && refScroller.current) {
+      refState.current.scrollAdjustPending -= diff;
+    }
+  };
+  const addTotalSize = useCallback((key, add, set) => {
+    const state = refState.current;
+    const index = key === null ? 0 : state.indexByKey.get(key);
+    const isAbove = index < (state.startNoBuffer || 0);
+    const prev = state.totalSize;
+    if (set) {
+      state.totalSize = add;
+    } else {
+      state.totalSize += add;
+    }
     const doAdd = () => {
-      refState.current.animFrameTotalSize = null;
+      const totalSize = state.totalSize;
+      state.animFrameTotalSize = null;
       set$(ctx, "totalSize", totalSize);
-      const screenLength = refState.current.scrollLength;
       if (alignItemsAtEnd) {
-        const listPaddingTop = peek$(ctx, "stylePaddingTop");
-        set$(ctx, "paddingTop", Math.max(0, screenLength - totalSize - listPaddingTop));
+        doUpdatePaddingTop();
       }
     };
-    if (!prev) {
+    if (isAbove) {
+      adjustScroll(add);
+    }
+    if (!prev || set) {
       doAdd();
-    } else if (!refState.current.animFrameTotalSize) {
-      refState.current.animFrameTotalSize = requestAnimationFrame(doAdd);
+    } else if (!state.animFrameTotalSize) {
+      state.animFrameTotalSize = requestAnimationFrame(doAdd);
     }
   }, []);
-  const getRenderedItem = useCallback((index, containerIndex) => {
-    var _a2, _b2, _c;
-    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
+  const calculateItemsInView = useCallback((speed = 0) => {
+    var _a2, _b2, _c2;
+    const state = refState.current;
+    const { data: data2, scrollLength, scroll: scrollState, startBuffered: startBufferedState, positions } = state;
+    if (state.animFrameLayout) {
+      cancelAnimationFrame(state.animFrameLayout);
+      state.animFrameLayout = null;
+    }
     if (!data2) {
+      return;
+    }
+    const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+    const scrollAdjustPending = (_a2 = state.scrollAdjustPending) != null ? _a2 : 0;
+    const scrollExtra = Math.max(-16, Math.min(16, speed)) * 32;
+    const scroll = Math.max(
+      0,
+      scrollState - topPad - (USE_CONTENT_INSET ? scrollAdjustPending : 0) + scrollExtra
+    );
+    let startNoBuffer = null;
+    let startBuffered = null;
+    let endNoBuffer = null;
+    let endBuffered = null;
+    let loopStart = startBufferedState || 0;
+    if (startBufferedState) {
+      for (let i = startBufferedState; i >= 0; i--) {
+        const id = getId(i);
+        const top2 = positions.get(id);
+        if (top2 !== void 0) {
+          const size = getItemSize(id, i, data2[i]);
+          const bottom = top2 + size;
+          if (bottom > scroll - scrollBuffer) {
+            loopStart = i;
+          } else {
+            break;
+          }
+        }
+      }
+    }
+    let top = loopStart > 0 ? positions.get(getId(loopStart)) : 0;
+    for (let i = loopStart; i < data2.length; i++) {
+      const id = getId(i);
+      const size = getItemSize(id, i, data2[i]);
+      if (positions.get(id) !== top) {
+        positions.set(id, top);
+      }
+      if (startNoBuffer === null && top + size > scroll) {
+        startNoBuffer = i;
+      }
+      if (startBuffered === null && top + size > scroll - scrollBuffer) {
+        startBuffered = i;
+      }
+      if (startNoBuffer !== null) {
+        if (top <= scroll + scrollLength) {
+          endNoBuffer = i;
+        }
+        if (top <= scroll + scrollLength + scrollBuffer) {
+          endBuffered = i;
+        } else {
+          break;
+        }
+      }
+      top += size;
+    }
+    Object.assign(refState.current, {
+      startBuffered,
+      startNoBuffer,
+      endBuffered,
+      endNoBuffer
+    });
+    if (startBuffered !== null && endBuffered !== null) {
+      const prevNumContainers = ctx.values.get("numContainers");
+      let numContainers = prevNumContainers;
+      for (let i = startBuffered; i <= endBuffered; i++) {
+        let isContained = false;
+        const id = getId(i);
+        for (let j = 0; j < numContainers; j++) {
+          const key = peek$(ctx, `containerItemKey${j}`);
+          if (key === id) {
+            isContained = true;
+            break;
+          }
+        }
+        if (!isContained) {
+          const top2 = (positions.get(id) || 0) + scrollAdjustPending;
+          let furthestIndex = -1;
+          let furthestDistance = 0;
+          for (let u = 0; u < numContainers; u++) {
+            const key = peek$(ctx, `containerItemKey${u}`);
+            if (key === void 0) {
+              furthestIndex = u;
+              break;
+            }
+            const index = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(key);
+            const pos = peek$(ctx, `containerPosition${u}`);
+            if (index < startBuffered || index > endBuffered) {
+              const distance = Math.abs(pos - top2);
+              if (index < 0 || distance > furthestDistance) {
+                furthestDistance = distance;
+                furthestIndex = u;
+              }
+            }
+          }
+          if (furthestIndex >= 0) {
+            set$(ctx, `containerItemKey${furthestIndex}`, id);
+          } else {
+            const containerId = numContainers;
+            numContainers++;
+            set$(ctx, `containerItemKey${containerId}`, id);
+            set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
+            if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
+              console.warn(
+                "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemSize. numContainers:",
+                numContainers
+              );
+            }
+          }
+        }
+      }
+      if (numContainers !== prevNumContainers) {
+        set$(ctx, "numContainers", numContainers);
+        if (numContainers > peek$(ctx, "numContainersPooled")) {
+          set$(ctx, "numContainersPooled", numContainers);
+        }
+      }
+      for (let i = 0; i < numContainers; i++) {
+        const itemKey = peek$(ctx, `containerItemKey${i}`);
+        const itemIndex = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(itemKey);
+        const item = data2[itemIndex];
+        if (item) {
+          const id = getId(itemIndex);
+          if (!(itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered)) {
+            const pos = (positions.get(id) || 0) + scrollAdjustPending;
+            const prevPos = peek$(ctx, `containerPosition${i}`);
+            if (pos >= 0 && pos !== prevPos) {
+              set$(ctx, `containerPosition${i}`, pos);
+            }
+          }
+        }
+      }
+    }
+    if (refState.current.viewabilityConfigCallbackPairs) {
+      updateViewableItems(
+        refState.current,
+        ctx,
+        refState.current.viewabilityConfigCallbackPairs,
+        getId,
+        scrollLength,
+        startNoBuffer,
+        endNoBuffer
+      );
+    }
+  }, []);
+  const doUpdatePaddingTop = () => {
+    if (alignItemsAtEnd) {
+      const { scrollLength, totalSize } = refState.current;
+      const listPaddingTop = peek$(ctx, "stylePaddingTop") || 0;
+      const paddingTop = Math.max(0, Math.floor(scrollLength - totalSize - listPaddingTop));
+      set$(ctx, "paddingTop", paddingTop);
+    }
+  };
+  const doMaintainScrollAtEnd = (animated) => {
+    var _a2;
+    if (((_a2 = refState.current) == null ? void 0 : _a2.isAtBottom) && maintainScrollAtEnd) {
+      refState.current.scroll = refState.current.totalSize - refState.current.scrollLength;
+      requestAnimationFrame(() => {
+        var _a3;
+        (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
+          animated
+        });
+      });
+    }
+  };
+  const checkAtBottom = () => {
+    var _a2;
+    const { scrollLength, scroll } = refState.current;
+    const totalSize = peek$(ctx, "totalSize");
+    const distanceFromEnd = totalSize - scroll - scrollLength;
+    if (refState.current) {
+      refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
+    }
+    if (onEndReached && !((_a2 = refState.current) == null ? void 0 : _a2.isEndReached)) {
+      if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
+        if (refState.current) {
+          refState.current.isEndReached = true;
+        }
+        onEndReached({ distanceFromEnd });
+      }
+    }
+  };
+  const checkAtTop = () => {
+    var _a2;
+    const { scrollLength, scroll } = refState.current;
+    if (refState.current) {
+      refState.current.isAtTop = scroll === 0;
+    }
+    if (onStartReached && !((_a2 = refState.current) == null ? void 0 : _a2.isStartReached)) {
+      if (scroll < onStartReachedThreshold * scrollLength) {
+        if (refState.current) {
+          refState.current.isStartReached = true;
+        }
+        onStartReached({ distanceFromStart: scroll });
+      }
+    }
+  };
+  const isFirst = !refState.current.renderItem;
+  if (isFirst || data !== refState.current.data) {
+    (data == null ? void 0 : data.length) > ((_a = refState.current.data) == null ? void 0 : _a.length);
+    refState.current.data = data;
+    let totalSize = 0;
+    const indexByKey = /* @__PURE__ */ new Map();
+    for (let i = 0; i < data.length; i++) {
+      const key = getId(i);
+      indexByKey.set(key, i);
+      totalSize += getItemSize(key, i, data[i]);
+      if (maintainVisibleContentPosition && i < refState.current.startNoBuffer && !refState.current.indexByKey.has(key)) {
+        const size = getItemSize(key, i, data[i]);
+        adjustScroll(size);
+      }
+    }
+    addTotalSize(null, totalSize, true);
+    if (maintainVisibleContentPosition) {
+      for (const [key, index] of refState.current.indexByKey) {
+        if (index < refState.current.startNoBuffer && !indexByKey.has(key)) {
+          const size = (_b = refState.current.sizes.get(key)) != null ? _b : 0;
+          if (size) {
+            adjustScroll(-size);
+          }
+        }
+      }
+    }
+    refState.current.indexByKey = indexByKey;
+    if (!isFirst) {
+      refState.current.isEndReached = false;
+      const numContainers = peek$(ctx, "numContainers");
+      for (let i = 0; i < numContainers; i++) {
+        set$(ctx, `containerItemKey${i}`, void 0);
+        set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+      }
+      calculateItemsInView();
+      doMaintainScrollAtEnd(false);
+    }
+    checkAtBottom();
+    checkAtTop();
+  }
+  refState.current.renderItem = renderItem;
+  set$(ctx, "lastItemKey", getId(data[data.length - 1]));
+  set$(
+    ctx,
+    "stylePaddingTop",
+    (_f = (_e = (_c = StyleSheet.flatten(style)) == null ? void 0 : _c.paddingTop) != null ? _e : (_d = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _d.paddingTop) != null ? _f : 0
+  );
+  const getRenderedItem = useCallback((key, containerId) => {
+    var _a2, _b2;
+    const state = refState.current;
+    if (!state) {
+      return null;
+    }
+    const { data: data2, indexByKey } = state;
+    const index = indexByKey.get(key);
+    if (index === void 0) {
       return null;
     }
     const useViewability = (configId, callback) => {
-      const key = containerIndex + configId;
+      const key2 = containerId + configId;
       useInit(() => {
-        const value = ctx.mapViewabilityValues.get(key);
+        const value = ctx.mapViewabilityValues.get(key2);
         if (value) {
           callback(value);
         }
       });
-      ctx.mapViewabilityCallbacks.set(key, callback);
+      ctx.mapViewabilityCallbacks.set(key2, callback);
       useEffect(
         () => () => {
-          ctx.mapViewabilityCallbacks.delete(key);
+          ctx.mapViewabilityCallbacks.delete(key2);
         },
         []
       );
     };
     const useViewabilityAmount = (callback) => {
       useInit(() => {
-        const value = ctx.mapViewabilityAmountValues.get(containerIndex);
+        const value = ctx.mapViewabilityAmountValues.get(containerId);
         if (value) {
           callback(value);
         }
       });
-      ctx.mapViewabilityAmountCallbacks.set(containerIndex, callback);
+      ctx.mapViewabilityAmountCallbacks.set(containerId, callback);
       useEffect(
         () => () => {
-          ctx.mapViewabilityAmountCallbacks.delete(containerIndex);
+          ctx.mapViewabilityAmountCallbacks.delete(containerId);
         },
         []
       );
     };
     const useRecyclingEffect = (effect) => {
       useEffect(() => {
-        const state = refState.current;
+        const state2 = refState.current;
         let prevIndex = index;
-        let prevItem = state.data[index];
-        const signal = `containerIndex${containerIndex}`;
-        listen$(ctx, signal, () => {
-          const data3 = state.data;
+        let prevItem = state2.data[index];
+        const signal = `containerItemKey${containerId}`;
+        const run = () => {
+          const data3 = state2.data;
           if (data3) {
-            const newIndex = peek$(ctx, signal);
+            const newKey = peek$(ctx, signal);
+            const newIndex = state2.indexByKey.get(newKey);
             const newItem = data3[newIndex];
             if (newItem) {
               effect({
@@ -586,7 +897,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             prevIndex = newIndex;
             prevItem = newItem;
           }
-        });
+        };
+        run();
+        listen$(ctx, signal, run);
       }, []);
     };
     const useRecyclingState = (updateState) => {
@@ -598,13 +911,13 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           prevItem: void 0
         })
       );
-      useRecyclingEffect((state) => {
-        const newState = updateState(state);
+      useRecyclingEffect((state2) => {
+        const newState = updateState(state2);
         stateInfo[1](newState);
       });
       return stateInfo;
     };
-    const renderedItem = (_c = (_b2 = refState.current).renderItem) == null ? void 0 : _c.call(_b2, {
+    const renderedItem = (_b2 = (_a2 = refState.current).renderItem) == null ? void 0 : _b2.call(_a2, {
       item: data2[index],
       index,
       useViewability,
@@ -614,262 +927,98 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     });
     return renderedItem;
   }, []);
-  const calculateItemsInView = useCallback(() => {
-    unstable_batchedUpdates(() => {
-      var _a2, _b2, _c;
-      const {
-        data: data2,
-        scrollLength,
-        scroll: scrollState,
-        startNoBuffer: startNoBufferState,
-        startBuffered: startBufferedState,
-        endNoBuffer: endNoBufferState,
-        endBuffered: endBufferedState
-      } = refState.current;
-      if (!data2) {
-        return;
-      }
-      const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
-      const scroll = scrollState - topPad;
-      const { sizes, positions } = refState.current;
-      let startNoBuffer = null;
-      let startBuffered = null;
-      let endNoBuffer = null;
-      let endBuffered = null;
-      let loopStart = startBufferedState || 0;
-      if (startBufferedState) {
-        for (let i = startBufferedState; i >= 0; i--) {
-          const id = getId(i);
-          const top2 = positions.get(id);
-          if (top2 !== void 0) {
-            const size = (_a2 = sizes.get(id)) != null ? _a2 : getItemSize(i, data2[i]);
-            const bottom = top2 + size;
-            if (bottom > scroll - scrollBuffer) {
-              loopStart = i;
-            } else {
-              break;
-            }
-          }
-        }
-      }
-      let top = loopStart > 0 ? positions.get(getId(loopStart)) : 0;
-      for (let i = loopStart; i < data2.length; i++) {
-        const id = getId(i);
-        const size = (_b2 = sizes.get(id)) != null ? _b2 : getItemSize(i, data2[i]);
-        if (positions.get(id) !== top) {
-          positions.set(id, top);
-        }
-        if (startNoBuffer === null && top + size > scroll) {
-          startNoBuffer = i;
-        }
-        if (startBuffered === null && top + size > scroll - scrollBuffer) {
-          startBuffered = i;
-        }
-        if (startNoBuffer !== null) {
-          if (top <= scroll + scrollLength) {
-            endNoBuffer = i;
-          }
-          if (top <= scroll + scrollLength + scrollBuffer) {
-            endBuffered = i;
-          } else {
-            break;
-          }
-        }
-        top += size;
-      }
-      Object.assign(refState.current, {
-        startBuffered,
-        startNoBuffer,
-        endBuffered,
-        endNoBuffer
-      });
-      if (startBuffered !== null && endBuffered !== null) {
-        const prevNumContainers = ctx.values.get("numContainers");
-        let numContainers = prevNumContainers;
-        for (let i = startBuffered; i <= endBuffered; i++) {
-          let isContained = false;
-          for (let j = 0; j < numContainers; j++) {
-            const index = peek$(ctx, `containerIndex${j}`);
-            if (index === i) {
-              isContained = true;
-              break;
-            }
-          }
-          if (!isContained) {
-            const id = getId(i);
-            const top2 = positions.get(id) || 0;
-            let furthestIndex = -1;
-            let furthestDistance = 0;
-            for (let u = 0; u < numContainers; u++) {
-              const index = peek$(ctx, `containerIndex${u}`);
-              if (index < 0) {
-                furthestIndex = u;
-                break;
-              }
-              const pos = peek$(ctx, `containerPosition${u}`);
-              if (index < startBuffered || index > endBuffered) {
-                const distance = Math.abs(pos - top2);
-                if (index < 0 || distance > furthestDistance) {
-                  furthestDistance = distance;
-                  furthestIndex = u;
-                }
-              }
-            }
-            if (furthestIndex >= 0) {
-              set$(ctx, `containerIndex${furthestIndex}`, i);
-            } else {
-              if (__DEV__) {
-                console.warn(
-                  "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemSize",
-                  i
-                );
-              }
-              const containerId = numContainers;
-              numContainers++;
-              set$(ctx, `containerIndex${containerId}`, i);
-              set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
-            }
-          }
-        }
-        if (numContainers !== prevNumContainers) {
-          set$(ctx, "numContainers", numContainers);
-        }
-        for (let i = 0; i < numContainers; i++) {
-          const itemIndex = peek$(ctx, `containerIndex${i}`);
-          const item = data2[itemIndex];
-          if (item) {
-            const id = getId(itemIndex);
-            if (itemIndex < startBuffered || itemIndex > endBuffered) {
-              set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
-            } else {
-              const pos = (_c = positions.get(id)) != null ? _c : -1;
-              const prevPos = peek$(ctx, `containerPosition${i}`);
-              if (pos >= 0 && pos !== prevPos) {
-                set$(ctx, `containerPosition${i}`, pos);
-              }
-            }
-          }
-        }
-      }
-      if (refState.current.viewabilityConfigCallbackPairs) {
-        updateViewableItems(
-          refState.current,
-          ctx,
-          refState.current.viewabilityConfigCallbackPairs,
-          getId,
-          scrollLength,
-          startNoBuffer,
-          endNoBuffer
-        );
-      }
-    });
-  }, []);
   useInit(() => {
-    var _a2, _b2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
     const averageItemSize = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0]);
-    const numContainers = initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) + 4;
+    const numContainers = initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize);
     for (let i = 0; i < numContainers; i++) {
-      set$(ctx, `containerIndex${i}`, -1);
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
     }
     set$(ctx, "numContainers", numContainers);
+    set$(ctx, "numContainersPooled", numContainers * 2);
     calculateItemsInView();
-    const sizes = (_a2 = refState.current) == null ? void 0 : _a2.sizes;
-    let totalSize = 0;
-    for (let i = 0; i < data.length; i++) {
-      const id = getId(i);
-      totalSize += (_b2 = sizes.get(id)) != null ? _b2 : getItemSize(i, data[i]);
-    }
-    addTotalSize(totalSize);
   });
-  const checkAtBottom = () => {
+  const updateItemSize = useCallback((key, size) => {
     var _a2;
-    const { scrollLength, scroll } = refState.current;
-    const totalSize = peek$(ctx, "totalSize");
-    const distanceFromEnd = totalSize - scroll - scrollLength;
-    if (refState.current) {
-      refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
-    }
-    if (onEndReached && !((_a2 = refState.current) == null ? void 0 : _a2.isEndReached)) {
-      if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
-        if (refState.current) {
-          refState.current.isEndReached = true;
-        }
-        onEndReached({ distanceFromEnd });
-      }
-    }
-  };
-  useEffect(() => {
-    if (refState.current) {
-      refState.current.isEndReached = false;
-    }
-    const numContainers = peek$(ctx, "numContainers");
-    if (data.length < numContainers) {
-      for (let i = 0; i < numContainers; i++) {
-        const itemIndex = peek$(ctx, `containerIndex${i}`);
-        if (itemIndex >= data.length) {
-          set$(ctx, `containerIndex${i}`, -1);
-        }
-      }
-    }
-    calculateItemsInView();
-    checkAtBottom();
-  }, [data]);
-  const updateItemSize = useCallback((index, size) => {
-    var _a2, _b2, _c, _d;
     const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
     if (!data2) {
       return;
     }
-    const sizes = (_b2 = refState.current) == null ? void 0 : _b2.sizes;
-    const id = getId(index);
-    const wasInFirstRender = (_c = refState.current) == null ? void 0 : _c.idsInFirstRender.has(id);
-    const prevSize = sizes.get(id) || (wasInFirstRender ? getItemSize(index, data2[index]) : 0);
+    const { sizes, indexByKey, idsInFirstRender } = refState.current;
+    const index = indexByKey.get(key);
+    const wasInFirstRender = idsInFirstRender.has(key);
+    const prevSize = sizes.get(key) || (wasInFirstRender ? getItemSize(key, index, data2[index]) : 0);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
-      sizes.set(id, size);
-      addTotalSize(size - prevSize);
-      if (((_d = refState.current) == null ? void 0 : _d.isAtBottom) && maintainScrollAtEnd) {
-        requestAnimationFrame(() => {
-          var _a3;
-          (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
-            animated: true
-          });
-        });
-      }
+      sizes.set(key, size);
+      addTotalSize(key, size - prevSize);
+      doMaintainScrollAtEnd(true);
       const state = refState.current;
-      if (!state.animFrameScroll && !state.animFrameLayout) {
+      const scrollVelocity = state.scrollVelocity;
+      if (!state.animFrameLayout && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
         state.animFrameLayout = requestAnimationFrame(() => {
           state.animFrameLayout = null;
-          calculateItemsInView();
+          calculateItemsInView(state.scrollVelocity);
         });
       }
     }
   }, []);
-  const handleScrollDebounced = useCallback(() => {
-    calculateItemsInView();
+  const handleScrollDebounced = useCallback((velocity) => {
+    var _a2, _b2;
+    const scrollAdjustPending = (_b2 = (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustPending) != null ? _b2 : 0;
+    set$(ctx, "scrollAdjust", scrollAdjustPending);
+    calculateItemsInView(velocity);
     checkAtBottom();
-    if (refState.current) {
-      refState.current.animFrameScroll = null;
-    }
+    checkAtTop();
   }, []);
   const onLayout = useCallback((event) => {
-    const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
+    let scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
+    if (!USE_CONTENT_INSET) {
+      scrollLength += event.nativeEvent.layout[horizontal ? "x" : "y"];
+    }
     refState.current.scrollLength = scrollLength;
+    doMaintainScrollAtEnd(false);
+    doUpdatePaddingTop();
+    checkAtBottom();
+    checkAtTop();
+    if (__DEV__) {
+      const isWidthZero = event.nativeEvent.layout.width === 0;
+      const isHeightZero = event.nativeEvent.layout.height === 0;
+      if (isWidthZero || isHeightZero) {
+        console.warn(
+          `[legend-list] List ${isWidthZero ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
+        );
+      }
+    }
   }, []);
   const handleScroll = useCallback(
     (event, fromSelf) => {
-      var _a2, _b2, _c;
-      if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
+      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) {
         return;
       }
-      refState.current.hasScrolled = true;
+      const state = refState.current;
+      state.hasScrolled = true;
+      const currentTime = performance.now();
       const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
-      refState.current.scroll = newScroll;
-      if (refState.current && !refState.current.animFrameScroll) {
-        refState.current.animFrameScroll = requestAnimationFrame(handleScrollDebounced);
+      state.scrollHistory.push({ scroll: newScroll, time: currentTime });
+      if (state.scrollHistory.length > 5) {
+        state.scrollHistory.shift();
+      }
+      let velocity = 0;
+      if (state.scrollHistory.length >= 2) {
+        const newest = state.scrollHistory[state.scrollHistory.length - 1];
+        const oldest = state.scrollHistory[0];
+        const scrollDiff = newest.scroll - oldest.scroll;
+        const timeDiff = newest.time - oldest.time;
+        velocity = timeDiff > 0 ? scrollDiff / timeDiff : 0;
       }
+      state.scrollPrev = state.scroll;
+      state.scrollPrevTime = state.scrollTime;
+      state.scroll = newScroll;
+      state.scrollTime = currentTime;
+      state.scrollVelocity = velocity;
+      handleScrollDebounced(velocity);
       if (!fromSelf) {
         onScrollProp == null ? void 0 : onScrollProp(event);
       }
@@ -905,12 +1054,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     },
     []
   );
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     ListComponent,
     {
       ...rest,
-      contentContainerStyle,
-      style,
       horizontal,
       refScroller,
       initialContentOffset,