@legendapp/list 0.3.1 → 0.3.3

package/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React2 = require('react');
+var React6 = require('react');
 var reactNative = require('react-native');
 
 function _interopNamespace(e) {
@@ -21,40 +21,37 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 
 // src/LegendList.tsx
-var LeanView = React2__namespace.forwardRef((props, ref) => {
-  return React2__namespace.createElement("RCTView", { ...props, ref });
+var LeanView = React6__namespace.forwardRef((props, ref) => {
+  return React6__namespace.createElement("RCTView", { ...props, ref });
 });
 LeanView.displayName = "RCTView";
-var ContextListener = React2__namespace.createContext(null);
+var ContextListener = React6__namespace.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React2__namespace.useState(() => ({
+  const [value] = React6__namespace.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React2__namespace.createElement(ContextListener.Provider, { value }, children);
+  return /* @__PURE__ */ React6__namespace.createElement(ContextListener.Provider, { value }, children);
 }
 function useStateContext() {
-  return React2__namespace.useContext(ContextListener);
+  return React6__namespace.useContext(ContextListener);
 }
 function use$(signalName) {
-  const { listeners, values } = React2__namespace.useContext(ContextListener);
-  const [_, setState] = React2__namespace.useState(0);
-  React2__namespace.useMemo(() => {
-    const render = () => setState((prev) => prev > 1e4 ? 0 : prev + 1);
-    listeners.set(signalName, render);
-  }, []);
+  const { listeners, values } = React6__namespace.useContext(ContextListener);
+  const [, forceUpdate] = React6__namespace.useReducer((x) => x + 1, 0);
+  listeners.set(signalName, forceUpdate);
   return values.get(signalName);
 }
-function peek$(signalName, ctx) {
-  const { values } = ctx || React2__namespace.useContext(ContextListener);
+function peek$(ctx, signalName) {
+  const { values } = ctx;
   return values.get(signalName);
 }
-function set$(signalName, ctx, value) {
+function set$(ctx, signalName, value) {
   var _a;
-  const { listeners, values } = ctx || React2__namespace.useContext(ContextListener);
+  const { listeners, values } = ctx;
   if (values.get(signalName) !== value) {
     values.set(signalName, value);
     (_a = listeners.get(signalName)) == null ? void 0 : _a();
@@ -65,7 +62,7 @@ function set$(signalName, ctx, value) {
 function $View({ $key, $style, ...rest }) {
   use$($key);
   const style = $style();
-  return /* @__PURE__ */ React2__namespace.createElement(LeanView, { style, ...rest });
+  return /* @__PURE__ */ React6__namespace.createElement(LeanView, { style, ...rest });
 }
 function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
   const itemIndex = use$(`containerIndex${id}`);
@@ -74,7 +71,7 @@ function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorCompon
     return null;
   }
   const renderedItem = getRenderedItem(itemIndex);
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
+  return /* @__PURE__ */ React6__namespace.createElement(React6__namespace.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
 }
 var Container = ({
   id,
@@ -86,7 +83,7 @@ var Container = ({
 }) => {
   const ctx = useStateContext();
   const createStyle = () => {
-    const position = peek$(`containerPosition${id}`, ctx);
+    const position = peek$(ctx, `containerPosition${id}`);
     return horizontal ? {
       flexDirection: "row",
       position: "absolute",
@@ -102,20 +99,20 @@ var Container = ({
       opacity: position < 0 ? 0 : 1
     };
   };
-  return /* @__PURE__ */ React2__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     $View,
     {
       $key: `containerPosition${id}`,
       $style: createStyle,
       onLayout: (event) => {
-        const index = peek$(`containerIndex${id}`, ctx);
+        const index = peek$(ctx, `containerIndex${id}`);
         if (index >= 0) {
           const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
           onLayout(index, length);
         }
       }
     },
-    /* @__PURE__ */ React2__namespace.createElement(
+    /* @__PURE__ */ React6__namespace.createElement(
       InnerContainer,
       {
         id,
@@ -128,11 +125,11 @@ var Container = ({
 };
 
 // src/Containers.tsx
-var Containers = React2__namespace.memo(function Containers2({
+var Containers = React6__namespace.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
-  updateItemLength,
+  updateItemSize,
   getRenderedItem
 }) {
   const ctx = useStateContext();
@@ -140,7 +137,7 @@ var Containers = React2__namespace.memo(function Containers2({
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React2__namespace.createElement(
+      /* @__PURE__ */ React6__namespace.createElement(
         Container,
         {
           id: i,
@@ -148,20 +145,20 @@ var Containers = React2__namespace.memo(function Containers2({
           recycleItems,
           horizontal,
           getRenderedItem,
-          onLayout: updateItemLength,
+          onLayout: updateItemSize,
           ItemSeparatorComponent
         }
       )
     );
   }
-  return /* @__PURE__ */ React2__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     $View,
     {
       $key: "totalLength",
       $style: () => horizontal ? {
-        width: peek$("totalLength", ctx)
+        width: peek$(ctx, "totalLength")
       } : {
-        height: peek$("totalLength", ctx)
+        height: peek$(ctx, "totalLength")
       }
     },
     containers
@@ -170,15 +167,15 @@ var Containers = React2__namespace.memo(function Containers2({
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React2__namespace.isValidElement(Component)) {
+  if (React6__namespace.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React2__namespace.createElement(Component, null);
+    return /* @__PURE__ */ React6__namespace.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React2__namespace.memo(function ListComponent2({
+var ListComponent = React6__namespace.memo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -193,12 +190,12 @@ var ListComponent = React2__namespace.memo(function ListComponent2({
   ListFooterComponent,
   ListFooterComponentStyle,
   getRenderedItem,
-  updateItemLength,
+  updateItemSize,
   refScroller,
   ...rest
 }) {
   const ctx = useStateContext();
-  return /* @__PURE__ */ React2__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     reactNative.ScrollView,
     {
       ...rest,
@@ -211,35 +208,35 @@ var ListComponent = React2__namespace.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__ */ React2__namespace.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$("paddingTop", ctx) }) }),
-    ListHeaderComponent && /* @__PURE__ */ React2__namespace.createElement(reactNative.View, { style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
-    /* @__PURE__ */ React2__namespace.createElement(
+    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(
       Containers,
       {
         horizontal,
         recycleItems,
         getRenderedItem,
         ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
-        updateItemLength
+        updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React2__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React6__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
 
 // src/LegendList.tsx
 var DEFAULT_SCROLL_BUFFER = 0;
 var POSITION_OUT_OF_VIEW = -1e4;
-var LegendList = React2.forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React2__namespace.createElement(StateProvider, null, /* @__PURE__ */ React2__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+var LegendList = React6.forwardRef(function LegendList2(props, forwardedRef) {
+  return /* @__PURE__ */ React6__namespace.createElement(StateProvider, null, /* @__PURE__ */ React6__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
-var LegendListInner = React2.forwardRef(
+var LegendListInner = React6.forwardRef(
   function LegendListInner2(props, forwardedRef) {
+    var _a, _b;
     const {
       data,
       initialScrollIndex,
@@ -247,7 +244,7 @@ var LegendListInner = React2.forwardRef(
       horizontal,
       style: styleProp,
       contentContainerStyle: contentContainerStyleProp,
-      initialContainers,
+      initialNumContainers,
       drawDistance,
       recycleItems = true,
       onEndReachedThreshold = 0.5,
@@ -257,38 +254,58 @@ var LegendListInner = React2.forwardRef(
       onScroll: onScrollProp,
       keyExtractor,
       renderItem,
-      estimatedItemLength,
+      estimatedItemSize,
+      getEstimatedItemSize,
       onEndReached,
       onViewableRangeChanged,
       ...rest
     } = props;
     const ctx = useStateContext();
-    const internalRef = React2.useRef(null);
+    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 = React2.useMemo(() => styleFlattened, [JSON.stringify(styleProp)]);
+    const style = React6.useMemo(() => styleFlattened, [JSON.stringify(styleProp)]);
     const contentContainerStyleFlattened = reactNative.StyleSheet.flatten(contentContainerStyleProp);
-    const contentContainerStyle = React2.useMemo(
+    const contentContainerStyle = React6.useMemo(
       () => contentContainerStyleFlattened,
       [JSON.stringify(contentContainerStyleProp)]
     );
-    const refState = React2.useRef();
+    const refState = React6.useRef();
     const getId = (index) => {
-      var _a;
-      const data2 = (_a = refState.current) == null ? void 0 : _a.data;
+      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 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;
+        }
+      }
+      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,
-        animFrame: null,
+        animFrameScroll: null,
+        animFrameLayout: null,
         isStartReached: false,
         isEndReached: false,
         isAtBottom: false,
@@ -300,35 +317,36 @@ var LegendListInner = React2.forwardRef(
         startNoBuffer: 0,
         endBuffered: 0,
         endNoBuffer: 0,
-        scroll: 0,
-        topPad: 0
+        scroll: initialContentOffset || 0
       };
       refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     }
     refState.current.data = data;
-    set$(`numItems`, ctx, data.length);
-    const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : initialScrollIndex ? initialScrollIndex * estimatedItemLength(initialScrollIndex) : void 0;
-    const setTotalLength = (length) => {
-      set$(`totalLength`, ctx, length);
+    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 length = (peek$(ctx, `totalLength`) || 0) + add;
+      set$(ctx, `totalLength`, length);
       const screenLength = refState.current.scrollLength;
       if (alignItemsAtEnd) {
-        const listPaddingTop = ((style == null ? void 0 : style.paddingTop) || 0) + ((contentContainerStyle == null ? void 0 : contentContainerStyle.paddingTop) || 0);
-        set$(`paddingTop`, ctx, Math.max(0, screenLength - length - listPaddingTop));
+        const listPaddingTop = peek$(ctx, `stylePaddingTop`);
+        set$(ctx, `paddingTop`, Math.max(0, screenLength - length - listPaddingTop));
       }
     };
-    const allocateContainers = React2.useCallback(() => {
+    const allocateContainers = React6.useCallback(() => {
       const scrollLength = refState.current.scrollLength;
-      const numContainers = initialContainers || Math.ceil((scrollLength + scrollBuffer * 2) / estimatedItemLength(0)) + 4;
+      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$(`containerIndex${i}`, ctx, -1);
-        set$(`containerPosition${i}`, ctx, POSITION_OUT_OF_VIEW);
+        set$(ctx, `containerIndex${i}`, -1);
+        set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
       }
-      set$(`numContainers`, ctx, numContainers);
+      set$(ctx, `numContainers`, numContainers);
     }, []);
-    const getRenderedItem = React2.useCallback(
+    const getRenderedItem = React6.useCallback(
       (index) => {
-        var _a;
-        const data2 = (_a = refState.current) == null ? void 0 : _a.data;
+        var _a2;
+        const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
         if (!data2) {
           return null;
         }
@@ -340,147 +358,165 @@ var LegendListInner = React2.forwardRef(
       },
       [renderItem]
     );
-    const calculateItemsInView = React2.useCallback(() => {
-      var _a, _b;
-      const {
-        data: data2,
-        scrollLength,
-        scroll: scrollState,
-        topPad,
-        startNoBuffer: startNoBufferState,
-        startBuffered: startBufferedState,
-        endNoBuffer: endNoBufferState,
-        endBuffered: endBufferedState
-      } = refState.current;
-      if (!data2) {
-        return;
-      }
-      const scroll = scrollState - topPad;
-      const { lengths, positions } = refState.current;
-      let top = 0;
-      let startNoBuffer = null;
-      let startBuffered = null;
-      let endNoBuffer = null;
-      let endBuffered = null;
-      for (let i = 0; i < data2.length; i++) {
-        const id = getId(i);
-        const length = (_a = lengths.get(id)) != null ? _a : estimatedItemLength(i);
-        if (positions.get(id) !== top) {
-          positions.set(id, top);
-        }
-        if (startNoBuffer === null && top + length > scroll) {
-          startNoBuffer = i;
+    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 (startBuffered === null && top + length > scroll - scrollBuffer) {
-          startBuffered = 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 (startNoBuffer !== null) {
-          if (top <= scroll + scrollLength) {
-            endNoBuffer = 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 (top <= scroll + scrollLength + scrollBuffer) {
-            endBuffered = i;
-          } else {
-            break;
+          if (startNoBuffer === null && top + length > scroll) {
+            startNoBuffer = i;
           }
-        }
-        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$(`containerIndex${j}`, ctx);
-            if (index === i) {
-              isContained = true;
+          if (startBuffered === null && top + length > scroll - scrollBuffer) {
+            startBuffered = i;
+          }
+          if (startNoBuffer !== null) {
+            if (top <= scroll + scrollLength) {
+              endNoBuffer = i;
+            }
+            if (top <= scroll + scrollLength + scrollBuffer) {
+              endBuffered = i;
+            } else {
               break;
             }
           }
-          if (!isContained) {
-            let didRecycle = false;
-            for (let u = 0; u < numContainers; u++) {
-              const index = peek$(`containerIndex${u}`, ctx);
-              if (index < startBuffered || index > endBuffered) {
-                set$(`containerIndex${u}`, ctx, i);
-                didRecycle = true;
+          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;
                 break;
               }
             }
-            if (!didRecycle) {
-              if (__DEV__) {
-                console.warn(
-                  "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemLength",
-                  i
-                );
+            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;
+                }
+              }
+              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);
               }
-              const id = numContainers;
-              numContainers++;
-              set$(`containerIndex${id}`, ctx, i);
-              set$(`containerPosition${id}`, ctx, POSITION_OUT_OF_VIEW);
             }
           }
-        }
-        if (numContainers !== prevNumContainers) {
-          set$(`numContainers`, ctx, numContainers);
-        }
-        for (let i = 0; i < numContainers; i++) {
-          const itemIndex = peek$(`containerIndex${i}`, ctx);
-          const item = data2[itemIndex];
-          if (item) {
-            const id = getId(itemIndex);
-            if (itemIndex < startBuffered || itemIndex > endBuffered) {
-              set$(`containerPosition${i}`, ctx, POSITION_OUT_OF_VIEW);
-            } else {
-              const pos = (_b = positions.get(id)) != null ? _b : -1;
-              const prevPos = peek$(`containerPosition${i}`, ctx);
-              if (pos >= 0 && pos !== prevPos) {
-                set$(`containerPosition${i}`, ctx, 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]);
-    React2.useMemo(() => {
-      var _a, _b;
+    React6.useMemo(() => {
+      var _a2, _b2;
       allocateContainers();
       calculateItemsInView();
-      const lengths = (_a = refState.current) == null ? void 0 : _a.lengths;
+      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 += (_b = lengths.get(id)) != null ? _b : estimatedItemLength(i);
+        totalLength += (_b2 = lengths.get(id)) != null ? _b2 : getItemLength(i, data[i]);
       }
-      setTotalLength(totalLength);
+      addTotalSize(totalLength);
     }, []);
     const checkAtBottom = () => {
-      var _a;
+      var _a2;
       const { scrollLength, scroll } = refState.current;
-      const totalLength = peek$("totalLength", ctx);
+      const totalLength = peek$(ctx, "totalLength");
       const distanceFromEnd = totalLength - scroll - scrollLength;
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
-      if (onEndReached && !((_a = refState.current) == null ? void 0 : _a.isEndReached)) {
+      if (onEndReached && !((_a2 = refState.current) == null ? void 0 : _a2.isEndReached)) {
         if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
           if (refState.current) {
             refState.current.isEndReached = true;
@@ -489,58 +525,65 @@ var LegendListInner = React2.forwardRef(
         }
       }
     };
-    React2.useMemo(() => {
+    React6.useMemo(() => {
       if (refState.current) {
         refState.current.isEndReached = false;
       }
       calculateItemsInView();
       checkAtBottom();
     }, [data]);
-    const updateItemLength = React2.useCallback((index, length) => {
-      var _a, _b, _c, _d, _e;
-      const data2 = (_a = refState.current) == null ? void 0 : _a.data;
+    const updateItemSize = React6.useCallback((index, length) => {
+      var _a2, _b2, _c, _d;
+      const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
       if (!data2) {
         return;
       }
-      const lengths = (_b = refState.current) == null ? void 0 : _b.lengths;
+      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 ? estimatedItemLength(index) : 0);
+      const prevLength = lengths.get(id) || (wasInFirstRender ? getItemLength(index, data2[index]) : 0);
       if (!prevLength || prevLength !== length) {
         lengths.set(id, length);
-        const totalLength = peek$("totalLength", ctx);
-        setTotalLength(totalLength + (length - prevLength));
+        addTotalSize(length - prevLength);
         if (((_d = refState.current) == null ? void 0 : _d.isAtBottom) && maintainScrollAtEnd) {
           requestAnimationFrame(() => {
-            var _a2;
-            (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
+            var _a3;
+            (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
               animated: true
             });
           });
         }
-        if (!((_e = refState.current) == null ? void 0 : _e.animFrame)) {
-          calculateItemsInView();
+        const state = refState.current;
+        if (!state.animFrameScroll && !state.animFrameLayout) {
+          state.animFrameLayout = requestAnimationFrame(() => {
+            state.animFrameLayout = null;
+            calculateItemsInView();
+          });
         }
       }
     }, []);
-    const handleScrollDebounced = React2.useCallback(() => {
+    const handleScrollDebounced = React6.useCallback(() => {
       calculateItemsInView();
       checkAtBottom();
       if (refState.current) {
-        refState.current.animFrame = null;
+        refState.current.animFrameScroll = null;
       }
     }, []);
-    const onLayout = React2.useCallback((event) => {
+    const onLayout = React6.useCallback((event) => {
       const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
       refState.current.scrollLength = scrollLength;
     }, []);
-    const handleScroll = React2.useCallback(
+    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.animFrame) {
-          refState.current.animFrame = requestAnimationFrame(handleScrollDebounced);
+        if (refState.current && !refState.current.animFrameScroll) {
+          refState.current.animFrameScroll = requestAnimationFrame(handleScrollDebounced);
         }
         if (!fromSelf) {
           onScrollProp == null ? void 0 : onScrollProp(event);
@@ -548,20 +591,7 @@ var LegendListInner = React2.forwardRef(
       },
       []
     );
-    React2.useEffect(() => {
-      if (initialContentOffset) {
-        const offset = horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset };
-        handleScroll(
-          {
-            nativeEvent: { contentOffset: offset }
-          },
-          /*fromSelf*/
-          true
-        );
-        calculateItemsInView();
-      }
-    }, []);
-    return /* @__PURE__ */ React2__namespace.createElement(
+    return /* @__PURE__ */ React6__namespace.createElement(
       ListComponent,
       {
         ...rest,
@@ -571,7 +601,7 @@ var LegendListInner = React2.forwardRef(
         refScroller,
         initialContentOffset,
         getRenderedItem,
-        updateItemLength,
+        updateItemSize,
         handleScroll,
         onLayout,
         recycleItems,