@legendapp/list 3.5.0 → 3.6.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 3.6.0
+
+- Feat: Add `viewPositionFallback` to align oversized items to the start or end of the viewport during initial or programmatic scrolling, while keeping `viewPosition` alignment for items that fit.
+
 ## 3.5.0
 
 - Feat: Add `scrollElement` so web lists can share an ancestor element's scrollbar

package/animated.d.ts

@@ -225,6 +225,8 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     };
     /**
      * Initial scroll position in pixels.
@@ -651,6 +653,8 @@ type LegendListRef$1 = {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific item in the list.
@@ -665,6 +669,8 @@ type LegendListRef$1 = {
         item: any;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific offset in pixels.

package/keyboard-legacy.d.ts

@@ -190,6 +190,8 @@ type LegendListRef$1 = {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific item in the list.
@@ -204,6 +206,8 @@ type LegendListRef$1 = {
         item: any;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific offset in pixels.

package/keyboard.d.ts

@@ -208,6 +208,8 @@ type LegendListRef$1 = {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific item in the list.
@@ -222,6 +224,8 @@ type LegendListRef$1 = {
         item: any;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific offset in pixels.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,

package/react-native.d.ts

@@ -225,6 +225,8 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     };
     /**
      * Initial scroll position in pixels.
@@ -651,6 +653,8 @@ type LegendListRef$1 = {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific item in the list.
@@ -665,6 +669,8 @@ type LegendListRef$1 = {
         item: any;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific offset in pixels.
@@ -763,6 +769,8 @@ interface ScrollIndexWithOffset {
     index: number;
     viewOffset?: number;
     viewPosition?: number;
+    /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+    viewPositionFallback?: "start" | "end";
 }
 interface ScrollIndexWithOffsetPosition extends ScrollIndexWithOffset {
     viewPosition?: number;

package/react-native.js

@@ -1321,10 +1321,17 @@ function getItemSizeAtIndex(ctx, index) {
 }
 
 // src/core/calculateOffsetWithOffsetPosition.ts
+function getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback) {
+  let alignment = viewPosition;
+  if (availableSpace < 0 && viewPositionFallback !== void 0) {
+    alignment = viewPositionFallback === "start" ? 0 : 1;
+  }
+  return -alignment * availableSpace;
+}
 function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
   var _a3;
   const state = ctx.state;
-  const { index, viewOffset, viewPosition } = params;
+  const { index, viewOffset, viewPosition, viewPositionFallback } = params;
   let offset = offsetParam;
   if (viewOffset) {
     offset -= viewOffset;
@@ -1345,7 +1352,8 @@ function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
     const measuredItemSize = isOutOfBounds ? fallbackEstimatedSize : getItemSize(ctx, getId(state, index), index, state.props.data[index]);
     const itemSize = Math.max(0, measuredItemSize - (isOutOfBounds ? 0 : ctx.scrollAxisGap));
     const trailingInset = getContentInsetEnd(ctx);
-    offset -= viewPosition * (state.scrollLength - trailingInset - itemSize);
+    const availableSpace = state.scrollLength - trailingInset - itemSize;
+    offset += getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback);
   }
   return offset;
 }
@@ -1732,15 +1740,27 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
           anchorPositionForLock = newPosition;
         }
       }
-      if (scrollingToViewPosition && scrollingToViewPosition > 0) {
+      if (scrollingTo && scrollingToViewPosition !== void 0 && (scrollingToViewPosition > 0 || scrollingTo.viewPositionFallback)) {
         const newSize = getItemSize(ctx, targetId, scrollTarget, state.props.data[scrollTarget]);
-        const prevSize = scrollingTo == null ? void 0 : scrollingTo.itemSize;
+        const prevSize = scrollingTo.itemSize;
         if (newSize !== void 0 && prevSize !== void 0 && newSize !== prevSize) {
-          const diff = newSize - prevSize;
-          if (diff !== 0) {
-            positionDiff += diff * scrollingToViewPosition;
-            scrollingTo.itemSize = newSize;
+          if (scrollingTo.viewPositionFallback) {
+            const viewport = state.scrollLength - getContentInsetEnd(ctx);
+            const previousSpace = viewport - Math.max(0, prevSize - ctx.scrollAxisGap);
+            const nextSpace = viewport - Math.max(0, newSize - ctx.scrollAxisGap);
+            positionDiff += getViewPositionOffset(
+              nextSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            ) - getViewPositionOffset(
+              previousSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            );
+          } else {
+            positionDiff += (newSize - prevSize) * scrollingToViewPosition;
           }
+          scrollingTo.itemSize = newSize;
         }
       }
       updateAnchorLock(state, {
@@ -2467,7 +2487,8 @@ function scrollToIndex(ctx, {
   animated = true,
   forceScroll,
   isInitialScroll,
-  viewPosition
+  viewPosition,
+  viewPositionFallback
 }) {
   const state = ctx.state;
   const { data } = state.props;
@@ -2487,7 +2508,8 @@ function scrollToIndex(ctx, {
     itemSize,
     offset: firstIndexOffset,
     viewOffset,
-    viewPosition: viewPosition != null ? viewPosition : 0
+    viewPosition: viewPosition != null ? viewPosition : 0,
+    viewPositionFallback
   });
 }
 
@@ -2507,6 +2529,7 @@ function dispatchInitialScroll(ctx, params) {
     precomputedWithViewOffset: true,
     viewOffset: target.viewOffset,
     viewPosition: target.viewPosition,
+    viewPositionFallback: target.viewPositionFallback,
     waitForInitialScrollCompletionFrame: waitForCompletionFrame
   });
 }
@@ -2841,7 +2864,7 @@ function createRetargetedBottomAlignedInitialScroll(options) {
   };
 }
 function areEquivalentBootstrapInitialScrollTargets(current, next) {
-  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition;
+  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition && current.viewPositionFallback === next.viewPositionFallback;
 }
 function clearPendingInitialScrollFooterLayout(ctx, options) {
   const { dataLength, stylePaddingEnd, target } = options;
@@ -3056,7 +3079,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
       preserveForFooterLayout: shouldPreserveInitialScrollForFooterLayout(initialScroll),
       stylePaddingEnd
     });
-    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
+    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewPositionFallback !== updatedInitialScroll.viewPositionFallback || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
     if (!didTargetChange) {
       clearPendingInitialScrollFooterLayout(ctx, {
         dataLength,
@@ -6652,6 +6675,10 @@ function handleLayout(ctx, layoutParam, setCanRender) {
     if (needsCalculate && (!didAllocate || state.initialScroll)) {
       calculateItemsInView(ctx, { doMVCP: true });
     }
+    const scrollTarget = state.scrollingTo;
+    if (scrollLength !== previousLength && (scrollTarget == null ? void 0 : scrollTarget.viewPositionFallback) && !scrollTarget.isInitialScroll && scrollTarget.index !== void 0) {
+      scrollToIndex(ctx, { ...scrollTarget, forceScroll: true, index: scrollTarget.index });
+    }
     if (didChange || otherAxisSize !== prevOtherAxisSize) {
       set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
     }
@@ -7570,9 +7597,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewPosition: 1
   } : hasInitialScrollIndex ? typeof initialScrollIndexProp === "object" ? {
     index: (_b = initialScrollIndexProp.index) != null ? _b : 0,
-    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 ? true : void 0,
-    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
-    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0
+    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? true : void 0,
+    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
+    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0,
+    viewPositionFallback: initialScrollIndexProp.viewPositionFallback
   } : {
     index: initialScrollIndexProp != null ? initialScrollIndexProp : 0,
     preserveForBottomPadding: shouldBottomAlignNumericInitialScrollIndex ? true : void 0,

package/react-native.mjs

@@ -1300,10 +1300,17 @@ function getItemSizeAtIndex(ctx, index) {
 }
 
 // src/core/calculateOffsetWithOffsetPosition.ts
+function getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback) {
+  let alignment = viewPosition;
+  if (availableSpace < 0 && viewPositionFallback !== void 0) {
+    alignment = viewPositionFallback === "start" ? 0 : 1;
+  }
+  return -alignment * availableSpace;
+}
 function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
   var _a3;
   const state = ctx.state;
-  const { index, viewOffset, viewPosition } = params;
+  const { index, viewOffset, viewPosition, viewPositionFallback } = params;
   let offset = offsetParam;
   if (viewOffset) {
     offset -= viewOffset;
@@ -1324,7 +1331,8 @@ function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
     const measuredItemSize = isOutOfBounds ? fallbackEstimatedSize : getItemSize(ctx, getId(state, index), index, state.props.data[index]);
     const itemSize = Math.max(0, measuredItemSize - (isOutOfBounds ? 0 : ctx.scrollAxisGap));
     const trailingInset = getContentInsetEnd(ctx);
-    offset -= viewPosition * (state.scrollLength - trailingInset - itemSize);
+    const availableSpace = state.scrollLength - trailingInset - itemSize;
+    offset += getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback);
   }
   return offset;
 }
@@ -1711,15 +1719,27 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
           anchorPositionForLock = newPosition;
         }
       }
-      if (scrollingToViewPosition && scrollingToViewPosition > 0) {
+      if (scrollingTo && scrollingToViewPosition !== void 0 && (scrollingToViewPosition > 0 || scrollingTo.viewPositionFallback)) {
         const newSize = getItemSize(ctx, targetId, scrollTarget, state.props.data[scrollTarget]);
-        const prevSize = scrollingTo == null ? void 0 : scrollingTo.itemSize;
+        const prevSize = scrollingTo.itemSize;
         if (newSize !== void 0 && prevSize !== void 0 && newSize !== prevSize) {
-          const diff = newSize - prevSize;
-          if (diff !== 0) {
-            positionDiff += diff * scrollingToViewPosition;
-            scrollingTo.itemSize = newSize;
+          if (scrollingTo.viewPositionFallback) {
+            const viewport = state.scrollLength - getContentInsetEnd(ctx);
+            const previousSpace = viewport - Math.max(0, prevSize - ctx.scrollAxisGap);
+            const nextSpace = viewport - Math.max(0, newSize - ctx.scrollAxisGap);
+            positionDiff += getViewPositionOffset(
+              nextSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            ) - getViewPositionOffset(
+              previousSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            );
+          } else {
+            positionDiff += (newSize - prevSize) * scrollingToViewPosition;
           }
+          scrollingTo.itemSize = newSize;
         }
       }
       updateAnchorLock(state, {
@@ -2446,7 +2466,8 @@ function scrollToIndex(ctx, {
   animated = true,
   forceScroll,
   isInitialScroll,
-  viewPosition
+  viewPosition,
+  viewPositionFallback
 }) {
   const state = ctx.state;
   const { data } = state.props;
@@ -2466,7 +2487,8 @@ function scrollToIndex(ctx, {
     itemSize,
     offset: firstIndexOffset,
     viewOffset,
-    viewPosition: viewPosition != null ? viewPosition : 0
+    viewPosition: viewPosition != null ? viewPosition : 0,
+    viewPositionFallback
   });
 }
 
@@ -2486,6 +2508,7 @@ function dispatchInitialScroll(ctx, params) {
     precomputedWithViewOffset: true,
     viewOffset: target.viewOffset,
     viewPosition: target.viewPosition,
+    viewPositionFallback: target.viewPositionFallback,
     waitForInitialScrollCompletionFrame: waitForCompletionFrame
   });
 }
@@ -2820,7 +2843,7 @@ function createRetargetedBottomAlignedInitialScroll(options) {
   };
 }
 function areEquivalentBootstrapInitialScrollTargets(current, next) {
-  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition;
+  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition && current.viewPositionFallback === next.viewPositionFallback;
 }
 function clearPendingInitialScrollFooterLayout(ctx, options) {
   const { dataLength, stylePaddingEnd, target } = options;
@@ -3035,7 +3058,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
       preserveForFooterLayout: shouldPreserveInitialScrollForFooterLayout(initialScroll),
       stylePaddingEnd
     });
-    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
+    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewPositionFallback !== updatedInitialScroll.viewPositionFallback || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
     if (!didTargetChange) {
       clearPendingInitialScrollFooterLayout(ctx, {
         dataLength,
@@ -6631,6 +6654,10 @@ function handleLayout(ctx, layoutParam, setCanRender) {
     if (needsCalculate && (!didAllocate || state.initialScroll)) {
       calculateItemsInView(ctx, { doMVCP: true });
     }
+    const scrollTarget = state.scrollingTo;
+    if (scrollLength !== previousLength && (scrollTarget == null ? void 0 : scrollTarget.viewPositionFallback) && !scrollTarget.isInitialScroll && scrollTarget.index !== void 0) {
+      scrollToIndex(ctx, { ...scrollTarget, forceScroll: true, index: scrollTarget.index });
+    }
     if (didChange || otherAxisSize !== prevOtherAxisSize) {
       set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
     }
@@ -7549,9 +7576,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewPosition: 1
   } : hasInitialScrollIndex ? typeof initialScrollIndexProp === "object" ? {
     index: (_b = initialScrollIndexProp.index) != null ? _b : 0,
-    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 ? true : void 0,
-    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
-    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0
+    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? true : void 0,
+    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
+    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0,
+    viewPositionFallback: initialScrollIndexProp.viewPositionFallback
   } : {
     index: initialScrollIndexProp != null ? initialScrollIndexProp : 0,
     preserveForBottomPadding: shouldBottomAlignNumericInitialScrollIndex ? true : void 0,

package/react-native.web.d.ts

@@ -252,6 +252,8 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     };
     /**
      * Initial scroll position in pixels.
@@ -678,6 +680,8 @@ type LegendListRef$1 = {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific item in the list.
@@ -692,6 +696,8 @@ type LegendListRef$1 = {
         item: any;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific offset in pixels.
@@ -790,6 +796,8 @@ interface ScrollIndexWithOffset {
     index: number;
     viewOffset?: number;
     viewPosition?: number;
+    /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+    viewPositionFallback?: "start" | "end";
 }
 interface ScrollIndexWithOffsetPosition extends ScrollIndexWithOffset {
     viewPosition?: number;

package/react-native.web.js

@@ -1285,10 +1285,17 @@ function getItemSizeAtIndex(ctx, index) {
 }
 
 // src/core/calculateOffsetWithOffsetPosition.ts
+function getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback) {
+  let alignment = viewPosition;
+  if (availableSpace < 0 && viewPositionFallback !== void 0) {
+    alignment = viewPositionFallback === "start" ? 0 : 1;
+  }
+  return -alignment * availableSpace;
+}
 function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
   var _a3;
   const state = ctx.state;
-  const { index, viewOffset, viewPosition } = params;
+  const { index, viewOffset, viewPosition, viewPositionFallback } = params;
   let offset = offsetParam;
   if (viewOffset) {
     offset -= viewOffset;
@@ -1309,7 +1316,8 @@ function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
     const measuredItemSize = isOutOfBounds ? fallbackEstimatedSize : getItemSize(ctx, getId(state, index), index, state.props.data[index]);
     const itemSize = Math.max(0, measuredItemSize - (isOutOfBounds ? 0 : ctx.scrollAxisGap));
     const trailingInset = getContentInsetEnd(ctx);
-    offset -= viewPosition * (state.scrollLength - trailingInset - itemSize);
+    const availableSpace = state.scrollLength - trailingInset - itemSize;
+    offset += getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback);
   }
   return offset;
 }
@@ -1656,15 +1664,27 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
           anchorPositionForLock = newPosition;
         }
       }
-      if (scrollingToViewPosition && scrollingToViewPosition > 0) {
+      if (scrollingTo && scrollingToViewPosition !== void 0 && (scrollingToViewPosition > 0 || scrollingTo.viewPositionFallback)) {
         const newSize = getItemSize(ctx, targetId, scrollTarget, state.props.data[scrollTarget]);
-        const prevSize = scrollingTo == null ? void 0 : scrollingTo.itemSize;
+        const prevSize = scrollingTo.itemSize;
         if (newSize !== void 0 && prevSize !== void 0 && newSize !== prevSize) {
-          const diff = newSize - prevSize;
-          if (diff !== 0) {
-            positionDiff += diff * scrollingToViewPosition;
-            scrollingTo.itemSize = newSize;
+          if (scrollingTo.viewPositionFallback) {
+            const viewport = state.scrollLength - getContentInsetEnd(ctx);
+            const previousSpace = viewport - Math.max(0, prevSize - ctx.scrollAxisGap);
+            const nextSpace = viewport - Math.max(0, newSize - ctx.scrollAxisGap);
+            positionDiff += getViewPositionOffset(
+              nextSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            ) - getViewPositionOffset(
+              previousSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            );
+          } else {
+            positionDiff += (newSize - prevSize) * scrollingToViewPosition;
           }
+          scrollingTo.itemSize = newSize;
         }
       }
       updateAnchorLock(state, {
@@ -2314,7 +2334,8 @@ function scrollToIndex(ctx, {
   animated = true,
   forceScroll,
   isInitialScroll,
-  viewPosition
+  viewPosition,
+  viewPositionFallback
 }) {
   const state = ctx.state;
   const { data } = state.props;
@@ -2334,7 +2355,8 @@ function scrollToIndex(ctx, {
     itemSize,
     offset: firstIndexOffset,
     viewOffset,
-    viewPosition: viewPosition != null ? viewPosition : 0
+    viewPosition: viewPosition != null ? viewPosition : 0,
+    viewPositionFallback
   });
 }
 
@@ -2354,6 +2376,7 @@ function dispatchInitialScroll(ctx, params) {
     precomputedWithViewOffset: true,
     viewOffset: target.viewOffset,
     viewPosition: target.viewPosition,
+    viewPositionFallback: target.viewPositionFallback,
     waitForInitialScrollCompletionFrame: waitForCompletionFrame
   });
 }
@@ -2688,7 +2711,7 @@ function createRetargetedBottomAlignedInitialScroll(options) {
   };
 }
 function areEquivalentBootstrapInitialScrollTargets(current, next) {
-  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition;
+  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition && current.viewPositionFallback === next.viewPositionFallback;
 }
 function clearPendingInitialScrollFooterLayout(ctx, options) {
   const { dataLength, stylePaddingEnd, target } = options;
@@ -2903,7 +2926,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
       preserveForFooterLayout: shouldPreserveInitialScrollForFooterLayout(initialScroll),
       stylePaddingEnd
     });
-    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
+    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewPositionFallback !== updatedInitialScroll.viewPositionFallback || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
     if (!didTargetChange) {
       clearPendingInitialScrollFooterLayout(ctx, {
         dataLength,
@@ -7348,6 +7371,10 @@ function handleLayout(ctx, layoutParam, setCanRender) {
     if (needsCalculate && (!didAllocate || state.initialScroll)) {
       calculateItemsInView(ctx, { doMVCP: true });
     }
+    const scrollTarget = state.scrollingTo;
+    if (scrollLength !== previousLength && (scrollTarget == null ? void 0 : scrollTarget.viewPositionFallback) && !scrollTarget.isInitialScroll && scrollTarget.index !== void 0) {
+      scrollToIndex(ctx, { ...scrollTarget, forceScroll: true, index: scrollTarget.index });
+    }
     if (didChange || otherAxisSize !== prevOtherAxisSize) {
       set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
     }
@@ -8246,9 +8273,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewPosition: 1
   } : hasInitialScrollIndex ? typeof initialScrollIndexProp === "object" ? {
     index: (_b = initialScrollIndexProp.index) != null ? _b : 0,
-    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 ? true : void 0,
-    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
-    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0
+    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? true : void 0,
+    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
+    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0,
+    viewPositionFallback: initialScrollIndexProp.viewPositionFallback
   } : {
     index: initialScrollIndexProp != null ? initialScrollIndexProp : 0,
     preserveForBottomPadding: shouldBottomAlignNumericInitialScrollIndex ? true : void 0,

package/react-native.web.mjs

@@ -1264,10 +1264,17 @@ function getItemSizeAtIndex(ctx, index) {
 }
 
 // src/core/calculateOffsetWithOffsetPosition.ts
+function getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback) {
+  let alignment = viewPosition;
+  if (availableSpace < 0 && viewPositionFallback !== void 0) {
+    alignment = viewPositionFallback === "start" ? 0 : 1;
+  }
+  return -alignment * availableSpace;
+}
 function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
   var _a3;
   const state = ctx.state;
-  const { index, viewOffset, viewPosition } = params;
+  const { index, viewOffset, viewPosition, viewPositionFallback } = params;
   let offset = offsetParam;
   if (viewOffset) {
     offset -= viewOffset;
@@ -1288,7 +1295,8 @@ function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
     const measuredItemSize = isOutOfBounds ? fallbackEstimatedSize : getItemSize(ctx, getId(state, index), index, state.props.data[index]);
     const itemSize = Math.max(0, measuredItemSize - (isOutOfBounds ? 0 : ctx.scrollAxisGap));
     const trailingInset = getContentInsetEnd(ctx);
-    offset -= viewPosition * (state.scrollLength - trailingInset - itemSize);
+    const availableSpace = state.scrollLength - trailingInset - itemSize;
+    offset += getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback);
   }
   return offset;
 }
@@ -1635,15 +1643,27 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
           anchorPositionForLock = newPosition;
         }
       }
-      if (scrollingToViewPosition && scrollingToViewPosition > 0) {
+      if (scrollingTo && scrollingToViewPosition !== void 0 && (scrollingToViewPosition > 0 || scrollingTo.viewPositionFallback)) {
         const newSize = getItemSize(ctx, targetId, scrollTarget, state.props.data[scrollTarget]);
-        const prevSize = scrollingTo == null ? void 0 : scrollingTo.itemSize;
+        const prevSize = scrollingTo.itemSize;
         if (newSize !== void 0 && prevSize !== void 0 && newSize !== prevSize) {
-          const diff = newSize - prevSize;
-          if (diff !== 0) {
-            positionDiff += diff * scrollingToViewPosition;
-            scrollingTo.itemSize = newSize;
+          if (scrollingTo.viewPositionFallback) {
+            const viewport = state.scrollLength - getContentInsetEnd(ctx);
+            const previousSpace = viewport - Math.max(0, prevSize - ctx.scrollAxisGap);
+            const nextSpace = viewport - Math.max(0, newSize - ctx.scrollAxisGap);
+            positionDiff += getViewPositionOffset(
+              nextSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            ) - getViewPositionOffset(
+              previousSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            );
+          } else {
+            positionDiff += (newSize - prevSize) * scrollingToViewPosition;
           }
+          scrollingTo.itemSize = newSize;
         }
       }
       updateAnchorLock(state, {
@@ -2293,7 +2313,8 @@ function scrollToIndex(ctx, {
   animated = true,
   forceScroll,
   isInitialScroll,
-  viewPosition
+  viewPosition,
+  viewPositionFallback
 }) {
   const state = ctx.state;
   const { data } = state.props;
@@ -2313,7 +2334,8 @@ function scrollToIndex(ctx, {
     itemSize,
     offset: firstIndexOffset,
     viewOffset,
-    viewPosition: viewPosition != null ? viewPosition : 0
+    viewPosition: viewPosition != null ? viewPosition : 0,
+    viewPositionFallback
   });
 }
 
@@ -2333,6 +2355,7 @@ function dispatchInitialScroll(ctx, params) {
     precomputedWithViewOffset: true,
     viewOffset: target.viewOffset,
     viewPosition: target.viewPosition,
+    viewPositionFallback: target.viewPositionFallback,
     waitForInitialScrollCompletionFrame: waitForCompletionFrame
   });
 }
@@ -2667,7 +2690,7 @@ function createRetargetedBottomAlignedInitialScroll(options) {
   };
 }
 function areEquivalentBootstrapInitialScrollTargets(current, next) {
-  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition;
+  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition && current.viewPositionFallback === next.viewPositionFallback;
 }
 function clearPendingInitialScrollFooterLayout(ctx, options) {
   const { dataLength, stylePaddingEnd, target } = options;
@@ -2882,7 +2905,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
       preserveForFooterLayout: shouldPreserveInitialScrollForFooterLayout(initialScroll),
       stylePaddingEnd
     });
-    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
+    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewPositionFallback !== updatedInitialScroll.viewPositionFallback || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
     if (!didTargetChange) {
       clearPendingInitialScrollFooterLayout(ctx, {
         dataLength,
@@ -7327,6 +7350,10 @@ function handleLayout(ctx, layoutParam, setCanRender) {
     if (needsCalculate && (!didAllocate || state.initialScroll)) {
       calculateItemsInView(ctx, { doMVCP: true });
     }
+    const scrollTarget = state.scrollingTo;
+    if (scrollLength !== previousLength && (scrollTarget == null ? void 0 : scrollTarget.viewPositionFallback) && !scrollTarget.isInitialScroll && scrollTarget.index !== void 0) {
+      scrollToIndex(ctx, { ...scrollTarget, forceScroll: true, index: scrollTarget.index });
+    }
     if (didChange || otherAxisSize !== prevOtherAxisSize) {
       set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
     }
@@ -8225,9 +8252,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewPosition: 1
   } : hasInitialScrollIndex ? typeof initialScrollIndexProp === "object" ? {
     index: (_b = initialScrollIndexProp.index) != null ? _b : 0,
-    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 ? true : void 0,
-    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
-    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0
+    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? true : void 0,
+    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
+    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0,
+    viewPositionFallback: initialScrollIndexProp.viewPositionFallback
   } : {
     index: initialScrollIndexProp != null ? initialScrollIndexProp : 0,
     preserveForBottomPadding: shouldBottomAlignNumericInitialScrollIndex ? true : void 0,

package/react.d.ts

@@ -252,6 +252,8 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     };
     /**
      * Initial scroll position in pixels.
@@ -678,6 +680,8 @@ type LegendListRef$1 = {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific item in the list.
@@ -692,6 +696,8 @@ type LegendListRef$1 = {
         item: any;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific offset in pixels.
@@ -790,6 +796,8 @@ interface ScrollIndexWithOffset {
     index: number;
     viewOffset?: number;
     viewPosition?: number;
+    /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+    viewPositionFallback?: "start" | "end";
 }
 interface ScrollIndexWithOffsetPosition extends ScrollIndexWithOffset {
     viewPosition?: number;

package/react.js

@@ -1285,10 +1285,17 @@ function getItemSizeAtIndex(ctx, index) {
 }
 
 // src/core/calculateOffsetWithOffsetPosition.ts
+function getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback) {
+  let alignment = viewPosition;
+  if (availableSpace < 0 && viewPositionFallback !== void 0) {
+    alignment = viewPositionFallback === "start" ? 0 : 1;
+  }
+  return -alignment * availableSpace;
+}
 function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
   var _a3;
   const state = ctx.state;
-  const { index, viewOffset, viewPosition } = params;
+  const { index, viewOffset, viewPosition, viewPositionFallback } = params;
   let offset = offsetParam;
   if (viewOffset) {
     offset -= viewOffset;
@@ -1309,7 +1316,8 @@ function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
     const measuredItemSize = isOutOfBounds ? fallbackEstimatedSize : getItemSize(ctx, getId(state, index), index, state.props.data[index]);
     const itemSize = Math.max(0, measuredItemSize - (isOutOfBounds ? 0 : ctx.scrollAxisGap));
     const trailingInset = getContentInsetEnd(ctx);
-    offset -= viewPosition * (state.scrollLength - trailingInset - itemSize);
+    const availableSpace = state.scrollLength - trailingInset - itemSize;
+    offset += getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback);
   }
   return offset;
 }
@@ -1656,15 +1664,27 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
           anchorPositionForLock = newPosition;
         }
       }
-      if (scrollingToViewPosition && scrollingToViewPosition > 0) {
+      if (scrollingTo && scrollingToViewPosition !== void 0 && (scrollingToViewPosition > 0 || scrollingTo.viewPositionFallback)) {
         const newSize = getItemSize(ctx, targetId, scrollTarget, state.props.data[scrollTarget]);
-        const prevSize = scrollingTo == null ? void 0 : scrollingTo.itemSize;
+        const prevSize = scrollingTo.itemSize;
         if (newSize !== void 0 && prevSize !== void 0 && newSize !== prevSize) {
-          const diff = newSize - prevSize;
-          if (diff !== 0) {
-            positionDiff += diff * scrollingToViewPosition;
-            scrollingTo.itemSize = newSize;
+          if (scrollingTo.viewPositionFallback) {
+            const viewport = state.scrollLength - getContentInsetEnd(ctx);
+            const previousSpace = viewport - Math.max(0, prevSize - ctx.scrollAxisGap);
+            const nextSpace = viewport - Math.max(0, newSize - ctx.scrollAxisGap);
+            positionDiff += getViewPositionOffset(
+              nextSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            ) - getViewPositionOffset(
+              previousSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            );
+          } else {
+            positionDiff += (newSize - prevSize) * scrollingToViewPosition;
           }
+          scrollingTo.itemSize = newSize;
         }
       }
       updateAnchorLock(state, {
@@ -2314,7 +2334,8 @@ function scrollToIndex(ctx, {
   animated = true,
   forceScroll,
   isInitialScroll,
-  viewPosition
+  viewPosition,
+  viewPositionFallback
 }) {
   const state = ctx.state;
   const { data } = state.props;
@@ -2334,7 +2355,8 @@ function scrollToIndex(ctx, {
     itemSize,
     offset: firstIndexOffset,
     viewOffset,
-    viewPosition: viewPosition != null ? viewPosition : 0
+    viewPosition: viewPosition != null ? viewPosition : 0,
+    viewPositionFallback
   });
 }
 
@@ -2354,6 +2376,7 @@ function dispatchInitialScroll(ctx, params) {
     precomputedWithViewOffset: true,
     viewOffset: target.viewOffset,
     viewPosition: target.viewPosition,
+    viewPositionFallback: target.viewPositionFallback,
     waitForInitialScrollCompletionFrame: waitForCompletionFrame
   });
 }
@@ -2688,7 +2711,7 @@ function createRetargetedBottomAlignedInitialScroll(options) {
   };
 }
 function areEquivalentBootstrapInitialScrollTargets(current, next) {
-  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition;
+  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition && current.viewPositionFallback === next.viewPositionFallback;
 }
 function clearPendingInitialScrollFooterLayout(ctx, options) {
   const { dataLength, stylePaddingEnd, target } = options;
@@ -2903,7 +2926,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
       preserveForFooterLayout: shouldPreserveInitialScrollForFooterLayout(initialScroll),
       stylePaddingEnd
     });
-    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
+    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewPositionFallback !== updatedInitialScroll.viewPositionFallback || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
     if (!didTargetChange) {
       clearPendingInitialScrollFooterLayout(ctx, {
         dataLength,
@@ -7348,6 +7371,10 @@ function handleLayout(ctx, layoutParam, setCanRender) {
     if (needsCalculate && (!didAllocate || state.initialScroll)) {
       calculateItemsInView(ctx, { doMVCP: true });
     }
+    const scrollTarget = state.scrollingTo;
+    if (scrollLength !== previousLength && (scrollTarget == null ? void 0 : scrollTarget.viewPositionFallback) && !scrollTarget.isInitialScroll && scrollTarget.index !== void 0) {
+      scrollToIndex(ctx, { ...scrollTarget, forceScroll: true, index: scrollTarget.index });
+    }
     if (didChange || otherAxisSize !== prevOtherAxisSize) {
       set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
     }
@@ -8246,9 +8273,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewPosition: 1
   } : hasInitialScrollIndex ? typeof initialScrollIndexProp === "object" ? {
     index: (_b = initialScrollIndexProp.index) != null ? _b : 0,
-    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 ? true : void 0,
-    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
-    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0
+    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? true : void 0,
+    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
+    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0,
+    viewPositionFallback: initialScrollIndexProp.viewPositionFallback
   } : {
     index: initialScrollIndexProp != null ? initialScrollIndexProp : 0,
     preserveForBottomPadding: shouldBottomAlignNumericInitialScrollIndex ? true : void 0,

package/react.mjs

@@ -1264,10 +1264,17 @@ function getItemSizeAtIndex(ctx, index) {
 }
 
 // src/core/calculateOffsetWithOffsetPosition.ts
+function getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback) {
+  let alignment = viewPosition;
+  if (availableSpace < 0 && viewPositionFallback !== void 0) {
+    alignment = viewPositionFallback === "start" ? 0 : 1;
+  }
+  return -alignment * availableSpace;
+}
 function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
   var _a3;
   const state = ctx.state;
-  const { index, viewOffset, viewPosition } = params;
+  const { index, viewOffset, viewPosition, viewPositionFallback } = params;
   let offset = offsetParam;
   if (viewOffset) {
     offset -= viewOffset;
@@ -1288,7 +1295,8 @@ function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
     const measuredItemSize = isOutOfBounds ? fallbackEstimatedSize : getItemSize(ctx, getId(state, index), index, state.props.data[index]);
     const itemSize = Math.max(0, measuredItemSize - (isOutOfBounds ? 0 : ctx.scrollAxisGap));
     const trailingInset = getContentInsetEnd(ctx);
-    offset -= viewPosition * (state.scrollLength - trailingInset - itemSize);
+    const availableSpace = state.scrollLength - trailingInset - itemSize;
+    offset += getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback);
   }
   return offset;
 }
@@ -1635,15 +1643,27 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
           anchorPositionForLock = newPosition;
         }
       }
-      if (scrollingToViewPosition && scrollingToViewPosition > 0) {
+      if (scrollingTo && scrollingToViewPosition !== void 0 && (scrollingToViewPosition > 0 || scrollingTo.viewPositionFallback)) {
         const newSize = getItemSize(ctx, targetId, scrollTarget, state.props.data[scrollTarget]);
-        const prevSize = scrollingTo == null ? void 0 : scrollingTo.itemSize;
+        const prevSize = scrollingTo.itemSize;
         if (newSize !== void 0 && prevSize !== void 0 && newSize !== prevSize) {
-          const diff = newSize - prevSize;
-          if (diff !== 0) {
-            positionDiff += diff * scrollingToViewPosition;
-            scrollingTo.itemSize = newSize;
+          if (scrollingTo.viewPositionFallback) {
+            const viewport = state.scrollLength - getContentInsetEnd(ctx);
+            const previousSpace = viewport - Math.max(0, prevSize - ctx.scrollAxisGap);
+            const nextSpace = viewport - Math.max(0, newSize - ctx.scrollAxisGap);
+            positionDiff += getViewPositionOffset(
+              nextSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            ) - getViewPositionOffset(
+              previousSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            );
+          } else {
+            positionDiff += (newSize - prevSize) * scrollingToViewPosition;
           }
+          scrollingTo.itemSize = newSize;
         }
       }
       updateAnchorLock(state, {
@@ -2293,7 +2313,8 @@ function scrollToIndex(ctx, {
   animated = true,
   forceScroll,
   isInitialScroll,
-  viewPosition
+  viewPosition,
+  viewPositionFallback
 }) {
   const state = ctx.state;
   const { data } = state.props;
@@ -2313,7 +2334,8 @@ function scrollToIndex(ctx, {
     itemSize,
     offset: firstIndexOffset,
     viewOffset,
-    viewPosition: viewPosition != null ? viewPosition : 0
+    viewPosition: viewPosition != null ? viewPosition : 0,
+    viewPositionFallback
   });
 }
 
@@ -2333,6 +2355,7 @@ function dispatchInitialScroll(ctx, params) {
     precomputedWithViewOffset: true,
     viewOffset: target.viewOffset,
     viewPosition: target.viewPosition,
+    viewPositionFallback: target.viewPositionFallback,
     waitForInitialScrollCompletionFrame: waitForCompletionFrame
   });
 }
@@ -2667,7 +2690,7 @@ function createRetargetedBottomAlignedInitialScroll(options) {
   };
 }
 function areEquivalentBootstrapInitialScrollTargets(current, next) {
-  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition;
+  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition && current.viewPositionFallback === next.viewPositionFallback;
 }
 function clearPendingInitialScrollFooterLayout(ctx, options) {
   const { dataLength, stylePaddingEnd, target } = options;
@@ -2882,7 +2905,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
       preserveForFooterLayout: shouldPreserveInitialScrollForFooterLayout(initialScroll),
       stylePaddingEnd
     });
-    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
+    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewPositionFallback !== updatedInitialScroll.viewPositionFallback || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
     if (!didTargetChange) {
       clearPendingInitialScrollFooterLayout(ctx, {
         dataLength,
@@ -7327,6 +7350,10 @@ function handleLayout(ctx, layoutParam, setCanRender) {
     if (needsCalculate && (!didAllocate || state.initialScroll)) {
       calculateItemsInView(ctx, { doMVCP: true });
     }
+    const scrollTarget = state.scrollingTo;
+    if (scrollLength !== previousLength && (scrollTarget == null ? void 0 : scrollTarget.viewPositionFallback) && !scrollTarget.isInitialScroll && scrollTarget.index !== void 0) {
+      scrollToIndex(ctx, { ...scrollTarget, forceScroll: true, index: scrollTarget.index });
+    }
     if (didChange || otherAxisSize !== prevOtherAxisSize) {
       set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
     }
@@ -8225,9 +8252,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewPosition: 1
   } : hasInitialScrollIndex ? typeof initialScrollIndexProp === "object" ? {
     index: (_b = initialScrollIndexProp.index) != null ? _b : 0,
-    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 ? true : void 0,
-    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
-    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0
+    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? true : void 0,
+    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
+    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0,
+    viewPositionFallback: initialScrollIndexProp.viewPositionFallback
   } : {
     index: initialScrollIndexProp != null ? initialScrollIndexProp : 0,
     preserveForBottomPadding: shouldBottomAlignNumericInitialScrollIndex ? true : void 0,

package/reanimated.d.ts

@@ -226,6 +226,8 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     };
     /**
      * Initial scroll position in pixels.
@@ -652,6 +654,8 @@ type LegendListRef$1 = {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific item in the list.
@@ -666,6 +670,8 @@ type LegendListRef$1 = {
         item: any;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific offset in pixels.

package/section-list.d.ts

@@ -1,5 +1,5 @@
 import * as react_native from 'react-native';
-import { SectionListData, ScrollViewProps, NativeSyntheticEvent as NativeSyntheticEvent$1, NativeScrollEvent as NativeScrollEvent$1, ScrollView, StyleProp as StyleProp$1, ViewStyle as ViewStyle$1, ScrollViewComponent, ScrollResponderMixin, Insets as Insets$1, SectionBase, SectionListRenderItemInfo, SectionListScrollParams } from 'react-native';
+import { SectionListData, ScrollViewProps, NativeSyntheticEvent as NativeSyntheticEvent$1, NativeScrollEvent as NativeScrollEvent$1, ScrollView, StyleProp as StyleProp$1, ViewStyle as ViewStyle$1, ScrollViewComponent, ScrollResponderMixin, Insets as Insets$1, SectionBase, SectionListRenderItemInfo, SectionListScrollParams as SectionListScrollParams$1 } from 'react-native';
 import * as React from 'react';
 import { Key } from 'react';
 
@@ -282,6 +282,8 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     };
     /**
      * Initial scroll position in pixels.
@@ -708,6 +710,8 @@ type LegendListRef$1 = {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific item in the list.
@@ -722,6 +726,8 @@ type LegendListRef$1 = {
         item: any;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific offset in pixels.
@@ -818,6 +824,9 @@ type LegendListRef = Omit<LegendListRef$1, "getAnimatableRef" | "getNativeScroll
     reportContentInset(inset?: Partial<Insets$1> | null): void;
 };
 
+type SectionListScrollParams = SectionListScrollParams$1 & {
+    viewPositionFallback?: "start" | "end";
+};
 type SectionListViewToken<ItemT, SectionT> = {
     item: ItemT;
     key: string;

package/section-list.js

@@ -281,7 +281,14 @@ var SectionList = typedMemo(
       ]
     );
     const scrollToLocation = React__namespace.useCallback(
-      ({ sectionIndex, itemIndex, viewOffset, viewPosition, animated }) => {
+      ({
+        sectionIndex,
+        itemIndex,
+        viewOffset,
+        viewPosition,
+        viewPositionFallback,
+        animated
+      }) => {
         var _a, _b, _c;
         const meta = sectionMeta[sectionIndex];
         if (!meta) return;
@@ -291,7 +298,8 @@ var SectionList = typedMemo(
           animated,
           index: target,
           viewOffset,
-          viewPosition
+          viewPosition,
+          viewPositionFallback
         });
       },
       [sectionMeta]

package/section-list.mjs

@@ -259,7 +259,14 @@ var SectionList = typedMemo(
       ]
     );
     const scrollToLocation = React.useCallback(
-      ({ sectionIndex, itemIndex, viewOffset, viewPosition, animated }) => {
+      ({
+        sectionIndex,
+        itemIndex,
+        viewOffset,
+        viewPosition,
+        viewPositionFallback,
+        animated
+      }) => {
         var _a, _b, _c;
         const meta = sectionMeta[sectionIndex];
         if (!meta) return;
@@ -269,7 +276,8 @@ var SectionList = typedMemo(
           animated,
           index: target,
           viewOffset,
-          viewPosition
+          viewPosition,
+          viewPositionFallback
         });
       },
       [sectionMeta]