@legendapp/list 0.3.5 → 0.3.6

package/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React6 = require('react');
+var React7 = require('react');
 var reactNative = require('react-native');
 
 function _interopNamespace(e) {
@@ -21,27 +21,27 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
+var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
 
 // src/LegendList.tsx
-var LeanView = React6__namespace.forwardRef((props, ref) => {
-  return React6__namespace.createElement("RCTView", { ...props, ref });
+var LeanView = React7__namespace.forwardRef((props, ref) => {
+  return React7__namespace.createElement("RCTView", { ...props, ref });
 });
 LeanView.displayName = "RCTView";
-var ContextListener = React6__namespace.createContext(null);
+var ContextState = React7__namespace.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React6__namespace.useState(() => ({
+  const [value] = React7__namespace.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React6__namespace.createElement(ContextListener.Provider, { value }, children);
+  return /* @__PURE__ */ React7__namespace.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React6__namespace.useContext(ContextListener);
+  return React7__namespace.useContext(ContextState);
 }
 function use$(signalName) {
-  const { listeners, values } = React6__namespace.useContext(ContextListener);
-  const [, forceUpdate] = React6__namespace.useReducer((x) => x + 1, 0);
+  const { listeners, values } = React7__namespace.useContext(ContextState);
+  const [, forceUpdate] = React7__namespace.useReducer((x) => x + 1, 0);
   listeners.set(signalName, forceUpdate);
   return values.get(signalName);
 }
@@ -62,7 +62,7 @@ function set$(ctx, signalName, value) {
 function $View({ $key, $style, ...rest }) {
   use$($key);
   const style = $style();
-  return /* @__PURE__ */ React6__namespace.createElement(LeanView, { style, ...rest });
+  return /* @__PURE__ */ React7__namespace.createElement(LeanView, { style, ...rest });
 }
 function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
   const itemIndex = use$(`containerIndex${id}`);
@@ -71,7 +71,7 @@ function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorCompon
     return null;
   }
   const renderedItem = getRenderedItem(itemIndex);
-  return /* @__PURE__ */ React6__namespace.createElement(React6__namespace.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
+  return /* @__PURE__ */ React7__namespace.createElement(React7__namespace.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
 }
 var Container = ({
   id,
@@ -99,7 +99,7 @@ var Container = ({
       opacity: position < 0 ? 0 : 1
     };
   };
-  return /* @__PURE__ */ React6__namespace.createElement(
+  return /* @__PURE__ */ React7__namespace.createElement(
     $View,
     {
       $key: `containerPosition${id}`,
@@ -107,12 +107,12 @@ var Container = ({
       onLayout: (event) => {
         const index = peek$(ctx, `containerIndex${id}`);
         if (index >= 0) {
-          const length = event.nativeEvent.layout[horizontal ? "width" : "height"];
-          onLayout(index, length);
+          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+          onLayout(index, size);
         }
       }
     },
-    /* @__PURE__ */ React6__namespace.createElement(
+    /* @__PURE__ */ React7__namespace.createElement(
       InnerContainer,
       {
         id,
@@ -125,7 +125,7 @@ var Container = ({
 };
 
 // src/Containers.tsx
-var Containers = React6__namespace.memo(function Containers2({
+var Containers = React7__namespace.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -137,7 +137,7 @@ var Containers = React6__namespace.memo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React6__namespace.createElement(
+      /* @__PURE__ */ React7__namespace.createElement(
         Container,
         {
           id: i,
@@ -151,14 +151,14 @@ var Containers = React6__namespace.memo(function Containers2({
       )
     );
   }
-  return /* @__PURE__ */ React6__namespace.createElement(
+  return /* @__PURE__ */ React7__namespace.createElement(
     $View,
     {
-      $key: "totalLength",
+      $key: "totalSize",
       $style: () => horizontal ? {
-        width: peek$(ctx, "totalLength")
+        width: peek$(ctx, "totalSize")
       } : {
-        height: peek$(ctx, "totalLength")
+        height: peek$(ctx, "totalSize")
       }
     },
     containers
@@ -167,15 +167,15 @@ var Containers = React6__namespace.memo(function Containers2({
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React6__namespace.isValidElement(Component)) {
+  if (React7__namespace.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React6__namespace.createElement(Component, null);
+    return /* @__PURE__ */ React7__namespace.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React6__namespace.memo(function ListComponent2({
+var ListComponent = React7__namespace.memo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -195,7 +195,7 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
-  return /* @__PURE__ */ React6__namespace.createElement(
+  return /* @__PURE__ */ React7__namespace.createElement(
     reactNative.ScrollView,
     {
       ...rest,
@@ -213,9 +213,9 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScroller
     },
-    alignItemsAtEnd && /* @__PURE__ */ React6__namespace.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
-    ListHeaderComponent && /* @__PURE__ */ React6__namespace.createElement(reactNative.View, { style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
-    /* @__PURE__ */ React6__namespace.createElement(
+    alignItemsAtEnd && /* @__PURE__ */ React7__namespace.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
+    ListHeaderComponent && /* @__PURE__ */ React7__namespace.createElement(reactNative.View, { style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
+    /* @__PURE__ */ React7__namespace.createElement(
       Containers,
       {
         horizontal,
@@ -225,402 +225,539 @@ var ListComponent = React6__namespace.memo(function ListComponent2({
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React6__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React7__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
 
+// src/viewability.ts
+var mapViewabilityConfigCallbackPairs = /* @__PURE__ */ new WeakMap();
+function setupViewability(props) {
+  let { viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged } = props;
+  viewabilityConfigCallbackPairs = viewabilityConfigCallbackPairs || onViewableItemsChanged && [
+    { viewabilityConfig: viewabilityConfig || { viewAreaCoveragePercentThreshold: 0 }, onViewableItemsChanged }
+  ];
+  if (viewabilityConfigCallbackPairs) {
+    for (const pair of viewabilityConfigCallbackPairs) {
+      mapViewabilityConfigCallbackPairs.set(pair, {
+        viewableItems: [],
+        start: -1,
+        end: -1,
+        previousStart: -1,
+        previousEnd: -1
+      });
+    }
+  }
+  return viewabilityConfigCallbackPairs;
+}
+function updateViewableItems(state, ctx, viewabilityConfigCallbackPairs, getId, scrollSize, start, end) {
+  for (const viewabilityConfigCallbackPair of viewabilityConfigCallbackPairs) {
+    const viewabilityState = mapViewabilityConfigCallbackPairs.get(viewabilityConfigCallbackPair);
+    viewabilityState.start = start;
+    viewabilityState.end = end;
+    if (viewabilityConfigCallbackPair.viewabilityConfig.minimumViewTime) {
+      const timer = setTimeout(() => {
+        state.timeouts.delete(timer);
+        updateViewableItemsWithConfig(state.data, viewabilityConfigCallbackPair, getId, state, ctx, scrollSize);
+      }, viewabilityConfigCallbackPair.viewabilityConfig.minimumViewTime);
+      state.timeouts.add(timer);
+    } else {
+      updateViewableItemsWithConfig(state.data, viewabilityConfigCallbackPair, getId, state, ctx, scrollSize);
+    }
+  }
+}
+function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getId, state, ctx, scrollSize) {
+  var _a;
+  const viewabilityState = mapViewabilityConfigCallbackPairs.get(viewabilityConfigCallbackPair);
+  const { viewableItems: previousViewableItems, start, previousStart, end, previousEnd } = viewabilityState;
+  const changed = [];
+  if (previousViewableItems) {
+    for (const viewToken of previousViewableItems) {
+      if (viewToken.index < start || viewToken.index > end) {
+        viewToken.isViewable = false;
+        changed.push(viewToken);
+      }
+    }
+  }
+  const viewableItems = [];
+  for (let i = start; i <= end; i++) {
+    const item = data[i];
+    if (item) {
+      const key = getId(i);
+      if (isViewable(state, ctx, viewabilityConfigCallbackPair.viewabilityConfig, key, scrollSize)) {
+        const viewToken = {
+          item,
+          key,
+          index: i,
+          isViewable: true
+        };
+        viewableItems.push(viewToken);
+        if (!(previousViewableItems == null ? void 0 : previousViewableItems.find((v) => v.key === viewToken.key))) {
+          changed.push(viewToken);
+        }
+      }
+    }
+  }
+  Object.assign(viewabilityState, { viewableItems, previousStart: start, previousEnd: end });
+  if (changed.length > 0) {
+    (_a = viewabilityConfigCallbackPair.onViewableItemsChanged) == null ? void 0 : _a.call(viewabilityConfigCallbackPair, { viewableItems, changed });
+  }
+}
+function isViewable(state, ctx, viewabilityConfig, key, scrollSize) {
+  const { sizes, positions, scroll } = 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 top = positions.get(key) - scroll + topPad;
+  const size = sizes.get(key) || 0;
+  const bottom = top + size;
+  const isEntirelyVisible = top >= 0 && bottom <= scrollSize && bottom > top;
+  if (isEntirelyVisible) {
+    return true;
+  }
+  const visibleHeight = Math.min(bottom, scrollSize) - Math.max(top, 0);
+  const percent = 100 * (visibleHeight / (viewAreaMode ? scrollSize : size));
+  return percent >= viewablePercentThreshold;
+}
+
 // src/LegendList.tsx
 var DEFAULT_SCROLL_BUFFER = 0;
 var POSITION_OUT_OF_VIEW = -1e4;
-var LegendList = React6.forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React6__namespace.createElement(StateProvider, null, /* @__PURE__ */ React6__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+var LegendList = React7.forwardRef(function LegendList2(props, forwardedRef) {
+  return /* @__PURE__ */ React.createElement(StateProvider, null, /* @__PURE__ */ React.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
-var LegendListInner = React6.forwardRef(
-  function LegendListInner2(props, forwardedRef) {
-    var _a, _b;
-    const {
+var LegendListInner = React7.forwardRef(function LegendListInner2(props, forwardedRef) {
+  var _a, _b;
+  const {
+    data,
+    initialScrollIndex,
+    initialScrollOffset,
+    horizontal,
+    style: styleProp,
+    contentContainerStyle: contentContainerStyleProp,
+    initialNumContainers,
+    drawDistance,
+    recycleItems = true,
+    onEndReachedThreshold = 0.5,
+    maintainScrollAtEnd = false,
+    maintainScrollAtEndThreshold = 0.1,
+    alignItemsAtEnd = false,
+    onScroll: onScrollProp,
+    keyExtractor,
+    renderItem,
+    estimatedItemSize,
+    getEstimatedItemSize,
+    onEndReached,
+    onViewableRangeChanged,
+    ...rest
+  } = props;
+  const ctx = useStateContext();
+  const internalRef = React7.useRef(null);
+  const refScroller = internalRef;
+  const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_SCROLL_BUFFER;
+  const styleFlattened = reactNative.StyleSheet.flatten(styleProp);
+  const style = React7.useMemo(() => styleFlattened, [JSON.stringify(styleFlattened)]);
+  const contentContainerStyleFlattened = reactNative.StyleSheet.flatten(contentContainerStyleProp);
+  const contentContainerStyle = React7.useMemo(
+    () => contentContainerStyleFlattened,
+    [JSON.stringify(contentContainerStyleProp)]
+  );
+  const refState = React7.useRef();
+  const getId = (index) => {
+    var _a2;
+    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
+    if (!data2) {
+      return "";
+    }
+    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 calculateInitialOffset = (index = initialScrollIndex) => {
+    if (index) {
+      if (getEstimatedItemSize) {
+        let offset = 0;
+        for (let i = 0; i < index; i++) {
+          offset += getEstimatedItemSize(i, data[i]);
+        }
+        return offset;
+      }
+      if (estimatedItemSize) {
+        return index * estimatedItemSize;
+      }
+    }
+    return void 0;
+  };
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React7.useMemo(calculateInitialOffset, []);
+  if (!refState.current) {
+    refState.current = {
+      sizes: /* @__PURE__ */ new Map(),
+      positions: /* @__PURE__ */ new Map(),
+      pendingAdjust: 0,
+      animFrameScroll: null,
+      animFrameLayout: null,
+      animFrameTotalSize: null,
+      isStartReached: false,
+      isEndReached: false,
+      isAtBottom: false,
       data,
-      initialScrollIndex,
-      initialScrollOffset,
-      horizontal,
-      style: styleProp,
-      contentContainerStyle: contentContainerStyleProp,
-      initialNumContainers,
-      drawDistance,
-      recycleItems = true,
-      onEndReachedThreshold = 0.5,
-      maintainScrollAtEnd = false,
-      maintainScrollAtEndThreshold = 0.1,
-      alignItemsAtEnd = false,
-      onScroll: onScrollProp,
-      keyExtractor,
-      renderItem,
-      estimatedItemSize,
-      getEstimatedItemSize,
-      onEndReached,
-      onViewableRangeChanged,
-      ...rest
-    } = props;
-    const ctx = useStateContext();
-    const internalRef = React6.useRef(null);
-    const refScroller = forwardedRef || internalRef;
-    const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_SCROLL_BUFFER;
-    const styleFlattened = reactNative.StyleSheet.flatten(styleProp);
-    const style = React6.useMemo(() => styleFlattened, [JSON.stringify(styleProp)]);
-    const contentContainerStyleFlattened = reactNative.StyleSheet.flatten(contentContainerStyleProp);
-    const contentContainerStyle = React6.useMemo(
-      () => contentContainerStyleFlattened,
-      [JSON.stringify(contentContainerStyleProp)]
-    );
-    const refState = React6.useRef();
-    const getId = (index) => {
+      idsInFirstRender: void 0,
+      hasScrolled: false,
+      scrollLength: reactNative.Dimensions.get("window")[horizontal ? "width" : "height"],
+      startBuffered: 0,
+      startNoBuffer: 0,
+      endBuffered: 0,
+      endNoBuffer: 0,
+      scroll: initialContentOffset || 0,
+      totalSize: 0,
+      timeouts: /* @__PURE__ */ new Set(),
+      viewabilityConfigCallbackPairs: void 0
+    };
+    refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
+  }
+  refState.current.data = data;
+  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 = (add) => {
+    const prev = refState.current.totalSize;
+    refState.current.totalSize += add;
+    const totalSize = refState.current.totalSize;
+    const doAdd = () => {
+      refState.current.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));
+      }
+    };
+    if (!prev) {
+      doAdd();
+    } else if (!refState.current.animFrameTotalSize) {
+      refState.current.animFrameTotalSize = requestAnimationFrame(doAdd);
+    }
+  };
+  const getRenderedItem = React7.useCallback(
+    (index) => {
       var _a2;
       const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
       if (!data2) {
-        return "";
+        return null;
       }
-      const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
-      return ret + "";
-    };
-    const getItemLength = (index, data2) => {
-      return getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize;
-    };
-    const calculateInitialOffset = () => {
-      if (initialScrollIndex) {
-        if (getEstimatedItemSize) {
-          let offset = 0;
-          for (let i = 0; i < initialScrollIndex; i++) {
-            offset += getEstimatedItemSize(i, data[i]);
-          }
-          return offset;
-        } else if (estimatedItemSize) {
-          return initialScrollIndex * estimatedItemSize;
-        }
+      const renderedItem = renderItem == null ? void 0 : renderItem({
+        item: data2[index],
+        index
+      });
+      return renderedItem;
+    },
+    [renderItem]
+  );
+  const calculateItemsInView = React7.useCallback(() => {
+    reactNative.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;
       }
-      return void 0;
-    };
-    const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : React6.useMemo(calculateInitialOffset, [initialScrollIndex, estimatedItemSize]);
-    if (!refState.current) {
-      refState.current = {
-        lengths: /* @__PURE__ */ new Map(),
-        positions: /* @__PURE__ */ new Map(),
-        pendingAdjust: 0,
-        animFrameScroll: null,
-        animFrameLayout: null,
-        animFrameTotalSize: null,
-        isStartReached: false,
-        isEndReached: false,
-        isAtBottom: false,
-        data,
-        idsInFirstRender: void 0,
-        hasScrolled: false,
-        scrollLength: reactNative.Dimensions.get("window")[horizontal ? "width" : "height"],
-        startBuffered: 0,
-        startNoBuffer: 0,
-        endBuffered: 0,
-        endNoBuffer: 0,
-        scroll: initialContentOffset || 0,
-        totalSize: 0
-      };
-      refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
-    }
-    refState.current.data = data;
-    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 = (add) => {
-      const prev = refState.current.totalSize;
-      const length = refState.current.totalSize += add;
-      const doAdd = () => {
-        refState.current.animFrameTotalSize = null;
-        set$(ctx, `totalLength`, length);
-        const screenLength = refState.current.scrollLength;
-        if (alignItemsAtEnd) {
-          const listPaddingTop = peek$(ctx, `stylePaddingTop`);
-          set$(ctx, `paddingTop`, Math.max(0, screenLength - length - listPaddingTop));
+      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;
+            }
+          }
         }
-      };
-      if (!prev) {
-        doAdd();
-      } else if (!refState.current.animFrameTotalSize) {
-        refState.current.animFrameTotalSize = requestAnimationFrame(doAdd);
       }
-    };
-    const allocateContainers = React6.useCallback(() => {
-      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;
-      for (let i = 0; i < numContainers; i++) {
-        set$(ctx, `containerIndex${i}`, -1);
-        set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
-      }
-      set$(ctx, `numContainers`, numContainers);
-    }, []);
-    const getRenderedItem = React6.useCallback(
-      (index) => {
-        var _a2;
-        const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
-        if (!data2) {
-          return null;
+      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);
         }
-        const renderedItem = renderItem == null ? void 0 : renderItem({
-          item: data2[index],
-          index
-        });
-        return renderedItem;
-      },
-      [renderItem]
-    );
-    const calculateItemsInView = React6.useCallback(() => {
-      reactNative.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;
+        if (startNoBuffer === null && top + size > scroll) {
+          startNoBuffer = i;
         }
-        const topPad = (peek$(ctx, `stylePaddingTop`) || 0) + (peek$(ctx, `headerSize`) || 0);
-        const scroll = scrollState - topPad;
-        const { lengths, 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 length = (_a2 = lengths.get(id)) != null ? _a2 : getItemLength(i, data2[i]);
-              const bottom = top2 + length;
-              if (bottom > scroll - scrollBuffer) {
-                loopStart = i;
-              } else {
-                break;
-              }
-            }
-          }
+        if (startBuffered === null && top + size > scroll - scrollBuffer) {
+          startBuffered = i;
         }
-        let top = loopStart > 0 ? positions.get(getId(loopStart)) : 0;
-        for (let i = loopStart; i < data2.length; i++) {
-          const id = getId(i);
-          const length = (_b2 = lengths.get(id)) != null ? _b2 : getItemLength(i, data2[i]);
-          if (positions.get(id) !== top) {
-            positions.set(id, top);
-          }
-          if (startNoBuffer === null && top + length > scroll) {
-            startNoBuffer = i;
+        if (startNoBuffer !== null) {
+          if (top <= scroll + scrollLength) {
+            endNoBuffer = i;
           }
-          if (startBuffered === null && top + length > scroll - scrollBuffer) {
-            startBuffered = i;
+          if (top <= scroll + scrollLength + scrollBuffer) {
+            endBuffered = i;
+          } else {
+            break;
           }
-          if (startNoBuffer !== null) {
-            if (top <= scroll + scrollLength) {
-              endNoBuffer = i;
-            }
-            if (top <= scroll + scrollLength + scrollBuffer) {
-              endBuffered = i;
-            } else {
+        }
+        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;
             }
           }
-          top += length;
-        }
-        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;
+          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;
               }
-            }
-            if (!isContained) {
-              let didRecycle = false;
-              for (let u = 0; u < numContainers; u++) {
-                const index = peek$(ctx, `containerIndex${u}`);
-                if (index < startBuffered || index > endBuffered) {
-                  set$(ctx, `containerIndex${u}`, i);
-                  didRecycle = true;
-                  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 (!didRecycle) {
-                if (__DEV__) {
-                  console.warn(
-                    "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemSize",
-                    i
-                  );
-                }
-                const id = numContainers;
-                numContainers++;
-                set$(ctx, `containerIndex${id}`, i);
-                set$(ctx, `containerPosition${id}`, POSITION_OUT_OF_VIEW);
+            }
+            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 (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 (onViewableRangeChanged) {
-            if (startNoBuffer !== startNoBufferState || startBuffered !== startBufferedState || endNoBuffer !== endNoBufferState || endBuffered !== endBufferedState) {
-              onViewableRangeChanged({
-                start: startNoBuffer,
-                startBuffered,
-                end: endNoBuffer,
-                endBuffered,
-                items: data2.slice(startNoBuffer, endNoBuffer + 1)
-              });
-            }
+        }
+        if (onViewableRangeChanged) {
+          if (startNoBuffer !== startNoBufferState || startBuffered !== startBufferedState || endNoBuffer !== endNoBufferState || endBuffered !== endBufferedState) {
+            onViewableRangeChanged({
+              start: startNoBuffer,
+              startBuffered,
+              end: endNoBuffer,
+              endBuffered,
+              items: data2.slice(startNoBuffer, endNoBuffer + 1)
+            });
           }
         }
-      });
-    }, [data]);
-    React6.useMemo(() => {
-      var _a2, _b2;
-      allocateContainers();
-      calculateItemsInView();
-      const lengths = (_a2 = refState.current) == null ? void 0 : _a2.lengths;
-      let totalLength = 0;
-      for (let i = 0; i < data.length; i++) {
-        const id = getId(i);
-        totalLength += (_b2 = lengths.get(id)) != null ? _b2 : getItemLength(i, data[i]);
-      }
-      addTotalSize(totalLength);
-    }, []);
-    const checkAtBottom = () => {
-      var _a2;
-      const { scrollLength, scroll } = refState.current;
-      const totalLength = peek$(ctx, "totalLength");
-      const distanceFromEnd = totalLength - scroll - scrollLength;
-      if (refState.current) {
-        refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
+        updateViewableItems(
+          refState.current,
+          ctx,
+          refState.current.viewabilityConfigCallbackPairs,
+          getId,
+          scrollLength,
+          startNoBuffer,
+          endNoBuffer
+        );
       }
-      if (onEndReached && !((_a2 = refState.current) == null ? void 0 : _a2.isEndReached)) {
-        if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
-          if (refState.current) {
-            refState.current.isEndReached = true;
-          }
-          onEndReached({ distanceFromEnd });
+    });
+  }, [data]);
+  React7.useMemo(() => {
+    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;
+    for (let i = 0; i < numContainers; i++) {
+      set$(ctx, `containerIndex${i}`, -1);
+      set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+    }
+    set$(ctx, "numContainers", numContainers);
+    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 = () => {
+    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 });
       }
-    };
-    React6.useMemo(() => {
-      if (refState.current) {
-        refState.current.isEndReached = false;
+    }
+  };
+  React7.useEffect(() => {
+    if (refState.current) {
+      refState.current.isEndReached = false;
+    }
+    calculateItemsInView();
+    checkAtBottom();
+  }, [data]);
+  const updateItemSize = React7.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);
+    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
+          });
+        });
       }
-      calculateItemsInView();
-      checkAtBottom();
-    }, [data]);
-    const updateItemSize = React6.useCallback((index, length) => {
-      var _a2, _b2, _c, _d;
-      const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
-      if (!data2) {
+      const state = refState.current;
+      if (!state.animFrameScroll && !state.animFrameLayout) {
+        state.animFrameLayout = requestAnimationFrame(() => {
+          state.animFrameLayout = null;
+          calculateItemsInView();
+        });
+      }
+    }
+  }, []);
+  const handleScrollDebounced = React7.useCallback(() => {
+    calculateItemsInView();
+    checkAtBottom();
+    if (refState.current) {
+      refState.current.animFrameScroll = null;
+    }
+  }, []);
+  const onLayout = React7.useCallback((event) => {
+    const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
+    refState.current.scrollLength = scrollLength;
+  }, []);
+  const handleScroll = React7.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) {
         return;
       }
-      const lengths = (_b2 = refState.current) == null ? void 0 : _b2.lengths;
-      const id = getId(index);
-      const wasInFirstRender = (_c = refState.current) == null ? void 0 : _c.idsInFirstRender.has(id);
-      const prevLength = lengths.get(id) || (wasInFirstRender ? getItemLength(index, data2[index]) : 0);
-      if (!prevLength || Math.abs(prevLength - length) > 0.5) {
-        lengths.set(id, length);
-        addTotalSize(length - prevLength);
-        if (((_d = refState.current) == null ? void 0 : _d.isAtBottom) && maintainScrollAtEnd) {
-          requestAnimationFrame(() => {
-            var _a3;
-            (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
-              animated: true
-            });
-          });
-        }
-        const state = refState.current;
-        if (!state.animFrameScroll && !state.animFrameLayout) {
-          state.animFrameLayout = requestAnimationFrame(() => {
-            state.animFrameLayout = null;
-            calculateItemsInView();
-          });
-        }
+      refState.current.hasScrolled = true;
+      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+      refState.current.scroll = newScroll;
+      if (refState.current && !refState.current.animFrameScroll) {
+        refState.current.animFrameScroll = requestAnimationFrame(handleScrollDebounced);
       }
-    }, []);
-    const handleScrollDebounced = React6.useCallback(() => {
-      calculateItemsInView();
-      checkAtBottom();
-      if (refState.current) {
-        refState.current.animFrameScroll = null;
+      if (!fromSelf) {
+        onScrollProp == null ? void 0 : onScrollProp(event);
       }
-    }, []);
-    const onLayout = React6.useCallback((event) => {
-      const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
-      refState.current.scrollLength = scrollLength;
-    }, []);
-    const handleScroll = React6.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) {
-          return;
-        }
-        refState.current.hasScrolled = true;
-        const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
-        refState.current.scroll = newScroll;
-        if (refState.current && !refState.current.animFrameScroll) {
-          refState.current.animFrameScroll = requestAnimationFrame(handleScrollDebounced);
-        }
-        if (!fromSelf) {
-          onScrollProp == null ? void 0 : onScrollProp(event);
+    },
+    []
+  );
+  React7.useImperativeHandle(forwardedRef, () => {
+    const scrollToIndex = ({ index, animated }) => {
+      const offsetObj = calculateInitialOffset(index);
+      const offset = horizontal ? { x: offsetObj, y: 0 } : { x: 0, y: offsetObj };
+      refScroller.current.scrollTo({ ...offset, animated });
+    };
+    return {
+      getNativeScrollRef: () => refScroller.current,
+      getScrollableNode: refScroller.current.getScrollableNode,
+      getScrollResponder: refScroller.current.getScrollResponder,
+      flashScrollIndicators: refScroller.current.flashScrollIndicators,
+      scrollToIndex,
+      scrollToOffset: ({ offset, animated }) => {
+        const offsetObj = horizontal ? { x: offset, y: 0 } : { x: 0, y: offset };
+        refScroller.current.scrollTo({ ...offsetObj, animated });
+      },
+      scrollToItem: ({ item, animated }) => {
+        const index = data.indexOf(item);
+        if (index !== -1) {
+          scrollToIndex({ index, animated });
         }
       },
-      []
-    );
-    return /* @__PURE__ */ React6__namespace.createElement(
-      ListComponent,
-      {
-        ...rest,
-        contentContainerStyle,
-        style,
-        horizontal,
-        refScroller,
-        initialContentOffset,
-        getRenderedItem,
-        updateItemSize,
-        handleScroll,
-        onLayout,
-        recycleItems,
-        alignItemsAtEnd
-      }
-    );
-  }
-);
+      scrollToEnd: refScroller.current.scrollToEnd
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    ListComponent,
+    {
+      ...rest,
+      contentContainerStyle,
+      style,
+      horizontal,
+      refScroller,
+      initialContentOffset,
+      getRenderedItem,
+      updateItemSize,
+      handleScroll,
+      onLayout,
+      recycleItems,
+      alignItemsAtEnd
+    }
+  );
+});
 
 exports.LegendList = LegendList;