@legendapp/list 0.2.2 → 0.3.0

package/index.js

@@ -1,9 +1,6 @@
 'use strict';
 
 var React2 = require('react');
-var state = require('@legendapp/state');
-var enableReactNativeComponents = require('@legendapp/state/config/enableReactNativeComponents');
-var react = require('@legendapp/state/react');
 var reactNative = require('react-native');
 
 function _interopNamespace(e) {
@@ -27,405 +24,537 @@ function _interopNamespace(e) {
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 // src/LegendList.tsx
-enableReactNativeComponents.enableReactNativeComponents();
+var LeanView = React2__namespace.forwardRef((props, ref) => {
+  return React2__namespace.createElement("RCTView", { ...props, ref });
+});
+LeanView.displayName = "RCTView";
+var ContextListener = React2__namespace.createContext(null);
+function StateProvider({ children }) {
+  const [value] = React2__namespace.useState(() => ({
+    listeners: /* @__PURE__ */ new Map(),
+    values: /* @__PURE__ */ new Map()
+  }));
+  return /* @__PURE__ */ React2__namespace.createElement(ContextListener.Provider, { value }, children);
+}
+function useStateContext() {
+  return React2__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);
+  }, []);
+  return values.get(signalName);
+}
+function peek$(signalName, ctx) {
+  const { values } = ctx || React2__namespace.useContext(ContextListener);
+  return values.get(signalName);
+}
+function set$(signalName, ctx, value) {
+  var _a;
+  const { listeners, values } = ctx || React2__namespace.useContext(ContextListener);
+  if (values.get(signalName) !== value) {
+    values.set(signalName, value);
+    (_a = listeners.get(signalName)) == null ? void 0 : _a();
+  }
+}
+
+// src/$View.tsx
+function $View({ $key, $style, ...rest }) {
+  use$($key);
+  const style = $style();
+  return /* @__PURE__ */ React2__namespace.createElement(LeanView, { style, ...rest });
+}
 var Container = ({
-  $container,
+  id,
   recycleItems,
-  listProps,
+  horizontal,
   getRenderedItem,
   onLayout,
   ItemSeparatorComponent
 }) => {
-  const { horizontal } = listProps;
-  const { id } = $container.peek();
-  const itemIndex = react.use$($container.itemIndex);
-  const key = recycleItems ? void 0 : itemIndex;
-  const createStyle = () => horizontal ? {
-    flexDirection: "row",
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: $container.position.get(),
-    opacity: $container.position.get() < 0 ? 0 : 1
-  } : {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: $container.position.get(),
-    opacity: $container.position.get() < 0 ? 0 : 1
+  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);
+    return horizontal ? {
+      flexDirection: "row",
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: position,
+      opacity: position < 0 ? 0 : 1
+    } : {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      top: position,
+      opacity: position < 0 ? 0 : 1
+    };
   };
-  return itemIndex < 0 ? null : /* @__PURE__ */ React2__namespace.createElement(
-    react.Reactive.View,
+  const renderedItem = getRenderedItem(itemIndex);
+  return /* @__PURE__ */ React2__namespace.createElement(
+    $View,
     {
-      key: id,
+      $key: `containerPosition${id}`,
       $style: createStyle,
       onLayout: (event) => {
-        const index = $container.itemIndex.peek();
+        const index = peek$(`containerIndex${id}`, ctx);
         const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
         onLayout(index, length);
       }
     },
-    /* @__PURE__ */ React2__namespace.createElement(reactNative.View, { key }, getRenderedItem(itemIndex)),
-    ItemSeparatorComponent && itemIndex !== listProps.data.length - 1 && /* @__PURE__ */ React2__namespace.createElement(react.Reactive.View, null, ItemSeparatorComponent)
+    recycleItems ? renderedItem : /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, { key: itemIndex }, renderedItem),
+    ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent
   );
 };
 
