@legendapp/list 3.0.5 → 3.0.6

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 3.0.6
+
+- Fix: KeyboardAwareLegendList now accounts for bottom insets when alignItemsAtEnd is used, so short chat-style lists stay pinned above the keyboard or safe area instead of being pushed too low or leaving extra scroll space.
+
 ## 3.0.5
 
 - Fix: clearCaches now rechecks the rows that are already on screen, so resetting the size cache does not leave items stuck in old positions.

package/animated.d.ts

@@ -8,10 +8,11 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
+    alignItemsAtEndPadding: number;
     anchoredEndSpaceSize: number;
     animatedScrollY: any;
     debugComputedScroll: number;

package/keyboard-legacy.d.ts

@@ -9,10 +9,11 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
+    alignItemsAtEndPadding: number;
     anchoredEndSpaceSize: number;
     animatedScrollY: any;
     debugComputedScroll: number;

package/keyboard.d.ts

@@ -10,10 +10,11 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
+    alignItemsAtEndPadding: number;
     anchoredEndSpaceSize: number;
     animatedScrollY: any;
     debugComputedScroll: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "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

@@ -8,10 +8,11 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
+    alignItemsAtEndPadding: number;
     anchoredEndSpaceSize: number;
     animatedScrollY: any;
     debugComputedScroll: number;

package/react-native.js

