@ng-native/components 0.2.0 → 0.4.0

package/dist/virtual-list.d.ts

@@ -28,6 +28,16 @@ export interface VirtualRow<T> {
      */
     readonly parked?: true;
 }
+/**
+ * Space around the rows, inside the scrolling content: one number for every side, or a side each,
+ * as FlatList's `contentContainerStyle` padding.
+ */
+export type VirtualListPadding = number | {
+    readonly top?: number;
+    readonly right?: number;
+    readonly bottom?: number;
+    readonly left?: number;
+};
 /** A row height: one for every row, or one per item. */
 export type VirtualItemHeight<T> = number | ((item: T, index: number) => number);
 /**
@@ -106,7 +116,8 @@ interface Gap<T> {
  * `horizontal` swaps the axis: rows are placed by `left` and sized by `width`, and the offset is
  * read from `contentOffset.x`. `inverted` is a scale of -1 on the list and on each row, which is
  * how FlatList does it too - the list scrolls from the bottom and each row is flipped back the
- * right way up, so a chat transcript needs no reversed array.
+ * right way up. The first item is the one at the bottom, so a chat passes its messages newest
+ * first.
  *
  * `stickyIndices` pins a row to the leading edge while the rows under it scroll past, which is
  * FlatList's `stickyHeaderIndices` counted without the header. `stickyHeader` pins the
@@ -143,6 +154,14 @@ export declare class VirtualList<T> extends ScrollViewProps {
      * honest the scroll bar is and the less a jump to an unmeasured row has to correct.
      */
     readonly estimatedItemHeight: import("@angular/core").InputSignal<VirtualItemHeight<T>>;
+    /**
+     * Space around the rows, inside the scrolling content. The leading side comes before the first
+     * row and the trailing side after the last; the sides across the axis inset every row. The
+     * header and footer sit outside it, as FlatList's do outside `contentContainerStyle`.
+     */
+    readonly contentPadding: import("@angular/core").InputSignal<VirtualListPadding>;
+    /** Space between one row and the next, along the axis: not before the first or after the last. */
+    readonly rowGap: import("@angular/core").InputSignalWithTransform<number, unknown>;
     /**
      * An item's identity, as FlatList's `keyExtractor`: what a measured height, a slot and a held
      * position follow across an insert. Without it an item is its own key, which is enough for items
@@ -225,6 +244,12 @@ export declare class VirtualList<T> extends ScrollViewProps {
     private readonly pinning;
     /** Rows size themselves and are laid out in flow, rather than placed at a known offset. */
     readonly measuring: import("@angular/core").Signal<boolean>;
+    /** The padding on each side. */
+    private readonly edges;
+    /** The padding before the first row, along the axis. */
+    private readonly lead;
+    /** The rows' insets across the axis, as the props that place an absolutely positioned row. */
+    private readonly across;
     /** Heights native has reported, by key. */
     private readonly measured;
     /** Bumped when a measurement changes, which is what re-sizes the list. */
