@multiplatform.one/components 7.77.1 → 7.78.0

package/dist/jsx/views/usePageFlowLoadMore.mjs

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from "react";
+import { isWeb, useWindowDimensions } from "tamagui";
+const PAGE_FLOW_POLL_MS = 250;
+function usePageFlowLoadMore({
+  sentinelRef,
+  enabled,
+  onLoadMore,
+  rearmKey
+}) {
+  const onLoadMoreRef = useRef(onLoadMore);
+  onLoadMoreRef.current = onLoadMore;
+  const {
+    width,
+    height
+  } = useWindowDimensions();
+  const windowRef = useRef({
+    width,
+    height
+  });
+  windowRef.current = {
+    width,
+    height
+  };
+  const live = enabled && Boolean(onLoadMore);
+  useEffect(() => {
+    if (!live) return;
+    if (isWeb) {
+      if (typeof IntersectionObserver === "undefined") return;
+      const el = sentinelRef.current;
+      if (!el) return;
+      const observer = new IntersectionObserver(entries => {
+        if (entries.some(entry => entry.isIntersecting)) onLoadMoreRef.current?.();
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+    }
+    let active = true;
+    let inside = false;
+    const timer = setInterval(() => {
+      const node = sentinelRef.current;
+      if (typeof node?.measureInWindow !== "function") return;
+      node.measureInWindow((x, y, w, h) => {
+        if (!active || w <= 0) return;
+        const win = windowRef.current;
+        const now = y <= win.height && y + h >= 0 && x < win.width && x + w > 0;
+        if (now && !inside) onLoadMoreRef.current?.();
+        inside = now;
+      });
+    }, PAGE_FLOW_POLL_MS);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [live, rearmKey, sentinelRef]);
+}
+export { PAGE_FLOW_POLL_MS, usePageFlowLoadMore };
+//# sourceMappingURL=usePageFlowLoadMore.mjs.map

package/dist/jsx/views/usePageFlowLoadMore.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","isWeb","useWindowDimensions","PAGE_FLOW_POLL_MS","usePageFlowLoadMore","sentinelRef","enabled","onLoadMore","rearmKey","onLoadMoreRef","current","width","height","windowRef","live","Boolean","IntersectionObserver","el","observer","entries","some","entry","isIntersecting","observe","disconnect","active","inside","timer","setInterval","node","measureInWindow","x","y","w","h","win","now","clearInterval"],"sources":["../../../src/views/usePageFlowLoadMore.ts"],"sourcesContent":[null],"mappings":"AAAA,SAAyBA,SAAA,EAAWC,MAAA,QAAc;AAClD,SAASC,KAAA,EAAOC,mBAAA,QAA2B;AAGpC,MAAMC,iBAAA,GAAoB;AA8B1B,SAASC,oBAAoB;EAClCC,WAAA;EACAC,OAAA;EACAC,UAAA;EACAC;AACF,GAAkC;EAChC,MAAMC,aAAA,GAAgBT,MAAA,CAAOO,UAAU;EACvCE,aAAA,CAAcC,OAAA,GAAUH,UAAA;EACxB,MAAM;IAAEI,KAAA;IAAOC;EAAO,IAAIV,mBAAA,CAAoB;EAC9C,MAAMW,SAAA,GAAYb,MAAA,CAAO;IAAEW,KAAA;IAAOC;EAAO,CAAC;EAC1CC,SAAA,CAAUH,OAAA,GAAU;IAAEC,KAAA;IAAOC;EAAO;EACpC,MAAME,IAAA,GAAOR,OAAA,IAAWS,OAAA,CAAQR,UAAU;EAE1CR,SAAA,CAAU,MAAM;IACd,IAAI,CAACe,IAAA,EAAM;IACX,IAAIb,KAAA,EAAO;MACT,IAAI,OAAOe,oBAAA,KAAyB,aAAa;MACjD,MAAMC,EAAA,GAAKZ,WAAA,CAAYK,OAAA;MACvB,IAAI,CAACO,EAAA,EAAI;MACT,MAAMC,QAAA,GAAW,IAAIF,oBAAA,CAAsBG,OAAA,IAAY;QACrD,IAAIA,OAAA,CAAQC,IAAA,CAAMC,KAAA,IAAUA,KAAA,CAAMC,cAAc,GAAGb,aAAA,CAAcC,OAAA,GAAU;MAC7E,CAAC;MACDQ,QAAA,CAASK,OAAA,CAAQN,EAAE;MACnB,OAAO,MAAMC,QAAA,CAASM,UAAA,CAAW;IACnC;IACA,IAAIC,MAAA,GAAS;IACb,IAAIC,MAAA,GAAS;IACb,MAAMC,KAAA,GAAQC,WAAA,CAAY,MAAM;MAC9B,MAAMC,IAAA,GAAOxB,WAAA,CAAYK,OAAA;MACzB,IAAI,OAAOmB,IAAA,EAAMC,eAAA,KAAoB,YAAY;MACjDD,IAAA,CAAKC,eAAA,CAAgB,CAACC,CAAA,EAAGC,CAAA,EAAGC,CAAA,EAAGC,CAAA,KAAM;QAEnC,IAAI,CAACT,MAAA,IAAUQ,CAAA,IAAK,GAAG;QACvB,MAAME,GAAA,GAAMtB,SAAA,CAAUH,OAAA;QACtB,MAAM0B,GAAA,GAAMJ,CAAA,IAAKG,GAAA,CAAIvB,MAAA,IAAUoB,CAAA,GAAIE,CAAA,IAAK,KAAKH,CAAA,GAAII,GAAA,CAAIxB,KAAA,IAASoB,CAAA,GAAIE,CAAA,GAAI;QACtE,IAAIG,GAAA,IAAO,CAACV,MAAA,EAAQjB,aAAA,CAAcC,OAAA,GAAU;QAC5CgB,MAAA,GAASU,GAAA;MACX,CAAC;IACH,GAAGjC,iBAAiB;IACpB,OAAO,MAAM;MACXsB,MAAA,GAAS;MACTY,aAAA,CAAcV,KAAK;IACrB;EACF,GAAG,CAACb,IAAA,EAAMN,QAAA,EAAUH,WAAW,CAAC;AAClC","ignoreList":[]}

package/dist/jsx/views/usePageFlowLoadMore.native.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var usePageFlowLoadMore_exports = {};
+__export(usePageFlowLoadMore_exports, {
+  PAGE_FLOW_POLL_MS: () => PAGE_FLOW_POLL_MS,
+  usePageFlowLoadMore: () => usePageFlowLoadMore
+});
+module.exports = __toCommonJS(usePageFlowLoadMore_exports);
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var PAGE_FLOW_POLL_MS = 250;
+function usePageFlowLoadMore(param) {
+  var {
+    sentinelRef,
+    enabled,
+    onLoadMore,
+    rearmKey
+  } = param;
+  var onLoadMoreRef = (0, import_react.useRef)(onLoadMore);
+  onLoadMoreRef.current = onLoadMore;
+  var {
+    width,
+    height
+  } = (0, import_tamagui.useWindowDimensions)();
+  var windowRef = (0, import_react.useRef)({
+    width,
+    height
+  });
+  windowRef.current = {
+    width,
+    height
+  };
+  var live = enabled && Boolean(onLoadMore);
+  (0, import_react.useEffect)(function () {
+    if (!live) return;
+    if (import_tamagui.isWeb) {
+      if (typeof IntersectionObserver === "undefined") return;
+      var el = sentinelRef.current;
+      if (!el) return;
+      var observer = new IntersectionObserver(function (entries) {
+        var _onLoadMoreRef_current;
+        if (entries.some(function (entry) {
+          return entry.isIntersecting;
+        })) (_onLoadMoreRef_current = onLoadMoreRef.current) === null || _onLoadMoreRef_current === void 0 ? void 0 : _onLoadMoreRef_current.call(onLoadMoreRef);
+      });
+      observer.observe(el);
+      return function () {
+        return observer.disconnect();
+      };
+    }
+    var active = true;
+    var inside = false;
+    var timer = setInterval(function () {
+      var node = sentinelRef.current;
+      if (typeof (node === null || node === void 0 ? void 0 : node.measureInWindow) !== "function") return;
+      node.measureInWindow(function (x, y, w, h) {
+        var _onLoadMoreRef_current;
+        if (!active || w <= 0) return;
+        var win = windowRef.current;
+        var now = y <= win.height && y + h >= 0 && x < win.width && x + w > 0;
+        if (now && !inside) (_onLoadMoreRef_current = onLoadMoreRef.current) === null || _onLoadMoreRef_current === void 0 ? void 0 : _onLoadMoreRef_current.call(onLoadMoreRef);
+        inside = now;
+      });
+    }, PAGE_FLOW_POLL_MS);
+    return function () {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [live, rearmKey, sentinelRef]);
+}
+//# sourceMappingURL=usePageFlowLoadMore.native.js.map

package/dist/jsx/views/usePageFlowLoadMore.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","usePageFlowLoadMore_exports","PAGE_FLOW_POLL_MS","usePageFlowLoadMore","module","exports","import_react","require","import_tamagui","param","sentinelRef","enabled","onLoadMore","rearmKey","onLoadMoreRef","useRef","current","width","height","useWindowDimensions","windowRef","live","Boolean","useEffect","isWeb","IntersectionObserver","el"],"sources":["../../../src/views/usePageFlowLoadMore.ts"],"sourcesContent":[null],"mappings":"AAAA,YAAyB;;AACzB,IAAAA,SAAS,GAAOC,MAAA,CAAAC,cAAA;AAGT,IAAAC,gBAAM,GAAAF,MAAoB,CAAAG,wBAAA;AA8B1B,IAAAC,iBAAS,GAAAJ,MAAoB,CAAAK,mBAAA;AAAA,IAClCC,YAAA,GAAAN,MAAA,CAAAO,SAAA,CAAAC,cAAA;AAAA,IACAC,QAAA,GAAAA,CAAAC,MAAA,EAAAC,GAAA;EACA,SAAAC,IAAA,IAAAD,GAAA,EACAZ,SAAA,CAAAW,MAAA,EAAAE,IAAA;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AACF;AACE,IAAAC,WAAM,GAAAA,CAAAC,EAAA,EAAAC,IAAgB,EAAAC,MAAO,EAAAC,IAAU;EACvC,IAAAF,IAAA,WAAcA,IAAA,KAAU,mBAAAA,IAAA;IACxB,KAAM,IAAEG,GAAA,IAAOhB,iBAAW,CAAAa,IAAA,GAC1B,IAAM,CAAAX,YAAY,CAAAe,IAAO,CAAEL,EAAA,EAAAI,GAAO,KAAAA,GAAQ,KAAAF,MAAA,EAC1CnB,SAAU,CAAAiB,EAAA,EAAUI,GAAE;MAAAP,GAAO,EAAAA,CAAA,KAAOI,IAAA,CAAAG,GAAA;MAAAN,UAAA,IAAAK,IAAA,GAAAjB,gBAAA,CAAAe,IAAA,EAAAG,GAAA,MAAAD,IAAA,CAAAL;IAAA;EACpC;EAEA,OAAAE,EAAA;AACE;AACA,IAAAM,YAAW,GAAAC,GAAA,IAAAR,WAAA,CAAAhB,SAAA;EAAAyB,KAAA;AAAA,IAAAD,GAAA;AACT,IAAAE,2BAAW;AACXhB,QAAA,CAAAgB,2BAAuB;EACvBC,iBAAS,EAAAA,CAAA,KAAAA,iBAAA;EACTC,mBAAM,EAAWA,CAAA,KAAIA;AACnB;AAA2EC,MAC7E,CAACC,OAAA,GAAAP,YAAA,CAAAG,2BAAA;AACD,IAAAK,YAAS,GAAAC,OAAU;AACnB,IAAAC,cAAO,GAAMD,OAAS,WAAW;AAAA,IACnCL,iBAAA;AACA,SAAIC,mBAASA,CAAAM,KAAA;EACb;IAAIC,WAAS;IAAAC,OAAA;IAAAC,UAAA;IAAAC;EAAA,IAAAJ,KAAA;EACb,IAAAK,aAAc,OAAAR,YAAkB,CAAAS,MAAA,EAAAH,UAAA;EAC9BE,aAAM,CAAAE,OAAO,GAAAJ,UAAY;EACzB;IAAAK,KAAI;IAAAC;EAAO,CAAM,OAAAV,cAAoB,CAAAW,mBAAY;EACjD,IAAAC,SAAK,OAAAd,YAAuB,CAAAS,MAAG,EAAM;IAEnCE,KAAA;IACAC;EACA;EACAE,SAAA,CAAIJ,OAAO,GAAC;IACZC,KAAA;IAASC;EACV;EAEH,IAAAG,IAAA,GAAOV,OAAM,IAAAW,OAAA,CAAAV,UAAA;EACX,IAAAN,YAAS,CAAAiB,SAAA;IACT,KAAAF,IAAA;IACF,IAAAb,cAAA,CAAAgB,KAAA;MACE,WAAMC,oBAAsB;MAClC,IAAAC,EAAA,GAAAhB,WAAA,CAAAM,OAAA","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "7.77.1",
+  "version": "7.78.0",
   "description": "multiplatform.one ui components",
   "keywords": [
     "components",
@@ -58,11 +58,11 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/forms": "^7.77.1",
-    "@multiplatform.one/i18n": "^7.77.1",
-    "@multiplatform.one/platform": "^7.77.1",
-    "@multiplatform.one/router": "^7.77.1",
-    "@multiplatform.one/theme": "^7.77.1",
+    "@multiplatform.one/forms": "^7.78.0",
+    "@multiplatform.one/i18n": "^7.78.0",
+    "@multiplatform.one/platform": "^7.78.0",
+    "@multiplatform.one/router": "^7.78.0",
+    "@multiplatform.one/theme": "^7.78.0",
     "@phosphor-icons/react": "^2.1.10",
     "@shopify/flash-list": "^2.3.1",
     "@tamagui/colors": "2.7.6",
@@ -89,9 +89,9 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.77.1",
-    "@multiplatform.one/storybook": "7.77.1",
-    "@multiplatform.one/test-utils": "7.77.1",
+    "@multiplatform.one/config": "7.78.0",
+    "@multiplatform.one/storybook": "7.78.0",
+    "@multiplatform.one/test-utils": "7.78.0",
     "@tamagui/build": "2.7.6",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",

package/src/Lightbox/Lightbox.spec.tsx

@@ -109,7 +109,7 @@ describe("Lightbox (web)", () => {
     expect(dialog()).toBeNull();
   });
 
-  it("floats every control on a material plate over the photo (LC-176)", () => {
+  it("floats every control on a flat plate over the photo (LC-176)", () => {
     renderWithProviders(<Harness />);
     for (const name of ["Close", "Previous", "Next"]) {
       const control = dialog()?.querySelector(`[aria-label="${name}"]`);

package/src/Lightbox/MediaControl.tsx

@@ -1,9 +1,8 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ComponentProps } from "react";
-import { useTheme } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../Button";
 import { componentColors } from "../componentColors";
-import { Material, materialOpacity, translucent } from "../Material";
 
 type MediaControlProps = Pick<
   ComponentProps<typeof Button>,
@@ -12,21 +11,14 @@ type MediaControlProps = Pick<
 
 /**
  * An icon-only control floating over a photo (LC-176 ICON-BUTTON, over-media
- * case): a bare glyph on a round plate of the MPO material, so it stays
- * legible on any frame. The blur comes from Material, the one sanctioned
- * backdrop blur (LC-206). Swaps for the shared IconButton's over-media
- * variant once FZ-8020 lands.
+ * case): a bare glyph on a flat round plate, so it stays legible on any frame.
+ * The plate is a fill and nothing else; it does not pretend to be glass.
  */
 export function MediaControl(props: MediaControlProps) {
   const { knobProps } = useResolvedKnobs({ component: "Lightbox" });
-  const theme = useTheme() as unknown as Record<string, { val?: unknown } | undefined>;
-  const fillToken = componentColors.mediaPlate.fill;
-  const fill = theme[fillToken.slice(1)]?.val;
   return (
-    <Material
-      backgroundColor={
-        translucent(typeof fill === "string" ? fill : undefined, materialOpacity()) ?? fillToken
-      }
+    <YStack
+      backgroundColor={componentColors.mediaPlate.fill}
       borderRadius={1000}
       overflow="hidden"
       flexShrink={0}
@@ -39,6 +31,6 @@ export function MediaControl(props: MediaControlProps) {
         color={componentColors.mediaPlate.glyph}
         {...props}
       />
-    </Material>
+    </YStack>
   );
 }

package/src/appShell/TabHost.native.spec.tsx

@@ -46,10 +46,18 @@ const fakeTabs: NativeTabs = {
       />
     </div>
   ),
-  Screen: ({ children, tabKey, isFocused, icon, title }) => (
+  Screen: ({
+    children,
+    tabKey,
+    isFocused,
+    icon,
+    title,
+    overrideScrollViewContentInsetAdjustmentBehavior,
+  }) => (
     <section
       data-testid={`native-screen-${tabKey}`}
       data-focused={String(Boolean(isFocused))}
+      data-inset-adjust={String(overrideScrollViewContentInsetAdjustmentBehavior)}
       data-symbol={icon?.ios.name}
       aria-label={title}
     >
@@ -164,6 +172,18 @@ describe("NativeTabHost", () => {
     );
     expect(screen.getByTestId("inset").textContent).toBe("0");
   });
+
+  it("clears the bar once: the published inset, never the native scroll-inset adjustment too (FZ-8640)", () => {
+    renderNative("/pokemon");
+    expect(Number(screen.getByTestId("inset").textContent)).toBeGreaterThanOrEqual(
+      nativeTabBarHeight,
+    );
+    for (const item of items) {
+      expect(
+        screen.getByTestId(`native-screen-${item.key}`).getAttribute("data-inset-adjust"),
+      ).toBe("false");
+    }
+  });
 });
 
 describe("TabHost fallback", () => {

package/src/appShell/TabHost.native.tsx

@@ -13,6 +13,12 @@
  * without RNSTabsHost, a platform other than iOS, or an item without an SF
  * Symbol keeps the MPO TabBar. Android stays on the MPO TabBar until the
  * items carry image icons the Material bar can draw.
+ *
+ * The bar's clearance is the inset this host publishes, as with the MPO
+ * TabBar, so a Screen pads by it whether or not it scrolls. Each tab screen
+ * leaves its scroll view's inset adjustment off: react-native-screens would
+ * otherwise flip the first scroll view to `automatic`, and UIKit would add
+ * the bar's height a second time (FZ-8640).
  */
 import { useGlyphColor, useIdentityInkOnSurface } from "@multiplatform.one/theme";
 import { type ComponentType, type ReactNode, useEffect, useRef, useState } from "react";
@@ -53,6 +59,7 @@ export interface NativeTabs {
     selectedIcon?: IconProp["ios"];
     tabBarItemAccessibilityLabel?: string;
     tabBarItemTestID?: string;
+    overrideScrollViewContentInsetAdjustmentBehavior?: boolean;
   }>;
 }
 
@@ -139,6 +146,7 @@ export function NativeTabHost({
           }
           tabBarItemAccessibilityLabel={item.label}
           tabBarItemTestID={`tab-bar-item-${item.key.replace(/^\/+/, "") || "root"}`}
+          overrideScrollViewContentInsetAdjustmentBehavior={false}
         >
           {item.key === focusedKey ? children : null}
         </Screen>

package/src/componentColors.ts

@@ -131,7 +131,7 @@ export const componentColors = {
   debug: "$color9",
 
   /**
-   * The round material plate under an icon control floating over a photo
+   * The flat round plate under an icon control floating over a photo
    * (LC-176). The fill sits steps above the viewer's dark ground so the
    * plate reads on black as well as on a bright frame (FZ-8009 r2).
    */

package/src/layouts/page.tsx

@@ -517,14 +517,7 @@ export function PageHeader({
             >
               {/* LC-153: page-head actions are a bar; neutral buttons go plain. */}
               <Surface bar>
-                <IconButtonGroup
-                  {...knobProps.gap}
-                  justifyContent="flex-end"
-                  flexWrap="wrap"
-                  flexGrow={1}
-                  flexShrink={1}
-                  minWidth={0}
-                >
+                <IconButtonGroup {...knobProps.gap} justifyContent="flex-end">
                   {actions}
                 </IconButtonGroup>
               </Surface>

package/src/layouts/pageChrome.phone.spec.tsx

@@ -61,4 +61,18 @@ describe("PageHeader actions (LC-142)", () => {
     expect(atoms(row, "_jc-")).toEqual(["_jc-flex-end"]);
     expect(atoms(row?.parentElement ?? null, "_fw-")).toEqual([]);
   });
+
+  it("hug their buttons: the group never wraps or grows (FZ-8521)", () => {
+    const { container } = renderWithProviders(
+      <PageHeader
+        title="Pokemon"
+        subtitle="21 Pokemon in the Pokédex"
+        actions={<button type="button">Add</button>}
+      />,
+    );
+    const group = container.querySelector("[data-page-header-actions] [data-mp-icon-button-group]");
+    expect(group).toBeTruthy();
+    expect(atoms(group, "_fw-")).toEqual([]);
+    expect(atoms(group, "_fg-")).toEqual([]);
+  });
 });

package/src/views/ImageGrid.native-press.spec.tsx

@@ -0,0 +1,172 @@
+/**
+ * FZ-8659, under tamagui's NATIVE build (vitest.native.config.mjs): a
+ * page-flow ImageGrid loads its next page when the user scrolls to the end.
+ *
+ * The grid flows with the screen's scroll, so it never sees a scroll event.
+ * Native measures the sentinel under the last row in window coordinates, and
+ * "scrolling" here moves where that measurement says the sentinel sits.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup } from "@testing-library/react";
+import { useCallback, useState } from "react";
+import { isWeb } from "tamagui";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ImageGrid } from "./ImageGrid";
+import { PAGE_FLOW_POLL_MS } from "./usePageFlowLoadMore";
+
+type Rect = [x: number, y: number, width: number, height: number];
+
+const columns = 3;
+const rowHeight = 1000;
+/** Scroll offset of the screen's ScrollView, or null for a sentinel not laid out yet. */
+let scrollY: number | null = 0;
+
+const tileCount = () => document.querySelectorAll('[data-testid="tile"]').length;
+const contentHeight = () => Math.ceil(tileCount() / columns) * rowHeight;
+const sentinelRect = (): Rect =>
+  scrollY === null ? [0, 0, 0, 0] : [0, contentHeight() - scrollY, 390, 1];
+
+// A phone's window. The test DOM reports 0 x 0, which no sentinel can enter.
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+}));
+const windowHeight = 844;
+
+/** The host view's own measureInWindow answers with the modelled scroll position. */
+const stubSentinel = () => {
+  const el = document.querySelector('[data-testid="image-grid-sentinel"]') as
+    | (HTMLElement & { measureInWindow?: (cb: (...rect: Rect) => void) => void })
+    | null;
+  if (el) el.measureInWindow = (cb) => cb(...sentinelRect());
+};
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  scrollY = 0;
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+const all = Array.from({ length: 21 }, (_, i) => ({ id: i + 1 }));
+
+/** The FrappeList bridge's shape: onLoadMore widens the slice, 12 per page. */
+function Paged({
+  onRequest,
+  isLoading = false,
+  pageSize = 12,
+  step = pageSize,
+}: {
+  onRequest: () => void;
+  isLoading?: boolean;
+  pageSize?: number;
+  /** Rows a request adds; 0 pins the grid so nothing but the latch stops a repeat. */
+  step?: number;
+}) {
+  const [limit, setLimit] = useState(pageSize);
+  const onLoadMore = useCallback(() => {
+    onRequest();
+    setLimit((prev) => prev + step);
+  }, [onRequest, step]);
+  const items = all.slice(0, limit);
+  return (
+    <ImageGrid
+      items={items}
+      columns={columns}
+      isLoading={isLoading}
+      hasMore={all.length > limit}
+      onLoadMore={onLoadMore}
+      renderItem={(item) => <span data-testid="tile">{item.id}</span>}
+    />
+  );
+}
+
+const poll = (times = 1) => {
+  for (let i = 0; i < times; i++) {
+    stubSentinel();
+    act(() => {
+      vi.advanceTimersByTime(PAGE_FLOW_POLL_MS);
+    });
+  }
+};
+
+/** Scroll until the grid's last row sits on the window's bottom edge. */
+const scrollToEnd = (polls = 1) => {
+  scrollY = contentHeight() - windowHeight + 1;
+  poll(polls);
+};
+const scrollToTop = (polls = 1) => {
+  scrollY = 0;
+  poll(polls);
+};
+
+describe("ImageGrid page-flow load-more under tamagui's NATIVE build (FZ-8659)", () => {
+  it("runs tamagui's native build", () => {
+    expect(isWeb).toBe(false);
+  });
+
+  it("requests nothing while the end of the grid is below the window", () => {
+    const onRequest = vi.fn();
+    renderWithProviders(<Paged onRequest={onRequest} />);
+    scrollToTop(8);
+    expect(onRequest).not.toHaveBeenCalled();
+  });
+
+  it("requests the next page once per scroll to the end, then stops when nothing remains", () => {
+    const onRequest = vi.fn();
+    renderWithProviders(<Paged onRequest={onRequest} pageSize={8} />);
+    expect(tileCount()).toBe(8);
+
+    scrollToEnd(6);
+    expect(onRequest).toHaveBeenCalledTimes(1);
+    expect(tileCount()).toBe(16);
+
+    scrollToEnd(6);
+    expect(onRequest).toHaveBeenCalledTimes(2);
+    expect(tileCount()).toBe(21);
+
+    scrollToTop(2);
+    scrollToEnd(6);
+    expect(onRequest).toHaveBeenCalledTimes(2);
+  });
+
+  it("fires once while the user rests at the end, and again after leaving and coming back", () => {
+    const onRequest = vi.fn();
+    renderWithProviders(<Paged onRequest={onRequest} step={0} />);
+    scrollToEnd(12);
+    expect(onRequest).toHaveBeenCalledTimes(1);
+    scrollToTop(2);
+    scrollToEnd(12);
+    expect(onRequest).toHaveBeenCalledTimes(2);
+  });
+
+  it("loads all 21 of the reference bench's records in 12-row pages", () => {
+    const onRequest = vi.fn();
+    renderWithProviders(<Paged onRequest={onRequest} />);
+    expect(tileCount()).toBe(12);
+    scrollToEnd(8);
+    expect(onRequest).toHaveBeenCalledTimes(1);
+    expect(tileCount()).toBe(21);
+  });
+
+  it("holds while a page is in flight and fires once when it clears", () => {
+    const onRequest = vi.fn();
+    const view = renderWithProviders(<Paged onRequest={onRequest} isLoading />);
+    scrollToEnd(6);
+    expect(onRequest).not.toHaveBeenCalled();
+    view.rerender(<Paged onRequest={onRequest} />);
+    poll(6);
+    expect(onRequest).toHaveBeenCalledTimes(1);
+  });
+
+  it("never fires for a sentinel that has not been laid out", () => {
+    const onRequest = vi.fn();
+    renderWithProviders(<Paged onRequest={onRequest} />);
+    scrollY = null;
+    poll(6);
+    expect(onRequest).not.toHaveBeenCalled();
+  });
+});

package/src/views/ImageGrid.tsx

@@ -19,8 +19,9 @@ import {
 } from "@multiplatform.one/theme";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import type { RegisterableHotkey } from "@tanstack/react-hotkeys";
-import React, { useCallback, useEffect, useId, useRef, useState } from "react";
+import React, { useCallback, useId, useRef, useState } from "react";
 import { useTranslation } from "../shared/i18n";
+import { usePageFlowLoadMore } from "./usePageFlowLoadMore";
 // useWindowDimensions from tamagui, NOT react-native: importing react-native
 // here pulls react-native-web's CJS inline-style-prefixer into the SSR module
 // graph, which the SSR runner evaluates as ESM ("exports is not defined").
@@ -429,21 +430,14 @@ export function ImageGrid<T>({
     hotkeyOpts,
   );
 
-  // Page-flow mode (no explicit height): fire infinite loads when the
-  // bottom sentinel enters the viewport. IntersectionObserver is web-only;
-  // native consumers needing infinite scroll pass an explicit `height` so
-  // the grid owns its own scroll container.
-  useEffect(() => {
-    if (height !== undefined || !onLoadMore || !hasMore || isLoading) return;
-    if (typeof IntersectionObserver === "undefined") return;
-    const el = sentinelRef.current;
-    if (!el) return;
-    const observer = new IntersectionObserver((entries) => {
-      if (entries.some((entry) => entry.isIntersecting)) onLoadMore();
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [height, onLoadMore, hasMore, isLoading]);
+  // Page-flow mode (no explicit height): load the next page when the bottom
+  // sentinel enters the window, on the web and on native (FZ-8659).
+  usePageFlowLoadMore({
+    sentinelRef,
+    enabled: height === undefined && hasMore && !isLoading,
+    onLoadMore,
+    rearmKey: items.length,
+  });
 
   // Error wins over empty (DG-ST-01); initial load renders the grid twin.
   const hasError = resolveAsyncStatus({ error }) === "error";
@@ -533,7 +527,7 @@ export function ImageGrid<T>({
             <Spinner size="small" />
           </YStack>
         )}
-        <View ref={sentinelRef as any} height={1} />
+        <View ref={sentinelRef as any} height={1} testID="image-grid-sentinel" />
       </View>
     );