@legendapp/list 2.0.0-next.10 → 2.0.0-next.12

package/index.js

@@ -28,6 +28,7 @@ var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var ContextState = React3__namespace.createContext(null);
 function StateProvider({ children }) {
   const [value] = React3__namespace.useState(() => ({
+    animatedScrollY: new reactNative.Animated.Value(0),
     columnWrapperStyle: void 0,
     listeners: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
@@ -185,18 +186,128 @@ var LeanViewComponent = React3__namespace.forwardRef((props, ref) => {
 LeanViewComponent.displayName = "RCTView";
 var LeanView = reactNative.Platform.OS === "android" || reactNative.Platform.OS === "ios" ? LeanViewComponent : reactNative.View;
 
-// src/components/Separator.tsx
-function Separator({ ItemSeparatorComponent, itemKey, leadingItem }) {
-  const [lastItemKeys] = useArr$(["lastItemKeys"]);
-  const isALastItem = lastItemKeys.includes(itemKey);
-  return isALastItem ? null : /* @__PURE__ */ React.createElement(ItemSeparatorComponent, { leadingItem });
-}
-
 // src/constants.ts
 var POSITION_OUT_OF_VIEW = -1e7;
 var ENABLE_DEVMODE = __DEV__ && false;
 var ENABLE_DEBUG_VIEW = __DEV__ && false;
 var IsNewArchitecture = global.nativeFabricUIManager != null;
+var useAnimatedValue = (initialValue) => {
+  return React3.useRef(new reactNative.Animated.Value(initialValue)).current;
+};
+
+// src/hooks/useValue$.ts
+function useValue$(key, params) {
+  var _a;
+  const { getValue, delay } = params || {};
+  const ctx = useStateContext();
+  const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
+  React3.useMemo(() => {
+    let newValue;
+    let prevValue;
+    let didQueueTask = false;
+    listen$(ctx, key, (v) => {
+      newValue = getValue ? getValue(v) : v;
+      if (delay !== void 0) {
+        const fn = () => {
+          didQueueTask = false;
+          if (newValue !== void 0) {
+            animValue.setValue(newValue);
+          }
+        };
+        const delayValue = typeof delay === "function" ? delay(newValue, prevValue) : delay;
+        prevValue = newValue;
+        if (!didQueueTask) {
+          didQueueTask = true;
+          if (delayValue === 0) {
+            queueMicrotask(fn);
+          } else {
+            setTimeout(fn, delayValue);
+          }
+        }
+      } else {
+        animValue.setValue(newValue);
+      }
+    });
+  }, []);
+  return animValue;
+}
+var typedForwardRef = React3.forwardRef;
+var typedMemo = React3.memo;
+
+// src/components/PositionView.tsx
+var PositionViewState = typedMemo(function PositionView({
+  id,
+  horizontal,
+  style,
+  refView,
+  ...rest
+}) {
+  const [position = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
+  return /* @__PURE__ */ React3__namespace.createElement(
+    LeanView,
+    {
+      ref: refView,
+      style: [
+        style,
+        horizontal ? { transform: [{ translateX: position }] } : { transform: [{ translateY: position }] }
+      ],
+      ...rest
+    }
+  );
+});
+var PositionViewAnimated = typedMemo(function PositionView2({
+  id,
+  horizontal,
+  style,
+  refView,
+  ...rest
+}) {
+  const position$ = useValue$(`containerPosition${id}`, {
+    getValue: (v) => v != null ? v : POSITION_OUT_OF_VIEW
+  });
+  return /* @__PURE__ */ React3__namespace.createElement(
+    reactNative.Animated.View,
+    {
+      ref: refView,
+      style: [
+        style,
+        horizontal ? { transform: [{ translateX: position$ }] } : { transform: [{ translateY: position$ }] }
+      ],
+      ...rest
+    }
+  );
+});
+var PositionViewSticky = typedMemo(function PositionViewSticky2({
+  id,
+  horizontal,
+  style,
+  refView,
+  animatedScrollY,
+  stickyOffset,
+  index,
+  ...rest
+}) {
+  const [position = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
+  const transform = React3__namespace.useMemo(() => {
+    if (animatedScrollY && stickyOffset) {
+      const stickyPosition = animatedScrollY.interpolate({
+        extrapolate: "clamp",
+        inputRange: [position, position + 5e3],
+        outputRange: [position, position + 5e3]
+      });
+      return horizontal ? [{ translateX: stickyPosition }] : [{ translateY: stickyPosition }];
+    }
+  }, [position, horizontal, animatedScrollY, stickyOffset]);
+  console.log("index", index, position, transform);
+  const viewStyle = React3__namespace.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
+  return /* @__PURE__ */ React3__namespace.createElement(reactNative.Animated.View, { ref: refView, style: viewStyle, ...rest });
+});
+var PositionView3 = IsNewArchitecture ? PositionViewState : PositionViewAnimated;
+function Separator({ ItemSeparatorComponent, itemKey, leadingItem }) {
+  const [lastItemKeys] = useArr$(["lastItemKeys"]);
+  const isALastItem = lastItemKeys.includes(itemKey);
+  return isALastItem ? null : /* @__PURE__ */ React3__namespace.createElement(ItemSeparatorComponent, { leadingItem });
+}
 var symbolFirst = Symbol();
 function useInit(cb) {
   const refValue = React3.useRef(symbolFirst);
@@ -333,8 +444,6 @@ function useListScrollSize() {
   const [scrollSize] = useArr$(["scrollSize"]);
   return scrollSize;
 }
-var typedForwardRef = React3.forwardRef;
-var typedMemo = React3.memo;
 
 // src/components/Container.tsx
 var Container = typedMemo(function Container2({
@@ -346,14 +455,15 @@ var Container = typedMemo(function Container2({
   ItemSeparatorComponent
 }) {
   const ctx = useStateContext();
-  const columnWrapperStyle = ctx.columnWrapperStyle;
-  const [column = 0, data, itemKey, position = POSITION_OUT_OF_VIEW, numColumns, extraData] = useArr$([
+  const { columnWrapperStyle, animatedScrollY } = ctx;
+  const [column = 0, data, itemKey, numColumns, extraData, isSticky, stickyOffset] = useArr$([
     `containerColumn${id}`,
     `containerItemData${id}`,
     `containerItemKey${id}`,
-    `containerPosition${id}`,
     "numColumns",
-    "extraData"
+    "extraData",
+    `containerSticky${id}`,
+    `containerStickyOffset${id}`
   ]);
   const refLastSize = React3.useRef();
   const ref = React3.useRef(null);
@@ -361,36 +471,38 @@ var Container = typedMemo(function Container2({
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
   let didLayout = false;
-  let paddingStyles;
-  if (columnWrapperStyle) {
-    const { columnGap, rowGap, gap } = columnWrapperStyle;
-    if (horizontal) {
-      paddingStyles = {
-        paddingRight: columnGap || gap || void 0,
-        paddingVertical: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
-      };
-    } else {
-      paddingStyles = {
-        paddingBottom: rowGap || gap || void 0,
-        paddingHorizontal: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
-      };
+  const style = React3.useMemo(() => {
+    let paddingStyles;
+    if (columnWrapperStyle) {
+      const { columnGap, rowGap, gap } = columnWrapperStyle;
+      if (horizontal) {
+        paddingStyles = {
+          paddingRight: columnGap || gap || void 0,
+          paddingVertical: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
+        };
+      } else {
+        paddingStyles = {
+          paddingBottom: rowGap || gap || void 0,
+          paddingHorizontal: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
+        };
+      }
     }
-  }
-  const style = horizontal ? {
-    flexDirection: ItemSeparatorComponent ? "row" : void 0,
-    height: otherAxisSize,
-    left: position,
-    position: "absolute",
-    top: otherAxisPos,
-    ...paddingStyles || {}
-  } : {
-    left: otherAxisPos,
-    position: "absolute",
-    right: numColumns > 1 ? null : 0,
-    top: position,
-    width: otherAxisSize,
-    ...paddingStyles || {}
-  };
+    return horizontal ? {
+      flexDirection: ItemSeparatorComponent ? "row" : void 0,
+      height: otherAxisSize,
+      left: 0,
+      position: "absolute",
+      top: otherAxisPos,
+      ...paddingStyles || {}
+    } : {
+      left: otherAxisPos,
+      position: "absolute",
+      right: numColumns > 1 ? null : 0,
+      top: 0,
+      width: otherAxisSize,
+      ...paddingStyles || {}
+    };
+  }, [horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns]);
   const renderedItemInfo = React3.useMemo(
     () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
     [itemKey, data, extraData]
@@ -455,55 +567,30 @@ var Container = typedMemo(function Container2({
       }
     }, [itemKey]);
   }
-  return /* @__PURE__ */ React3__namespace.createElement(LeanView, { key: recycleItems ? void 0 : itemKey, onLayout, ref, style }, /* @__PURE__ */ React3__namespace.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React3__namespace.createElement(
-    Separator,
+  const PositionComponent = isSticky ? PositionViewSticky : PositionView3;
+  return /* @__PURE__ */ React3__namespace.createElement(
+    PositionComponent,
     {
-      ItemSeparatorComponent,
-      itemKey,
-      leadingItem: renderedItemInfo.item
-    }
-  )));
-});
-var useAnimatedValue = (initialValue) => {
-  return React3.useRef(new reactNative.Animated.Value(initialValue)).current;
-};
-
-// src/hooks/useValue$.ts
-function useValue$(key, params) {
-  var _a;
-  const { getValue, delay } = params || {};
-  const ctx = useStateContext();
-  const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
-  React3.useMemo(() => {
-    let newValue;
-    let prevValue;
-    let didQueueTask = false;
-    listen$(ctx, key, (v) => {
-      newValue = getValue ? getValue(v) : v;
-      if (delay !== void 0) {
-        const fn = () => {
-          didQueueTask = false;
-          if (newValue !== void 0) {
-            animValue.setValue(newValue);
-          }
-        };
-        const delayValue = typeof delay === "function" ? delay(newValue, prevValue) : delay;
-        prevValue = newValue;
-        if (!didQueueTask) {
-          didQueueTask = true;
-          if (delayValue === 0) {
-            queueMicrotask(fn);
-          } else {
-            setTimeout(fn, delayValue);
-          }
-        }
-      } else {
-        animValue.setValue(newValue);
+      animatedScrollY: isSticky ? animatedScrollY : void 0,
+      horizontal,
+      id,
+      index,
+      key: recycleItems ? void 0 : itemKey,
+      onLayout,
+      refView: ref,
+      stickyOffset: isSticky ? stickyOffset : void 0,
+      style
+    },
+    /* @__PURE__ */ React3__namespace.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && /* @__PURE__ */ React3__namespace.createElement(
+      Separator,
+      {
+        ItemSeparatorComponent,
+        itemKey,
+        leadingItem: renderedItemInfo.item
       }
-    });
-  }, []);
-  return animValue;
-}
+    ))
+  );
+});
 
 // src/components/Containers.tsx
 var Containers = typedMemo(function Containers2({
@@ -663,6 +750,7 @@ var ListComponent = typedMemo(function ListComponent2({
   scrollAdjustHandler,
   onLayoutHeader,
   snapToIndices,
+  stickyIndices,
   ...rest
 }) {
   const ctx = useStateContext();
@@ -672,7 +760,7 @@ var ListComponent = typedMemo(function ListComponent2({
   const ScrollComponent = renderScrollComponent ? React3.useMemo(
     () => React3__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
     [renderScrollComponent]
-  ) : reactNative.ScrollView;
+  ) : reactNative.Animated.ScrollView;
   React3__namespace.useEffect(() => {
     if (canRender) {
       setTimeout(() => {
@@ -725,9 +813,26 @@ var ListComponent = typedMemo(function ListComponent2({
         style: ListFooterComponentStyle
       },
       getComponent(ListFooterComponent)
-    )
+    ),
+    __DEV__ && ENABLE_DEVMODE && /* @__PURE__ */ React3__namespace.createElement(DevNumbers, null)
   );
 });
+var DevNumbers = __DEV__ && React3__namespace.memo(function DevNumbers2() {
+  return Array.from({ length: 100 }).map((_, index) => /* @__PURE__ */ React3__namespace.createElement(
+    reactNative.View,
+    {
+      key: index,
+      style: {
+        height: 100,
+        pointerEvents: "none",
+        position: "absolute",
+        top: index * 100,
+        width: "100%"
+      }
+    },
+    /* @__PURE__ */ React3__namespace.createElement(reactNative.Text, { style: { color: "red" } }, index * 100)
+  ));
+});
 
 // src/utils/getId.ts
 function getId(state, index) {
@@ -759,20 +864,36 @@ function calculateOffsetForIndex(ctx, state, index) {
 }
 
 // src/utils/getItemSize.ts
-function getItemSize(state, key, index, data, useAverageSize) {
+function getItemSize(state, key, index, data, useAverageSize, defaultAverageSize) {
+  var _a, _b;
   const {
     sizesKnown,
     sizes,
     scrollingTo,
-    props: { estimatedItemSize, getEstimatedItemSize }
+    averageSizes,
+    props: { estimatedItemSize, getEstimatedItemSize, getFixedItemSize, getItemType }
   } = state;
   const sizeKnown = sizesKnown.get(key);
   if (sizeKnown !== void 0) {
     return sizeKnown;
   }
   let size;
-  if (useAverageSize !== void 0 && sizeKnown === void 0 && !getEstimatedItemSize && !scrollingTo) {
-    size = useAverageSize;
+  const itemType = getItemType ? (_a = getItemType(data, index)) != null ? _a : "" : "";
+  if (getFixedItemSize) {
+    size = getFixedItemSize(index, data, itemType);
+    if (size !== void 0) {
+      sizesKnown.set(key, size);
+    }
+  }
+  if (size === void 0 && useAverageSize && sizeKnown === void 0 && !scrollingTo) {
+    if (itemType === "") {
+      size = defaultAverageSize;
+    } else {
+      const averageSizeForType = (_b = averageSizes[itemType]) == null ? void 0 : _b.avg;
+      if (averageSizeForType !== void 0) {
+        size = roundSize(averageSizeForType);
+      }
+    }
   }
   if (size === void 0) {
     size = sizes.get(key);
@@ -781,7 +902,7 @@ function getItemSize(state, key, index, data, useAverageSize) {
     }
   }
   if (size === void 0) {
-    size = getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize;
+    size = getEstimatedItemSize ? getEstimatedItemSize(index, data, itemType) : estimatedItemSize;
   }
   sizes.set(key, size);
   return size;
@@ -800,6 +921,37 @@ function calculateOffsetWithOffsetPosition(state, offsetParam, params) {
   return offset;
 }
 
+// src/core/finishScrollTo.ts
+var finishScrollTo = (state) => {
+  if (state) {
+    state.scrollingTo = void 0;
+    state.scrollHistory.length = 0;
+  }
+};
+
+// src/core/scrollTo.ts
+function scrollTo(state, params = {}) {
+  var _a;
+  const { animated } = params;
+  const {
+    refScroller,
+    props: { horizontal }
+  } = state;
+  const offset = calculateOffsetWithOffsetPosition(state, params.offset, params);
+  state.scrollHistory.length = 0;
+  state.scrollingTo = params;
+  state.scrollPending = offset;
+  (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
+    animated: !!animated,
+    x: horizontal ? offset : 0,
+    y: horizontal ? 0 : offset
+  });
+  if (!animated) {
+    state.scroll = offset;
+    setTimeout(() => finishScrollTo(state), 100);
+  }
+}
+
 // src/utils/requestAdjust.ts
 function requestAdjust(ctx, state, positionDiff) {
   if (Math.abs(positionDiff) > 0.1) {
@@ -833,37 +985,63 @@ function requestAdjust(ctx, state, positionDiff) {
 }
 
 // src/core/prepareMVCP.ts
-function prepareMVCP(ctx, state) {
+function prepareMVCP(ctx, state, dataChanged) {
   const {
+    idsInView,
     positions,
     scrollingTo,
     props: { maintainVisibleContentPosition }
   } = state;
   let prevPosition;
   let targetId;
-  let targetIndex;
+  const idsInViewWithPositions = [];
   const scrollTarget = scrollingTo == null ? void 0 : scrollingTo.index;
   if (maintainVisibleContentPosition) {
     const indexByKey = state.indexByKey;
     if (scrollTarget !== void 0) {
       targetId = getId(state, scrollTarget);
-      targetIndex = scrollTarget;
-    } else if (state.idsInView.length > 0 && peek$(ctx, "containersDidLayout")) {
-      targetId = state.idsInView.find((id) => indexByKey.get(id) !== void 0);
-      targetIndex = indexByKey.get(targetId);
+    } else if (idsInView.length > 0 && peek$(ctx, "containersDidLayout")) {
+      if (dataChanged) {
+        for (let i = 0; i < idsInView.length; i++) {
+          const id = idsInView[i];
+          const index = indexByKey.get(id);
+          if (index !== void 0) {
+            idsInViewWithPositions.push({ id, position: positions.get(id) });
+          }
+        }
+      } else {
+        targetId = state.idsInView.find((id) => indexByKey.get(id) !== void 0);
+      }
     }
-    if (targetId !== void 0 && targetIndex !== void 0) {
+    if (targetId !== void 0) {
       prevPosition = positions.get(targetId);
     }
   }
   return () => {
+    let positionDiff;
+    if (targetId === void 0) {
+      for (let i = 0; i < idsInViewWithPositions.length; i++) {
+        const { id, position } = idsInViewWithPositions[i];
+        const newPosition = positions.get(id);
+        if (newPosition !== void 0) {
+          positionDiff = newPosition - position;
+          break;
+        }
+      }
+    }
     if (targetId !== void 0 && prevPosition !== void 0) {
       const newPosition = positions.get(targetId);
       if (newPosition !== void 0) {
-        const positionDiff = newPosition - prevPosition;
-        if (Math.abs(positionDiff) > 0.1) {
-          requestAdjust(ctx, state, positionDiff);
-        }
+        positionDiff = newPosition - prevPosition;
+      }
+    }
+    if (positionDiff !== void 0 && Math.abs(positionDiff) > 0.1) {
+      if (reactNative.Platform.OS === "android" && !IsNewArchitecture && dataChanged && state.scroll <= positionDiff) {
+        scrollTo(state, {
+          offset: state.scroll + positionDiff
+        });
+      } else {
+        requestAdjust(ctx, state, positionDiff);
       }
     }
   };
@@ -1004,7 +1182,7 @@ function updateAllPositions(ctx, state, dataChanged) {
     firstFullyOnScreenIndex,
     idCache,
     sizesKnown,
-    props: { snapToIndices }
+    props: { getEstimatedItemSize, snapToIndices }
   } = state;
   const data = state.props.data;
   const numColumns = peek$(ctx, "numColumns");
@@ -1013,7 +1191,9 @@ function updateAllPositions(ctx, state, dataChanged) {
   if (dataChanged) {
     indexByKey.clear();
     idCache.clear();
+    positions.clear();
   }
+  const useAverageSize = !getEstimatedItemSize;
   const itemType = "";
   let averageSize = (_a = averageSizes[itemType]) == null ? void 0 : _a.avg;
   if (averageSize !== void 0) {
@@ -1029,7 +1209,7 @@ function updateAllPositions(ctx, state, dataChanged) {
       let bailout = false;
       for (let i = firstFullyOnScreenIndex - 1; i >= 0; i--) {
         const id = (_b = idCache.get(i)) != null ? _b : getId(state, i);
-        const size = (_c = sizesKnown.get(id)) != null ? _c : getItemSize(state, id, i, data[i], averageSize);
+        const size = (_c = sizesKnown.get(id)) != null ? _c : getItemSize(state, id, i, data[i], useAverageSize, averageSize);
         const itemColumn = columns.get(id);
         maxSizeInRow2 = Math.max(maxSizeInRow2, size);
         if (itemColumn === 1) {
@@ -1056,7 +1236,7 @@ function updateAllPositions(ctx, state, dataChanged) {
   const dataLength = data.length;
   for (let i = 0; i < dataLength; i++) {
     const id = (_d = idCache.get(i)) != null ? _d : getId(state, i);
-    const size = (_e = sizesKnown.get(id)) != null ? _e : getItemSize(state, id, i, data[i], averageSize);
+    const size = (_e = sizesKnown.get(id)) != null ? _e : getItemSize(state, id, i, data[i], useAverageSize, averageSize);
     if (__DEV__ && needsIndexByKey) {
       if (indexByKeyForChecking.has(id)) {
         console.error(
@@ -1295,35 +1475,84 @@ function checkAllSizesKnown(state) {
 }
 
 // src/utils/findAvailableContainers.ts
-function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffered, pendingRemoval) {
+function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffered, pendingRemoval, requiredItemTypes, needNewContainers) {
   const numContainers = peek$(ctx, "numContainers");
+  const { stickyIndicesSet } = state.props;
   const result = [];
   const availableContainers = [];
-  for (let u = 0; u < numContainers; u++) {
-    const key = peek$(ctx, `containerItemKey${u}`);
-    let isOk = key === void 0;
-    if (!isOk) {
-      const index = pendingRemoval.indexOf(u);
-      if (index !== -1) {
-        pendingRemoval.splice(index, 1);
-        isOk = true;
+  const stickyItemIndices = (needNewContainers == null ? void 0 : needNewContainers.filter((index) => stickyIndicesSet.has(index))) || [];
+  const nonStickyItemIndices = (needNewContainers == null ? void 0 : needNewContainers.filter((index) => !stickyIndicesSet.has(index))) || [];
+  const canReuseContainer = (containerIndex, requiredType) => {
+    if (!requiredType) return true;
+    const existingType = state.containerItemTypes.get(containerIndex);
+    if (!existingType) return true;
+    return existingType === requiredType;
+  };
+  const neededTypes = requiredItemTypes ? [...requiredItemTypes] : [];
+  let typeIndex = 0;
+  for (let i = 0; i < stickyItemIndices.length; i++) {
+    const requiredType = neededTypes[typeIndex];
+    let foundContainer = false;
+    for (const containerIndex of state.stickyContainerPool) {
+      const key = peek$(ctx, `containerItemKey${containerIndex}`);
+      const isPendingRemoval = pendingRemoval.includes(containerIndex);
+      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType)) {
+        result.push(containerIndex);
+        if (isPendingRemoval) {
+          const index = pendingRemoval.indexOf(containerIndex);
+          pendingRemoval.splice(index, 1);
+        }
+        foundContainer = true;
+        if (requiredItemTypes) typeIndex++;
+        break;
       }
     }
-    if (isOk) {
-      result.push(u);
-      if (result.length >= numNeeded) {
-        return result;
+    if (!foundContainer) {
+      const newContainerIndex = numContainers + result.filter((index) => index >= numContainers).length;
+      result.push(newContainerIndex);
+      state.stickyContainerPool.add(newContainerIndex);
+      if (requiredItemTypes) typeIndex++;
+    }
+  }
+  if (nonStickyItemIndices.length > 0) {
+    for (let u = 0; u < numContainers; u++) {
+      if (state.stickyContainerPool.has(u)) {
+        continue;
+      }
+      const key = peek$(ctx, `containerItemKey${u}`);
+      let isOk = key === void 0;
+      if (!isOk) {
+        const index = pendingRemoval.indexOf(u);
+        if (index !== -1) {
+          pendingRemoval.splice(index, 1);
+          const requiredType = neededTypes[typeIndex];
+          isOk = canReuseContainer(u, requiredType);
+        }
+      }
+      if (isOk) {
+        result.push(u);
+        if (requiredItemTypes) {
+          typeIndex++;
+        }
+        if (result.length >= numNeeded) {
+          return result;
+        }
       }
     }
   }
   for (let u = 0; u < numContainers; u++) {
+    if (state.stickyContainerPool.has(u)) {
+      continue;
+    }
     const key = peek$(ctx, `containerItemKey${u}`);
     if (key === void 0) continue;
     const index = state.indexByKey.get(key);
-    if (index < startBuffered) {
-      availableContainers.push({ distance: startBuffered - index, index: u });
-    } else if (index > endBuffered) {
-      availableContainers.push({ distance: index - endBuffered, index: u });
+    const isOutOfView = index < startBuffered || index > endBuffered;
+    if (isOutOfView) {
+      const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
+      if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
+        availableContainers.push({ distance, index: u });
+      }
     }
   }
   const remaining = numNeeded - result.length;
@@ -1335,6 +1564,9 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
       }
       for (const container of availableContainers) {
         result.push(container.index);
+        if (requiredItemTypes) {
+          typeIndex++;
+        }
       }
     }
     const stillNeeded = numNeeded - result.length;
@@ -1363,37 +1595,6 @@ function comparatorByDistance(a, b) {
   return b.distance - a.distance;
 }
 
-// src/core/finishScrollTo.ts
-var finishScrollTo = (state) => {
-  if (state) {
-    state.scrollingTo = void 0;
-    state.scrollHistory.length = 0;
-  }
-};
-
-// src/core/scrollTo.ts
-function scrollTo(state, params = {}) {
-  var _a;
-  const { animated } = params;
-  const {
-    refScroller,
-    props: { horizontal }
-  } = state;
-  const offset = calculateOffsetWithOffsetPosition(state, params.offset, params);
-  state.scrollHistory.length = 0;
-  state.scrollingTo = params;
-  state.scrollPending = offset;
-  (_a = refScroller.current) == null ? void 0 : _a.scrollTo({
-    animated: !!animated,
-    x: horizontal ? offset : 0,
-    y: horizontal ? 0 : offset
-  });
-  if (!animated) {
-    state.scroll = offset;
-    setTimeout(() => finishScrollTo(state), 100);
-  }
-}
-
 // src/core/scrollToIndex.ts
 function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, viewPosition }) {
   if (index >= state.props.data.length) {
@@ -1481,16 +1682,90 @@ function setDidLayout(ctx, state) {
   } = state;
   state.queuedInitialLayout = true;
   checkAtBottom(ctx, state);
-  if (!IsNewArchitecture && initialScroll) {
-    scrollToIndex(ctx, state, { ...initialScroll, animated: false });
-  }
-  set$(ctx, "containersDidLayout", true);
-  if (onLoad) {
-    onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
+  const setIt = () => {
+    set$(ctx, "containersDidLayout", true);
+    if (onLoad) {
+      onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
+    }
+  };
+  if (reactNative.Platform.OS === "android" || !IsNewArchitecture) {
+    if (initialScroll) {
+      queueMicrotask(() => {
+        scrollToIndex(ctx, state, { ...initialScroll, animated: false });
+        requestAnimationFrame(() => {
+          scrollToIndex(ctx, state, { ...initialScroll, animated: false });
+          setIt();
+        });
+      });
+    } else {
+      queueMicrotask(setIt);
+    }
+  } else {
+    setIt();
   }
 }
 
 // src/core/calculateItemsInView.ts
+function findCurrentStickyIndex(stickyArray, scroll, state) {
+  var _a;
+  for (let i = stickyArray.length - 1; i >= 0; i--) {
+    const stickyId = (_a = state.idCache.get(stickyArray[i])) != null ? _a : getId(state, stickyArray[i]);
+    const stickyPos = stickyId ? state.positions.get(stickyId) : void 0;
+    if (stickyPos !== void 0 && scroll >= stickyPos) {
+      return i;
+    }
+  }
+  return -1;
+}
+function getActiveStickyIndices(ctx, state, stickyIndices) {
+  return new Set(
+    Array.from(state.stickyContainerPool).map((i) => peek$(ctx, `containerItemKey${i}`)).map((key) => key ? state.indexByKey.get(key) : void 0).filter((idx) => idx !== void 0 && stickyIndices.has(idx))
+  );
+}
+function handleStickyActivation(ctx, state, stickyIndices, stickyArray, scroll, needNewContainers, startBuffered, endBuffered) {
+  var _a;
+  const activeIndices = getActiveStickyIndices(ctx, state, stickyIndices);
+  const currentStickyIdx = findCurrentStickyIndex(stickyArray, scroll, state);
+  for (let offset = 0; offset <= 1; offset++) {
+    const idx = currentStickyIdx - offset;
+    if (idx < 0 || activeIndices.has(stickyArray[idx])) continue;
+    const stickyIndex = stickyArray[idx];
+    const stickyId = (_a = state.idCache.get(stickyIndex)) != null ? _a : getId(state, stickyIndex);
+    if (stickyId && !state.containerItemKeys.has(stickyId) && (stickyIndex < startBuffered || stickyIndex > endBuffered)) {
+      needNewContainers.push(stickyIndex);
+    }
+  }
+}
+function handleStickyRecycling(ctx, state, stickyArray, scroll, scrollBuffer, pendingRemoval) {
+  var _a, _b, _c;
+  const currentStickyIdx = findCurrentStickyIndex(stickyArray, scroll, state);
+  for (const containerIndex of state.stickyContainerPool) {
+    const itemKey = peek$(ctx, `containerItemKey${containerIndex}`);
+    const itemIndex = itemKey ? state.indexByKey.get(itemKey) : void 0;
+    if (itemIndex === void 0) continue;
+    const arrayIdx = stickyArray.indexOf(itemIndex);
+    if (arrayIdx === -1) continue;
+    const isRecentSticky = arrayIdx >= currentStickyIdx - 1 && arrayIdx <= currentStickyIdx + 1;
+    if (isRecentSticky) continue;
+    const nextIndex = stickyArray[arrayIdx + 1];
+    let shouldRecycle = false;
+    if (nextIndex) {
+      const nextId = (_a = state.idCache.get(nextIndex)) != null ? _a : getId(state, nextIndex);
+      const nextPos = nextId ? state.positions.get(nextId) : void 0;
+      shouldRecycle = nextPos !== void 0 && scroll > nextPos + scrollBuffer * 2;
+    } else {
+      const currentId = (_b = state.idCache.get(itemIndex)) != null ? _b : getId(state, itemIndex);
+      if (currentId) {
+        const currentPos = state.positions.get(currentId);
+        const currentSize = (_c = state.sizes.get(currentId)) != null ? _c : getItemSize(state, currentId, itemIndex, state.props.data[itemIndex]);
+        shouldRecycle = currentPos !== void 0 && scroll > currentPos + currentSize + scrollBuffer * 3;
+      }
+    }
+    if (shouldRecycle) {
+      pendingRemoval.push(containerIndex);
+    }
+  }
+}
 function calculateItemsInView(ctx, state, params = {}) {
   reactNative.unstable_batchedUpdates(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -1507,7 +1782,7 @@ function calculateItemsInView(ctx, state, params = {}) {
       enableScrollForNextCalculateItemsInView,
       minIndexSizeChanged
     } = state;
-    const data = state.props.data;
+    const { data, stickyIndicesArr, stickyIndicesSet } = state.props;
     const prevNumContainers = peek$(ctx, "numContainers");
     if (!data || scrollLength === 0 || !prevNumContainers) {
       return;
@@ -1519,7 +1794,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     const { dataChanged, doMVCP } = params;
     const speed = getScrollVelocity(state);
     if (doMVCP || dataChanged) {
-      const checkMVCP = doMVCP ? prepareMVCP(ctx, state) : void 0;
+      const checkMVCP = doMVCP ? prepareMVCP(ctx, state, dataChanged) : void 0;
       updateAllPositions(ctx, state, dataChanged);
       checkMVCP == null ? void 0 : checkMVCP();
     }
@@ -1669,14 +1944,23 @@ function calculateItemsInView(ctx, state, params = {}) {
           needNewContainers.push(i);
         }
       }
+      if (stickyIndicesArr.length > 0) {
+        handleStickyActivation(ctx, state, stickyIndicesSet, stickyIndicesArr, scroll, needNewContainers, startBuffered, endBuffered);
+      }
       if (needNewContainers.length > 0) {
+        const requiredItemTypes = state.props.getItemType ? needNewContainers.map((i) => {
+          const itemType = state.props.getItemType(data[i], i);
+          return itemType ? String(itemType) : "";
+        }) : void 0;
         const availableContainers = findAvailableContainers(
           ctx,
           state,
           needNewContainers.length,
           startBuffered,
           endBuffered,
-          pendingRemoval
+          pendingRemoval,
+          requiredItemTypes,
+          needNewContainers
         );
         for (let idx = 0; idx < needNewContainers.length; idx++) {
           const i = needNewContainers[idx];
@@ -1688,7 +1972,18 @@ function calculateItemsInView(ctx, state, params = {}) {
           }
           set$(ctx, `containerItemKey${containerIndex}`, id);
           set$(ctx, `containerItemData${containerIndex}`, data[i]);
+          if (requiredItemTypes) {
+            state.containerItemTypes.set(containerIndex, requiredItemTypes[idx]);
+          }
           containerItemKeys.add(id);
+          if (stickyIndicesSet.has(i)) {
+            set$(ctx, `containerSticky${containerIndex}`, true);
+            const topPadding = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+            set$(ctx, `containerStickyOffset${containerIndex}`, new reactNative.Animated.Value(topPadding));
+            state.stickyContainerPool.add(containerIndex);
+          } else {
+            state.stickyContainerPool.delete(containerIndex);
+          }
           if (containerIndex >= numContainers2) {
             numContainers2 = containerIndex + 1;
           }
@@ -1701,12 +1996,21 @@ function calculateItemsInView(ctx, state, params = {}) {
         }
       }
     }
+    if (stickyIndicesArr.length > 0) {
+      handleStickyRecycling(ctx, state, stickyIndicesArr, scroll, scrollBuffer, pendingRemoval);
+    }
     for (let i = 0; i < numContainers; i++) {
       const itemKey = peek$(ctx, `containerItemKey${i}`);
       if (pendingRemoval.includes(i)) {
         if (itemKey) {
           containerItemKeys.delete(itemKey);
         }
+        state.containerItemTypes.delete(i);
+        if (state.stickyContainerPool.has(i)) {
+          set$(ctx, `containerSticky${i}`, false);
+          set$(ctx, `containerStickyOffset${i}`, void 0);
+          state.stickyContainerPool.delete(i);
+        }
         set$(ctx, `containerItemKey${i}`, void 0);
         set$(ctx, `containerItemData${i}`, void 0);
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
@@ -1757,10 +2061,14 @@ function calculateItemsInView(ctx, state, params = {}) {
 
 // src/core/doInitialAllocateContainers.ts
 function doInitialAllocateContainers(ctx, state) {
-  const { scrollLength } = state;
+  var _a;
+  const {
+    scrollLength,
+    props: { getItemType }
+  } = state;
   const data = state.props.data;
   if (scrollLength > 0 && data.length > 0 && !peek$(ctx, "numContainers")) {
-    const averageItemSize = state.props.getEstimatedItemSize ? state.props.getEstimatedItemSize(0, data[0]) : state.props.estimatedItemSize;
+    const averageItemSize = state.props.getEstimatedItemSize ? state.props.getEstimatedItemSize(0, data[0], getItemType ? (_a = getItemType(data[0], 0)) != null ? _a : "" : "") : state.props.estimatedItemSize;
     const Extra = 1.5;
     const numContainers = Math.ceil(
       (scrollLength + state.props.scrollBuffer * 2) / averageItemSize * state.props.numColumns * Extra
@@ -1797,16 +2105,18 @@ function doMaintainScrollAtEnd(ctx, state, animated) {
     }
     requestAnimationFrame(() => {
       var _a;
-      state.maintainingScrollAtEnd = true;
-      (_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
-        animated
-      });
-      setTimeout(
-        () => {
-          state.maintainingScrollAtEnd = false;
-        },
-        0
-      );
+      if (state == null ? void 0 : state.isAtEnd) {
+        state.maintainingScrollAtEnd = true;
+        (_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
+          animated
+        });
+        setTimeout(
+          () => {
+            state.maintainingScrollAtEnd = false;
+          },
+          0
+        );
+      }
     });
     return true;
   }
@@ -2026,7 +2336,22 @@ function updateItemSizes(ctx, state, itemUpdates) {
   }
 }
 function updateItemSize(ctx, state, itemKey, sizeObj) {
-  const { queuedItemSizeUpdates, queuedItemSizeUpdatesWaiting } = state;
+  var _a;
+  const {
+    queuedItemSizeUpdates,
+    queuedItemSizeUpdatesWaiting,
+    sizesKnown,
+    props: { getFixedItemSize, getItemType }
+  } = state;
+  if (getFixedItemSize) {
+    const index = state.indexByKey.get(itemKey);
+    const itemData = state.props.data[index];
+    const type = getItemType ? (_a = getItemType(itemData, index)) != null ? _a : "" : "";
+    const size = getFixedItemSize(index, itemData, type);
+    if (size !== void 0 && size === sizesKnown.get(itemKey)) {
+      return;
+    }
+  }
   const containersDidLayout = peek$(ctx, "containersDidLayout");
   if (!containersDidLayout || !queuedItemSizeUpdatesWaiting) {
     updateItemSizes(ctx, state, [{ itemKey, sizeObj }]);
@@ -2043,25 +2368,28 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
   }
 }
 function updateOneItemSize(state, itemKey, sizeObj) {
+  var _a;
   const {
     sizes,
     indexByKey,
     sizesKnown,
     averageSizes,
-    props: { data, horizontal }
+    props: { data, horizontal, getEstimatedItemSize, getItemType }
   } = state;
   if (!data) return 0;
   const index = indexByKey.get(itemKey);
   const prevSize = getItemSize(state, itemKey, index, data);
   const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
   sizesKnown.set(itemKey, size);
-  const itemType = "";
-  let averages = averageSizes[itemType];
-  if (!averages) {
-    averages = averageSizes[itemType] = { avg: 0, num: 0 };
+  if (!getEstimatedItemSize) {
+    const itemType = getItemType ? (_a = getItemType(data[index], index)) != null ? _a : "" : "";
+    let averages = averageSizes[itemType];
+    if (!averages) {
+      averages = averageSizes[itemType] = { avg: 0, num: 0 };
+    }
+    averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
+    averages.num++;
   }
-  averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
-  averages.num++;
   if (!prevSize || Math.abs(prevSize - size) > 0.1) {
     sizes.set(itemKey, size);
     return size - prevSize;
@@ -2099,12 +2427,13 @@ function createColumnWrapperStyle(contentContainerStyle) {
   }
 }
 function getRenderedItem(ctx, state, key) {
+  var _a;
   if (!state) {
     return null;
   }
   const {
     indexByKey,
-    props: { data, renderItem: renderItem2 }
+    props: { data, getItemType, renderItem: renderItem2 }
   } = state;
   const index = indexByKey.get(key);
   if (index === void 0) {
@@ -2115,7 +2444,8 @@ function getRenderedItem(ctx, state, key) {
     const itemProps = {
       extraData: peek$(ctx, "extraData"),
       index,
-      item: data[index]
+      item: data[index],
+      type: getItemType ? (_a = getItemType(data[index], index)) != null ? _a : "" : ""
     };
     renderedItem = React3__namespace.default.createElement(renderItem2, itemProps);
   }
@@ -2131,49 +2461,52 @@ var LegendList = typedForwardRef(function LegendList2(props, forwardedRef) {
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
   var _a;
   const {
+    alignItemsAtEnd = false,
+    columnWrapperStyle,
+    contentContainerStyle: contentContainerStyleProp,
     data: dataProp = [],
+    drawDistance = 250,
+    estimatedItemSize: estimatedItemSizeProp,
+    estimatedListSize,
+    extraData,
+    getEstimatedItemSize,
+    getFixedItemSize,
+    getItemType,
+    horizontal,
+    initialContainerPoolRatio = 2,
     initialScrollIndex: initialScrollIndexProp,
     initialScrollOffset,
-    horizontal,
-    drawDistance = 250,
-    recycleItems = false,
-    onEndReachedThreshold = 0.5,
-    onStartReachedThreshold = 0.5,
+    keyExtractor: keyExtractorProp,
+    ListEmptyComponent,
+    ListHeaderComponent,
     maintainScrollAtEnd = false,
     maintainScrollAtEndThreshold = 0.1,
-    alignItemsAtEnd = false,
     maintainVisibleContentPosition = false,
-    onScroll: onScrollProp,
-    onMomentumScrollEnd,
     numColumns: numColumnsProp = 1,
-    columnWrapperStyle,
-    keyExtractor: keyExtractorProp,
-    renderItem: renderItem2,
-    estimatedListSize,
-    estimatedItemSize: estimatedItemSizeProp,
-    getEstimatedItemSize,
-    suggestEstimatedItemSize,
-    ListHeaderComponent,
-    ListEmptyComponent,
+    onEndReached,
+    onEndReachedThreshold = 0.5,
     onItemSizeChanged,
-    refScrollView,
-    waitForInitialLayout = true,
-    extraData,
-    contentContainerStyle: contentContainerStyleProp,
-    style: styleProp,
     onLayout: onLayoutProp,
+    onLoad,
+    onMomentumScrollEnd,
     onRefresh,
-    refreshing,
+    onScroll: onScrollProp,
+    onStartReached,
+    onStartReachedThreshold = 0.5,
+    onViewableItemsChanged,
     progressViewOffset,
+    recycleItems = false,
     refreshControl,
-    initialContainerPoolRatio = 2,
+    refreshing,
+    refScrollView,
+    renderItem: renderItem2,
+    snapToIndices,
+    stickyIndices,
+    style: styleProp,
+    suggestEstimatedItemSize,
     viewabilityConfig,
     viewabilityConfigCallbackPairs,
-    snapToIndices,
-    onViewableItemsChanged,
-    onStartReached,
-    onEndReached,
-    onLoad,
+    waitForInitialLayout = true,
     ...rest
   } = props;
   const [renderNum, setRenderNum] = React3.useState(0);
@@ -2195,9 +2528,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (!refState.current) {
     const initialScrollLength = (estimatedListSize != null ? estimatedListSize : IsNewArchitecture ? { height: 0, width: 0 } : reactNative.Dimensions.get("window"))[horizontal ? "width" : "height"];
     refState.current = {
+      activeStickyIndex: void 0,
       averageSizes: {},
       columns: /* @__PURE__ */ new Map(),
       containerItemKeys: /* @__PURE__ */ new Set(),
+      containerItemTypes: /* @__PURE__ */ new Map(),
       enableScrollForNextCalculateItemsInView: true,
       endBuffered: -1,
       endNoBuffer: -1,
@@ -2236,6 +2571,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       startBuffered: -1,
       startNoBuffer: -1,
       startReachedBlockedByTimer: false,
+      stickyContainerPool: /* @__PURE__ */ new Set(),
+      stickyContainers: /* @__PURE__ */ new Map(),
       timeoutSizeMessage: 0,
       timeouts: /* @__PURE__ */ new Set(),
       totalSize: 0,
@@ -2252,6 +2589,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     data: dataProp,
     estimatedItemSize,
     getEstimatedItemSize,
+    getFixedItemSize,
+    getItemType,
     horizontal: !!horizontal,
     initialContainerPoolRatio,
     initialScroll,
@@ -2267,9 +2606,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onScroll: onScrollProp,
     onStartReached,
     onStartReachedThreshold,
+    recycleItems: !!recycleItems,
     renderItem: renderItem2,
     scrollBuffer,
     snapToIndices,
+    stickyIndicesArr: stickyIndices != null ? stickyIndices : [],
+    stickyIndicesSet: React3.useMemo(() => new Set(stickyIndices), [stickyIndices]),
     stylePaddingBottom: stylePaddingBottomState,
     stylePaddingTop: stylePaddingTopState,
     suggestEstimatedItemSize: !!suggestEstimatedItemSize
@@ -2507,6 +2849,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }),
     []
   );
+  const animatedScrollHandler = React3.useMemo(() => {
+    if (stickyIndices == null ? void 0 : stickyIndices.length) {
+      const { animatedScrollY } = ctx;
+      return reactNative.Animated.event([{ nativeEvent: { contentOffset: { [horizontal ? "x" : "y"]: animatedScrollY } } }], {
+        listener: fns.onScroll,
+        useNativeDriver: true
+      });
+    }
+    return fns.onScroll;
+  }, [stickyIndices, horizontal, onScroll]);
   return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, /* @__PURE__ */ React3__namespace.createElement(
     ListComponent,
     {
@@ -2523,14 +2875,20 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       onLayout,
       onLayoutHeader,
       onMomentumScrollEnd: (event) => {
-        requestAnimationFrame(() => {
-          finishScrollTo(refState.current);
-        });
+        if (IsNewArchitecture) {
+          requestAnimationFrame(() => {
+            finishScrollTo(refState.current);
+          });
+        } else {
+          setTimeout(() => {
+            finishScrollTo(refState.current);
+          }, 1e3);
+        }
         if (onMomentumScrollEnd) {
           onMomentumScrollEnd(event);
         }
       },
-      onScroll: fns.onScroll,
+      onScroll: animatedScrollHandler,
       recycleItems,
       refreshControl: refreshControl ? stylePaddingTopState > 0 ? React3__namespace.cloneElement(refreshControl, {
         progressViewOffset: (refreshControl.props.progressViewOffset || 0) + stylePaddingTopState
@@ -2546,6 +2904,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       scrollAdjustHandler: (_a = refState.current) == null ? void 0 : _a.scrollAdjustHandler,
       scrollEventThrottle: reactNative.Platform.OS === "web" ? 16 : void 0,
       snapToIndices,
+      stickyIndices,
       style,
       updateItemSize: fns.updateItemSize,
       waitForInitialLayout