@@ -243,8 +268,13 @@ export declare class VirtualList<T> extends ScrollViewProps {
     private readonly indexOfKey;
     /** The index, with a dependency on its measurements for whoever is reading it. */
     private layout;
-    /** The list's own total extent along its axis. */
+    /**
+     * The list's own total extent along its axis: the padding at both ends, the rows, and a gap
+     * between each two of them.
+     */
     private readonly extent;
+    /** A fixed-height row and the gap after it. */
+    private stride;
     protected readonly canvas: import("@angular/core").Signal<{
         width: number;
         flexDirection: string;
@@ -259,7 +289,7 @@ export declare class VirtualList<T> extends ScrollViewProps {
      *
      * The list ends up scrolled from the far end with its rows in reverse, and the second flip puts
      * each row's own content back the right way up. It is what `FlatList` does, and it is why an
-     * inverted list needs no reversed array and no reversed maths.
+     * inverted list needs no reversed maths: the first item is at offset 0, which is the bottom.
      */
     protected readonly flip: import("@angular/core").Signal<Readonly<Record<string, number>>[] | undefined>;
     /**
@@ -267,12 +297,18 @@ export declare class VirtualList<T> extends ScrollViewProps {
      * A style binding validates its values as the DOM's, and warns on a list in development.
      */
     private readonly flipText;
+    /**
+     * What places a row in flow: the gap after it and the padding across the axis, as margins, since
+     * native lays the row out. Empty when there are none, so a plain list commits no margins.
+     */
+    private readonly flowSpacing;
     /** A row in flow, flipped back when the list is inverted. One object, so rows never re-clone. */
     private readonly flowStyle;
-    /** Top of a row. */
+    /** Top of a row: the leading padding, and every row and gap before it. */
     private topOf;
+    /** A row's own size, without the gap after it. */
     private heightOf;
-    /** First row whose bottom is past `y`. */
+    /** First row whose bottom, or the gap after it, is past `y`. */
     private indexAt;
     /** The row the viewport's leading edge is in, taken at each scroll. */
     private anchor;
@@ -327,7 +363,16 @@ export declare class VirtualList<T> extends ScrollViewProps {
     private successorOf;
     /** Make a queued correction, after the commit that moved the rows has gone to native. */
     private flushScroll;
+    /** In development, a list with rows that stays at zero size; see `ZeroSizeWarning`. */
+    private readonly zeroSize;
     constructor();
+    /** Whether the viewport has been laid out yet, so a zero in it is a measurement. */
+    private viewportMeasured;
+    /**
+     * In development, rows that arrive in a list already measured at zero, or go from one, with no
+     * new layout to say so: an update to `items` alone does not lay the viewport out again.
+     */
+    private checkZeroSize;
     /** The rows to render, and the edges of the run they sit in. */
     private readonly span;
     readonly window: import("@angular/core").Signal<VirtualRow<T>[]>;
@@ -479,7 +524,7 @@ export declare class VirtualList<T> extends ScrollViewProps {
             y?: number;
         };
     }>): void;
-    /** RN's sticky header commits its translate after 64 ms without a scroll event, as this does. */
+    /** A pinned row's translate, settled once scrolling pauses: see `STICKY_SETTLE_MS`. */
     private settleAfterPause;
     protected onLayout(event: NativeSyntheticEvent<{
         layout?: {
@@ -508,7 +553,7 @@ export declare class VirtualList<T> extends ScrollViewProps {
     }>): void;
     private checkEnd;
     static ɵfac: i0.ɵɵFactoryDeclaration<VirtualList<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VirtualList<any>, "virtual-list", ["virtualList"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "estimatedItemHeight": { "alias": "estimatedItemHeight"; "required": false; "isSignal": true; }; "keyExtractor": { "alias": "keyExtractor"; "required": false; "isSignal": true; }; "itemType": { "alias": "itemType"; "required": false; "isSignal": true; }; "maintainVisibleContentPosition": { "alias": "maintainVisibleContentPosition"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "endReachedThreshold": { "alias": "endReachedThreshold"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "inverted": { "alias": "inverted"; "required": false; "isSignal": true; }; "stickyIndices": { "alias": "stickyIndices"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "keyboardShouldPersistTaps": { "alias": "keyboardShouldPersistTaps"; "required": false; "isSignal": true; }; "itemVisiblePercentThreshold": { "alias": "itemVisiblePercentThreshold"; "required": false; "isSignal": true; }; }, { "endReached": "endReached"; "viewableItemsChanged": "viewableItemsChanged"; }, ["separator", "refreshControl"], ["refresh-control", "[listHeader]", "*", "[listFooter]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VirtualList<any>, "virtual-list", ["virtualList"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "estimatedItemHeight": { "alias": "estimatedItemHeight"; "required": false; "isSignal": true; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; "rowGap": { "alias": "rowGap"; "required": false; "isSignal": true; }; "keyExtractor": { "alias": "keyExtractor"; "required": false; "isSignal": true; }; "itemType": { "alias": "itemType"; "required": false; "isSignal": true; }; "maintainVisibleContentPosition": { "alias": "maintainVisibleContentPosition"; "required": false; "isSignal": true; }; "overscan": { "alias": "overscan"; "required": false; "isSignal": true; }; "endReachedThreshold": { "alias": "endReachedThreshold"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "inverted": { "alias": "inverted"; "required": false; "isSignal": true; }; "stickyIndices": { "alias": "stickyIndices"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "keyboardShouldPersistTaps": { "alias": "keyboardShouldPersistTaps"; "required": false; "isSignal": true; }; "itemVisiblePercentThreshold": { "alias": "itemVisiblePercentThreshold"; "required": false; "isSignal": true; }; }, { "endReached": "endReached"; "viewableItemsChanged": "viewableItemsChanged"; }, ["separator", "refreshControl"], ["refresh-control", "[listHeader]", "*", "[listFooter]"], true, never>;
 }
 /**
  * Put on each row's view: `<view [virtualListRow]="row">`. Applies the row's style, and reports

package/dist/virtual-list.js

@@ -1,9 +1,11 @@
-import { Component, DestroyRef, Directive, ElementRef, TemplateRef, afterEveryRender, booleanAttribute, computed, contentChild, inject, input, linkedSignal, numberAttribute, output, signal, viewChild, } from '@angular/core';
+import { Component, DestroyRef, Directive, ElementRef, TemplateRef, afterEveryRender, booleanAttribute, computed, contentChild, effect, inject, input, linkedSignal, numberAttribute, output, signal, untracked, viewChild, } from '@angular/core';
 import { nativePlatform, pinnedRange, } from '@ng-native/fabric';
 import { HeightIndex } from "./height-index.js";
 import { dismissKeyboardOnTap } from "./keyboard-taps.js";
 import { RefreshControl } from "./refresh-control.js";
+import { STICKY_SETTLE_MS } from "./sticky-headers.js";
 import { TemplateSlot } from "./template-slot.js";
+import { ZeroSizeWarning, checksZeroSize, written } from "./zero-size-warning.js";
 import { View } from "./view.js";
 import { ScrollViewProps } from "./scroll-view-props.js";
 import * as i0 from "@angular/core";
@@ -71,7 +73,8 @@ const HOLD_TOLERANCE = 0.5;
  * `horizontal` swaps the axis: rows are placed by `left` and sized by `width`, and the offset is
  * read from `contentOffset.x`. `inverted` is a scale of -1 on the list and on each row, which is
  * how FlatList does it too - the list scrolls from the bottom and each row is flipped back the
- * right way up, so a chat transcript needs no reversed array.
+ * right way up. The first item is the one at the bottom, so a chat passes its messages newest
+ * first.
  *
  * `stickyIndices` pins a row to the leading edge while the rows under it scroll past, which is
  * FlatList's `stickyHeaderIndices` counted without the header. `stickyHeader` pins the
@@ -111,6 +114,15 @@ export class VirtualList extends ScrollViewProps {
      */
     estimatedItemHeight = input(50, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "estimatedItemHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Space around the rows, inside the scrolling content. The leading side comes before the first
+     * row and the trailing side after the last; the sides across the axis inset every row. The
+     * header and footer sit outside it, as FlatList's do outside `contentContainerStyle`.
+     */
+    contentPadding = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentPadding" }] : /* istanbul ignore next */ []));
+    /** Space between one row and the next, along the axis: not before the first or after the last. */
+    rowGap = input(0, { ...(ngDevMode ? { debugName: "rowGap" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * An item's identity, as FlatList's `keyExtractor`: what a measured height, a slot and a held
      * position follow across an insert. Without it an item is its own key, which is enough for items
@@ -201,6 +213,25 @@ export class VirtualList extends ScrollViewProps {
     /** Rows size themselves and are laid out in flow, rather than placed at a known offset. */
     measuring = computed(() => this.itemHeight() === undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "measuring" }] : /* istanbul ignore next */ []));
+    /** The padding on each side. */
+    edges = computed(() => {
+        const padding = this.contentPadding();
+        if (typeof padding === 'number') {
+            return { top: padding, right: padding, bottom: padding, left: padding };
+        }
+        const { top = 0, right = 0, bottom = 0, left = 0 } = padding ?? {};
+        return { top, right, bottom, left };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "edges" }] : /* istanbul ignore next */ []));
+    /** The padding before the first row, along the axis. */
+    lead = computed(() => this.horizontal() ? this.edges().left : this.edges().top, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lead" }] : /* istanbul ignore next */ []));
+    /** The rows' insets across the axis, as the props that place an absolutely positioned row. */
+    across = computed(() => {
+        const { top, right, bottom, left } = this.edges();
+        return this.horizontal() ? { top, bottom } : { left, right };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "across" }] : /* istanbul ignore next */ []));
     /** Heights native has reported, by key. */
     measured = new Map();
     /** Bumped when a measurement changes, which is what re-sizes the list. */
@@ -225,19 +256,22 @@ export class VirtualList extends ScrollViewProps {
         const height = this.itemHeight();
         if (typeof height === 'number')
             return null;
+        // Each row's entry is its size and the gap after it, so where a row starts counts the gaps
+        // before it without a second table.
+        const gap = this.rowGap();
         const items = this.items();
         const sizes = new Float64Array(items.length);
         if (height) {
             for (let i = 0; i < items.length; i++)
-                sizes[i] = height(items[i], i);
+                sizes[i] = height(items[i], i) + gap;
             return new HeightIndex(sizes);
         }
         const estimate = this.estimatedItemHeight();
         const keys = this.keys();
         for (let i = 0; i < items.length; i++) {
-            sizes[i] =
-                this.measured.get(keys ? keys[i] : items[i]) ??
-                    (typeof estimate === 'number' ? estimate : estimate(items[i], i));
+            const size = this.measured.get(keys ? keys[i] : items[i]) ??
+                (typeof estimate === 'number' ? estimate : estimate(items[i], i));
+            sizes[i] = size + gap;
         }
         return new HeightIndex(sizes);
     }, /* @ts-ignore */
@@ -258,14 +292,23 @@ export class VirtualList extends ScrollViewProps {
             this.measuredVersion();
         return table;
     }
-    /** The list's own total extent along its axis. */
+    /**
+     * The list's own total extent along its axis: the padding at both ends, the rows, and a gap
+     * between each two of them.
+     */
     extent = computed(() => {
         const table = this.layout();
-        if (table)
-            return table.total;
-        return this.items().length * this.itemHeight();
+        const count = this.items().length;
+        const rows = table ? table.total : count * this.stride();
+        const { top, right, bottom, left } = this.edges();
+        const padding = this.horizontal() ? left + right : top + bottom;
+        return padding + (count ? rows - this.rowGap() : 0);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "extent" }] : /* istanbul ignore next */ []));
+    /** A fixed-height row and the gap after it. */
+    stride() {
+        return this.itemHeight() + this.rowGap();
+    }
     canvas = computed(() => this.horizontal() ? { width: this.extent(), flexDirection: 'row' } : { height: this.extent() }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []));
     /**
@@ -273,7 +316,7 @@ export class VirtualList extends ScrollViewProps {
      *
      * The list ends up scrolled from the far end with its rows in reverse, and the second flip puts
      * each row's own content back the right way up. It is what `FlatList` does, and it is why an
-     * inverted list needs no reversed array and no reversed maths.
+     * inverted list needs no reversed maths: the first item is at offset 0, which is the bottom.
      */
     flip = computed(() => {
         if (!this.inverted())
@@ -292,27 +335,45 @@ export class VirtualList extends ScrollViewProps {
         return this.horizontal() ? 'scaleX(-1)' : 'scaleY(-1)';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "flipText" }] : /* istanbul ignore next */ []));
+    /**
+     * What places a row in flow: the gap after it and the padding across the axis, as margins, since
+     * native lays the row out. Empty when there are none, so a plain list commits no margins.
+     */
+    flowSpacing = computed(() => {
+        const gap = this.rowGap();
+        const { top, right, bottom, left } = this.edges();
+        const spacing = this.horizontal()
+            ? { marginRight: gap, marginTop: top, marginBottom: bottom }
+            : { marginBottom: gap, marginLeft: left, marginRight: right };
+        return Object.fromEntries(Object.entries(spacing).filter(([, value]) => value !== 0));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flowSpacing" }] : /* istanbul ignore next */ []));
     /** A row in flow, flipped back when the list is inverted. One object, so rows never re-clone. */
     flowStyle = computed(() => {
         const flip = this.flipText();
-        return flip ? { transform: flip } : IN_FLOW;
+        const spacing = this.flowSpacing();
+        if (!flip && Object.keys(spacing).length === 0)
+            return IN_FLOW;
+        return flip ? { ...spacing, transform: flip } : spacing;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "flowStyle" }] : /* istanbul ignore next */ []));
-    /** Top of a row. */
+    /** Top of a row: the leading padding, and every row and gap before it. */
     topOf(index) {
         const table = this.layout();
-        return table ? table.topOf(index) : index * this.itemHeight();
+        return this.lead() + (table ? table.topOf(index) : index * this.stride());
     }
+    /** A row's own size, without the gap after it. */
     heightOf(index) {
         const table = this.layout();
-        return table ? table.heightOf(index) : this.itemHeight();
+        return table ? table.heightOf(index) - this.rowGap() : this.itemHeight();
     }
-    /** First row whose bottom is past `y`. */
+    /** First row whose bottom, or the gap after it, is past `y`. */
     indexAt(y) {
         const table = this.layout();
+        const along = y - this.lead();
         if (!table)
-            return Math.max(0, Math.floor(y / this.itemHeight()));
-        return table.indexAt(y);
+            return Math.max(0, Math.floor(along / this.stride()));
+        return table.indexAt(along);
     }
     // --- holding position -------------------------------------------------------------------
     /** The row the viewport's leading edge is in, taken at each scroll. */
@@ -450,6 +511,10 @@ export class VirtualList extends ScrollViewProps {
         else
             this.scrollToOffset({ offset: this.headerHeight() + pending.offset, animated: false });
     }
+    /** In development, a list with rows that stays at zero size; see `ZeroSizeWarning`. */
+    zeroSize = checksZeroSize()
+        ? new ZeroSizeWarning(() => written(this.node), () => !!this.horizontal())
+        : null;
     constructor() {
         super();
         afterEveryRender(() => {
@@ -461,9 +526,25 @@ export class VirtualList extends ScrollViewProps {
         inject(DestroyRef).onDestroy(() => {
             stop();
             clearTimeout(this.settleTimer);
+            this.zeroSize?.stop();
             for (const held of this.drives.values())
                 held.drive.stop();
         });
+        if (this.zeroSize)
+            this.checkZeroSize(this.zeroSize);
+    }
+    /** Whether the viewport has been laid out yet, so a zero in it is a measurement. */
+    viewportMeasured = false;
+    /**
+     * In development, rows that arrive in a list already measured at zero, or go from one, with no
+     * new layout to say so: an update to `items` alone does not lay the viewport out again.
+     */
+    checkZeroSize(warning) {
+        effect(() => {
+            const hasRows = this.items().length > 0;
+            if (this.viewportMeasured)
+                warning.laidOut(untracked(this.viewport), hasRows);
+        });
     }
     // --- the window ---------------------------------------------------------------------------
     /** The rows to render, and the edges of the run they sit in. */
@@ -520,7 +601,7 @@ export class VirtualList extends ScrollViewProps {
         let lead = span ? this.topOf(span.first) : 0;
         const pinned = this.pinnedIndex();
         if (span && pinned !== null && pinned < span.first) {
-            lead = this.nativeSticky ? this.topOf(pinned) : lead - this.heightOf(pinned);
+            lead = this.nativeSticky ? this.topOf(pinned) : lead - this.heightOf(pinned) - this.rowGap();
         }
         return this.horizontal() ? { width: Math.max(0, lead) } : { height: Math.max(0, lead) };
     }, /* @ts-ignore */
@@ -543,7 +624,7 @@ export class VirtualList extends ScrollViewProps {
                 style: this.nativeSticky
                     ? this.stickyStyle(pinned)
                     : this.measuring()
-                        ? this.pinnedFlowStyle(this.topOf(first) - this.heightOf(pinned))
+                        ? this.pinnedFlowStyle(this.topOf(first) - this.heightOf(pinned) - this.rowGap())
                         : this.slotStyle(pinned, this.offset()),
             }));
         }
@@ -568,11 +649,12 @@ export class VirtualList extends ScrollViewProps {
      */
     leadWindow(rows, pinned, first) {
         const lead = rows[1];
-        const gap = this.topOf(first) - this.topOf(pinned) - this.heightOf(pinned);
-        if (!lead || gap <= 0)
+        // The pinned row's own gap already follows it in flow.
+        const between = this.topOf(first) - this.topOf(pinned) - this.heightOf(pinned) - this.rowGap();
+        if (!lead || between <= 0)
             return;
         const margin = this.horizontal() ? 'marginLeft' : 'marginTop';
-        rows[1] = this.hold({ ...lead, style: { ...lead.style, [margin]: gap } });
+        rows[1] = this.hold({ ...lead, style: { ...lead.style, [margin]: between } });
     }
     styleFor(index, pinned) {
         if (this.nativeSticky && this.nextSticky().has(index))
@@ -587,7 +669,7 @@ export class VirtualList extends ScrollViewProps {
         const shift = Math.max(0, this.offset() - at);
         const move = `${this.horizontal() ? 'translateX' : 'translateY'}(${shift}px)`;
         const flip = this.flipText();
-        return { zIndex: 1, transform: flip ? `${move} ${flip}` : move };
+        return { ...this.flowSpacing(), zIndex: 1, transform: flip ? `${move} ${flip}` : move };
     }
     /**
      * A sticky row native moves: at its own place, with the translate native had reached when
@@ -595,7 +677,9 @@ export class VirtualList extends ScrollViewProps {
      */
     stickyStyle(index) {
         const horizontal = this.horizontal();
-        const style = this.measuring() ? {} : { ...this.slotStyle(index) };
+        const style = this.measuring()
+            ? { ...this.flowSpacing() }
+            : { ...this.slotStyle(index) };
         style['zIndex'] = 1;
         const top = this.topOf(index);
         const shift = Math.min(Math.max(0, this.settled() - top), this.stopOf(index) - top);
@@ -740,7 +824,7 @@ export class VirtualList extends ScrollViewProps {
         const index = this.indexOfKey()?.get(row.key);
         if (index === undefined)
             return;
-        this.table()?.set(index, size);
+        this.table()?.set(index, size + this.rowGap());
         this.measuredVersion.update((version) => version + 1);
     }
     /** Drop the measurements of items long gone, so churn cannot grow the map without bound. */
@@ -805,16 +889,16 @@ export class VirtualList extends ScrollViewProps {
         const size = this.heightOf(row.index);
         const horizontal = this.horizontal();
         const flip = this.flipText();
+        const across = this.across();
         const cached = this.measuredGaps.get(row.key);
-        if (cached &&
-            cached[horizontal ? 'left' : 'top'] === start &&
-            cached[horizontal ? 'width' : 'height'] === size &&
-            cached['transform'] === flip) {
+        const placed = horizontal
+            ? { ...across, left: start, width: size, transform: flip }
+            : { ...across, top: start, height: size, transform: flip };
+        if (cached && holds(cached, placed))
             return cached;
-        }
         const style = horizontal
-            ? { position: 'absolute', top: 0, bottom: 0, left: start, width: size, flexDirection: 'row' }
-            : { position: 'absolute', left: 0, right: 0, top: start, height: size };
+            ? { position: 'absolute', ...across, left: start, width: size, flexDirection: 'row' }
+            : { position: 'absolute', ...across, top: start, height: size };
         style['justifyContent'] = 'flex-end';
         style['pointerEvents'] = 'box-none';
         if (flip)
@@ -953,18 +1037,16 @@ export class VirtualList extends ScrollViewProps {
         const key = horizontal ? 'left' : 'top';
         const extent = horizontal ? 'width' : 'height';
         const flip = this.flipText();
+        const across = this.across();
         let style = this.slots.get(index);
         // The flip is part of the comparison because turning the list over changes every row, and a
         // cached slot would otherwise keep the orientation it was built with.
-        const stale = !style ||
-            style[extent] !== size ||
-            style[key] !== start ||
-            style['transform'] !== flip ||
-            pinnedAt !== undefined;
+        const placed = { ...across, [extent]: size, [key]: start, transform: flip };
+        const stale = !style || pinnedAt !== undefined || !holds(style, placed);
         if (stale) {
             style = horizontal
-                ? { position: 'absolute', top: 0, bottom: 0, left: start, width: size }
-                : { position: 'absolute', left: 0, right: 0, top: start, height: size };
+                ? { position: 'absolute', ...across, left: start, width: size }
+                : { position: 'absolute', ...across, top: start, height: size };
             // A pinned row draws over the ones sliding under it; the transform is the row's half of
             // the inversion.
             if (pinnedAt !== undefined)
@@ -999,14 +1081,16 @@ export class VirtualList extends ScrollViewProps {
         this.checkEnd(along);
         this.announceViewable(content);
     }
-    /** RN's sticky header commits its translate after 64 ms without a scroll event, as this does. */
+    /** A pinned row's translate, settled once scrolling pauses: see `STICKY_SETTLE_MS`. */
     settleAfterPause(content) {
         clearTimeout(this.settleTimer);
-        this.settleTimer = setTimeout(() => this.settled.set(content), 64);
+        this.settleTimer = setTimeout(() => this.settled.set(content), STICKY_SETTLE_MS);
     }
     onLayout(event) {
         const layout = event.nativeEvent?.layout;
         this.viewport.set((this.horizontal() ? layout?.width : layout?.height) ?? 0);
+        this.viewportMeasured = true;
+        this.zeroSize?.laidOut(this.viewport(), this.items().length > 0);
         this.announceViewable(this.lastOffset);
     }
     /** The header's extent along the axis, which every row sits after. */
@@ -1054,7 +1138,7 @@ export class VirtualList extends ScrollViewProps {
         this.endReached.emit({ distanceFromEnd });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: VirtualList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: VirtualList, isStandalone: true, selector: "virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, estimatedItemHeight: { classPropertyName: "estimatedItemHeight", publicName: "estimatedItemHeight", isSignal: true, isRequired: false, transformFunction: null }, keyExtractor: { classPropertyName: "keyExtractor", publicName: "keyExtractor", isSignal: true, isRequired: false, transformFunction: null }, itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, maintainVisibleContentPosition: { classPropertyName: "maintainVisibleContentPosition", publicName: "maintainVisibleContentPosition", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, endReachedThreshold: { classPropertyName: "endReachedThreshold", publicName: "endReachedThreshold", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, stickyIndices: { classPropertyName: "stickyIndices", publicName: "stickyIndices", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, keyboardShouldPersistTaps: { classPropertyName: "keyboardShouldPersistTaps", publicName: "keyboardShouldPersistTaps", isSignal: true, isRequired: false, transformFunction: null }, itemVisiblePercentThreshold: { classPropertyName: "itemVisiblePercentThreshold", publicName: "itemVisiblePercentThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endReached: "endReached", viewableItemsChanged: "viewableItemsChanged" }, host: { listeners: { "scroll": "onScroll($event)", "layout": "onLayout($event)", "contentSizeChange": "onContentSize($event)" }, properties: { "flexDirection": "horizontal() ? 'row' : 'column'", "horizontal": "horizontal()", "nestedScrollEnabled": "nestedScroll()", "transform": "flip()", "scrollEventThrottle": "scrollEventThrottle()" } }, queries: [{ propertyName: "separator", first: true, predicate: VirtualListSeparator, descendants: true, isSignal: true }, { propertyName: "refreshControl", first: true, predicate: RefreshControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "canvasView", first: true, predicate: ["rows"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["virtualList"], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: VirtualList, isStandalone: true, selector: "virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, estimatedItemHeight: { classPropertyName: "estimatedItemHeight", publicName: "estimatedItemHeight", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, rowGap: { classPropertyName: "rowGap", publicName: "rowGap", isSignal: true, isRequired: false, transformFunction: null }, keyExtractor: { classPropertyName: "keyExtractor", publicName: "keyExtractor", isSignal: true, isRequired: false, transformFunction: null }, itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, maintainVisibleContentPosition: { classPropertyName: "maintainVisibleContentPosition", publicName: "maintainVisibleContentPosition", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, endReachedThreshold: { classPropertyName: "endReachedThreshold", publicName: "endReachedThreshold", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, stickyIndices: { classPropertyName: "stickyIndices", publicName: "stickyIndices", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, keyboardShouldPersistTaps: { classPropertyName: "keyboardShouldPersistTaps", publicName: "keyboardShouldPersistTaps", isSignal: true, isRequired: false, transformFunction: null }, itemVisiblePercentThreshold: { classPropertyName: "itemVisiblePercentThreshold", publicName: "itemVisiblePercentThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { endReached: "endReached", viewableItemsChanged: "viewableItemsChanged" }, host: { listeners: { "scroll": "onScroll($event)", "layout": "onLayout($event)", "contentSizeChange": "onContentSize($event)" }, properties: { "flexDirection": "horizontal() ? 'row' : 'column'", "horizontal": "horizontal()", "nestedScrollEnabled": "nestedScroll()", "transform": "flip()", "scrollEventThrottle": "scrollEventThrottle()" } }, queries: [{ propertyName: "separator", first: true, predicate: VirtualListSeparator, descendants: true, isSignal: true }, { propertyName: "refreshControl", first: true, predicate: RefreshControl, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "canvasView", first: true, predicate: ["rows"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["virtualList"], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="refresh-control" />
     <view [style]="headerStyle()" (layout)="onHeaderLayout($event)"
       ><ng-content select="[listHeader]"
@@ -1122,7 +1206,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                         '(contentSizeChange)': 'onContentSize($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], estimatedItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "estimatedItemHeight", required: false }] }], keyExtractor: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExtractor", required: false }] }], itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: false }] }], maintainVisibleContentPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "maintainVisibleContentPosition", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], endReachedThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "endReachedThreshold", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }], stickyIndices: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyIndices", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], keyboardShouldPersistTaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardShouldPersistTaps", required: false }] }], itemVisiblePercentThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemVisiblePercentThreshold", required: false }] }], endReached: [{ type: i0.Output, args: ["endReached"] }], viewableItemsChanged: [{ type: i0.Output, args: ["viewableItemsChanged"] }], separator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => VirtualListSeparator), { isSignal: true }] }], refreshControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RefreshControl), { isSignal: true }] }], canvasView: [{ type: i0.ViewChild, args: ['rows', { ...{ read: ElementRef }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], estimatedItemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "estimatedItemHeight", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], rowGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGap", required: false }] }], keyExtractor: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExtractor", required: false }] }], itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: false }] }], maintainVisibleContentPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "maintainVisibleContentPosition", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], endReachedThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "endReachedThreshold", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }], stickyIndices: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyIndices", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], keyboardShouldPersistTaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardShouldPersistTaps", required: false }] }], itemVisiblePercentThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemVisiblePercentThreshold", required: false }] }], endReached: [{ type: i0.Output, args: ["endReached"] }], viewableItemsChanged: [{ type: i0.Output, args: ["viewableItemsChanged"] }], separator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => VirtualListSeparator), { isSignal: true }] }], refreshControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RefreshControl), { isSignal: true }] }], canvasView: [{ type: i0.ViewChild, args: ['rows', { ...{ read: ElementRef }, isSignal: true }] }] } });
+/** Whether a cached slot style already has every one of these props. */
+function holds(style, props) {
+    return Object.entries(props).every(([prop, value]) => style[prop] === value);
+}
 /**
  * Put on each row's view: `<view [virtualListRow]="row">`. Applies the row's style, and reports
  * the row's layout to the list, which is how a list of rows that size themselves learns how tall