@@ -154,6 +154,7 @@ function StateProvider({ children }) {
     positionListeners: /* @__PURE__ */ new Map(),
     state: void 0,
     values: /* @__PURE__ */ new Map([
+      ["alignItemsAtEndPadding", 0],
       ["stylePaddingTop", 0],
       ["headerSize", 0],
       ["numContainers", 0],
@@ -296,15 +297,16 @@ function getContentInsetEnd(ctx, contentInsetEndAdjustmentOverride) {
 
 // src/state/getContentSize.ts
 function getContentSize(ctx) {
-  var _a3;
+  var _a3, _b;
   const { values, state } = ctx;
   const stylePaddingTop = values.get("stylePaddingTop") || 0;
   const stylePaddingBottom = state.props.stylePaddingBottom || 0;
+  const alignItemsAtEndPadding = values.get("alignItemsAtEndPadding") || 0;
   const headerSize = values.get("headerSize") || 0;
   const footerSize = values.get("footerSize") || 0;
   const contentInsetBottom = getContentInsetEnd(ctx);
-  const totalSize = (_a3 = state.pendingTotalSize) != null ? _a3 : values.get("totalSize");
-  return headerSize + footerSize + totalSize + stylePaddingTop + stylePaddingBottom + (contentInsetBottom || 0);
+  const totalSize = (_b = (_a3 = state.pendingTotalSize) != null ? _a3 : state.totalSize) != null ? _b : values.get("totalSize");
+  return headerSize + footerSize + totalSize + stylePaddingTop + alignItemsAtEndPadding + stylePaddingBottom + (contentInsetBottom || 0);
 }
 
 // src/components/DebugView.tsx
@@ -479,8 +481,16 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   ...rest
 }) {
   const ctx = useStateContext();
-  const [position = POSITION_OUT_OF_VIEW, headerSize = 0, stylePaddingTop = 0, itemKey, _totalSize = 0] = useArr$([
+  const [
+    position = POSITION_OUT_OF_VIEW,
+    alignItemsAtEndPadding = 0,
+    headerSize = 0,
+    stylePaddingTop = 0,
+    itemKey,
+    _totalSize = 0
+  ] = useArr$([
     `containerPosition${id}`,
+    "alignItemsAtEndPadding",
     "headerSize",
     "stylePaddingTop",
     `containerItemKey${id}`,
@@ -494,7 +504,7 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
     var _a3;
     if (animatedScrollY) {
       const stickyConfigOffset = (_a3 = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a3 : 0;
-      const stickyStart = position + headerSize + stylePaddingTop - stickyConfigOffset;
+      const stickyStart = position + headerSize + stylePaddingTop + alignItemsAtEndPadding - stickyConfigOffset;
       let nextStickyPosition;
       if (pushLimit !== void 0) {
         if (pushLimit <= position) {
@@ -517,7 +527,15 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
       }
       return horizontal ? [{ translateX: nextStickyPosition }] : [{ translateY: nextStickyPosition }];
     }
-  }, [animatedScrollY, headerSize, position, pushLimit, stylePaddingTop, stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset]);
+  }, [
+    alignItemsAtEndPadding,
+    animatedScrollY,
+    headerSize,
+    position,
+    pushLimit,
+    stylePaddingTop,
+    stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset
+  ]);
   const viewStyle = React2__namespace.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
   const renderStickyHeaderBackdrop = React2__namespace.useMemo(() => {
     if (!(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)) {
@@ -1174,6 +1192,51 @@ function WebAnchoredEndSpace({ horizontal }) {
   const style = horizontal ? { height: "100%", width: anchoredEndSpaceSize || 0 } : { height: anchoredEndSpaceSize || 0 };
   return /* @__PURE__ */ React2__namespace.createElement("div", { style }, null);
 }
+
+// src/core/updateContentMetrics.ts
+function getRawContentLength(ctx) {
+  var _a3, _b, _c;
+  const { state, values } = ctx;
+  return (values.get("headerSize") || 0) + (values.get("footerSize") || 0) + ((_c = (_b = (_a3 = state.pendingTotalSize) != null ? _a3 : state.totalSize) != null ? _b : values.get("totalSize")) != null ? _c : 0) + (state.props.stylePaddingTop || 0) + (state.props.stylePaddingBottom || 0);
+}
+function getAlignItemsAtEndPadding(ctx) {
+  const { state } = ctx;
+  const shouldPad = !!state.props.alignItemsAtEndPaddingEnabled && !state.props.horizontal && state.props.data.length > 0 && state.scrollLength > 0;
+  return shouldPad ? Math.max(0, state.scrollLength - getRawContentLength(ctx) - getContentInsetEnd(ctx)) : 0;
+}
+function updateContentMetrics(ctx) {
+  const nextPadding = getAlignItemsAtEndPadding(ctx);
+  if (peek$(ctx, "alignItemsAtEndPadding") !== nextPadding) {
+    set$(ctx, "alignItemsAtEndPadding", nextPadding);
+  }
+}
+function setContentLengthSignal(ctx, signalName, size) {
+  if (peek$(ctx, signalName) !== size) {
+    set$(ctx, signalName, size);
+    updateContentMetrics(ctx);
+  }
+}
+function setHeaderSize(ctx, size) {
+  setContentLengthSignal(ctx, "headerSize", size);
+}
+function setFooterSize(ctx, size) {
+  setContentLengthSignal(ctx, "footerSize", size);
+}
+function areInsetsEqual(left, right) {
+  var _a3, _b, _c, _d, _e, _f, _g, _h;
+  return ((_a3 = left == null ? void 0 : left.top) != null ? _a3 : 0) === ((_b = right == null ? void 0 : right.top) != null ? _b : 0) && ((_c = left == null ? void 0 : left.bottom) != null ? _c : 0) === ((_d = right == null ? void 0 : right.bottom) != null ? _d : 0) && ((_e = left == null ? void 0 : left.left) != null ? _e : 0) === ((_f = right == null ? void 0 : right.left) != null ? _f : 0) && ((_g = left == null ? void 0 : left.right) != null ? _g : 0) === ((_h = right == null ? void 0 : right.right) != null ? _h : 0);
+}
+function setContentInsetOverride(ctx, inset) {
+  const { state } = ctx;
+  const previousInset = state.contentInsetOverride;
+  const nextInset = inset != null ? inset : void 0;
+  const didChange = !areInsetsEqual(previousInset, nextInset);
+  state.contentInsetOverride = nextInset;
+  if (didChange) {
+    updateContentMetrics(ctx);
+  }
+  return didChange;
+}
 function useLatestRef(value) {
   const ref = React2__namespace.useRef(value);
   ref.current = value;
@@ -1232,7 +1295,7 @@ var ListComponent = typedMemo(function ListComponent2({
 }) {
   const ctx = useStateContext();
   const maintainVisibleContentPosition = ctx.state.props.maintainVisibleContentPosition;
-  const [otherAxisSize = 0] = useArr$(["otherAxisSize"]);
+  const [alignItemsAtEndPadding = 0, otherAxisSize = 0] = useArr$(["alignItemsAtEndPadding", "otherAxisSize"]);
   const autoOtherAxisStyle = getAutoOtherAxisStyle({
     horizontal,
     needsOtherAxisSize: ctx.state.needsOtherAxisSize,
@@ -1246,23 +1309,23 @@ var ListComponent = typedMemo(function ListComponent2({
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
   React2.useLayoutEffect(() => {
     if (!ListHeaderComponent) {
-      set$(ctx, "headerSize", 0);
+      setHeaderSize(ctx, 0);
     }
     if (!ListFooterComponent) {
-      set$(ctx, "footerSize", 0);
+      setFooterSize(ctx, 0);
     }
   }, [ListHeaderComponent, ListFooterComponent, ctx]);
   const onLayoutHeader = React2.useCallback(
     (rect) => {
       const size = rect[horizontal ? "width" : "height"];
-      set$(ctx, "headerSize", size);
+      setHeaderSize(ctx, size);
     },
     [ctx, horizontal]
   );
   const onLayoutFooterInternal = React2.useCallback(
     (rect, fromLayoutEffect) => {
       const size = rect[horizontal ? "width" : "height"];
-      set$(ctx, "footerSize", size);
+      setFooterSize(ctx, size);
       onLayoutFooter == null ? void 0 : onLayoutFooter(rect, fromLayoutEffect);
     },
     [ctx, horizontal, onLayoutFooter]
@@ -1290,6 +1353,13 @@ var ListComponent = typedMemo(function ListComponent2({
     /* @__PURE__ */ React2__namespace.createElement(ScrollAdjust, null),
     ListHeaderComponent && /* @__PURE__ */ React2__namespace.createElement(LayoutView, { onLayoutChange: onLayoutHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
     ListEmptyComponent && getComponent(ListEmptyComponent),
+    alignItemsAtEndPadding > 0 && /* @__PURE__ */ React2__namespace.createElement(
+      View,
+      {
+        style: horizontal ? { flexShrink: 0, width: alignItemsAtEndPadding } : { flexShrink: 0, height: alignItemsAtEndPadding }
+      },
+      null
+    ),
     canRender && !ListEmptyComponent && /* @__PURE__ */ React2__namespace.createElement(
       Containers,
       {
@@ -1781,7 +1851,7 @@ function calculateOffsetForIndex(ctx, index) {
 
 // src/core/getTopOffsetAdjustment.ts
 function getTopOffsetAdjustment(ctx) {
-  return (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+  return (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "alignItemsAtEndPadding") || 0) + (peek$(ctx, "headerSize") || 0);
 }
 
 // src/utils/getId.ts
@@ -1819,6 +1889,7 @@ function addTotalSize(ctx, key, add, notifyTotalSize = true) {
       if (notifyTotalSize) {
         set$(ctx, "totalSize", totalSize);
       }
+      updateContentMetrics(ctx);
     }
   } else if (notifyTotalSize && ctx.values.get("totalSize") !== totalSize) {
     set$(ctx, "totalSize", totalSize);
@@ -4166,7 +4237,7 @@ function areViewabilityAmountTokensEqual(prev, next) {
 }
 function computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
   const { sizes, scroll: scrollState } = state;
-  const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+  const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "alignItemsAtEndPadding") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
   const viewAreaMode = viewAreaCoveragePercentThreshold != null;
   const viewablePercentThreshold = viewAreaMode ? viewAreaCoveragePercentThreshold : itemVisiblePercentThreshold;
@@ -4617,7 +4688,7 @@ function calculateItemsInView(ctx, params = {}) {
       return;
     }
     let totalSize = getContentSize(ctx);
-    const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
+    const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "alignItemsAtEndPadding") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
     const speed = getScrollVelocity(state);
     const scrollExtra = 0;
@@ -5157,6 +5228,7 @@ function handleLayout(ctx, layoutParam, setCanRender) {
   if (didChange) {
     state.scrollLength = scrollLength;
     state.otherAxisSize = otherAxisSize;
+    updateContentMetrics(ctx);
     state.lastBatchingAction = Date.now();
     state.scrollForNextCalculateItemsInView = void 0;
     if (scrollLength > 0) {
@@ -5844,10 +5916,7 @@ function createImperativeHandle(ctx, scheduleImperativeScrollCommit) {
       startBuffered: state.startBuffered
     }),
     reportContentInset: (inset) => {
-      var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-      const previousInset = state.contentInsetOverride;
-      state.contentInsetOverride = inset != null ? inset : void 0;
-      const didChange = ((_a3 = previousInset == null ? void 0 : previousInset.top) != null ? _a3 : 0) !== ((_c = (_b = state.contentInsetOverride) == null ? void 0 : _b.top) != null ? _c : 0) || ((_d = previousInset == null ? void 0 : previousInset.bottom) != null ? _d : 0) !== ((_f = (_e = state.contentInsetOverride) == null ? void 0 : _e.bottom) != null ? _f : 0) || ((_g = previousInset == null ? void 0 : previousInset.left) != null ? _g : 0) !== ((_i = (_h = state.contentInsetOverride) == null ? void 0 : _h.left) != null ? _i : 0) || ((_j = previousInset == null ? void 0 : previousInset.right) != null ? _j : 0) !== ((_l = (_k = state.contentInsetOverride) == null ? void 0 : _k.right) != null ? _l : 0);
+      const didChange = setContentInsetOverride(ctx, inset);
       updateScroll(ctx, state.scroll, true, { markHasScrolled: false });
       if (didChange) {
         retargetActiveInitialScrollAtEnd(ctx);
@@ -6203,10 +6272,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     ...restProps
   } = rest;
   const contentContainerStyleBase = StyleSheet.flatten(contentContainerStyleProp);
-  const shouldFlexGrow = alignItemsAtEnd && (horizontal ? (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minWidth) == null : (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minHeight) == null);
+  const useAlignItemsAtEndPadding = alignItemsAtEnd && !horizontal && (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minHeight) == null && dataProp.length > 0;
+  const shouldFlexGrow = alignItemsAtEnd && !useAlignItemsAtEndPadding && (horizontal ? (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minWidth) == null : (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minHeight) == null);
   const contentContainerStyle = {
     ...contentContainerStyleBase,
-    ...alignItemsAtEnd ? {
+    ...alignItemsAtEnd && !useAlignItemsAtEndPadding ? {
       display: "flex",
       flexDirection: horizontal ? "row" : "column",
       ...shouldFlexGrow ? { flexGrow: 1 } : {},
@@ -6370,6 +6440,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const didAnchoredEndSpaceAnchorIndexChange = !isFirstLocal && !didDataChangeLocal && ((_g = state.props.anchoredEndSpace) == null ? void 0 : _g.anchorIndex) !== (anchoredEndSpaceResolved == null ? void 0 : anchoredEndSpaceResolved.anchorIndex);
   state.props = {
     alignItemsAtEnd,
+    alignItemsAtEndPaddingEnabled: useAlignItemsAtEndPadding,
     alwaysRender,
     alwaysRenderIndicesArr: alwaysRenderIndices.arr,
     alwaysRenderIndicesSet: alwaysRenderIndices.set,
@@ -6427,6 +6498,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const prevPaddingTop = peek$(ctx, "stylePaddingTop");
     setPaddingTop(ctx, { stylePaddingTop: stylePaddingTopState });
     refState.current.props.stylePaddingBottom = stylePaddingBottomState;
+    updateContentMetrics(ctx);
     let paddingDiff = stylePaddingTopState - prevPaddingTop;
     if (shouldAdjustPadding && maintainVisibleContentPositionConfig.size && paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
       if (state.scroll < 0) {
@@ -6550,7 +6622,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [snapToIndices]);
   React2.useLayoutEffect(
     () => initializeStateVars(true),
-    [dataVersion, memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingBottomState, stylePaddingTopState]
+    [
+      dataVersion,
+      memoizedLastItemKeys.join(","),
+      numColumnsProp,
+      stylePaddingBottomState,
+      stylePaddingTopState,
+      useAlignItemsAtEndPadding
+    ]
   );
   React2.useLayoutEffect(() => {
     const {

package/react-native.mjs

@@ -133,6 +133,7 @@ function StateProvider({ children }) {
     positionListeners: /* @__PURE__ */ new Map(),
     state: void 0,
     values: /* @__PURE__ */ new Map([
+      ["alignItemsAtEndPadding", 0],
       ["stylePaddingTop", 0],
       ["headerSize", 0],
       ["numContainers", 0],
@@ -275,15 +276,16 @@ function getContentInsetEnd(ctx, contentInsetEndAdjustmentOverride) {
 
 // src/state/getContentSize.ts
 function getContentSize(ctx) {
-  var _a3;
+  var _a3, _b;
   const { values, state } = ctx;
   const stylePaddingTop = values.get("stylePaddingTop") || 0;
   const stylePaddingBottom = state.props.stylePaddingBottom || 0;
+  const alignItemsAtEndPadding = values.get("alignItemsAtEndPadding") || 0;
   const headerSize = values.get("headerSize") || 0;
   const footerSize = values.get("footerSize") || 0;
   const contentInsetBottom = getContentInsetEnd(ctx);
-  const totalSize = (_a3 = state.pendingTotalSize) != null ? _a3 : values.get("totalSize");
-  return headerSize + footerSize + totalSize + stylePaddingTop + stylePaddingBottom + (contentInsetBottom || 0);
+  const totalSize = (_b = (_a3 = state.pendingTotalSize) != null ? _a3 : state.totalSize) != null ? _b : values.get("totalSize");
+  return headerSize + footerSize + totalSize + stylePaddingTop + alignItemsAtEndPadding + stylePaddingBottom + (contentInsetBottom || 0);
 }
 
 // src/components/DebugView.tsx
@@ -458,8 +460,16 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   ...rest
 }) {
   const ctx = useStateContext();
-  const [position = POSITION_OUT_OF_VIEW, headerSize = 0, stylePaddingTop = 0, itemKey, _totalSize = 0] = useArr$([
+  const [
+    position = POSITION_OUT_OF_VIEW,
+    alignItemsAtEndPadding = 0,
+    headerSize = 0,
+    stylePaddingTop = 0,
+    itemKey,
+    _totalSize = 0
+  ] = useArr$([
     `containerPosition${id}`,
+    "alignItemsAtEndPadding",
     "headerSize",
     "stylePaddingTop",
     `containerItemKey${id}`,
@@ -473,7 +483,7 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
     var _a3;
     if (animatedScrollY) {
       const stickyConfigOffset = (_a3 = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a3 : 0;
-      const stickyStart = position + headerSize + stylePaddingTop - stickyConfigOffset;
+      const stickyStart = position + headerSize + stylePaddingTop + alignItemsAtEndPadding - stickyConfigOffset;
       let nextStickyPosition;
       if (pushLimit !== void 0) {
         if (pushLimit <= position) {
@@ -496,7 +506,15 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
       }
       return horizontal ? [{ translateX: nextStickyPosition }] : [{ translateY: nextStickyPosition }];
     }
-  }, [animatedScrollY, headerSize, position, pushLimit, stylePaddingTop, stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset]);
+  }, [
+    alignItemsAtEndPadding,
+    animatedScrollY,
+    headerSize,
+    position,
+    pushLimit,
+    stylePaddingTop,
+    stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset
+  ]);
   const viewStyle = React2.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
   const renderStickyHeaderBackdrop = React2.useMemo(() => {
     if (!(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)) {
@@ -1153,6 +1171,51 @@ function WebAnchoredEndSpace({ horizontal }) {
   const style = horizontal ? { height: "100%", width: anchoredEndSpaceSize || 0 } : { height: anchoredEndSpaceSize || 0 };
   return /* @__PURE__ */ React2.createElement("div", { style }, null);
 }
+
+// src/core/updateContentMetrics.ts
+function getRawContentLength(ctx) {
+  var _a3, _b, _c;
+  const { state, values } = ctx;
+  return (values.get("headerSize") || 0) + (values.get("footerSize") || 0) + ((_c = (_b = (_a3 = state.pendingTotalSize) != null ? _a3 : state.totalSize) != null ? _b : values.get("totalSize")) != null ? _c : 0) + (state.props.stylePaddingTop || 0) + (state.props.stylePaddingBottom || 0);
+}
+function getAlignItemsAtEndPadding(ctx) {
+  const { state } = ctx;
+  const shouldPad = !!state.props.alignItemsAtEndPaddingEnabled && !state.props.horizontal && state.props.data.length > 0 && state.scrollLength > 0;
+  return shouldPad ? Math.max(0, state.scrollLength - getRawContentLength(ctx) - getContentInsetEnd(ctx)) : 0;
+}
+function updateContentMetrics(ctx) {
+  const nextPadding = getAlignItemsAtEndPadding(ctx);
+  if (peek$(ctx, "alignItemsAtEndPadding") !== nextPadding) {
+    set$(ctx, "alignItemsAtEndPadding", nextPadding);
+  }
+}
+function setContentLengthSignal(ctx, signalName, size) {
+  if (peek$(ctx, signalName) !== size) {
+    set$(ctx, signalName, size);
+    updateContentMetrics(ctx);
+  }
+}
+function setHeaderSize(ctx, size) {
+  setContentLengthSignal(ctx, "headerSize", size);
+}
+function setFooterSize(ctx, size) {
+  setContentLengthSignal(ctx, "footerSize", size);
+}
+function areInsetsEqual(left, right) {
+  var _a3, _b, _c, _d, _e, _f, _g, _h;
+  return ((_a3 = left == null ? void 0 : left.top) != null ? _a3 : 0) === ((_b = right == null ? void 0 : right.top) != null ? _b : 0) && ((_c = left == null ? void 0 : left.bottom) != null ? _c : 0) === ((_d = right == null ? void 0 : right.bottom) != null ? _d : 0) && ((_e = left == null ? void 0 : left.left) != null ? _e : 0) === ((_f = right == null ? void 0 : right.left) != null ? _f : 0) && ((_g = left == null ? void 0 : left.right) != null ? _g : 0) === ((_h = right == null ? void 0 : right.right) != null ? _h : 0);
+}
+function setContentInsetOverride(ctx, inset) {
+  const { state } = ctx;
+  const previousInset = state.contentInsetOverride;
+  const nextInset = inset != null ? inset : void 0;
+  const didChange = !areInsetsEqual(previousInset, nextInset);
+  state.contentInsetOverride = nextInset;
+  if (didChange) {
+    updateContentMetrics(ctx);
+  }
+  return didChange;
+}
 function useLatestRef(value) {
   const ref = React2.useRef(value);
   ref.current = value;
@@ -1211,7 +1274,7 @@ var ListComponent = typedMemo(function ListComponent2({
 }) {
   const ctx = useStateContext();
   const maintainVisibleContentPosition = ctx.state.props.maintainVisibleContentPosition;
-  const [otherAxisSize = 0] = useArr$(["otherAxisSize"]);
+  const [alignItemsAtEndPadding = 0, otherAxisSize = 0] = useArr$(["alignItemsAtEndPadding", "otherAxisSize"]);
   const autoOtherAxisStyle = getAutoOtherAxisStyle({
     horizontal,
     needsOtherAxisSize: ctx.state.needsOtherAxisSize,
@@ -1225,23 +1288,23 @@ var ListComponent = typedMemo(function ListComponent2({
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
   useLayoutEffect(() => {
     if (!ListHeaderComponent) {
-      set$(ctx, "headerSize", 0);
+      setHeaderSize(ctx, 0);
     }
     if (!ListFooterComponent) {
-      set$(ctx, "footerSize", 0);
+      setFooterSize(ctx, 0);
     }
   }, [ListHeaderComponent, ListFooterComponent, ctx]);
   const onLayoutHeader = useCallback(
     (rect) => {
       const size = rect[horizontal ? "width" : "height"];
-      set$(ctx, "headerSize", size);
+      setHeaderSize(ctx, size);
     },
     [ctx, horizontal]
   );
   const onLayoutFooterInternal = useCallback(
     (rect, fromLayoutEffect) => {
       const size = rect[horizontal ? "width" : "height"];
-      set$(ctx, "footerSize", size);
+      setFooterSize(ctx, size);
       onLayoutFooter == null ? void 0 : onLayoutFooter(rect, fromLayoutEffect);
     },
     [ctx, horizontal, onLayoutFooter]
@@ -1269,6 +1332,13 @@ var ListComponent = typedMemo(function ListComponent2({
     /* @__PURE__ */ React2.createElement(ScrollAdjust, null),
     ListHeaderComponent && /* @__PURE__ */ React2.createElement(LayoutView, { onLayoutChange: onLayoutHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
     ListEmptyComponent && getComponent(ListEmptyComponent),
+    alignItemsAtEndPadding > 0 && /* @__PURE__ */ React2.createElement(
+      View,
+      {
+        style: horizontal ? { flexShrink: 0, width: alignItemsAtEndPadding } : { flexShrink: 0, height: alignItemsAtEndPadding }
+      },
+      null
+    ),
     canRender && !ListEmptyComponent && /* @__PURE__ */ React2.createElement(
       Containers,
       {
@@ -1760,7 +1830,7 @@ function calculateOffsetForIndex(ctx, index) {
 
 // src/core/getTopOffsetAdjustment.ts
 function getTopOffsetAdjustment(ctx) {
-  return (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+  return (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "alignItemsAtEndPadding") || 0) + (peek$(ctx, "headerSize") || 0);
 }
 
 // src/utils/getId.ts
@@ -1798,6 +1868,7 @@ function addTotalSize(ctx, key, add, notifyTotalSize = true) {
       if (notifyTotalSize) {
         set$(ctx, "totalSize", totalSize);
       }
+      updateContentMetrics(ctx);
     }
   } else if (notifyTotalSize && ctx.values.get("totalSize") !== totalSize) {
     set$(ctx, "totalSize", totalSize);
@@ -4145,7 +4216,7 @@ function areViewabilityAmountTokensEqual(prev, next) {
 }
 function computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
   const { sizes, scroll: scrollState } = state;
-  const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
+  const topPad = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "alignItemsAtEndPadding") || 0) + (peek$(ctx, "headerSize") || 0);
   const { itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold } = viewabilityConfig;
   const viewAreaMode = viewAreaCoveragePercentThreshold != null;
   const viewablePercentThreshold = viewAreaMode ? viewAreaCoveragePercentThreshold : itemVisiblePercentThreshold;
@@ -4596,7 +4667,7 @@ function calculateItemsInView(ctx, params = {}) {
       return;
     }
     let totalSize = getContentSize(ctx);
-    const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
+    const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "alignItemsAtEndPadding") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
     const speed = getScrollVelocity(state);
     const scrollExtra = 0;
@@ -5136,6 +5207,7 @@ function handleLayout(ctx, layoutParam, setCanRender) {
   if (didChange) {
     state.scrollLength = scrollLength;
     state.otherAxisSize = otherAxisSize;
+    updateContentMetrics(ctx);
     state.lastBatchingAction = Date.now();
     state.scrollForNextCalculateItemsInView = void 0;
     if (scrollLength > 0) {
@@ -5823,10 +5895,7 @@ function createImperativeHandle(ctx, scheduleImperativeScrollCommit) {
       startBuffered: state.startBuffered
     }),
     reportContentInset: (inset) => {
-      var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-      const previousInset = state.contentInsetOverride;
-      state.contentInsetOverride = inset != null ? inset : void 0;
-      const didChange = ((_a3 = previousInset == null ? void 0 : previousInset.top) != null ? _a3 : 0) !== ((_c = (_b = state.contentInsetOverride) == null ? void 0 : _b.top) != null ? _c : 0) || ((_d = previousInset == null ? void 0 : previousInset.bottom) != null ? _d : 0) !== ((_f = (_e = state.contentInsetOverride) == null ? void 0 : _e.bottom) != null ? _f : 0) || ((_g = previousInset == null ? void 0 : previousInset.left) != null ? _g : 0) !== ((_i = (_h = state.contentInsetOverride) == null ? void 0 : _h.left) != null ? _i : 0) || ((_j = previousInset == null ? void 0 : previousInset.right) != null ? _j : 0) !== ((_l = (_k = state.contentInsetOverride) == null ? void 0 : _k.right) != null ? _l : 0);
+      const didChange = setContentInsetOverride(ctx, inset);
       updateScroll(ctx, state.scroll, true, { markHasScrolled: false });
       if (didChange) {
         retargetActiveInitialScrollAtEnd(ctx);
@@ -6182,10 +6251,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     ...restProps
   } = rest;
   const contentContainerStyleBase = StyleSheet.flatten(contentContainerStyleProp);
-  const shouldFlexGrow = alignItemsAtEnd && (horizontal ? (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minWidth) == null : (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minHeight) == null);
+  const useAlignItemsAtEndPadding = alignItemsAtEnd && !horizontal && (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minHeight) == null && dataProp.length > 0;
+  const shouldFlexGrow = alignItemsAtEnd && !useAlignItemsAtEndPadding && (horizontal ? (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minWidth) == null : (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minHeight) == null);
   const contentContainerStyle = {
     ...contentContainerStyleBase,
-    ...alignItemsAtEnd ? {
+    ...alignItemsAtEnd && !useAlignItemsAtEndPadding ? {
       display: "flex",
       flexDirection: horizontal ? "row" : "column",
       ...shouldFlexGrow ? { flexGrow: 1 } : {},
@@ -6349,6 +6419,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const didAnchoredEndSpaceAnchorIndexChange = !isFirstLocal && !didDataChangeLocal && ((_g = state.props.anchoredEndSpace) == null ? void 0 : _g.anchorIndex) !== (anchoredEndSpaceResolved == null ? void 0 : anchoredEndSpaceResolved.anchorIndex);
   state.props = {
     alignItemsAtEnd,
+    alignItemsAtEndPaddingEnabled: useAlignItemsAtEndPadding,
     alwaysRender,
     alwaysRenderIndicesArr: alwaysRenderIndices.arr,
     alwaysRenderIndicesSet: alwaysRenderIndices.set,
@@ -6406,6 +6477,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const prevPaddingTop = peek$(ctx, "stylePaddingTop");
     setPaddingTop(ctx, { stylePaddingTop: stylePaddingTopState });
     refState.current.props.stylePaddingBottom = stylePaddingBottomState;
+    updateContentMetrics(ctx);
     let paddingDiff = stylePaddingTopState - prevPaddingTop;
     if (shouldAdjustPadding && maintainVisibleContentPositionConfig.size && paddingDiff && prevPaddingTop !== void 0 && Platform.OS === "ios") {
       if (state.scroll < 0) {
@@ -6529,7 +6601,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [snapToIndices]);
   useLayoutEffect(
     () => initializeStateVars(true),
-    [dataVersion, memoizedLastItemKeys.join(","), numColumnsProp, stylePaddingBottomState, stylePaddingTopState]
+    [
+      dataVersion,
+      memoizedLastItemKeys.join(","),
+      numColumnsProp,
+      stylePaddingBottomState,
+      stylePaddingTopState,
+      useAlignItemsAtEndPadding
+    ]
   );
   useLayoutEffect(() => {
     const {

package/react-native.web.d.ts

@@ -31,10 +31,11 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
+    alignItemsAtEndPadding: number;
     anchoredEndSpaceSize: number;
     animatedScrollY: any;
     debugComputedScroll: number;