@legendapp/list 0.3.0 → 0.3.2

package/index.mjs

@@ -1,69 +1,372 @@
-import * as React2 from 'react';
-import { forwardRef, useRef, useMemo, useCallback, useEffect } from 'react';
-import { ScrollView, View, StyleSheet, Dimensions } from 'react-native';
+import * as React6 from 'react';
+import { forwardRef, useRef, useMemo } from 'react';
+import { ScrollView, View, Dimensions, StyleSheet, unstable_batchedUpdates } from 'react-native';
 
 // src/LegendList.tsx
-var LeanView = React2.forwardRef((props, ref) => {
-  return React2.createElement("RCTView", { ...props, ref });
-});
-LeanView.displayName = "RCTView";
-var ContextListener = React2.createContext(null);
+
+// src/constants.ts
+var DEFAULT_SCROLL_BUFFER = 0;
+var POSITION_OUT_OF_VIEW = -1e4;
+var ContextListener = React6.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React2.useState(() => ({
+  const [value] = React6.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
     values: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React2.createElement(ContextListener.Provider, { value }, children);
+  return /* @__PURE__ */ React6.createElement(ContextListener.Provider, { value }, children);
 }
 function useStateContext() {
-  return React2.useContext(ContextListener);
+  return React6.useContext(ContextListener);
 }
 function use$(signalName) {
-  const { listeners, values } = React2.useContext(ContextListener);
-  const [_, setState] = React2.useState(0);
-  React2.useMemo(() => {
-    const render = () => setState((prev) => prev > 1e4 ? 0 : prev + 1);
-    listeners.set(signalName, render);
-  }, []);
+  const { listeners, values } = React6.useContext(ContextListener);
+  const [, forceUpdate] = React6.useReducer((x) => x + 1, 0);
+  listeners.set(signalName, forceUpdate);
   return values.get(signalName);
 }
-function peek$(signalName, ctx) {
-  const { values } = ctx || React2.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.useContext(ContextListener);
+  const { listeners, values } = ctx;
   if (values.get(signalName) !== value) {
     values.set(signalName, value);
     (_a = listeners.get(signalName)) == null ? void 0 : _a();
   }
 }
+function applyDefaultProps(props) {
+  return {
+    ...props,
+    recycleItems: props.recycleItems || false,
+    onEndReachedThreshold: props.onEndReachedThreshold || 0.5,
+    maintainScrollAtEndThreshold: props.maintainScrollAtEndThreshold || 0.1,
+    maintainScrollAtEnd: props.maintainScrollAtEnd || false,
+    alignItemsAtEnd: props.alignItemsAtEnd || false
+  };
+}
+function allocateContainers(state) {
+  var _a, _b;
+  const { scrollLength, props, ctx, scrollBuffer } = state;
+  const averageItemSize = (_b = props.estimatedItemSize) != null ? _b : (_a = props.getEstimatedItemSize) == null ? void 0 : _a.call(props, 0, props.data[0]);
+  const numContainers = props.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);
+}
+function getId(state, index) {
+  const { data, keyExtractor } = state.props;
+  if (!data) {
+    return "";
+  }
+  const ret = index < data.length ? keyExtractor ? keyExtractor(data[index], index) : index : null;
+  return ret + "";
+}
+function calculateInitialOffset(props) {
+  const { data, initialScrollIndex, estimatedItemSize, getEstimatedItemSize } = props;
+  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;
+}
+function addTotalLength(state, add) {
+  const { ctx, props } = state;
+  const totalLength = (peek$(ctx, `totalLength`) || 0) + add;
+  set$(ctx, `totalLength`, totalLength);
+  const screenLength = state.scrollLength;
+  if (props.alignItemsAtEnd) {
+    const listPaddingTop = peek$(ctx, `stylePaddingTop`);
+    set$(ctx, `paddingTop`, Math.max(0, screenLength - totalLength - listPaddingTop));
+  }
+}
+function getRenderedItem(state, index) {
+  const { data, renderItem } = state.props;
+  if (!data) {
+    return null;
+  }
+  const renderedItem = renderItem == null ? void 0 : renderItem({
+    item: data[index],
+    index
+  });
+  return renderedItem;
+}
+var getItemSize = (state, index, data) => {
+  const { getEstimatedItemSize, estimatedItemSize } = state.props;
+  return getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize;
+};
+function calculateItemsInView(state) {
+  unstable_batchedUpdates(() => {
+    var _a, _b, _c;
+    const {
+      props: { data, onViewableRangeChanged },
+      scrollLength,
+      scroll: scrollState,
+      startNoBuffer: startNoBufferState,
+      startBuffered: startBufferedState,
+      endNoBuffer: endNoBufferState,
+      endBuffered: endBufferedState,
+      lengths,
+      positions,
+      scrollBuffer,
+      ctx
+    } = state;
+    if (!data) {
+      return;
+    }
+    const topPad = (peek$(ctx, `stylePaddingTop`) || 0) + (peek$(ctx, `headerSize`) || 0);
+    const scroll = scrollState - topPad;
+    scroll > state.scrollPrevious ? 1 : -1;
+    const scrollBufferTop = scrollBuffer;
+    const scrollBufferBottom = scrollBuffer;
+    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(state, i);
+        const top2 = positions.get(id);
+        if (top2 !== void 0) {
+          const length = (_a = lengths.get(id)) != null ? _a : getItemSize(state, i, data[i]);
+          const bottom = top2 + length;
+          if (bottom > scroll - scrollBufferTop) {
+            loopStart = i;
+          } else {
+            break;
+          }
+        }
+      }
+    }
+    let top = loopStart > 0 ? positions.get(getId(state, loopStart)) : 0;
+    for (let i = loopStart; i < data.length; i++) {
+      const id = getId(state, i);
+      const length = (_b = lengths.get(id)) != null ? _b : getItemSize(state, i, data[i]);
+      if (positions.get(id) !== top) {
+        positions.set(id, top);
+      }
+      if (startNoBuffer === null && top + length > scroll) {
+        startNoBuffer = i;
+      }
+      if (startBuffered === null && top + length > scroll - scrollBufferTop) {
+        startBuffered = i;
+      }
+      if (startNoBuffer !== null) {
+        if (top <= scroll + scrollLength) {
+          endNoBuffer = i;
+        }
+        if (top <= scroll + scrollLength + scrollBufferBottom) {
+          endBuffered = i;
+        } else {
+          break;
+        }
+      }
+      top += length;
+    }
+    Object.assign(state, {
+      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(state, 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 estimatedItemLength",
+                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 = data[itemIndex];
+        if (item) {
+          const id = getId(state, itemIndex);
+          if (itemIndex < startBuffered || itemIndex > endBuffered) ; 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: data.slice(startNoBuffer, endNoBuffer + 1)
+          });
+        }
+      }
+    }
+  });
+}
+function updateItemSize(state, refScroller, index, length) {
+  const {
+    props: { data, maintainScrollAtEnd },
+    ctx,
+    lengths,
+    idsInFirstRender,
+    isAtBottom
+  } = state;
+  if (!data) {
+    return;
+  }
+  const id = getId(state, index);
+  const wasInFirstRender = idsInFirstRender.has(id);
+  const prevLength = lengths.get(id) || (wasInFirstRender ? getItemSize(state, index, data[index]) : 0);
+  if (!prevLength || prevLength !== length) {
+    lengths.set(id, length);
+    addTotalLength(state, length - prevLength);
+    if (isAtBottom && maintainScrollAtEnd) {
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
+          animated: true
+        });
+      });
+    }
+    if (!state.animFrameScroll && !state.animFrameLayout) {
+      state.animFrameLayout = requestAnimationFrame(() => {
+        state.animFrameLayout = null;
+        if (!state.animFrameScroll) {
+          calculateItemsInView(state);
+        }
+      });
+    }
+  }
+}
+function checkAtBottom(state) {
+  const {
+    ctx,
+    scrollLength,
+    scroll,
+    props: { maintainScrollAtEndThreshold, onEndReached, onEndReachedThreshold }
+  } = state;
+  const totalLength = peek$(ctx, "totalLength");
+  const distanceFromEnd = totalLength - scroll - scrollLength;
+  state.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
+  if (onEndReached && !state.isEndReached) {
+    if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
+      state.isEndReached = true;
+      onEndReached({ distanceFromEnd });
+    }
+  }
+}
+function handleScrollDebounced(state) {
+  calculateItemsInView(state);
+  checkAtBottom(state);
+  state.animFrameScroll = null;
+}
+function handleScroll(state, onScrollDebounced, event) {
+  var _a, _b, _c;
+  if (((_b = (_a = event.nativeEvent) == null ? void 0 : _a.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
+    return;
+  }
+  const { horizontal, onScroll } = state.props;
+  state.hasScrolled = true;
+  const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+  state.scrollPrevious = state.scroll;
+  state.scroll = newScroll;
+  if (state && !state.animFrameScroll) {
+    state.animFrameScroll = requestAnimationFrame(onScrollDebounced);
+  }
+  onScroll == null ? void 0 : onScroll(event);
+}
+function onLayout(state, event) {
+  const scrollLength = event.nativeEvent.layout[state.props.horizontal ? "width" : "height"];
+  state.scrollLength = scrollLength;
+}
+var LeanView = React6.forwardRef((props, ref) => {
+  return React6.createElement("RCTView", { ...props, ref });
+});
+LeanView.displayName = "RCTView";
 
 // src/$View.tsx
 function $View({ $key, $style, ...rest }) {
   use$($key);
   const style = $style();
-  return /* @__PURE__ */ React2.createElement(LeanView, { style, ...rest });
+  return /* @__PURE__ */ React6.createElement(LeanView, { style, ...rest });
+}
+function InnerContainer({ id, getRenderedItem: getRenderedItem2, recycleItems, ItemSeparatorComponent }) {
+  const itemIndex = use$(`containerIndex${id}`);
+  const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
+  if (itemIndex < 0) {
+    return null;
+  }
+  const renderedItem = getRenderedItem2(itemIndex);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
 }
 var Container = ({
   id,
   recycleItems,
   horizontal,
-  getRenderedItem,
-  onLayout,
+  getRenderedItem: getRenderedItem2,
+  onLayout: onLayout2,
   ItemSeparatorComponent
 }) => {
   const ctx = useStateContext();
-  const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
-  const itemIndex = use$(`containerIndex${id}`);
-  if (itemIndex < 0) {
-    return null;
-  }
   const createStyle = () => {
-    const position = peek$(`containerPosition${id}`, ctx);
+    const position = peek$(ctx, `containerPosition${id}`);
     return horizontal ? {
-      flexDirection: "row",
       position: "absolute",
       top: 0,
       bottom: 0,
@@ -77,58 +380,66 @@ var Container = ({
       opacity: position < 0 ? 0 : 1
     };
   };
-  const renderedItem = getRenderedItem(itemIndex);
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React6.createElement(
     $View,
     {
       $key: `containerPosition${id}`,
       $style: createStyle,
       onLayout: (event) => {
-        const index = peek$(`containerIndex${id}`, ctx);
-        const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
-        onLayout(index, length);
+        const index = peek$(ctx, `containerIndex${id}`);
+        if (index >= 0) {
+          const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
+          onLayout2(index, length);
+        }
       }
     },
-    recycleItems ? renderedItem : /* @__PURE__ */ React2.createElement(React2.Fragment, { key: itemIndex }, renderedItem),
-    ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent
+    /* @__PURE__ */ React6.createElement(
+      InnerContainer,
+      {
+        id,
+        getRenderedItem: getRenderedItem2,
+        recycleItems,
+        ItemSeparatorComponent
+      }
+    )
   );
 };
 
 // src/Containers.tsx
-var Containers = React2.memo(function Containers2({
+var Containers = React6.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
-  updateItemLength,
-  getRenderedItem
+  updateItemSize: updateItemSize2,
+  getRenderedItem: getRenderedItem2
 }) {
   const ctx = useStateContext();
   const numContainers = use$("numContainers");
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React2.createElement(
+      /* @__PURE__ */ React6.createElement(
         Container,
         {
           id: i,
           key: i,
           recycleItems,
           horizontal,
-          getRenderedItem,
-          onLayout: updateItemLength,
+          getRenderedItem: getRenderedItem2,
+          onLayout: updateItemSize2,
           ItemSeparatorComponent
         }
       )
     );
   }
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React6.createElement(
     $View,
     {
       $key: "totalLength",
       $style: () => horizontal ? {
-        width: peek$("totalLength", ctx)
+        width: peek$(ctx, "totalLength")
       } : {
-        height: peek$("totalLength", ctx)
+        height: peek$(ctx, "totalLength")
       }
     },
     containers
@@ -137,15 +448,15 @@ var Containers = React2.memo(function Containers2({
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React2.isValidElement(Component)) {
+  if (React6.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React2.createElement(Component, null);
+    return /* @__PURE__ */ React6.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React2.memo(function ListComponent2({
+var ListComponent = React6.memo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -153,21 +464,23 @@ var ListComponent = React2.memo(function ListComponent2({
   recycleItems,
   ItemSeparatorComponent,
   alignItemsAtEnd,
-  handleScroll,
-  onLayout,
+  handleScroll: handleScroll2,
+  onLayout: onLayout2,
   ListHeaderComponent,
   ListHeaderComponentStyle,
   ListFooterComponent,
   ListFooterComponentStyle,
-  getRenderedItem,
-  updateItemLength,
+  getRenderedItem: getRenderedItem2,
+  updateItemSize: updateItemSize2,
+  addTotalLength: addTotalLength2,
   refScroller,
   ...rest
 }) {
   const ctx = useStateContext();
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React6.createElement(
     ScrollView,
     {
+      ...rest,
       style,
       contentContainerStyle: [
         contentContainerStyle,
@@ -175,38 +488,64 @@ var ListComponent = React2.memo(function ListComponent2({
           height: "100%"
         } : {}
       ],
-      onScroll: handleScroll,
-      onLayout,
-      scrollEventThrottle: 32,
+      onScroll: handleScroll2,
+      onLayout: onLayout2,
       horizontal,
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
-      ...rest,
       ref: refScroller
     },
-    alignItemsAtEnd && /* @__PURE__ */ React2.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$("paddingTop", ctx) }) }),
-    ListHeaderComponent && /* @__PURE__ */ React2.createElement(View, { style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
-    /* @__PURE__ */ React2.createElement(
+    alignItemsAtEnd && /* @__PURE__ */ React6.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
+    ListHeaderComponent && /* @__PURE__ */ React6.createElement(
+      View,
+      {
+        style: ListHeaderComponentStyle,
+        onLayout: (event) => {
+          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+          const prevSize = peek$(ctx, "headerSize") || 0;
+          if (size !== prevSize) {
+            set$(ctx, "headerSize", size);
+            addTotalLength2(size - prevSize);
+          }
+        }
+      },
+      getComponent(ListHeaderComponent)
+    ),
+    /* @__PURE__ */ React6.createElement(
       Containers,
       {
         horizontal,
         recycleItems,
-        getRenderedItem,
+        getRenderedItem: getRenderedItem2,
         ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
-        updateItemLength
+        updateItemSize: updateItemSize2
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React2.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React6.createElement(
+      View,
+      {
+        style: ListFooterComponentStyle,
+        onLayout: (event) => {
+          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+          const prevSize = peek$(ctx, "footerSize") || 0;
+          if (size !== prevSize) {
+            set$(ctx, "footerSize", size);
+            addTotalLength2(size - prevSize);
+          }
+        }
+      },
+      getComponent(ListFooterComponent)
+    )
   );
 });
 
 // src/LegendList.tsx
-var DEFAULT_SCROLL_BUFFER = 0;
-var POSITION_OUT_OF_VIEW = -1e4;
 var LegendList = forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React2.createElement(StateProvider, null, /* @__PURE__ */ React2.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+  return /* @__PURE__ */ React6.createElement(StateProvider, null, /* @__PURE__ */ React6.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = forwardRef(
-  function LegendListInner2(props, forwardedRef) {
+  function LegendListInner2(props_, forwardedRef) {
+    var _a, _b;
+    const props = applyDefaultProps(props_);
     const {
       data,
       initialScrollIndex,
@@ -214,51 +553,24 @@ var LegendListInner = forwardRef(
       horizontal,
       style: styleProp,
       contentContainerStyle: contentContainerStyleProp,
-      initialContainers,
       drawDistance,
-      recycleItems = true,
-      onEndReachedThreshold = 0.5,
-      maintainScrollAtEnd = false,
-      maintainScrollAtEndThreshold = 0.1,
-      alignItemsAtEnd = false,
-      keyExtractor,
-      renderItem,
-      estimatedItemLength,
-      onEndReached,
-      onViewableRangeChanged,
       ...rest
     } = props;
     const ctx = useStateContext();
-    const internalRef = useRef(null);
-    const refScroller = forwardedRef || internalRef;
+    const refScroller = forwardedRef || useRef(null);
     const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_SCROLL_BUFFER;
-    const styleFlattened = StyleSheet.flatten(styleProp);
-    const style = useMemo(() => styleFlattened, [JSON.stringify(styleProp)]);
-    const contentContainerStyleFlattened = StyleSheet.flatten(contentContainerStyleProp);
-    const contentContainerStyle = useMemo(
-      () => contentContainerStyleFlattened,
-      [JSON.stringify(contentContainerStyleProp)]
-    );
     const refState = useRef();
-    const getId = (index) => {
-      var _a;
-      const data2 = (_a = refState.current) == null ? void 0 : _a.data;
-      if (!data2) {
-        return "";
-      }
-      const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
-      return ret + "";
-    };
+    const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(calculateInitialOffset.bind(void 0, props), []);
     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,
-        data,
         idsInFirstRender: void 0,
         hasScrolled: false,
         scrollLength: Dimensions.get("window")[horizontal ? "width" : "height"],
@@ -266,271 +578,91 @@ var LegendListInner = forwardRef(
         startNoBuffer: 0,
         endBuffered: 0,
         endNoBuffer: 0,
-        scroll: 0,
-        topPad: 0
+        scroll: initialContentOffset || 0,
+        scrollPrevious: initialContentOffset || 0,
+        previousViewableItems: /* @__PURE__ */ new Set(),
+        props,
+        ctx,
+        scrollBuffer
       };
-      refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
+      refState.current.idsInFirstRender = new Set(
+        data.map((_, i) => getId(refState.current, 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);
-      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 allocateContainers = useCallback(() => {
-      const scrollLength = refState.current.scrollLength;
-      const numContainers = initialContainers || Math.ceil((scrollLength + scrollBuffer * 2) / estimatedItemLength(0)) + 4;
-      for (let i = 0; i < numContainers; i++) {
-        set$(`containerIndex${i}`, ctx, -1);
-        set$(`containerPosition${i}`, ctx, POSITION_OUT_OF_VIEW);
-      }
-      set$(`numContainers`, ctx, numContainers);
-    }, []);
-    const getRenderedItem = useCallback(
-      (index) => {
-        var _a;
-        const data2 = (_a = refState.current) == null ? void 0 : _a.data;
-        if (!data2) {
-          return null;
-        }
-        const renderedItem = renderItem == null ? void 0 : renderItem({
-          item: data2[index],
-          index
-        });
-        return renderedItem;
-      },
-      [renderItem]
+    refState.current.props = props;
+    refState.current.ctx = ctx;
+    const styleFlattened = StyleSheet.flatten(styleProp);
+    const style = useMemo(() => styleFlattened, [JSON.stringify(styleProp)]);
+    const contentContainerStyleFlattened = StyleSheet.flatten(contentContainerStyleProp);
+    const contentContainerStyle = useMemo(
+      () => contentContainerStyleFlattened,
+      [JSON.stringify(contentContainerStyleProp)]
     );
-    const calculateItemsInView = 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;
-        }
-        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;
-          }
-        }
-        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;
-              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;
-                break;
-              }
-            }
-            if (!didRecycle) {
-              if (__DEV__) {
-                console.warn(
-                  "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemLength",
-                  i
-                );
-              }
-              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 (onViewableRangeChanged) {
-          if (startNoBuffer !== startNoBufferState || startBuffered !== startBufferedState || endNoBuffer !== endNoBufferState || endBuffered !== endBufferedState) {
-            onViewableRangeChanged({
-              start: startNoBuffer,
-              startBuffered,
-              end: endNoBuffer,
-              endBuffered,
-              items: data2.slice(startNoBuffer, endNoBuffer + 1)
-            });
-          }
-        }
-      }
-    }, [data]);
+    const fns = useMemo(
+      () => ({
+        getRenderedItem: getRenderedItem.bind(void 0, refState.current),
+        getId: getId.bind(void 0, refState.current),
+        getItemSize: getItemSize.bind(void 0, refState.current),
+        calculateItemsInView: calculateItemsInView.bind(void 0, refState.current),
+        updateItemSize: updateItemSize.bind(void 0, refState.current, refScroller),
+        checkAtBottom: checkAtBottom.bind(void 0, refState.current),
+        handleScrollDebounced: handleScrollDebounced.bind(void 0, refState.current),
+        onLayout: onLayout.bind(void 0, refState.current),
+        addTotalLength: addTotalLength.bind(void 0, refState.current),
+        handleScroll: handleScroll.bind(
+          void 0,
+          refState.current,
+          handleScrollDebounced.bind(void 0, refState.current)
+        )
+      }),
+      []
+    );
+    const {
+      calculateItemsInView: calculateItemsInView2,
+      getId: getId2,
+      getItemSize: getItemSize2,
+      checkAtBottom: checkAtBottom2,
+      updateItemSize: updateItemSize2,
+      getRenderedItem: getRenderedItem2,
+      onLayout: onLayout2,
+      handleScroll: handleScroll2,
+      addTotalLength: addTotalLength2
+    } = fns;
+    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);
     useMemo(() => {
-      var _a, _b;
-      allocateContainers();
-      calculateItemsInView();
-      const lengths = (_a = refState.current) == null ? void 0 : _a.lengths;
-      let totalLength = 0;
+      var _a2, _b2;
+      allocateContainers(refState.current);
+      calculateItemsInView2();
+      const lengths = (_a2 = refState.current) == null ? void 0 : _a2.lengths;
+      let totalLength = (peek$(ctx, `headerSize`) || 0) + (peek$(ctx, `footerSize`) || 0);
       for (let i = 0; i < data.length; i++) {
-        const id = getId(i);
-        totalLength += (_b = lengths.get(id)) != null ? _b : estimatedItemLength(i);
+        const id = getId2(i);
+        totalLength += (_b2 = lengths.get(id)) != null ? _b2 : getItemSize2(i, data[i]);
       }
-      setTotalLength(totalLength);
+      addTotalLength2(totalLength);
     }, []);
-    const checkAtBottom = () => {
-      var _a;
-      const { scrollLength, scroll } = refState.current;
-      const totalLength = peek$("totalLength", ctx);
-      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 (distanceFromEnd < onEndReachedThreshold * scrollLength) {
-          if (refState.current) {
-            refState.current.isEndReached = true;
-          }
-          onEndReached({ distanceFromEnd });
-        }
-      }
-    };
     useMemo(() => {
       if (refState.current) {
         refState.current.isEndReached = false;
       }
-      calculateItemsInView();
-      checkAtBottom();
+      calculateItemsInView2();
+      checkAtBottom2();
     }, [data]);
-    const updateItemLength = useCallback((index, length) => {
-      var _a, _b, _c, _d, _e;
-      const data2 = (_a = refState.current) == null ? void 0 : _a.data;
-      if (!data2) {
-        return;
-      }
-      const lengths = (_b = refState.current) == null ? void 0 : _b.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);
-      if (!prevLength || prevLength !== length) {
-        lengths.set(id, length);
-        const totalLength = peek$("totalLength", ctx);
-        setTotalLength(totalLength + (length - prevLength));
-        if (((_d = refState.current) == null ? void 0 : _d.isAtBottom) && maintainScrollAtEnd) {
-          requestAnimationFrame(() => {
-            var _a2;
-            (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
-              animated: true
-            });
-          });
-        }
-        if (!((_e = refState.current) == null ? void 0 : _e.animFrame)) {
-          calculateItemsInView();
-        }
-      }
-    }, []);
-    const handleScrollDebounced = useCallback(() => {
-      calculateItemsInView();
-      checkAtBottom();
-      if (refState.current) {
-        refState.current.animFrame = null;
-      }
-    }, []);
-    const onLayout = useCallback((event) => {
-      const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
-      refState.current.scrollLength = scrollLength;
-    }, []);
-    const handleScroll = useCallback((event) => {
-      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);
-      }
-    }, []);
-    useEffect(() => {
-      if (initialContentOffset) {
-        handleScroll({
-          nativeEvent: { contentOffset: { y: initialContentOffset } }
-        });
-        calculateItemsInView();
-      }
-    }, []);
-    return /* @__PURE__ */ React2.createElement(
+    return /* @__PURE__ */ React6.createElement(
       ListComponent,
       {
         ...rest,
+        addTotalLength: addTotalLength2,
         contentContainerStyle,
         style,
         horizontal,
         refScroller,
         initialContentOffset,
-        getRenderedItem,
-        updateItemLength,
-        handleScroll,
-        onLayout,
-        recycleItems,
-        alignItemsAtEnd
+        getRenderedItem: getRenderedItem2,
+        updateItemSize: updateItemSize2,
+        handleScroll: handleScroll2,
+        onLayout: onLayout2
       }
     );
   }