+// src/Containers.tsx
+var Containers = React2__namespace.memo(function Containers2({
+  horizontal,
+  recycleItems,
+  ItemSeparatorComponent,
+  updateItemLength,
+  getRenderedItem
+}) {
+  const ctx = useStateContext();
+  const numContainers = use$("numContainers");
+  const containers = [];
+  for (let i = 0; i < numContainers; i++) {
+    containers.push(
+      /* @__PURE__ */ React2__namespace.createElement(
+        Container,
+        {
+          id: i,
+          key: i,
+          recycleItems,
+          horizontal,
+          getRenderedItem,
+          onLayout: updateItemLength,
+          ItemSeparatorComponent
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ React2__namespace.createElement(
+    $View,
+    {
+      $key: "totalLength",
+      $style: () => horizontal ? {
+        width: peek$("totalLength", ctx)
+      } : {
+        height: peek$("totalLength", ctx)
+      }
+    },
+    containers
+  );
+});
+
+// src/ListComponent.tsx
+var getComponent = (Component) => {
+  if (React2__namespace.isValidElement(Component)) {
+    return Component;
+  }
+  if (Component) {
+    return /* @__PURE__ */ React2__namespace.createElement(Component, null);
+  }
+  return null;
+};
+var ListComponent = React2__namespace.memo(function ListComponent2({
+  style,
+  contentContainerStyle,
+  horizontal,
+  initialContentOffset,
+  recycleItems,
+  ItemSeparatorComponent,
+  alignItemsAtEnd,
+  handleScroll,
+  onLayout,
+  ListHeaderComponent,
+  ListHeaderComponentStyle,
+  ListFooterComponent,
+  ListFooterComponentStyle,
+  getRenderedItem,
+  updateItemLength,
+  refScroller,
+  ...rest
+}) {
+  const ctx = useStateContext();
+  return /* @__PURE__ */ React2__namespace.createElement(
+    reactNative.ScrollView,
+    {
+      style,
+      contentContainerStyle: [
+        contentContainerStyle,
+        horizontal ? {
+          height: "100%"
+        } : {}
+      ],
+      onScroll: handleScroll,
+      onLayout,
+      scrollEventThrottle: 32,
+      horizontal,
+      contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
+      ...rest,
+      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(
+      Containers,
+      {
+        horizontal,
+        recycleItems,
+        getRenderedItem,
+        ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
+        updateItemLength
+      }
+    ),
+    ListFooterComponent && /* @__PURE__ */ React2__namespace.createElement(reactNative.View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+  );
+});
+
 // src/LegendList.tsx
-enableReactNativeComponents.enableReactNativeComponents();
 var DEFAULT_SCROLL_BUFFER = 0;
 var POSITION_OUT_OF_VIEW = -1e4;
 var LegendList = React2.forwardRef(function LegendList2(props, forwardedRef) {
-  const {
-    data,
-    initialScrollIndex,
-    initialScrollOffset,
-    horizontal,
-    style,
-    contentContainerStyle,
-    initialContainers,
-    drawDistance,
-    recycleItems = true,
-    onEndReachedThreshold,
-    maintainScrollAtEnd = false,
-    maintainScrollAtEndThreshold = 0.1,
-    alignItemsAtEnd = false,
-    keyExtractor,
-    renderItem,
-    estimatedItemLength,
-    onEndReached,
-    onViewableRangeChanged,
-    ListHeaderComponent,
-    ListHeaderComponentStyle,
-    ListFooterComponent,
-    ListFooterComponentStyle,
-    ItemSeparatorComponent,
-    ...rest
-  } = props;
-  const internalRef = React2.useRef(null);
-  const refScroller = forwardedRef || internalRef;
-  const containers$ = react.useObservable(() => []);
-  const paddingTop$ = react.useObservable(0);
-  const visibleRange$ = react.useObservable(() => ({
-    start: 0,
-    end: 0,
-    totalLength: 0,
-    scroll: 0,
-    topPad: 0
-  }));
-  const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_SCROLL_BUFFER;
-  const refPositions = React2.useRef();
-  const getId = (index) => {
-    var _a;
-    const data2 = (_a = refPositions.current) == null ? void 0 : _a.data;
-    if (!data2) {
-      return "";
-    }
-    const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
-    return ret + "";
-  };
-  if (!refPositions.current) {
-    refPositions.current = {
-      lengths: /* @__PURE__ */ new Map(),
-      positions: /* @__PURE__ */ new Map(),
-      pendingAdjust: 0,
-      animFrame: null,
-      isStartReached: false,
-      isEndReached: false,
-      isAtBottom: false,
+  return /* @__PURE__ */ React2__namespace.createElement(StateProvider, null, /* @__PURE__ */ React2__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+});
+var LegendListInner = React2.forwardRef(
+  function LegendListInner2(props, forwardedRef) {
+    const {
       data,
-      idsInFirstRender: void 0,
-      hasScrolled: false,
-      scrollLength: reactNative.Dimensions.get("window")[horizontal ? "width" : "height"]
-    };
-    refPositions.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
-  }
-  refPositions.current.data = data;
-  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : initialScrollIndex ? initialScrollIndex * estimatedItemLength(initialScrollIndex) : void 0;
-  const setTotalLength = (length) => {
-    visibleRange$.totalLength.set(length);
-    const screenLength = refPositions.current.scrollLength;
-    if (alignItemsAtEnd) {
-      const listPaddingTop = ((style == null ? void 0 : style.paddingTop) || 0) + ((contentContainerStyle == null ? void 0 : contentContainerStyle.paddingTop) || 0);
-      paddingTop$.set(Math.max(0, screenLength - length - listPaddingTop));
-    }
-  };
-  const allocateContainers = React2.useCallback(() => {
-    const scrollLength = refPositions.current.scrollLength;
-    const numContainers = initialContainers || Math.ceil((scrollLength + scrollBuffer * 2) / estimatedItemLength(0)) + 4;
-    const containers2 = [];
-    for (let i = 0; i < numContainers; i++) {
-      containers2.push({
-        id: i,
-        itemIndex: -1,
-        position: POSITION_OUT_OF_VIEW
-      });
-    }
-    containers$.set(containers2);
-  }, []);
-  const getRenderedItem = React2.useCallback(
-    (index) => {
+      initialScrollIndex,
+      initialScrollOffset,
+      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 = React2.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 contentContainerStyleFlattened = reactNative.StyleSheet.flatten(contentContainerStyleProp);
+    const contentContainerStyle = React2.useMemo(
+      () => contentContainerStyleFlattened,
+      [JSON.stringify(contentContainerStyleProp)]
+    );
+    const refState = React2.useRef();
+    const getId = (index) => {
       var _a;
-      const data2 = (_a = refPositions.current) == null ? void 0 : _a.data;
+      const data2 = (_a = refState.current) == null ? void 0 : _a.data;
       if (!data2) {
-        return null;
+        return "";
       }
-      const renderedItem = renderItem == null ? void 0 : renderItem({
-        item: data2[index],
-        index
-      });
-      return renderedItem;
-    },
-    [renderItem]
-  );
-  const calculateItemsInView = React2.useCallback(() => {
-    var _a, _b;
-    const { data: data2, scrollLength } = refPositions.current;
-    if (!data2) {
-      return;
+      const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
+      return ret + "";
+    };
+    if (!refState.current) {
+      refState.current = {
+        lengths: /* @__PURE__ */ new Map(),
+        positions: /* @__PURE__ */ new Map(),
+        pendingAdjust: 0,
+        animFrame: 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: 0,
+        topPad: 0
+      };
+      refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     }
-    const scroll = visibleRange$.scroll.peek() - visibleRange$.topPad.peek();
-    const containers2 = containers$.peek();
-    const { lengths, positions } = refPositions.current;
-    let top = 0;
-    let startNoBuffer = null;
-    let startBuffered = null;
-    let endNoBuffer = null;
-    let endBuffered = null;
-    const prevRange = onViewableRangeChanged ? { ...visibleRange$.peek() } : void 0;
-    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);
+    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));
       }
-      if (startNoBuffer === null && top + length > scroll) {
-        startNoBuffer = i;
+    };
+    const allocateContainers = React2.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);
       }
-      if (startBuffered === null && top + length > scroll - scrollBuffer) {
-        startBuffered = i;
+      set$(`numContainers`, ctx, numContainers);
+    }, []);
+    const getRenderedItem = React2.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]
+    );
+    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;
       }
-      if (startNoBuffer !== null) {
-        if (top <= scroll + scrollLength) {
-          endNoBuffer = i;
+      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 (top <= scroll + scrollLength + scrollBuffer) {
-          endBuffered = i;
-        } else {
-          break;
+        if (startNoBuffer === null && top + length > scroll) {
+          startNoBuffer = i;
         }
-      }
-      top += length;
-    }
-    visibleRange$.assign({
-      startBuffered,
-      startNoBuffer,
-      endBuffered,
-      endNoBuffer
-    });
-    state.beginBatch();
-    if (startBuffered !== null && endBuffered !== null) {
-      for (let i = startBuffered; i <= endBuffered; i++) {
-        let isContained = false;
-        for (let j = 0; j < containers2.length; j++) {
-          const container = containers2[j];
-          if (container.itemIndex === 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 < containers2.length; u++) {
-            const container = containers2[u];
-            if (container.itemIndex < startBuffered || container.itemIndex > endBuffered) {
-              containers$[u].itemIndex.set(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$(`containerIndex${j}`, ctx);
+            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$(`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);
+              }
             }
-            containers$.push({
-              id: containers$.peek().length,
-              itemIndex: i,
-              position: POSITION_OUT_OF_VIEW
+          }
+        }
+        if (onViewableRangeChanged) {
+          if (startNoBuffer !== startNoBufferState || startBuffered !== startBufferedState || endNoBuffer !== endNoBufferState || endBuffered !== endBufferedState) {
+            onViewableRangeChanged({
+              start: startNoBuffer,
+              startBuffered,
+              end: endNoBuffer,
+              endBuffered,
+              items: data2.slice(startNoBuffer, endNoBuffer + 1)
             });
           }
         }
       }
-      for (let i = 0; i < containers2.length; i++) {
-        const container = containers2[i];
-        const item = data2[container.itemIndex];
-        if (item) {
-          const id = getId(container.itemIndex);
-          if (container.itemIndex < startBuffered || container.itemIndex > endBuffered) {
-            containers$[i].position.set(POSITION_OUT_OF_VIEW);
-          } else {
-            const pos = (_b = positions.get(id)) != null ? _b : -1;
-            if (pos >= 0 && pos !== containers$[i].position.peek()) {
-              containers$[i].position.set(pos);
-            }
+    }, [data]);
+    React2.useMemo(() => {
+      var _a, _b;
+      allocateContainers();
+      calculateItemsInView();
+      const lengths = (_a = refState.current) == null ? void 0 : _a.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);
+      }
+      setTotalLength(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 });
         }
       }
-      if (onViewableRangeChanged) {
-        if (startNoBuffer !== (prevRange == null ? void 0 : prevRange.startNoBuffer) || startBuffered !== (prevRange == null ? void 0 : prevRange.startBuffered) || endNoBuffer !== (prevRange == null ? void 0 : prevRange.endNoBuffer) || endBuffered !== (prevRange == null ? void 0 : prevRange.endBuffered)) {
-          onViewableRangeChanged({
-            start: startNoBuffer,
-            startBuffered,
-            end: endNoBuffer,
-            endBuffered,
-            items: data2.slice(startNoBuffer, endNoBuffer + 1)
+    };
+    React2.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;
+      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
+            });
           });
         }
-      }
-    }
-    state.endBatch();
-  }, [data]);
-  React2.useMemo(() => {
-    var _a, _b;
-    allocateContainers();
-    calculateItemsInView();
-    const lengths = (_a = refPositions.current) == null ? void 0 : _a.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);
-    }
-    setTotalLength(totalLength);
-  }, []);
-  const checkAtBottom = () => {
-    var _a;
-    const scrollLength = refPositions.current.scrollLength;
-    const newScroll = visibleRange$.scroll.peek();
-    const distanceFromEnd = visibleRange$.totalLength.peek() - newScroll - scrollLength;
-    if (refPositions.current) {
-      refPositions.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
-    }
-    if (onEndReached && !((_a = refPositions.current) == null ? void 0 : _a.isEndReached)) {
-      if (distanceFromEnd < (onEndReachedThreshold || 0.5) * scrollLength) {
-        if (refPositions.current) {
-          refPositions.current.isEndReached = true;
+        if (!((_e = refState.current) == null ? void 0 : _e.animFrame)) {
+          calculateItemsInView();
         }
-        onEndReached({ distanceFromEnd });
       }
-    }
-  };
-  React2.useMemo(() => {
-    var _a;
-    if (refPositions.current) {
-      if (!((_a = refPositions.current) == null ? void 0 : _a.isAtBottom)) {
-        refPositions.current.isEndReached = false;
+    }, []);
+    const handleScrollDebounced = React2.useCallback(() => {
+      calculateItemsInView();
+      checkAtBottom();
+      if (refState.current) {
+        refState.current.animFrame = null;
       }
-    }
-    calculateItemsInView();
-    checkAtBottom();
-  }, [data]);
-  const containers = react.use$(containers$, { shallow: true });
-  const updateItemLength = React2.useCallback((index, length) => {
-    var _a, _b, _c, _d, _e;
-    const data2 = (_a = refPositions.current) == null ? void 0 : _a.data;
-    if (!data2) {
-      return;
-    }
-    const lengths = (_b = refPositions.current) == null ? void 0 : _b.lengths;
-    const id = getId(index);
-    const wasInFirstRender = (_c = refPositions.current) == null ? void 0 : _c.idsInFirstRender.has(id);
-    const prevLength = lengths.get(id) || (wasInFirstRender ? estimatedItemLength(index) : 0);
-    if (!prevLength || prevLength !== length) {
-      state.beginBatch();
-      lengths.set(id, length);
-      setTotalLength(visibleRange$.totalLength.peek() + (length - prevLength));
-      if (((_d = refPositions.current) == null ? void 0 : _d.isAtBottom) && maintainScrollAtEnd) {
-        requestAnimationFrame(() => {
-          var _a2;
-          (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
-            animated: true
-          });
-        });
+    }, []);
+    const onLayout = React2.useCallback((event) => {
+      const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
+      refState.current.scrollLength = scrollLength;
+    }, []);
+    const handleScroll = React2.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);
       }
-      if (!((_e = refPositions.current) == null ? void 0 : _e.animFrame)) {
+    }, []);
+    React2.useEffect(() => {
+      if (initialContentOffset) {
+        handleScroll({
+          nativeEvent: { contentOffset: { y: initialContentOffset } }
+        });
         calculateItemsInView();
       }
-      state.endBatch();
-    }
-  }, []);
-  const handleScrollDebounced = React2.useCallback(() => {
-    calculateItemsInView();
-    checkAtBottom();
-    if (refPositions.current) {
-      refPositions.current.animFrame = null;
-    }
-  }, []);
-  const onLayout = (event) => {
-    const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
-    refPositions.current.scrollLength = scrollLength;
-  };
-  const handleScroll = React2.useCallback((event) => {
-    refPositions.current.hasScrolled = true;
-    const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
-    visibleRange$.scroll.set(newScroll);
-    if (refPositions.current && !refPositions.current.animFrame) {
-      refPositions.current.animFrame = requestAnimationFrame(handleScrollDebounced);
-    }
-  }, []);
-  React2.useEffect(() => {
-    if (initialContentOffset) {
-      handleScroll({
-        nativeEvent: { contentOffset: { y: initialContentOffset } }
-      });
-      calculateItemsInView();
-    }
-  }, []);
-  return /* @__PURE__ */ React2__namespace.createElement(
-    react.Reactive.ScrollView,
-    {
-      style,
-      contentContainerStyle: [
-        contentContainerStyle,
-        horizontal ? {
-          height: "100%"
-        } : {}
-      ],
-      onScroll: handleScroll,
-      onLayout,
-      scrollEventThrottle: 32,
-      horizontal,
-      contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
-      ...rest,
-      ref: refScroller
-    },
-    alignItemsAtEnd && /* @__PURE__ */ React2__namespace.createElement(react.Reactive.View, { $style: () => ({ height: paddingTop$.get() }) }),
-    ListHeaderComponent && /* @__PURE__ */ React2__namespace.createElement(react.Reactive.View, { $style: ListHeaderComponentStyle }, ListHeaderComponent),
-    /* @__PURE__ */ React2__namespace.createElement(
-      react.Reactive.View,
+    }, []);
+    return /* @__PURE__ */ React2__namespace.createElement(
+      ListComponent,
       {
-        $style: () => horizontal ? {
-          width: visibleRange$.totalLength.get()
-        } : {
-          height: visibleRange$.totalLength.get()
-        }
-      },
-      containers.map((container, i) => /* @__PURE__ */ React2__namespace.createElement(
-        Container,
-        {
-          key: container.id,
-          recycleItems,
-          $container: containers$[i],
-          listProps: props,
-          getRenderedItem,
-          onLayout: updateItemLength,
-          ItemSeparatorComponent
-        }
-      ))
-    ),
-    ListFooterComponent && /* @__PURE__ */ React2__namespace.createElement(react.Reactive.View, { $style: ListFooterComponentStyle }, ListFooterComponent)
-  );
-});
+        ...rest,
+        contentContainerStyle,
+        style,
+        horizontal,
+        refScroller,
+        initialContentOffset,
+        getRenderedItem,
+        updateItemLength,
+        handleScroll,
+        onLayout,
+        recycleItems,
+        alignItemsAtEnd
+      }
+    );
+  }
+);
 
 exports.LegendList = LegendList;