@legendapp/list 1.0.0-beta.5 → 1.0.0-beta.51

package/index.mjs

@@ -1,22 +1,29 @@
-import * as React5 from 'react';
-import React5__default, { createContext, useMemo, forwardRef, useRef, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useContext, useState, useLayoutEffect } from 'react';
-import { Animated, ScrollView, View, Dimensions, StyleSheet, Platform, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
+import * as React6 from 'react';
+import React6__default, { memo, useReducer, useEffect, createContext, useMemo, useRef, useCallback, useImperativeHandle, useSyncExternalStore, useContext, useState, forwardRef, useLayoutEffect } from 'react';
+import { View, Text, Platform, Animated, ScrollView, StyleSheet, Dimensions, RefreshControl } from 'react-native';
 
 // src/LegendList.tsx
-var ContextState = React5.createContext(null);
+var ContextState = React6.createContext(null);
 function StateProvider({ children }) {
-  const [value] = React5.useState(() => ({
+  const [value] = React6.useState(() => ({
     listeners: /* @__PURE__ */ new Map(),
-    values: /* @__PURE__ */ new Map(),
+    values: /* @__PURE__ */ new Map([
+      ["paddingTop", 0],
+      ["alignItemsPaddingTop", 0],
+      ["stylePaddingTop", 0],
+      ["headerSize", 0]
+    ]),
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityValues: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
-    mapViewabilityAmountValues: /* @__PURE__ */ new Map()
+    mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
+    columnWrapperStyle: void 0,
+    viewRefs: /* @__PURE__ */ new Map()
   }));
-  return /* @__PURE__ */ React5.createElement(ContextState.Provider, { value }, children);
+  return /* @__PURE__ */ React6.createElement(ContextState.Provider, { value }, children);
 }
 function useStateContext() {
-  return React5.useContext(ContextState);
+  return React6.useContext(ContextState);
 }
 function createSelectorFunctions(ctx, signalName) {
   return {
@@ -25,8 +32,8 @@ function createSelectorFunctions(ctx, signalName) {
   };
 }
 function use$(signalName) {
-  const ctx = React5.useContext(ContextState);
-  const { subscribe, get } = React5.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const ctx = React6.useContext(ContextState);
+  const { subscribe, get } = React6.useMemo(() => createSelectorFunctions(ctx, signalName), []);
   const value = useSyncExternalStore(subscribe, get);
   return value;
 }
@@ -56,6 +63,81 @@ function set$(ctx, signalName, value) {
     }
   }
 }
+function getContentSize(ctx) {
+  const { values } = ctx;
+  const stylePaddingTop = values.get("stylePaddingTop") || 0;
+  const headerSize = values.get("headerSize") || 0;
+  const footerSize = values.get("footerSize") || 0;
+  const totalSize = values.get("totalSize") || 0;
+  return headerSize + footerSize + totalSize + stylePaddingTop;
+}
+
+// src/DebugView.tsx
+var DebugRow = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" } }, children);
+};
+var DebugView = memo(function DebugView2({ state }) {
+  const ctx = useStateContext();
+  const totalSize = use$("totalSize") || 0;
+  const totalSizeWithScrollAdjust = use$("totalSizeWithScrollAdjust") || 0;
+  const scrollAdjust = use$("scrollAdjust") || 0;
+  const rawScroll = use$("debugRawScroll") || 0;
+  const scroll = use$("debugComputedScroll") || 0;
+  const contentSize = getContentSize(ctx);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  use$("numContainers");
+  use$("numContainersPooled");
+  useInterval(() => {
+    forceUpdate();
+  }, 100);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        paddingLeft: 4,
+        paddingBottom: 4,
+        // height: 100,
+        backgroundColor: "#FFFFFFCC",
+        padding: 4,
+        borderRadius: 4
+      },
+      pointerEvents: "none"
+    },
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "TotalSize:"), /* @__PURE__ */ React.createElement(Text, null, totalSize.toFixed(2))),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "ContentSize:"), /* @__PURE__ */ React.createElement(Text, null, contentSize.toFixed(2))),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "At end:"), /* @__PURE__ */ React.createElement(Text, null, String(state.isAtBottom))),
+    /* @__PURE__ */ React.createElement(Text, null),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "ScrollAdjust:"), /* @__PURE__ */ React.createElement(Text, null, scrollAdjust.toFixed(2))),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "TotalSizeReal: "), /* @__PURE__ */ React.createElement(Text, null, totalSizeWithScrollAdjust.toFixed(2))),
+    /* @__PURE__ */ React.createElement(Text, null),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "RawScroll: "), /* @__PURE__ */ React.createElement(Text, null, rawScroll.toFixed(2))),
+    /* @__PURE__ */ React.createElement(DebugRow, null, /* @__PURE__ */ React.createElement(Text, null, "ComputedScroll: "), /* @__PURE__ */ React.createElement(Text, null, scroll.toFixed(2)))
+  );
+});
+function useInterval(callback, delay) {
+  useEffect(() => {
+    const interval = setInterval(callback, delay);
+    return () => clearInterval(interval);
+  }, [delay]);
+}
+
+// src/helpers.ts
+function isFunction(obj) {
+  return typeof obj === "function";
+}
+var warned = /* @__PURE__ */ new Set();
+function warnDevOnce(id, text) {
+  if (__DEV__ && !warned.has(id)) {
+    warned.add(id);
+    console.warn(`[legend-list] ${text}`);
+  }
+}
+function roundSize(size) {
+  return Math.floor(size * 8) / 8;
+}
 var symbolFirst = Symbol();
 function useInit(cb) {
   const refValue = useRef(symbolFirst);
@@ -67,10 +149,10 @@ function useInit(cb) {
 
 // src/ContextContainer.ts
 var ContextContainer = createContext(null);
-function useViewability(configId, callback) {
+function useViewability(callback, configId) {
   const ctx = useStateContext();
   const { containerId } = useContext(ContextContainer);
-  const key = containerId + configId;
+  const key = containerId + (configId != null ? configId : "");
   useInit(() => {
     const value = ctx.mapViewabilityValues.get(key);
     if (value) {
@@ -126,25 +208,36 @@ function useRecyclingEffect(effect) {
   }, [index, value]);
 }
 function useRecyclingState(valueOrFun) {
-  const { index, value } = useContext(ContextContainer);
-  const stateInfo = useState(
-    () => typeof valueOrFun === "function" ? valueOrFun({
+  const { index, value, itemKey, triggerLayout } = useContext(ContextContainer);
+  const refState = useRef({
+    itemKey: null,
+    value: null
+  });
+  const [_, setRenderNum] = useState(0);
+  if (refState.current.itemKey !== itemKey) {
+    refState.current.itemKey = itemKey;
+    refState.current.value = isFunction(valueOrFun) ? valueOrFun({
       index,
       item: value,
       prevIndex: void 0,
       prevItem: void 0
-    }) : valueOrFun
+    }) : valueOrFun;
+  }
+  const setState = useCallback(
+    (newState) => {
+      refState.current.value = isFunction(newState) ? newState(refState.current.value) : newState;
+      setRenderNum((v) => v + 1);
+      triggerLayout();
+    },
+    [triggerLayout]
   );
-  useRecyclingEffect((state) => {
-    const newState = typeof valueOrFun === "function" ? valueOrFun(state) : valueOrFun;
-    stateInfo[1](newState);
-  });
-  return stateInfo;
+  return [refState.current.value, setState];
 }
-var LeanView = React5.forwardRef((props, ref) => {
-  return React5.createElement("RCTView", { ...props, ref });
+var LeanViewComponent = React6.forwardRef((props, ref) => {
+  return React6.createElement("RCTView", { ...props, ref });
 });
-LeanView.displayName = "RCTView";
+LeanViewComponent.displayName = "RCTView";
+var LeanView = Platform.OS === "android" || Platform.OS === "ios" ? LeanViewComponent : View;
 
 // src/constants.ts
 var POSITION_OUT_OF_VIEW = -1e7;
@@ -153,9 +246,11 @@ var ANCHORED_POSITION_OUT_OF_VIEW = {
   relativeCoordinate: POSITION_OUT_OF_VIEW,
   top: POSITION_OUT_OF_VIEW
 };
+var ENABLE_DEVMODE = __DEV__ && false;
+var ENABLE_DEBUG_VIEW = __DEV__ && false;
+var IsNewArchitecture = global.nativeFabricUIManager != null;
 
 // src/Container.tsx
-var isNewArchitecture = global.nativeFabricUIManager != null;
 var Container = ({
   id,
   recycleItems,
@@ -164,87 +259,141 @@ var Container = ({
   updateItemSize,
   ItemSeparatorComponent
 }) => {
-  useStateContext();
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
   const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
   const numColumns = use$("numColumns");
+  const lastItemKeys = use$("lastItemKeys");
+  const itemKey = use$(`containerItemKey${id}`);
+  const data = use$(`containerItemData${id}`);
+  const extraData = use$("extraData");
+  const refLastSize = useRef();
+  const ref = useRef(null);
+  const [layoutRenderCount, forceLayoutRender] = useState(0);
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
+  let paddingStyles;
+  if (columnWrapperStyle) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    if (horizontal) {
+      paddingStyles = {
+        paddingRight: !lastItemKeys.includes(itemKey) ? columnGap || gap || void 0 : void 0,
+        paddingVertical: (rowGap || gap || 0) / 2
+      };
+    } else {
+      paddingStyles = {
+        paddingBottom: !lastItemKeys.includes(itemKey) ? rowGap || gap || void 0 : void 0,
+        paddingHorizontal: (columnGap || gap || 0) / 2
+      };
+    }
+  }
   const style = horizontal ? {
     flexDirection: ItemSeparatorComponent ? "row" : void 0,
     position: "absolute",
     top: otherAxisPos,
     bottom: numColumns > 1 ? null : 0,
     height: otherAxisSize,
-    left: position.relativeCoordinate
+    left: position.relativeCoordinate,
+    ...paddingStyles || {}
   } : {
     position: "absolute",
     left: otherAxisPos,
     right: numColumns > 1 ? null : 0,
     width: otherAxisSize,
-    top: position.relativeCoordinate
+    top: position.relativeCoordinate,
+    ...paddingStyles || {}
   };
-  const lastItemKey = use$("lastItemKey");
-  const itemKey = use$(`containerItemKey${id}`);
-  const data = use$(`containerItemData${id}`);
-  const extraData = use$("extraData");
   const renderedItemInfo = useMemo(
-    () => itemKey !== void 0 && getRenderedItem(itemKey),
+    () => itemKey !== void 0 ? getRenderedItem(itemKey) : null,
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
+  const triggerLayout = useCallback(() => {
+    forceLayoutRender((v) => v + 1);
+  }, []);
   const onLayout = (event) => {
     if (itemKey !== void 0) {
-      const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
-      if (size === 0) {
-        console.log("[WARN] Container 0 height reported, possible bug in LegendList", id, itemKey);
-        return;
-      }
-      updateItemSize(id, itemKey, size);
+      const layout = event.nativeEvent.layout;
+      const size = roundSize(layout[horizontal ? "width" : "height"]);
+      refLastSize.current = size;
+      updateItemSize(itemKey, size);
     }
   };
-  const ref = useRef(null);
-  if (isNewArchitecture) {
+  if (IsNewArchitecture) {
     useLayoutEffect(() => {
       var _a, _b;
-      if (itemKey) {
+      if (itemKey !== void 0) {
         const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
         if (measured) {
           const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
           if (size) {
-            updateItemSize(id, itemKey, size);
+            updateItemSize(itemKey, size);
           }
         }
       }
+    }, [itemKey, layoutRenderCount]);
+  } else {
+    useEffect(() => {
+      if (itemKey) {
+        const timeout = setTimeout(() => {
+          if (refLastSize.current) {
+            updateItemSize(itemKey, refLastSize.current);
+          }
+        }, 16);
+        return () => {
+          clearTimeout(timeout);
+        };
+      }
     }, [itemKey]);
   }
-  const contextValue = useMemo(
-    () => ({ containerId: id, itemKey, index, value: data }),
-    [id, itemKey, index, data]
-  );
-  const contentFragment = /* @__PURE__ */ React5__default.createElement(React5__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React5__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItem && ItemSeparatorComponent && itemKey !== lastItemKey && ItemSeparatorComponent));
+  const contextValue = useMemo(() => {
+    ctx.viewRefs.set(id, ref);
+    return { containerId: id, itemKey, index, value: data, triggerLayout };
+  }, [id, itemKey, index, data]);
+  const contentFragment = /* @__PURE__ */ React6__default.createElement(React6__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React6__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.includes(itemKey) && /* @__PURE__ */ React6__default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
-    return /* @__PURE__ */ React5__default.createElement(LeanView, { style }, /* @__PURE__ */ React5__default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment));
+    if (ENABLE_DEVMODE) {
+      anchorStyle.borderColor = position.type === "top" ? "red" : "blue";
+      anchorStyle.borderWidth = 1;
+    }
+    return /* @__PURE__ */ React6__default.createElement(LeanView, { style }, /* @__PURE__ */ React6__default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment, ENABLE_DEVMODE && /* @__PURE__ */ React6__default.createElement(Text, { style: { position: "absolute", top: 0, left: 0, zIndex: 1e3 } }, position.top)));
   }
-  return /* @__PURE__ */ React5__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
+  return /* @__PURE__ */ React6__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
-var useAnimatedValue = useAnimatedValue$1 || ((initialValue) => {
+var typedForwardRef = forwardRef;
+var typedMemo = memo;
+var useAnimatedValue = (initialValue) => {
   return useRef(new Animated.Value(initialValue)).current;
-});
-function useValue$(key, getValue, key2) {
+};
+
+// src/useValue$.ts
+function useValue$(key, getValue, useMicrotask) {
   var _a;
   const ctx = useStateContext();
   const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
   useMemo(() => {
-    listen$(ctx, key, (v) => animValue.setValue(getValue ? getValue(v) : v));
+    let newValue = void 0;
+    listen$(ctx, key, (v) => {
+      if (useMicrotask && newValue === void 0) {
+        queueMicrotask(() => {
+          animValue.setValue(newValue);
+          newValue = void 0;
+        });
+      }
+      newValue = getValue ? getValue(v) : v;
+      if (!useMicrotask) {
+        animValue.setValue(newValue);
+      }
+    });
   }, []);
   return animValue;
 }
 
 // src/Containers.tsx
-var Containers = React5.memo(function Containers2({
+var Containers = typedMemo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
@@ -252,13 +401,20 @@ var Containers = React5.memo(function Containers2({
   updateItemSize,
   getRenderedItem
 }) {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
   const numContainers = use$("numContainersPooled");
-  const animSize = useValue$("totalSize");
+  const animSize = useValue$(
+    "totalSizeWithScrollAdjust",
+    void 0,
+    /*useMicrotask*/
+    true
+  );
   const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
-      /* @__PURE__ */ React5.createElement(
+      /* @__PURE__ */ React6.createElement(
         Container,
         {
           id: i,
@@ -273,20 +429,85 @@ var Containers = React5.memo(function Containers2({
     );
   }
   const style = horizontal ? { width: animSize, opacity: animOpacity } : { height: animSize, opacity: animOpacity };
-  return /* @__PURE__ */ React5.createElement(Animated.View, { style }, containers);
+  if (columnWrapperStyle) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    if (horizontal) {
+      const my = (rowGap || gap || 0) / 2;
+      if (my) {
+        style.marginVertical = -my;
+      }
+    } else {
+      const mx = (columnGap || gap || 0) / 2;
+      if (mx) {
+        style.marginHorizontal = -mx;
+      }
+    }
+  }
+  return /* @__PURE__ */ React6.createElement(Animated.View, { style }, containers);
 });
 
 // src/ListComponent.tsx
 var getComponent = (Component) => {
-  if (React5.isValidElement(Component)) {
+  if (React6.isValidElement(Component)) {
     return Component;
   }
   if (Component) {
-    return /* @__PURE__ */ React5.createElement(Component, null);
+    return /* @__PURE__ */ React6.createElement(Component, null);
   }
   return null;
 };
-var ListComponent = React5.memo(function ListComponent2({
+var PaddingAndAdjust = () => {
+  const animPaddingTop = useValue$("paddingTop", (v) => v, true);
+  const animScrollAdjust = useValue$("scrollAdjust", (v) => v, true);
+  const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
+  return /* @__PURE__ */ React6.createElement(Animated.View, { style: additionalSize });
+};
+var PaddingAndAdjustDevMode = () => {
+  const animPaddingTop = useValue$("paddingTop", (v) => v, true);
+  const animScrollAdjust = useValue$("scrollAdjust", (v) => v, true);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(Animated.View, { style: { marginTop: animScrollAdjust } }), /* @__PURE__ */ React6.createElement(Animated.View, { style: { paddingTop: animPaddingTop } }), /* @__PURE__ */ React6.createElement(
+    Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: Animated.add(animScrollAdjust, Animated.multiply(animScrollAdjust, -1)),
+        height: animPaddingTop,
+        left: 0,
+        right: 0,
+        backgroundColor: "green"
+      }
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: animPaddingTop,
+        height: animScrollAdjust,
+        left: -16,
+        right: -16,
+        backgroundColor: "lightblue"
+      }
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    Animated.View,
+    {
+      style: {
+        position: "absolute",
+        top: animPaddingTop,
+        height: Animated.multiply(animScrollAdjust, -1),
+        width: 8,
+        right: 4,
+        borderStyle: "dashed",
+        borderColor: "blue",
+        borderWidth: 1,
+        backgroundColor: "lightblue"
+        //backgroundColor: "blue",
+      }
+    }
+  ));
+};
+var ListComponent = typedMemo(function ListComponent2({
   style,
   contentContainerStyle,
   horizontal,
@@ -307,22 +528,22 @@ var ListComponent = React5.memo(function ListComponent2({
   refScrollView,
   maintainVisibleContentPosition,
   renderScrollComponent,
+  onRefresh,
+  refreshing,
+  progressViewOffset,
   ...rest
 }) {
   const ctx = useStateContext();
-  const animPaddingTop = useValue$("paddingTop");
-  const animScrollAdjust = useValue$("scrollAdjust");
   const ScrollComponent = renderScrollComponent ? useMemo(
-    () => React5.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    () => React6.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
   ) : ScrollView;
-  const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     ScrollComponent,
     {
       ...rest,
       style,
-      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
+      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
       contentContainerStyle: [
         contentContainerStyle,
         horizontal ? {
@@ -335,34 +556,41 @@ var ListComponent = React5.memo(function ListComponent2({
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScrollView
     },
-    /* @__PURE__ */ React5.createElement(Animated.View, { style: additionalSize }),
-    ListHeaderComponent && /* @__PURE__ */ React5.createElement(
-      Animated.View,
+    !ListEmptyComponent && (ENABLE_DEVMODE ? /* @__PURE__ */ React6.createElement(PaddingAndAdjustDevMode, null) : /* @__PURE__ */ React6.createElement(PaddingAndAdjust, null)),
+    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);
-          }
+          set$(ctx, "headerSize", size);
         }
       },
       getComponent(ListHeaderComponent)
     ),
     ListEmptyComponent && getComponent(ListEmptyComponent),
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       Containers,
       {
         horizontal,
         recycleItems,
         waitForInitialLayout,
         getRenderedItem,
-        ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
+        ItemSeparatorComponent,
         updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React5.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
+    ListFooterComponent && /* @__PURE__ */ React6.createElement(
+      View,
+      {
+        style: ListFooterComponentStyle,
+        onLayout: (event) => {
+          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
+          set$(ctx, "footerSize", size);
+        }
+      },
+      getComponent(ListFooterComponent)
+    )
   );
 });
 
@@ -371,36 +599,63 @@ var ScrollAdjustHandler = class {
   constructor(ctx) {
     this.ctx = ctx;
     this.appliedAdjust = 0;
-    this.pendingAdjust = 0;
     this.busy = false;
-    this.firstAdjust = true;
+    this.isPaused = false;
+    this.isDisabled = false;
     this.context = ctx;
   }
+  doAjdust() {
+    set$(this.context, "scrollAdjust", this.appliedAdjust);
+    this.busy = false;
+  }
   requestAdjust(adjust, onAdjusted) {
+    if (this.isDisabled) {
+      return;
+    }
     const oldAdjustTop = peek$(this.context, "scrollAdjust");
     if (oldAdjustTop === adjust) {
       return;
     }
     this.appliedAdjust = adjust;
-    this.pendingAdjust = adjust;
-    const doAjdust = () => {
-      set$(this.context, "scrollAdjust", this.pendingAdjust);
-      onAdjusted(oldAdjustTop - this.pendingAdjust);
-      this.busy = false;
-    };
-    if (!this.busy) {
+    if (!this.busy && !this.isPaused) {
       this.busy = true;
-      if (this.firstAdjust) {
-        this.firstAdjust = false;
-        setTimeout(doAjdust, 50);
-      } else {
-        doAjdust();
-      }
+      this.doAjdust();
+      onAdjusted(oldAdjustTop - adjust);
     }
   }
   getAppliedAdjust() {
     return this.appliedAdjust;
   }
+  pauseAdjust() {
+    this.isPaused = true;
+  }
+  setDisableAdjust(disable) {
+    this.isDisabled = disable;
+  }
+  // return true if it was paused
+  unPauseAdjust() {
+    if (this.isPaused) {
+      this.isPaused = false;
+      this.doAjdust();
+      return true;
+    }
+    return false;
+  }
+};
+var useCombinedRef = (...refs) => {
+  const callback = useCallback((element) => {
+    for (const ref of refs) {
+      if (!ref) {
+        continue;
+      }
+      if (isFunction(ref)) {
+        ref(element);
+      } else {
+        ref.current = element;
+      }
+    }
+  }, refs);
+  return callback;
 };
 
 // src/viewability.ts
@@ -453,11 +708,37 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
   const { viewabilityConfig, onViewableItemsChanged } = viewabilityConfigCallbackPair;
   const configId = viewabilityConfig.id;
   const viewabilityState = mapViewabilityConfigCallbackPairs.get(configId);
-  const { viewableItems: previousViewableItems, start, previousStart, end, previousEnd } = viewabilityState;
+  const { viewableItems: previousViewableItems, start, end } = viewabilityState;
+  const viewabilityTokens = /* @__PURE__ */ new Map();
+  for (const [containerId, value] of ctx.mapViewabilityAmountValues) {
+    viewabilityTokens.set(
+      containerId,
+      computeViewability(
+        state,
+        ctx,
+        viewabilityConfig,
+        containerId,
+        value.key,
+        scrollSize,
+        value.item,
+        value.index
+      )
+    );
+  }
   const changed = [];
   if (previousViewableItems) {
     for (const viewToken of previousViewableItems) {
-      if (!isViewable(state, ctx, viewabilityConfig, viewToken.key, scrollSize, viewToken.item, viewToken.index)) {
+      const containerId = findContainerId(ctx, viewToken.key);
+      if (!isViewable(
+        state,
+        ctx,
+        viewabilityConfig,
+        containerId,
+        viewToken.key,
+        scrollSize,
+        viewToken.item,
+        viewToken.index
+      )) {
         viewToken.isViewable = false;
         changed.push(viewToken);
       }
@@ -468,12 +749,14 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     const item = data[i];
     if (item) {
       const key = getId(i);
-      if (isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, i)) {
+      const containerId = findContainerId(ctx, key);
+      if (isViewable(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, i)) {
         const viewToken = {
           item,
           key,
           index: i,
-          isViewable: true
+          isViewable: true,
+          containerId
         };
         viewableItems.push(viewToken);
         if (!(previousViewableItems == null ? void 0 : previousViewableItems.find((v) => v.key === viewToken.key))) {
@@ -491,20 +774,27 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, getI
     viewabilityState.viewableItems = viewableItems;
     for (let i = 0; i < changed.length; i++) {
       const change = changed[i];
-      maybeUpdateViewabilityCallback(ctx, configId, change);
+      maybeUpdateViewabilityCallback(ctx, configId, change.containerId, change);
     }
     if (onViewableItemsChanged) {
       onViewableItemsChanged({ viewableItems, changed });
     }
   }
+  for (const [containerId, value] of ctx.mapViewabilityAmountValues) {
+    if (value.sizeVisible < 0) {
+      ctx.mapViewabilityAmountValues.delete(containerId);
+    }
+  }
 }
-function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index) {
-  const { sizes, positions, scroll } = state;
+function computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
+  const { sizes, positions, scroll: scrollState, scrollAdjustHandler } = state;
   const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
   const viewAreaMode = viewAreaCoveragePercentThreshold != null;
   const viewablePercentThreshold = viewAreaMode ? viewAreaCoveragePercentThreshold : itemVisiblePercentThreshold;
-  const top = positions.get(key) - scroll + topPad;
+  const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
+  const scroll = scrollState - previousScrollAdjust - topPad;
+  const top = positions.get(key) - scroll;
   const size = sizes.get(key) || 0;
   const bottom = top + size;
   const isEntirelyVisible = top >= 0 && bottom <= scrollSize && bottom > top;
@@ -513,7 +803,6 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
   const percentOfScroller = size ? 100 * (sizeVisible / scrollSize) : 0;
   const percent = isEntirelyVisible ? 100 : viewAreaMode ? percentOfScroller : percentVisible;
   const isViewable2 = percent >= viewablePercentThreshold;
-  const containerId = findContainerId(ctx, key);
   const value = {
     index,
     isViewable: isViewable2,
@@ -523,15 +812,21 @@ function isViewable(state, ctx, viewabilityConfig, key, scrollSize, item, index)
     percentOfScroller,
     sizeVisible,
     size,
-    position: top,
-    scrollSize
+    scrollSize,
+    containerId
   };
-  ctx.mapViewabilityAmountValues.set(containerId, value);
-  const cb = ctx.mapViewabilityAmountCallbacks.get(containerId);
-  if (cb) {
-    cb(value);
+  if (JSON.stringify(value) !== JSON.stringify(ctx.mapViewabilityAmountValues.get(containerId))) {
+    ctx.mapViewabilityAmountValues.set(containerId, value);
+    const cb = ctx.mapViewabilityAmountCallbacks.get(containerId);
+    if (cb) {
+      cb(value);
+    }
   }
-  return isViewable2;
+  return value;
+}
+function isViewable(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
+  const value = ctx.mapViewabilityAmountValues.get(containerId) || computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index);
+  return value.isViewable;
 }
 function findContainerId(ctx, key) {
   const numContainers = peek$(ctx, "numContainers");
@@ -543,8 +838,8 @@ function findContainerId(ctx, key) {
   }
   return -1;
 }
-function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
-  const key = viewToken.key + configId;
+function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
+  const key = containerId + configId;
   ctx.mapViewabilityValues.set(key, viewToken);
   const cb = ctx.mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
@@ -553,13 +848,25 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
 // src/LegendList.tsx
 var DEFAULT_DRAW_DISTANCE = 250;
 var DEFAULT_ITEM_SIZE = 100;
-var LegendList = forwardRef(function LegendList2(props, forwardedRef) {
-  return /* @__PURE__ */ React5.createElement(StateProvider, null, /* @__PURE__ */ React5.createElement(LegendListInner, { ...props, ref: forwardedRef }));
+function createColumnWrapperStyle(contentContainerStyle) {
+  const { gap, columnGap, rowGap } = contentContainerStyle;
+  if (gap || columnGap || rowGap) {
+    contentContainerStyle.gap = void 0;
+    contentContainerStyle.columnGap = void 0;
+    contentContainerStyle.rowGap = void 0;
+    return {
+      gap,
+      columnGap,
+      rowGap
+    };
+  }
+}
+var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
+  return /* @__PURE__ */ React6.createElement(StateProvider, null, /* @__PURE__ */ React6.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
-var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a, _b, _c, _d, _e;
+var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
   const {
-    data,
+    data: dataProp = [],
     initialScrollIndex,
     initialScrollOffset,
     horizontal,
@@ -572,66 +879,111 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     alignItemsAtEnd = false,
     maintainVisibleContentPosition = false,
     onScroll: onScrollProp,
+    onMomentumScrollEnd,
     numColumns: numColumnsProp = 1,
+    columnWrapperStyle,
     keyExtractor: keyExtractorProp,
     renderItem,
     estimatedItemSize,
     getEstimatedItemSize,
+    suggestEstimatedItemSize,
     ListEmptyComponent,
     onItemSizeChanged,
-    scrollEventThrottle,
     refScrollView,
     waitForInitialLayout = true,
     extraData,
+    contentContainerStyle: contentContainerStyleProp,
+    style: styleProp,
     onLayout: onLayoutProp,
+    onRefresh,
+    refreshing,
+    progressViewOffset,
+    refreshControl,
+    initialContainerPoolRatio = 2,
+    viewabilityConfig,
+    viewabilityConfigCallbackPairs,
+    onViewableItemsChanged,
     ...rest
   } = props;
-  const { style, contentContainerStyle } = props;
   const callbacks = useRef({
     onStartReached: rest.onStartReached,
     onEndReached: rest.onEndReached
   });
   callbacks.current.onStartReached = rest.onStartReached;
   callbacks.current.onEndReached = rest.onEndReached;
+  const contentContainerStyle = { ...StyleSheet.flatten(contentContainerStyleProp) };
+  const style = { ...StyleSheet.flatten(styleProp) };
+  const stylePaddingTopState = ((style == null ? void 0 : style.paddingTop) || 0) + ((contentContainerStyle == null ? void 0 : contentContainerStyle.paddingTop) || 0);
+  if (style == null ? void 0 : style.paddingTop) {
+    style.paddingTop = void 0;
+  }
+  if (contentContainerStyle == null ? void 0 : contentContainerStyle.paddingTop) {
+    contentContainerStyle.paddingTop = void 0;
+  }
   const ctx = useStateContext();
+  ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
   const refScroller = useRef(null);
-  const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
+  const combinedRef = useCombinedRef(refScroller, refScrollView);
+  const scrollBuffer = (drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE) || 1;
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (item, index) => index.toString();
   const refState = useRef();
   const getId = (index) => {
-    var _a2;
-    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
-    if (!data2) {
+    var _a;
+    const data = (_a = refState.current) == null ? void 0 : _a.data;
+    if (!data) {
       return "";
     }
-    const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
+    const ret = index < data.length ? keyExtractor ? keyExtractor(data[index], index) : index : null;
     return `${ret}`;
   };
-  const getItemSize = (key, index, data2) => {
-    var _a2;
-    const sizeKnown = refState.current.sizes.get(key);
+  const getItemSize = (key, index, data, useAverageSize = false) => {
+    const state = refState.current;
+    const sizeKnown = state.sizesKnown.get(key);
     if (sizeKnown !== void 0) {
       return sizeKnown;
     }
-    const size = (_a2 = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    refState.current.sizes.set(key, size);
+    let size;
+    if (size === void 0 && useAverageSize) {
+      const itemType = "";
+      const average = state.averageSizes[itemType];
+      if (average) {
+        size = roundSize(average.avg);
+      }
+    }
+    const sizePrevious = state.sizesKnown.get(key);
+    if (sizePrevious !== void 0) {
+      return sizePrevious;
+    }
+    if (size === void 0) {
+      size = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize != null ? estimatedItemSize : DEFAULT_ITEM_SIZE;
+    }
+    state.sizes.set(key, size);
     return size;
   };
-  const calculateInitialOffset = (index = initialScrollIndex) => {
-    if (index) {
+  const calculateOffsetForIndex = (index = initialScrollIndex) => {
+    var _a;
+    const data = dataProp;
+    if (index !== void 0) {
       let offset = 0;
-      if (getEstimatedItemSize) {
+      const canGetSize = !!refState.current;
+      if (canGetSize || getEstimatedItemSize) {
+        const sizeFn = (index2) => {
+          if (canGetSize) {
+            return getItemSize(getId(index2), index2, data[index2]);
+          }
+          return getEstimatedItemSize(index2, data[index2]);
+        };
         for (let i = 0; i < index; i++) {
-          offset += getEstimatedItemSize(i, data[i]);
+          offset += sizeFn(i);
         }
       } else if (estimatedItemSize) {
         offset = index * estimatedItemSize;
       }
-      return offset / numColumnsProp;
+      return offset / numColumnsProp - (((_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler.getAppliedAdjust()) || 0);
     }
     return 0;
   };
-  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(calculateInitialOffset, []);
+  const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(calculateOffsetForIndex, []);
   if (!refState.current) {
     const initialScrollLength = Dimensions.get("window")[horizontal ? "width" : "height"];
     refState.current = {
@@ -639,14 +991,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       positions: /* @__PURE__ */ new Map(),
       columns: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
-      waitingForMicrotask: false,
       isStartReached: initialContentOffset < initialScrollLength * onStartReachedThreshold,
       isEndReached: false,
       isAtBottom: false,
       isAtTop: false,
-      data,
-      idsInFirstRender: void 0,
-      hasScrolled: false,
+      data: dataProp,
       scrollLength: initialScrollLength,
       startBuffered: 0,
       startNoBuffer: 0,
@@ -666,35 +1015,48 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       indexByKey: /* @__PURE__ */ new Map(),
       scrollHistory: [],
       scrollVelocity: 0,
-      sizesLaidOut: __DEV__ ? /* @__PURE__ */ new Map() : void 0,
+      sizesKnown: /* @__PURE__ */ new Map(),
       timeoutSizeMessage: 0,
       scrollTimer: void 0,
       belowAnchorElementPositions: void 0,
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
+      endReachedBlockedByTimer: false,
       scrollForNextCalculateItemsInView: void 0,
-      enableScrollForNextCalculateItemsInView: true
+      enableScrollForNextCalculateItemsInView: true,
+      minIndexSizeChanged: 0,
+      numPendingInitialLayout: 0,
+      queuedCalculateItemsInView: 0,
+      lastBatchingAction: Date.now(),
+      averageSizes: {},
+      onScroll: onScrollProp
     };
-    refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
-    if (maintainVisibleContentPosition) {
-      if (initialScrollIndex) {
+    const dataLength = dataProp.length;
+    if (maintainVisibleContentPosition && dataLength > 0) {
+      if (initialScrollIndex && initialScrollIndex < dataLength) {
         refState.current.anchorElement = {
           coordinate: initialContentOffset,
           id: getId(initialScrollIndex)
         };
-      } else if (data.length) {
+      } else if (dataLength > 0) {
         refState.current.anchorElement = {
           coordinate: initialContentOffset,
           id: getId(0)
         };
       } else {
-        console.warn("[legend-list] maintainVisibleContentPosition was not able to find an anchor element");
+        __DEV__ && warnDevOnce(
+          "maintainVisibleContentPosition",
+          "[legend-list] maintainVisibleContentPosition was not able to find an anchor element"
+        );
       }
     }
     set$(ctx, "scrollAdjust", 0);
     set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPosition);
     set$(ctx, "extraData", extraData);
   }
+  const didDataChange = refState.current.data !== dataProp;
+  refState.current.data = dataProp;
+  refState.current.onScroll = onScrollProp;
   const getAnchorElementIndex = () => {
     const state = refState.current;
     if (state.anchorElement) {
@@ -703,12 +1065,59 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
     return void 0;
   };
+  const scrollToIndex = ({
+    index,
+    viewOffset = 0,
+    animated = true,
+    viewPosition = 0
+  }) => {
+    var _a;
+    const state = refState.current;
+    const firstIndexOffset = calculateOffsetForIndex(index);
+    let firstIndexScrollPostion = firstIndexOffset - viewOffset;
+    const diff = Math.abs(state.scroll - firstIndexScrollPostion);
+    const needsReanchoring = maintainVisibleContentPosition && diff > 100;
+    state.scrollForNextCalculateItemsInView = void 0;
+    if (needsReanchoring) {
+      const id = getId(index);
+      state.anchorElement = { id, coordinate: firstIndexOffset };
+      (_a = state.belowAnchorElementPositions) == null ? void 0 : _a.clear();
+      state.positions.clear();
+      calcTotalSizesAndPositions({ forgetPositions: true });
+      state.startBufferedId = id;
+      state.minIndexSizeChanged = index;
+      firstIndexScrollPostion = firstIndexOffset - viewOffset + state.scrollAdjustHandler.getAppliedAdjust();
+    }
+    if (viewPosition) {
+      firstIndexScrollPostion -= viewPosition * (state.scrollLength - getItemSize(getId(index), index, state.data[index]));
+    }
+    state.scrollAdjustHandler.setDisableAdjust(true);
+    state.scrollingToOffset = firstIndexScrollPostion;
+    scrollTo(firstIndexScrollPostion, animated);
+  };
+  const setDidLayout = () => {
+    refState.current.queuedInitialLayout = true;
+    checkAtBottom();
+    if (initialScrollIndex) {
+      queueMicrotask(() => {
+        scrollToIndex({ index: initialScrollIndex, animated: false });
+        requestAnimationFrame(() => {
+          set$(ctx, "containersDidLayout", true);
+        });
+      });
+    } else {
+      queueMicrotask(() => {
+        set$(ctx, "containersDidLayout", true);
+      });
+    }
+  };
   const addTotalSize = useCallback((key, add, totalSizeBelowAnchor) => {
     const state = refState.current;
-    const index = key === null ? 0 : state.indexByKey.get(key);
+    const { indexByKey, anchorElement } = state;
+    const index = key === null ? 0 : indexByKey.get(key);
     let isAboveAnchor = false;
     if (maintainVisibleContentPosition) {
-      if (state.anchorElement && index < getAnchorElementIndex()) {
+      if (anchorElement && index < getAnchorElementIndex()) {
         isAboveAnchor = true;
       }
     }
@@ -721,29 +1130,30 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         state.totalSizeBelowAnchor += add;
       }
     }
-    let applyAdjustValue = void 0;
-    if (maintainVisibleContentPosition) {
-      const newAdjust = state.anchorElement.coordinate - state.totalSizeBelowAnchor;
+    let applyAdjustValue = 0;
+    let resultSize = state.totalSize;
+    if (maintainVisibleContentPosition && anchorElement !== void 0) {
+      const newAdjust = anchorElement.coordinate - state.totalSizeBelowAnchor;
       applyAdjustValue = -newAdjust;
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
       state.rowHeights.clear();
+      if (applyAdjustValue !== void 0) {
+        resultSize -= applyAdjustValue;
+        state.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
+          state.scroll -= diff;
+        });
+      }
     }
-    const totalSize = state.totalSize;
-    let resultSize = totalSize;
-    if (applyAdjustValue !== void 0) {
-      resultSize -= applyAdjustValue;
-      refState.current.scrollAdjustHandler.requestAdjust(applyAdjustValue, (diff) => {
-        state.scroll -= diff;
-      });
-    }
-    set$(ctx, "totalSize", resultSize);
+    set$(ctx, "totalSize", state.totalSize);
+    set$(ctx, "totalSizeWithScrollAdjust", resultSize);
     if (alignItemsAtEnd) {
-      doUpdatePaddingTop();
+      updateAlignItemsPaddingTop();
     }
   }, []);
   const getRowHeight = (n) => {
-    const { rowHeights } = refState.current;
-    if (numColumnsProp === 1) {
+    const { rowHeights, data } = refState.current;
+    const numColumns = peek$(ctx, "numColumns");
+    if (numColumns === 1) {
       const id = getId(n);
       return getItemSize(id, n, data[n]);
     }
@@ -751,8 +1161,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       return rowHeights.get(n) || 0;
     }
     let rowHeight = 0;
-    const startEl = n * numColumnsProp;
-    for (let i = startEl; i < startEl + numColumnsProp && i < data.length; i++) {
+    const startEl = n * numColumns;
+    for (let i = startEl; i < startEl + numColumns && i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       rowHeight = Math.max(rowHeight, size);
@@ -765,16 +1175,17 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (!state.anchorElement) {
       return /* @__PURE__ */ new Map();
     }
-    let top = state.anchorElement.coordinate;
     const anchorIndex = state.indexByKey.get(state.anchorElement.id);
     if (anchorIndex === 0) {
       return /* @__PURE__ */ new Map();
     }
     const map = state.belowAnchorElementPositions || /* @__PURE__ */ new Map();
+    const numColumns = peek$(ctx, "numColumns");
+    let top = state.anchorElement.coordinate;
     for (let i = anchorIndex - 1; i >= 0; i--) {
       const id = getId(i);
-      const rowNumber = Math.floor(i / numColumnsProp);
-      if (i % numColumnsProp === 0) {
+      const rowNumber = Math.floor(i / numColumns);
+      if (i % numColumns === 0) {
         top -= getRowHeight(rowNumber);
       }
       map.set(id, top);
@@ -782,37 +1193,116 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     return map;
   };
   const getElementPositionBelowAchor = (id) => {
+    var _a;
     const state = refState.current;
     if (!refState.current.belowAnchorElementPositions) {
       state.belowAnchorElementPositions = buildElementPositionsBelowAnchor();
     }
     const res = state.belowAnchorElementPositions.get(id);
     if (res === void 0) {
-      throw new Error("Undefined position below achor");
+      console.warn(`Undefined position below anchor ${id} ${(_a = state.anchorElement) == null ? void 0 : _a.id}`);
+      return 0;
     }
     return res;
   };
-  const calculateItemsInView = useCallback((speed) => {
+  const fixGaps = useCallback(() => {
+    var _a;
+    const state = refState.current;
+    const { data, scrollLength, positions, startBuffered, endBuffered } = state;
+    const numColumns = peek$(ctx, "numColumns");
+    if (!data || scrollLength === 0 || numColumns > 1) {
+      return;
+    }
+    const numContainers = ctx.values.get("numContainers");
+    let numMeasurements = 0;
+    for (let i = 0; i < numContainers; i++) {
+      const itemKey = peek$(ctx, `containerItemKey${i}`);
+      const isSizeKnown = state.sizesKnown.get(itemKey);
+      if (itemKey && !isSizeKnown) {
+        const containerRef = ctx.viewRefs.get(i);
+        if (containerRef) {
+          let measured;
+          (_a = containerRef.current) == null ? void 0 : _a.measure((x, y, width, height) => {
+            measured = { width, height };
+          });
+          numMeasurements++;
+          if (measured) {
+            const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
+            updateItemSize(
+              itemKey,
+              size,
+              /*fromFixGaps*/
+              true
+            );
+          }
+        }
+      }
+    }
+    if (numMeasurements > 0) {
+      let top;
+      const diffs = /* @__PURE__ */ new Map();
+      for (let i = startBuffered; i <= endBuffered; i++) {
+        const id = getId(i);
+        if (top === void 0) {
+          top = positions.get(id);
+        }
+        if (positions.get(id) !== top) {
+          diffs.set(id, top - positions.get(id));
+          positions.set(id, top);
+        }
+        const size = getItemSize(id, i, data[i]);
+        const bottom = top + size;
+        top = bottom;
+      }
+      for (let i = 0; i < numContainers; i++) {
+        const itemKey = peek$(ctx, `containerItemKey${i}`);
+        const diff = diffs.get(itemKey);
+        if (diff) {
+          const prevPos = peek$(ctx, `containerPosition${i}`);
+          const newPos = prevPos.top + diff;
+          if (prevPos.top !== newPos) {
+            const pos = { ...prevPos };
+            pos.relativeCoordinate += diff;
+            pos.top += diff;
+            set$(ctx, `containerPosition${i}`, pos);
+          }
+        }
+      }
+    }
+  }, []);
+  const calculateItemsInView = useCallback(() => {
+    var _a;
     const state = refState.current;
     const {
-      data: data2,
+      data,
       scrollLength,
-      scroll: scrollState,
       startBufferedId: startBufferedIdOrig,
       positions,
       columns,
-      scrollAdjustHandler
+      scrollAdjustHandler,
+      scrollVelocity: speed
     } = state;
-    if (state.waitingForMicrotask) {
-      state.waitingForMicrotask = false;
-    }
-    if (!data2) {
+    if (!data || scrollLength === 0) {
       return;
     }
-    const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+    const totalSize = peek$(ctx, "totalSizeWithScrollAdjust");
+    const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
+    const numColumns = peek$(ctx, "numColumns");
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
-    const scroll = scrollState - previousScrollAdjust - topPad;
+    let scrollState = state.scroll;
+    if (!state.queuedInitialLayout && initialScrollIndex) {
+      const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
+      scrollState = updatedOffset;
+    }
+    let scroll = scrollState - previousScrollAdjust - topPad;
+    if (scroll + scrollLength > totalSize) {
+      scroll = totalSize - scrollLength;
+    }
+    if (ENABLE_DEBUG_VIEW) {
+      set$(ctx, "debugRawScroll", scrollState);
+      set$(ctx, "debugComputedScroll", scroll);
+    }
     let scrollBufferTop = scrollBuffer;
     let scrollBufferBottom = scrollBuffer;
     if (scrollExtra > 8) {
@@ -835,8 +1325,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    const originalStartId = startBufferedIdOrig && state.indexByKey.get(startBufferedIdOrig);
-    let loopStart = originalStartId || 0;
+    let loopStart = startBufferedIdOrig ? state.indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    if (state.minIndexSizeChanged !== void 0) {
+      loopStart = Math.min(state.minIndexSizeChanged, loopStart);
+      state.minIndexSizeChanged = void 0;
+    }
     const anchorElementIndex = getAnchorElementIndex();
     for (let i = loopStart; i >= 0; i--) {
       const id = getId(i);
@@ -849,7 +1342,13 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
       const top2 = newPosition || positions.get(id);
       if (top2 !== void 0) {
-        const size = getItemSize(id, i, data2[i]);
+        const size = getItemSize(
+          id,
+          i,
+          data[i],
+          /*useAverageSize*/
+          true
+        );
         const bottom = top2 + size;
         if (bottom > scroll - scrollBuffer) {
           loopStart = i;
@@ -858,7 +1357,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         }
       }
     }
-    const numColumns = peek$(ctx, "numColumns");
     const loopStartMod = loopStart % numColumns;
     if (loopStartMod > 0) {
       loopStart -= loopStartMod;
@@ -874,15 +1372,21 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         topOffset = positions.get(id);
       }
       if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
-        topOffset = initialContentOffset || 0;
+        topOffset = state.anchorElement.coordinate;
       }
       return topOffset;
     };
-    for (let i = loopStart; i < data2.length; i++) {
+    for (let i = Math.max(0, loopStart); i < data.length; i++) {
       const id = getId(i);
-      const size = getItemSize(id, i, data2[i]);
+      const size = getItemSize(
+        id,
+        i,
+        data[i],
+        /*useAverageSize*/
+        true
+      );
       maxSizeInRow = Math.max(maxSizeInRow, size);
-      if (top === void 0) {
+      if (top === void 0 || id === ((_a = state.anchorElement) == null ? void 0 : _a.id)) {
         top = getInitialTop(i);
       }
       if (positions.get(id) !== top) {
@@ -935,6 +1439,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (startBuffered !== null && endBuffered !== null) {
       const prevNumContainers = ctx.values.get("numContainers");
       let numContainers = prevNumContainers;
+      let didWarnMoreContainers = false;
       for (let i = startBuffered; i <= endBuffered; i++) {
         let isContained = false;
         const id = getId(i);
@@ -968,18 +1473,19 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           if (furthestIndex >= 0) {
             set$(ctx, `containerItemKey${furthestIndex}`, id);
             const index = state.indexByKey.get(id);
-            set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
+            set$(ctx, `containerItemData${furthestIndex}`, data[index]);
           } else {
             const containerId = numContainers;
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
             const index = state.indexByKey.get(id);
-            set$(ctx, `containerItemData${containerId}`, data2[index]);
+            set$(ctx, `containerItemData${containerId}`, data[index]);
             set$(ctx, `containerPosition${containerId}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
-            if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
+            if (__DEV__ && !didWarnMoreContainers && numContainers > peek$(ctx, "numContainersPooled")) {
+              didWarnMoreContainers = true;
               console.warn(
-                "[legend-list] No container to recycle, so creating one on demand. This can be a performance issue and is likely caused by the estimatedItemSize being too small. Consider increasing estimatedItemSize. numContainers:",
+                "[legend-list] No container to recycle, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize. numContainers:",
                 numContainers
               );
             }
@@ -989,19 +1495,19 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       if (numContainers !== prevNumContainers) {
         set$(ctx, "numContainers", numContainers);
         if (numContainers > peek$(ctx, "numContainersPooled")) {
-          set$(ctx, "numContainersPooled", numContainers);
+          set$(ctx, "numContainersPooled", Math.ceil(numContainers * 1.5));
         }
       }
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
         const itemIndex = state.indexByKey.get(itemKey);
-        const item = data2[itemIndex];
-        if (item) {
+        const item = data[itemIndex];
+        if (item !== void 0) {
           const id = getId(itemIndex);
           if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
             const prevPos = peek$(ctx, `containerPosition${i}`).top;
             const pos = positions.get(id) || 0;
-            const size = getItemSize(id, itemIndex, data2[i]);
+            const size = getItemSize(id, itemIndex, data[i]);
             if (pos + size >= scroll && pos <= scrollBottom || prevPos + size >= scroll && prevPos <= scrollBottom) {
               set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
             }
@@ -1013,9 +1519,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             };
             const column2 = columns.get(id) || 1;
             if (maintainVisibleContentPosition && itemIndex < anchorElementIndex) {
-              const currentRow = Math.floor(itemIndex / numColumnsProp);
+              const currentRow = Math.floor(itemIndex / numColumns);
               const rowHeight = getRowHeight(currentRow);
-              const elementHeight = getItemSize(id, itemIndex, data2[i]);
+              const elementHeight = getItemSize(id, itemIndex, data[i]);
               const diff = rowHeight - elementHeight;
               pos.relativeCoordinate = pos.top + getRowHeight(currentRow) - diff;
               pos.type = "bottom";
@@ -1030,13 +1536,25 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
               set$(ctx, `containerColumn${i}`, column2);
             }
             if (prevData !== item) {
-              set$(ctx, `containerItemData${i}`, data2[itemIndex]);
+              set$(ctx, `containerItemData${i}`, data[itemIndex]);
             }
           }
         }
       }
     }
-    set$(ctx, "containersDidLayout", true);
+    if (state.numPendingInitialLayout === 0) {
+      state.numPendingInitialLayout = state.endBuffered - state.startBuffered + 1;
+    }
+    if (!state.queuedInitialLayout && endBuffered !== null) {
+      let areAllKnown = true;
+      for (let i = startBuffered; areAllKnown && i <= endBuffered; i++) {
+        const key = getId(i);
+        areAllKnown && (areAllKnown = state.sizesKnown.has(key));
+      }
+      if (areAllKnown) {
+        setDidLayout();
+      }
+    }
     if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
         state,
@@ -1049,50 +1567,105 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       );
     }
   }, []);
-  const doUpdatePaddingTop = () => {
+  const setPaddingTop = ({
+    stylePaddingTop,
+    alignItemsPaddingTop
+  }) => {
+    if (stylePaddingTop !== void 0) {
+      set$(ctx, "stylePaddingTop", stylePaddingTop);
+    }
+    if (alignItemsPaddingTop !== void 0) {
+      set$(ctx, "alignItemsPaddingTop", alignItemsPaddingTop);
+    }
+    set$(
+      ctx,
+      "paddingTop",
+      (stylePaddingTop != null ? stylePaddingTop : peek$(ctx, "stylePaddingTop")) + (alignItemsPaddingTop != null ? alignItemsPaddingTop : peek$(ctx, "alignItemsPaddingTop"))
+    );
+  };
+  const updateAlignItemsPaddingTop = () => {
     if (alignItemsAtEnd) {
-      const { scrollLength, totalSize } = refState.current;
-      const listPaddingTop = peek$(ctx, "stylePaddingTop") || 0;
-      const paddingTop = Math.max(0, Math.floor(scrollLength - totalSize - listPaddingTop));
-      set$(ctx, "paddingTop", paddingTop);
+      const { scrollLength } = refState.current;
+      const contentSize = getContentSize(ctx);
+      const paddingTop = Math.max(0, Math.floor(scrollLength - contentSize));
+      setPaddingTop({ alignItemsPaddingTop: paddingTop });
     }
   };
+  const scrollTo = (offset, animated) => {
+    var _a;
+    (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
+      x: horizontal ? offset : 0,
+      y: horizontal ? 0 : offset,
+      animated: !!animated
+    });
+  };
   const doMaintainScrollAtEnd = (animated) => {
     const state = refState.current;
-    if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd) {
-      state.scroll = state.totalSize - state.scrollLength + peek$(ctx, "paddingTop");
+    if ((state == null ? void 0 : state.isAtBottom) && maintainScrollAtEnd && peek$(ctx, "containersDidLayout")) {
+      const paddingTop = peek$(ctx, "alignItemsPaddingTop");
+      if (paddingTop > 0) {
+        state.scroll = 0;
+      }
       requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = refScroller.current) == null ? void 0 : _a2.scrollToEnd({
+        var _a;
+        state.maintainingScrollAtEnd = true;
+        (_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
           animated
         });
+        setTimeout(
+          () => {
+            state.maintainingScrollAtEnd = false;
+          },
+          0
+        );
       });
       return true;
     }
   };
+  const checkThreshold = (distance, atThreshold, threshold, isReached, isBlockedByTimer, onReached, blockTimer) => {
+    const distanceAbs = Math.abs(distance);
+    const isAtThreshold = atThreshold || distanceAbs < threshold;
+    if (!isReached && !isBlockedByTimer) {
+      if (isAtThreshold) {
+        onReached == null ? void 0 : onReached(distance);
+        blockTimer == null ? void 0 : blockTimer(true);
+        setTimeout(() => {
+          blockTimer == null ? void 0 : blockTimer(false);
+        }, 700);
+        return true;
+      }
+    } else {
+      if (distance >= 1.3 * threshold) {
+        return false;
+      }
+    }
+    return isReached;
+  };
   const checkAtBottom = () => {
     if (!refState.current) {
       return;
     }
-    const { scrollLength, scroll, totalSize } = refState.current;
-    if (totalSize > 0) {
-      const distanceFromEnd = totalSize - scroll - scrollLength;
-      if (refState.current) {
-        refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
-      }
-      const { onEndReached } = callbacks.current;
-      if (onEndReached) {
-        if (!refState.current.isEndReached) {
-          if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
-            refState.current.isEndReached = true;
-            onEndReached({ distanceFromEnd });
-          }
-        } else {
-          if (distanceFromEnd >= onEndReachedThreshold * scrollLength) {
-            refState.current.isEndReached = false;
-          }
+    const { queuedInitialLayout, scrollLength, scroll, maintainingScrollAtEnd } = refState.current;
+    const contentSize = getContentSize(ctx);
+    if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
+      const distanceFromEnd = contentSize - scroll - scrollLength;
+      const distanceFromEndAbs = Math.abs(distanceFromEnd);
+      const isContentLess = contentSize < scrollLength;
+      refState.current.isAtBottom = isContentLess || distanceFromEndAbs < scrollLength * maintainScrollAtEndThreshold;
+      refState.current.isEndReached = checkThreshold(
+        distanceFromEnd,
+        isContentLess,
+        onEndReachedThreshold * scrollLength,
+        refState.current.isEndReached,
+        refState.current.endReachedBlockedByTimer,
+        (distance) => {
+          var _a, _b;
+          return (_b = (_a = callbacks.current).onEndReached) == null ? void 0 : _b.call(_a, { distanceFromEnd: distance });
+        },
+        (block) => {
+          refState.current.endReachedBlockedByTimer = block;
         }
-      }
+      );
     }
   };
   const checkAtTop = () => {
@@ -1101,113 +1674,122 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
     const { scrollLength, scroll } = refState.current;
     const distanceFromTop = scroll;
-    refState.current.isAtTop = distanceFromTop < 0;
-    const { onStartReached } = callbacks.current;
-    if (onStartReached) {
-      if (!refState.current.isStartReached && !refState.current.startReachedBlockedByTimer) {
-        if (distanceFromTop < onStartReachedThreshold * scrollLength) {
-          refState.current.isStartReached = true;
-          onStartReached({ distanceFromStart: scroll });
-          refState.current.startReachedBlockedByTimer = true;
-          setTimeout(() => {
-            refState.current.startReachedBlockedByTimer = false;
-          }, 700);
-        }
-      } else {
-        if (distanceFromTop >= 1.3 * onStartReachedThreshold * scrollLength) {
-          refState.current.isStartReached = false;
-        }
+    const distanceFromTopAbs = Math.abs(distanceFromTop);
+    refState.current.isAtTop = distanceFromTopAbs < 0;
+    refState.current.isStartReached = checkThreshold(
+      distanceFromTop,
+      false,
+      onStartReachedThreshold * scrollLength,
+      refState.current.isStartReached,
+      refState.current.startReachedBlockedByTimer,
+      (distance) => {
+        var _a, _b;
+        return (_b = (_a = callbacks.current).onStartReached) == null ? void 0 : _b.call(_a, { distanceFromStart: distance });
+      },
+      (block) => {
+        refState.current.startReachedBlockedByTimer = block;
       }
-    }
+    );
   };
-  const checkResetContainers = (reset) => {
+  const checkResetContainers = (isFirst2) => {
     const state = refState.current;
     if (state) {
-      state.data = data;
-      if (reset) {
+      state.data = dataProp;
+      if (!isFirst2) {
         refState.current.scrollForNextCalculateItemsInView = void 0;
         const numContainers = peek$(ctx, "numContainers");
         for (let i = 0; i < numContainers; i++) {
           const itemKey = peek$(ctx, `containerItemKey${i}`);
           if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
             set$(ctx, `containerItemKey${i}`, void 0);
+            set$(ctx, `containerItemData${i}`, void 0);
             set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${i}`, -1);
           }
         }
         if (!keyExtractorProp) {
-          state.sizes.clear();
           state.positions.clear();
         }
-        calculateItemsInView(state.scrollVelocity);
-      }
-      const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
-      if (!didMaintainScrollAtEnd && data.length > state.data.length) {
-        state.isEndReached = false;
+        calculateItemsInView();
+        const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
+        if (!didMaintainScrollAtEnd && dataProp.length > state.data.length) {
+          state.isEndReached = false;
+        }
+        if (!didMaintainScrollAtEnd) {
+          checkAtTop();
+          checkAtBottom();
+        }
       }
-      checkAtTop();
-      checkAtBottom();
     }
   };
-  const isFirst = !refState.current.renderItem;
-  if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
-    if (!keyExtractorProp && !isFirst && data !== refState.current.data) {
-      refState.current.sizes.clear();
-      refState.current.positions.clear();
-    }
-    refState.current.data = data;
+  const calcTotalSizesAndPositions = ({ forgetPositions = false }) => {
+    var _a, _b;
+    const state = refState.current;
     let totalSize = 0;
     let totalSizeBelowIndex = 0;
     const indexByKey = /* @__PURE__ */ new Map();
     const newPositions = /* @__PURE__ */ new Map();
     let column = 1;
     let maxSizeInRow = 0;
-    for (let i = 0; i < data.length; i++) {
+    const numColumns = (_a = peek$(ctx, "numColumns")) != null ? _a : numColumnsProp;
+    if (!state) {
+      return;
+    }
+    for (let i = 0; i < dataProp.length; i++) {
       const key = getId(i);
+      if (__DEV__) {
+        if (indexByKey.has(key)) {
+          console.error(
+            `[legend-list] Error: Detected overlapping key (${key}) which causes missing items and gaps and other terrrible things. Check that keyExtractor returns unique values.`
+          );
+        }
+      }
       indexByKey.set(key, i);
-      if (refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
-        newPositions.set(key, refState.current.positions.get(key));
+      if (!forgetPositions && state.positions.get(key) != null && state.indexByKey.get(key) === i) {
+        newPositions.set(key, state.positions.get(key));
       }
     }
-    refState.current.indexByKey = indexByKey;
-    refState.current.positions = newPositions;
-    if (maintainVisibleContentPosition) {
-      if (refState.current.anchorElement == null || indexByKey.get(refState.current.anchorElement.id) == null) {
-        if (data.length) {
-          const newAnchorElement = {
-            coordinate: 0,
-            id: getId(0)
-          };
-          refState.current.anchorElement = newAnchorElement;
-          (_a = refState.current.belowAnchorElementPositions) == null ? void 0 : _a.clear();
-          refScroller.current.scrollTo({ x: 0, y: 0, animated: false });
+    state.indexByKey = indexByKey;
+    state.positions = newPositions;
+    if (!forgetPositions && !isFirst) {
+      if (maintainVisibleContentPosition) {
+        if (state.anchorElement == null || indexByKey.get(state.anchorElement.id) == null) {
+          if (dataProp.length) {
+            const newAnchorElement = {
+              coordinate: 0,
+              id: getId(0)
+            };
+            state.anchorElement = newAnchorElement;
+            (_b = state.belowAnchorElementPositions) == null ? void 0 : _b.clear();
+            scrollTo(0, false);
+            setTimeout(() => {
+              calculateItemsInView();
+            }, 0);
+          } else {
+            state.startBufferedId = void 0;
+          }
+        }
+      } else {
+        if (state.startBufferedId != null && newPositions.get(state.startBufferedId) == null) {
+          if (dataProp.length) {
+            state.startBufferedId = getId(0);
+          } else {
+            state.startBufferedId = void 0;
+          }
+          scrollTo(0, false);
           setTimeout(() => {
-            calculateItemsInView(0);
+            calculateItemsInView();
           }, 0);
-        } else {
-          refState.current.startBufferedId = void 0;
         }
       }
-    } else {
-      if (refState.current.startBufferedId != null && newPositions.get(refState.current.startBufferedId) == null) {
-        if (data.length) {
-          refState.current.startBufferedId = getId(0);
-        } else {
-          refState.current.startBufferedId = void 0;
-        }
-        refScroller.current.scrollTo({ x: 0, y: 0, animated: false });
-        setTimeout(() => {
-          calculateItemsInView(0);
-        }, 0);
-      }
     }
     const anchorElementIndex = getAnchorElementIndex();
-    for (let i = 0; i < data.length; i++) {
+    for (let i = 0; i < dataProp.length; i++) {
       const key = getId(i);
-      const size = getItemSize(key, i, data[i]);
+      const size = getItemSize(key, i, dataProp[i]);
       maxSizeInRow = Math.max(maxSizeInRow, size);
       column++;
-      if (column > numColumnsProp) {
+      if (column > numColumns) {
         if (maintainVisibleContentPosition && anchorElementIndex !== void 0 && i < anchorElementIndex) {
           totalSizeBelowIndex += maxSizeInRow;
         }
@@ -1219,123 +1801,197 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (maxSizeInRow > 0) {
       totalSize += maxSizeInRow;
     }
+    state.ignoreScrollFromCalcTotal = true;
+    requestAnimationFrame(() => {
+      state.ignoreScrollFromCalcTotal = false;
+    });
     addTotalSize(null, totalSize, totalSizeBelowIndex);
-  }
-  useEffect(() => {
-    checkResetContainers(
-      /*reset*/
-      !isFirst
+  };
+  const isFirst = !refState.current.renderItem;
+  const memoizedLastItemKeys = useMemo(() => {
+    if (!dataProp.length) return [];
+    return Array.from(
+      { length: Math.min(numColumnsProp, dataProp.length) },
+      (_, i) => getId(dataProp.length - 1 - i)
     );
-  }, [isFirst, data, numColumnsProp]);
-  useEffect(() => {
-    set$(ctx, "extraData", extraData);
-  }, [extraData]);
-  refState.current.renderItem = renderItem;
-  const lastItemKey = data.length > 0 ? getId(data.length - 1) : void 0;
-  const stylePaddingTop = (_e = (_d = (_b = StyleSheet.flatten(style)) == null ? void 0 : _b.paddingTop) != null ? _d : (_c = StyleSheet.flatten(contentContainerStyle)) == null ? void 0 : _c.paddingTop) != null ? _e : 0;
+  }, [dataProp, numColumnsProp]);
   const initalizeStateVars = () => {
-    set$(ctx, "lastItemKey", lastItemKey);
+    set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
-    set$(ctx, "stylePaddingTop", stylePaddingTop);
+    const prevPaddingTop = peek$(ctx, "stylePaddingTop");
+    setPaddingTop({ stylePaddingTop: stylePaddingTopState });
+    const paddingDiff = stylePaddingTopState - prevPaddingTop;
+    if (paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
+      queueMicrotask(() => {
+        scrollTo(refState.current.scroll + paddingDiff, false);
+      });
+    }
   };
   if (isFirst) {
     initalizeStateVars();
   }
-  useEffect(initalizeStateVars, [lastItemKey, numColumnsProp, stylePaddingTop]);
+  if (isFirst || didDataChange || numColumnsProp !== peek$(ctx, "numColumns")) {
+    refState.current.lastBatchingAction = Date.now();
+    if (!keyExtractorProp && !isFirst && didDataChange) {
+      __DEV__ && warnDevOnce(
+        "keyExtractor",
+        "Changing data without a keyExtractor can cause slow performance and resetting scroll. If your list data can change you should use a keyExtractor with a unique id for best performance and behavior."
+      );
+      refState.current.sizes.clear();
+      refState.current.positions.clear();
+    }
+    calcTotalSizesAndPositions({ forgetPositions: false });
+  }
+  useEffect(() => {
+    const didAllocateContainers = doInitialAllocateContainers();
+    if (!didAllocateContainers) {
+      checkResetContainers(
+        /*isFirst*/
+        isFirst
+      );
+    }
+  }, [isFirst, dataProp, numColumnsProp]);
+  useEffect(() => {
+    set$(ctx, "extraData", extraData);
+  }, [extraData]);
+  refState.current.renderItem = renderItem;
+  useEffect(initalizeStateVars, [memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingTopState]);
   const getRenderedItem = useCallback((key) => {
-    var _a2, _b2;
+    var _a, _b;
     const state = refState.current;
     if (!state) {
       return null;
     }
-    const { data: data2, indexByKey } = state;
+    const { data, indexByKey } = state;
     const index = indexByKey.get(key);
     if (index === void 0) {
       return null;
     }
-    const useViewability2 = (configId, callback) => {
-      useViewability(configId, callback);
-    };
-    const useViewabilityAmount2 = (callback) => {
-      useViewabilityAmount(callback);
-    };
-    const useRecyclingEffect2 = (effect) => {
-      useRecyclingEffect(effect);
-    };
-    const useRecyclingState2 = (valueOrFun) => {
-      return useRecyclingState(valueOrFun);
-    };
-    const renderedItem = (_b2 = (_a2 = refState.current).renderItem) == null ? void 0 : _b2.call(_a2, {
-      item: data2[index],
+    const useViewability2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useViewability",
+        `useViewability has been moved from a render prop to a regular import: import { useViewability } from "@legendapp/list";`
+      );
+    } : void 0;
+    const useViewabilityAmount2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useViewabilityAmount",
+        `useViewabilityAmount has been moved from a render prop to a regular import: import { useViewabilityAmount } from "@legendapp/list";`
+      );
+    } : void 0;
+    const useRecyclingEffect2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useRecyclingEffect",
+        `useRecyclingEffect has been moved from a render prop to a regular import: import { useRecyclingEffect } from "@legendapp/list";`
+      );
+    } : void 0;
+    const useRecyclingState2 = __DEV__ ? () => {
+      warnDevOnce(
+        "useRecyclingState",
+        `useRecyclingState has been moved from a render prop to a regular import: import { useRecyclingState } from "@legendapp/list";`
+      );
+    } : void 0;
+    const renderedItem = (_b = (_a = refState.current).renderItem) == null ? void 0 : _b.call(_a, {
+      item: data[index],
       index,
+      extraData: peek$(ctx, "extraData"),
+      // @ts-expect-error TODO: Remove these before 1.0
       useViewability: useViewability2,
       useViewabilityAmount: useViewabilityAmount2,
       useRecyclingEffect: useRecyclingEffect2,
       useRecyclingState: useRecyclingState2
     });
-    return { index, renderedItem };
+    return { index, item: data[index], renderedItem };
   }, []);
-  useInit(() => {
-    var _a2;
+  const doInitialAllocateContainers = () => {
+    var _a;
     const state = refState.current;
-    const viewability = setupViewability(props);
+    const { scrollLength, data } = state;
+    if (scrollLength > 0 && data.length > 0 && !peek$(ctx, "numContainers")) {
+      const averageItemSize = (_a = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a : DEFAULT_ITEM_SIZE;
+      const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
+      for (let i = 0; i < numContainers; i++) {
+        set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
+        set$(ctx, `containerColumn${i}`, -1);
+      }
+      set$(ctx, "numContainers", numContainers);
+      set$(ctx, "numContainersPooled", numContainers * initialContainerPoolRatio);
+      if (initialScrollIndex) {
+        requestAnimationFrame(() => {
+          calculateItemsInView();
+        });
+      } else {
+        calculateItemsInView();
+      }
+      return true;
+    }
+  };
+  useEffect(() => {
+    const state = refState.current;
+    const viewability = setupViewability({
+      viewabilityConfig,
+      viewabilityConfigCallbackPairs,
+      onViewableItemsChanged
+    });
     state.viewabilityConfigCallbackPairs = viewability;
     state.enableScrollForNextCalculateItemsInView = !viewability;
-    const scrollLength = state.scrollLength;
-    const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
-    for (let i = 0; i < numContainers; i++) {
-      set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
-      set$(ctx, `containerColumn${i}`, -1);
-    }
-    set$(ctx, "numContainers", numContainers);
-    set$(ctx, "numContainersPooled", numContainers * 2);
-    calculateItemsInView(state.scrollVelocity);
+  }, [viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged]);
+  useInit(() => {
+    doInitialAllocateContainers();
   });
-  const updateItemSize = useCallback((containerId, itemKey, size) => {
-    var _a2;
-    const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
-    if (!data2) {
+  const updateItemSize = useCallback((itemKey, size, fromFixGaps) => {
+    const state = refState.current;
+    const { sizes, indexByKey, sizesKnown, data, rowHeights, startBuffered, endBuffered, averageSizes } = state;
+    if (!data) {
       return;
     }
-    const state = refState.current;
-    const { sizes, indexByKey, columns, sizesLaidOut } = state;
     const index = indexByKey.get(itemKey);
     const numColumns = peek$(ctx, "numColumns");
-    const row = Math.floor(index / numColumns);
-    const prevSize = getRowHeight(row);
+    state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
+    const prevSize = getItemSize(itemKey, index, data);
+    let needsCalculate = false;
+    let needsUpdateContainersDidLayout = false;
+    if (state.numPendingInitialLayout > 0) {
+      state.numPendingInitialLayout--;
+      if (state.numPendingInitialLayout === 0) {
+        needsCalculate = true;
+        state.numPendingInitialLayout = -1;
+        needsUpdateContainersDidLayout = true;
+      }
+    }
+    sizesKnown.set(itemKey, size);
+    const itemType = "";
+    let averages = averageSizes[itemType];
+    if (!averages) {
+      averages = averageSizes[itemType] = {
+        num: 0,
+        avg: 0
+      };
+    }
+    averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
+    averages.num++;
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
       let diff;
+      needsCalculate = true;
       if (numColumns > 1) {
-        const prevMaxSizeInRow = getRowHeight(row);
+        const rowNumber = Math.floor(index / numColumnsProp);
+        const prevSizeInRow = getRowHeight(rowNumber);
         sizes.set(itemKey, size);
-        const column = columns.get(itemKey);
-        const loopStart = index - (column - 1);
-        let nextMaxSizeInRow = 0;
-        for (let i = loopStart; i < loopStart + numColumns && i < data2.length; i++) {
-          const id = getId(i);
-          const size2 = getItemSize(id, i, data2[i]);
-          nextMaxSizeInRow = Math.max(nextMaxSizeInRow, size2);
-        }
-        diff = nextMaxSizeInRow - prevMaxSizeInRow;
+        rowHeights.delete(rowNumber);
+        const sizeInRow = getRowHeight(rowNumber);
+        diff = sizeInRow - prevSizeInRow;
       } else {
         sizes.set(itemKey, size);
         diff = size - prevSize;
       }
-      if (__DEV__ && !estimatedItemSize && !getEstimatedItemSize) {
-        sizesLaidOut.set(itemKey, size);
+      if (__DEV__ && suggestEstimatedItemSize) {
         if (state.timeoutSizeMessage) {
           clearTimeout(state.timeoutSizeMessage);
         }
         state.timeoutSizeMessage = setTimeout(() => {
           state.timeoutSizeMessage = void 0;
-          let total = 0;
-          let num = 0;
-          for (const [key, size2] of sizesLaidOut) {
-            num++;
-            total += size2;
-          }
-          const avg = Math.round(total / num);
+          const num = sizesKnown.size;
+          const avg = state.averageSizes[""].avg;
           console.warn(
             `[legend-list] estimatedItemSize or getEstimatedItemSize are not defined. Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
           );
@@ -1343,43 +1999,60 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
       refState.current.scrollForNextCalculateItemsInView = void 0;
       addTotalSize(itemKey, diff, 0);
-      doMaintainScrollAtEnd(true);
+      doMaintainScrollAtEnd(false);
+      if (onItemSizeChanged) {
+        onItemSizeChanged({
+          size,
+          previous: prevSize,
+          index,
+          itemKey,
+          itemData: data[index]
+        });
+      }
+    }
+    const isInView = index >= startBuffered && index <= endBuffered;
+    if (needsUpdateContainersDidLayout || !fromFixGaps && needsCalculate && isInView) {
       const scrollVelocity = state.scrollVelocity;
-      if (!state.waitingForMicrotask && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
-        if (!peek$(ctx, "containersDidLayout")) {
-          state.waitingForMicrotask = true;
-          queueMicrotask(() => {
-            if (state.waitingForMicrotask) {
-              state.waitingForMicrotask = false;
-              calculateItemsInView(state.scrollVelocity);
-            }
-          });
+      let didCalculate = false;
+      if ((Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1) && (!waitForInitialLayout || state.numPendingInitialLayout < 0)) {
+        if (Date.now() - state.lastBatchingAction < 500) {
+          if (!state.queuedCalculateItemsInView) {
+            state.queuedCalculateItemsInView = requestAnimationFrame(() => {
+              state.queuedCalculateItemsInView = void 0;
+              calculateItemsInView();
+            });
+          }
         } else {
-          calculateItemsInView(state.scrollVelocity);
+          calculateItemsInView();
+          didCalculate = true;
         }
       }
-      if (onItemSizeChanged) {
-        onItemSizeChanged({ size, previous: prevSize, index, itemKey, itemData: data2[index] });
+      if (!didCalculate && IsNewArchitecture) {
+        fixGaps();
       }
     }
   }, []);
-  const handleScrollDebounced = useCallback((velocity) => {
-    calculateItemsInView(velocity);
-    checkAtBottom();
-    checkAtTop();
-  }, []);
   const onLayout = useCallback((event) => {
+    const state = refState.current;
     const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
-    refState.current.scrollLength = scrollLength;
+    const didChange = scrollLength !== state.scrollLength;
+    state.scrollLength = scrollLength;
+    state.lastBatchingAction = Date.now();
+    state.scrollForNextCalculateItemsInView = void 0;
+    doInitialAllocateContainers();
     doMaintainScrollAtEnd(false);
-    doUpdatePaddingTop();
+    updateAlignItemsPaddingTop();
     checkAtBottom();
     checkAtTop();
+    if (didChange) {
+      calculateItemsInView();
+    }
     if (__DEV__) {
       const isWidthZero = event.nativeEvent.layout.width === 0;
       const isHeightZero = event.nativeEvent.layout.height === 0;
       if (isWidthZero || isHeightZero) {
-        console.warn(
+        warnDevOnce(
+          "height0",
           `[legend-list] List ${isWidthZero ? "width" : "height"} is 0. You may need to set a style or \`flex: \` for the list, because children are absolutely positioned.`
         );
       }
@@ -1390,14 +2063,18 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   }, []);
   const handleScroll = useCallback(
     (event, fromSelf) => {
-      var _a2, _b2, _c2;
-      if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c2 = event.nativeEvent.contentSize) == null ? void 0 : _c2.width) === 0) {
+      var _a, _b, _c, _d;
+      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 state = refState.current;
+      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+      if (state.ignoreScrollFromCalcTotal && newScroll !== 0) {
+        return;
+      }
       state.hasScrolled = true;
+      state.lastBatchingAction = Date.now();
       const currentTime = performance.now();
-      const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
       if (!(state.scrollHistory.length === 0 && newScroll === initialContentOffset)) {
         state.scrollHistory.push({ scroll: newScroll, time: currentTime });
       }
@@ -1423,9 +2100,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       state.scroll = newScroll;
       state.scrollTime = currentTime;
       state.scrollVelocity = velocity;
-      handleScrollDebounced(velocity);
+      calculateItemsInView();
+      checkAtBottom();
+      checkAtTop();
       if (!fromSelf) {
-        onScrollProp == null ? void 0 : onScrollProp(event);
+        (_d = state.onScroll) == null ? void 0 : _d.call(state, event);
       }
     },
     []
@@ -1433,61 +2112,127 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   useImperativeHandle(
     forwardedRef,
     () => {
-      const scrollToIndex = ({ index, animated }) => {
-        const offsetObj = calculateInitialOffset(index);
-        const offset = horizontal ? { x: offsetObj, y: 0 } : { x: 0, y: offsetObj };
-        refScroller.current.scrollTo({ ...offset, animated });
+      const scrollIndexIntoView = (options) => {
+        if (refState.current) {
+          const { index, ...rest2 } = options;
+          const { startNoBuffer, endNoBuffer } = refState.current;
+          if (index < startNoBuffer || index > endNoBuffer) {
+            const viewPosition = index < startNoBuffer ? 0 : 1;
+            scrollToIndex({
+              ...rest2,
+              viewPosition,
+              index
+            });
+          }
+        }
       };
       return {
+        flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
         getNativeScrollRef: () => refScroller.current,
         getScrollableNode: () => refScroller.current.getScrollableNode(),
         getScrollResponder: () => refScroller.current.getScrollResponder(),
-        flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
-        scrollToIndex,
-        scrollToOffset: ({ offset, animated }) => {
-          const offsetObj = horizontal ? { x: offset, y: 0 } : { x: 0, y: offset };
-          refScroller.current.scrollTo({ ...offsetObj, animated });
+        getState: () => {
+          const state = refState.current;
+          return state ? {
+            contentLength: state.totalSize,
+            end: state.endNoBuffer,
+            endBuffered: state.endBuffered,
+            isAtEnd: state.isAtBottom,
+            isAtStart: state.isAtTop,
+            scroll: state.scroll,
+            scrollLength: state.scrollLength,
+            start: state.startNoBuffer,
+            startBuffered: state.startBuffered
+          } : {};
         },
-        scrollToItem: ({ item, animated }) => {
+        scrollIndexIntoView,
+        scrollItemIntoView: ({ item, ...props2 }) => {
+          const { data } = refState.current;
           const index = data.indexOf(item);
           if (index !== -1) {
-            scrollToIndex({ index, animated });
+            scrollIndexIntoView({ index, ...props2 });
           }
         },
-        scrollToEnd: () => refScroller.current.scrollToEnd()
+        scrollToIndex,
+        scrollToItem: ({ item, ...props2 }) => {
+          const { data } = refState.current;
+          const index = data.indexOf(item);
+          if (index !== -1) {
+            scrollToIndex({ index, ...props2 });
+          }
+        },
+        scrollToOffset: ({ offset, animated }) => {
+          scrollTo(offset, animated);
+        },
+        scrollToEnd: (options) => refScroller.current.scrollToEnd(options)
       };
     },
     []
   );
-  return /* @__PURE__ */ React5.createElement(
+  if (Platform.OS === "web") {
+    useEffect(() => {
+      var _a;
+      if (initialContentOffset) {
+        (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler.setDisableAdjust(true);
+        scrollTo(initialContentOffset, false);
+        setTimeout(() => {
+          var _a2;
+          (_a2 = refState.current) == null ? void 0 : _a2.scrollAdjustHandler.setDisableAdjust(false);
+        }, 0);
+      }
+    }, []);
+  }
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
     ListComponent,
     {
       ...rest,
       horizontal,
-      refScrollView: (r) => {
-        refScroller.current = r;
-        if (refScrollView) {
-          if (typeof refScrollView === "function") {
-            refScrollView(r);
-          } else {
-            refScrollView.current = r;
-          }
-        }
-      },
+      refScrollView: combinedRef,
       initialContentOffset,
       getRenderedItem,
       updateItemSize,
       handleScroll,
+      onMomentumScrollEnd: (event) => {
+        var _a;
+        const scrollingToOffset = (_a = refState.current) == null ? void 0 : _a.scrollingToOffset;
+        if (scrollingToOffset !== void 0) {
+          requestAnimationFrame(() => {
+            scrollTo(scrollingToOffset, false);
+            refState.current.scrollingToOffset = void 0;
+            requestAnimationFrame(() => {
+              refState.current.scrollAdjustHandler.setDisableAdjust(false);
+            });
+          });
+        }
+        const wasPaused = refState.current.scrollAdjustHandler.unPauseAdjust();
+        if (wasPaused) {
+          refState.current.scrollVelocity = 0;
+          refState.current.scrollHistory = [];
+          calculateItemsInView();
+        }
+        if (onMomentumScrollEnd) {
+          onMomentumScrollEnd(event);
+        }
+      },
       onLayout,
       recycleItems,
       alignItemsAtEnd,
-      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
+      ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
       maintainVisibleContentPosition,
-      scrollEventThrottle: scrollEventThrottle != null ? scrollEventThrottle : Platform.OS === "web" ? 16 : void 0,
+      scrollEventThrottle: Platform.OS === "web" ? 16 : void 0,
       waitForInitialLayout,
-      style
+      refreshControl: refreshControl != null ? refreshControl : onRefresh && /* @__PURE__ */ React6.createElement(
+        RefreshControl,
+        {
+          refreshing: !!refreshing,
+          onRefresh,
+          progressViewOffset
+        }
+      ),
+      style,
+      contentContainerStyle
     }
-  );
+  ), __DEV__ && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React6.createElement(DebugView, { state: refState.current }));
 });
 
 export { LegendList, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };