@multiplatform.one/components 7.80.0 → 7.81.1

package/src/appShell/AppShell.spec.tsx

@@ -17,6 +17,7 @@ import {
 } from "../layouts/page";
 import { ListPageLayout } from "../layouts/PageTemplates";
 import { AppShell, appShellRoute, type AppShellDestination } from "./AppShell";
+import { setBottomChromeInset } from "./bottomChrome";
 
 const size = vi.hoisted(() => ({ value: "compact" as string }));
 vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
@@ -184,6 +185,56 @@ describe("AppShell on a phone", () => {
     expect(screen.queryByRole("tablist")).toBeNull();
     expect(screen.getByTestId("page")).toBeTruthy();
   });
+
+  it("keeps the tab bar around an own-chrome route that is a tab, and on a route below it", () => {
+    const withDesk = [...destinations, { key: "/desk", label: "Desk", icon: HouseIcon }];
+    for (const path of ["/desk", "/desk/Pokemon"]) {
+      const { onNavigate } = shell(path, { destinations: withDesk });
+      expect(screen.getByTestId("app-shell").getAttribute("data-chrome")).toBe("own");
+      expect(screen.queryByTestId("app-shell-bar")).toBeNull();
+      const tabs = screen.getAllByRole("tab");
+      expect(tabs.map((tab) => tab.getAttribute("aria-label"))).toEqual([
+        "Home",
+        "Pokemon",
+        "Desk",
+      ]);
+      expect(tabs[2]!.getAttribute("aria-selected")).toBe("true");
+      fireEvent.click(tabs[0]!);
+      expect(onNavigate).toHaveBeenCalledWith("/");
+      expect(screen.getByTestId("page")).toBeTruthy();
+      cleanup();
+    }
+  });
+
+  it("ends an own-chrome tab route above the tab bar it keeps, and clears it once", () => {
+    const bar = Symbol("bar");
+    act(() => setBottomChromeInset(bar, 77));
+    try {
+      shell("/desk/Pokemon", {
+        destinations: [...destinations, { key: "/desk", label: "Desk", icon: HouseIcon }],
+        children: <Screen>row</Screen>,
+      });
+      const frame = screen.getByTestId("app-shell-own-chrome");
+      expect(
+        getComputedStyle(frame).paddingBottom === "77px" ||
+          /\b_pb-77px\b|padding-bottom: 77px/.test(frame.outerHTML),
+      ).toBe(true);
+      expect(frame.contains(screen.getByText("row"))).toBe(true);
+      expect(screen.queryByTestId("screen-chrome-clearance")).toBeNull();
+    } finally {
+      act(() => setBottomChromeInset(bar, null));
+    }
+  });
+
+  it("draws no tab bar around an own-chrome route at regular width", () => {
+    size.value = "expanded";
+    shell("/desk", {
+      destinations: [...destinations, { key: "/desk", label: "Desk", icon: HouseIcon }],
+    });
+    expect(screen.getByTestId("app-shell").getAttribute("data-chrome")).toBe("own");
+    expect(screen.queryByRole("tablist")).toBeNull();
+    expect(screen.queryByTestId("app-shell-sidebar")).toBeNull();
+  });
 });
 
 describe("AppShell at regular width", () => {

package/src/appShell/AppShell.tsx

@@ -17,7 +17,8 @@
  *   (LC-101 ONE-SIDEBAR).
  *
  * A route listed in `ownChrome` mounts its own full chrome (a desk), so the
- * shell draws nothing around it. A page whose `Screen` pins its own top bar
+ * shell draws no bar or sidebar around it. On a phone, one that is also a tab
+ * destination keeps the tab bar, the only way to the other tabs (FZ-8105). A page whose `Screen` pins its own top bar
  * (LC-157) owns the nav bar on a phone, so the shell's bar steps aside there.
  */
 import { zIndex } from "@multiplatform.one/forms";
@@ -48,7 +49,7 @@ import { Sidebar } from "../layouts/sidebar";
 import { useTranslation } from "../shared/i18n";
 import type { TabBarIcon, TabBarItem } from "./TabBar";
 import { TabHost } from "./TabHost";
-import { useBottomChromeInset, useFloatingBarMounted } from "./bottomChrome";
+import { BottomChromeCleared, useBottomChromeInset, useFloatingBarMounted } from "./bottomChrome";
 
 export interface AppShellDestination {
   /** The destination's route; a path under it keeps it selected. */
@@ -305,6 +306,18 @@ export function AppShell({
     [destinations],
   );
 
+  const showTabs = compact && Boolean(destination && tabs.includes(destination));
+  const tabItems: TabBarItem[] = tabs.map(({ key, label, icon, nativeIcon }) => ({
+    key,
+    label,
+    icon,
+    nativeIcon,
+  }));
+  const onTabPress = (key: string) => {
+    const item = tabs.find((tab) => tab.key === key);
+    if (item) go(item);
+  };
+
   if (ownsChrome) {
     return (
       <YStack
@@ -315,7 +328,20 @@ export function AppShell({
         data-testid={testID}
         data-chrome="own"
       >
-        {children}
+        {showTabs ? (
+          <TabHost items={tabItems} activeKey={destination?.key} onTabPress={onTabPress}>
+            <YStack
+              flex={1}
+              minHeight={0}
+              paddingBottom={chromeInset}
+              data-testid="app-shell-own-chrome"
+            >
+              <BottomChromeCleared>{children}</BottomChromeCleared>
+            </YStack>
+          </TabHost>
+        ) : (
+          children
+        )}
       </YStack>
     );
   }
@@ -401,13 +427,6 @@ export function AppShell({
     </YStack>
   );
 
-  const showTabs = compact && Boolean(destination && tabs.includes(destination));
-  const tabItems: TabBarItem[] = tabs.map(({ key, label, icon, nativeIcon }) => ({
-    key,
-    label,
-    icon,
-    nativeIcon,
-  }));
   // The floating TabBar takes the accessory into its own capsule. Otherwise
   // it renders in place, and on native it clears the system tab bar, which
   // the content runs under.
@@ -430,10 +449,7 @@ export function AppShell({
         <TabHost
           items={tabItems}
           activeKey={showTabs ? destination?.key : undefined}
-          onTabPress={(key) => {
-            const item = tabs.find((tab) => tab.key === key);
-            if (item) go(item);
-          }}
+          onTabPress={onTabPress}
         >
           {content}
           {pageAccessory}

package/src/appShell/ScopeMenu.spec.tsx

@@ -135,3 +135,25 @@ describe("ScopeMenu (LC-105 COVER-TRIGGER)", () => {
     expect(screen.getByLabelText("Environment: Production")).toBeTruthy();
   });
 });
+
+describe("ScopeMenu as a phone sheet (FZ-8557)", () => {
+  it("titles the sheet with the picker's label instead of echoing the trigger", async () => {
+    const width = window.innerWidth;
+    Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: 390 });
+    try {
+      renderWithProviders(<Tenant />);
+      fireEvent.click(screen.getByTestId("tenant-trigger"));
+      const header = await screen.findByTestId("tenant-sheet-header");
+      expect(screen.getByRole("heading", { name: "Tenant" })).toBeTruthy();
+      expect(header.closest('[data-testid="floating-panel-sheet"]')).not.toBeNull();
+      expect(screen.queryByTestId("tenant-first-row")).toBeNull();
+      expect(screen.getAllByRole("menuitemradio")).toHaveLength(2);
+    } finally {
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        writable: true,
+        value: width,
+      });
+    }
+  });
+});

package/src/appShell/ScopeMenu.tsx

@@ -14,13 +14,16 @@
  *   side, never one menu with two sections.
  *
  * Narrow viewports and native get FloatingPanel's sheet (phones take
- * sheets); the first-row contract holds there too.
+ * sheets). A sheet isn't over its trigger, so it drops the first row for a
+ * sheet title, the picker's label (FZ-8557).
  */
-import { FloatingPanel, type PanelWidth } from "@multiplatform.one/forms";
-import { useMenuRowCheckInk, menuRowChecked, useResolvedKnobs } from "@multiplatform.one/theme";
-import { CaretDownIcon, CaretUpIcon, CheckIcon } from "@phosphor-icons/react";
+import { CheckGlyph } from "../CheckGlyph";
+import { FloatingPanel, type PanelWidth, useInPanelSheet } from "@multiplatform.one/forms";
+import { menuRowCheckGlyph, menuRowChecked, useResolvedKnobs } from "@multiplatform.one/theme";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
 import { useState } from "react";
-import { XStack, YStack } from "tamagui";
+import { View, XStack, YStack } from "tamagui";
+import { OverlayHeader } from "../actions/StandardAction";
 import { SizableText } from "../Text";
 
 export interface ScopeMenuOption {
@@ -60,8 +63,8 @@ function ScopeRow({
   ariaLabel?: string;
 }) {
   const { knobProps, control } = useResolvedKnobs();
+  const inSheet = useInPanelSheet();
   const iconSize = Number(knobProps.controlIcon?.width) || undefined;
-  const checkInk = useMenuRowCheckInk();
   const Chevron = chevron === "up" ? CaretUpIcon : CaretDownIcon;
   return (
     <XStack
@@ -71,8 +74,11 @@ function ScopeRow({
       {...(role === "menuitemradio" ? { "aria-checked": !!checked } : {})}
       alignItems="center"
       gap="$2"
-      minHeight="$3"
-      paddingHorizontal="$2.5"
+      // A menu row is the menu row recipe's height, a touch target on a phone
+      // (44pt, HIG); the bar trigger and its echo keep the bar's size.
+      minHeight={role === "menuitemradio" ? knobProps.menuRow.minHeight : "$3"}
+      // A phone sheet's rows keep HIG's 16pt gutter; a bar menu's hug the trigger.
+      paddingHorizontal={inSheet ? "$4" : "$2.5"}
       cursor="pointer"
       onPress={onPress}
       // The echo row is the trigger itself, laid on the panel (LC-112): the
@@ -91,8 +97,8 @@ function ScopeRow({
       {...(chevron === "down" ? { borderRadius: knobProps.borderRadius.borderRadius } : undefined)}
     >
       {role === "menuitemradio" ? (
-        <YStack width={iconSize} alignItems="center" aria-hidden>
-          {checked ? <CheckIcon size={iconSize} weight="bold" color={checkInk} /> : null}
+        <YStack width={menuRowCheckGlyph.size} alignItems="center" aria-hidden>
+          {checked ? <CheckGlyph /> : null}
         </YStack>
       ) : null}
       <SizableText size="$2" fontWeight={chevron ? "500" : "400"} numberOfLines={1}>
@@ -103,6 +109,42 @@ function ScopeRow({
   );
 }
 
+/**
+ * Over its trigger, the menu's first row is the pressed item with its chevron
+ * flipped (LC-112). A phone sheet isn't over its trigger, so it takes a sheet
+ * title, the picker's label, and a close (HIG, FZ-8557 Round 40).
+ */
+function ScopeMenuHead({
+  label,
+  currentLabel,
+  onClose,
+  testID,
+}: {
+  label: string;
+  currentLabel: string;
+  onClose: () => void;
+  testID: string;
+}) {
+  const inSheet = useInPanelSheet();
+  if (inSheet) {
+    return (
+      <View paddingHorizontal="$4" paddingBottom="$2">
+        <OverlayHeader title={label} onClose={onClose} testID={`${testID}-sheet-header`} />
+      </View>
+    );
+  }
+  return (
+    <ScopeRow
+      role="button"
+      label={currentLabel}
+      chevron="up"
+      ariaLabel={`${label}: ${currentLabel}`}
+      onPress={onClose}
+      testID={`${testID}-first-row`}
+    />
+  );
+}
+
 export function ScopeMenu({
   label,
   options,
@@ -144,14 +186,11 @@ export function ScopeMenu({
       }
     >
       <YStack role="menu" aria-label={label} data-testid={`${testID}-panel`}>
-        {/* The pressed item, kept as the first row with its chevron flipped. */}
-        <ScopeRow
-          role="button"
-          label={currentLabel}
-          chevron="up"
-          ariaLabel={`${label}: ${currentLabel}`}
-          onPress={() => setOpen(false)}
-          testID={`${testID}-first-row`}
+        <ScopeMenuHead
+          label={label}
+          currentLabel={currentLabel}
+          onClose={() => setOpen(false)}
+          testID={testID}
         />
         {options.map((option) => (
           <ScopeRow

package/src/appShell/TabBar.tsx

@@ -21,6 +21,7 @@ import {
 import { zIndex } from "@multiplatform.one/forms";
 import { isWeb } from "@multiplatform.one/platform";
 import { type ComponentType, type ReactNode, useEffect, useState } from "react";
+import type { ImageSourcePropType } from "react-native";
 import { XStack, YStack } from "tamagui";
 import { materials, useMaterial } from "../Material";
 import { MaterialBlurFill } from "../Material/blur";
@@ -41,10 +42,19 @@ export interface TabBarItem {
   label: string;
   icon: TabBarIcon;
   /**
-   * The SF Symbols the system tab bar draws on iOS (TabHost). Without them
-   * on every item, iOS keeps the MPO TabBar.
+   * The glyphs the system tab bar draws (TabHost): SF Symbols on iOS, a
+   * raster template image on Android (Material's bar draws no SF Symbol or
+   * SVG; a bundled PNG, so an OTA can carry it). A platform keeps the MPO
+   * TabBar unless every item names its glyph.
    */
-  nativeIcon?: { sfSymbol: string; sfSymbolSelected?: string };
+  nativeIcon?: TabBarNativeIcon;
+}
+
+export interface TabBarNativeIcon {
+  sfSymbol?: string;
+  sfSymbolSelected?: string;
+  /** A monochrome PNG (24dp, @2x and @3x beside it); the bar tints it. */
+  android?: ImageSourcePropType;
 }
 
 export interface TabBarProps {

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

@@ -16,23 +16,36 @@ import {
   NativeTabHost,
   TabHost,
   itemsHaveNativeIcons,
+  nativeIconFor,
   nativeTabBarHeight,
+  nativeTabsPlatforms,
   resolveNativeTabs,
 } from "./TabHost.native";
 
 afterEach(cleanup);
 
 const Glyph = () => null;
+const png = (name: string) => ({ uri: `${name}.png`, width: 24, height: 24 });
 
 const items: TabBarItem[] = [
   {
     key: "/",
     label: "Home",
     icon: Glyph,
-    nativeIcon: { sfSymbol: "house", sfSymbolSelected: "house.fill" },
+    nativeIcon: { sfSymbol: "house", sfSymbolSelected: "house.fill", android: png("house") },
+  },
+  {
+    key: "/pokemon",
+    label: "Pokemon",
+    icon: Glyph,
+    nativeIcon: { sfSymbol: "sparkles", android: png("sparkle") },
+  },
+  {
+    key: "/moves",
+    label: "Moves",
+    icon: Glyph,
+    nativeIcon: { sfSymbol: "bolt", android: png("lightning") },
   },
-  { key: "/pokemon", label: "Pokemon", icon: Glyph, nativeIcon: { sfSymbol: "sparkles" } },
-  { key: "/moves", label: "Moves", icon: Glyph, nativeIcon: { sfSymbol: "bolt" } },
 ];
 
 const fakeTabs: NativeTabs = {
@@ -58,7 +71,8 @@ const fakeTabs: NativeTabs = {
       data-testid={`native-screen-${tabKey}`}
       data-focused={String(Boolean(isFocused))}
       data-inset-adjust={String(overrideScrollViewContentInsetAdjustmentBehavior)}
-      data-symbol={icon?.ios.name}
+      data-symbol={icon?.ios?.name}
+      data-android-icon={(icon?.android?.imageSource as { uri?: string } | undefined)?.uri}
       aria-label={title}
     >
       {children}
@@ -113,19 +127,49 @@ describe("native tabs detection", () => {
     expect(resolveNativeTabs(sources(["RNSTabsHost", "RNSTabsScreen"], throws), "ios")).toBeNull();
   });
 
-  it("keeps the MPO TabBar on Android and the web", () => {
+  it("keeps the MPO TabBar on Android and the web by default", () => {
     const screens = vi.fn(() => ({ Tabs: fakeTabs }));
     const all = sources(["RNSTabsHost", "RNSTabsScreen"], screens);
+    expect(nativeTabsPlatforms).toEqual({ ios: true, android: false });
     expect(resolveNativeTabs(all, "android")).toBeNull();
     expect(resolveNativeTabs(all, "web")).toBeNull();
     expect(screens).not.toHaveBeenCalled();
   });
 
-  it("needs an SF Symbol on every item", () => {
+  it("picks the Material bar on Android once the platform is switched on (FZ-8140)", () => {
+    const on = { ios: true, android: true };
+    expect(
+      resolveNativeTabs(
+        sources(["RNSTabsHost", "RNSTabsScreen"], () => ({ Tabs: fakeTabs })),
+        "android",
+        on,
+      ),
+    ).toBe(fakeTabs);
+    const screens = vi.fn(() => ({ Tabs: fakeTabs }));
+    expect(resolveNativeTabs(sources([], screens), "android", on)).toBeNull();
+    expect(screens).not.toHaveBeenCalled();
+  });
+
+  it("needs this platform's glyph on every item: an SF Symbol on iOS, a PNG on Android", () => {
     expect(itemsHaveNativeIcons(items)).toBe(true);
+    expect(itemsHaveNativeIcons(items, "android")).toBe(true);
     expect(itemsHaveNativeIcons([...items, { key: "/x", label: "X", icon: Glyph }])).toBe(false);
+    const symbolsOnly = items.map(({ nativeIcon, ...item }) => ({
+      ...item,
+      nativeIcon: { sfSymbol: nativeIcon?.sfSymbol },
+    }));
+    expect(itemsHaveNativeIcons(symbolsOnly, "ios")).toBe(true);
+    expect(itemsHaveNativeIcons(symbolsOnly, "android")).toBe(false);
     expect(itemsHaveNativeIcons([])).toBe(false);
   });
+
+  it("hands react-native-screens each platform's glyph from the one item", () => {
+    expect(nativeIconFor(items[0]!)).toEqual({
+      ios: { type: "sfSymbol", name: "house" },
+      android: { type: "imageSource", imageSource: png("house") },
+    });
+    expect(nativeIconFor({ key: "/x", label: "X", icon: Glyph })).toEqual({});
+  });
 });
 
 describe("NativeTabHost", () => {
@@ -136,10 +180,23 @@ describe("NativeTabHost", () => {
     expect(pokemon.contains(screen.getByTestId("page"))).toBe(true);
     expect(screen.getByTestId("native-screen-/").getAttribute("data-focused")).toBe("false");
     expect(screen.getByTestId("native-screen-/").getAttribute("data-symbol")).toBe("house");
+    expect(screen.getByTestId("native-screen-/").getAttribute("data-android-icon")).toBe(
+      "house.png",
+    );
     expect(screen.getByTestId("native-host").getAttribute("data-hidden")).toBe("false");
     expect(screen.queryByTestId("tab-bar")).toBeNull();
   });
 
+  it("paints the theme background under the routed screen, never UIKit's system one", () => {
+    renderNative("/pokemon");
+    const frame = screen.getByTestId("native-tab-screen");
+    expect(screen.getByTestId("native-screen-/pokemon").contains(frame)).toBe(true);
+    expect(frame.contains(screen.getByTestId("page"))).toBe(true);
+    expect(/_bg-background\b|background-color: var\(--background\)/.test(frame.outerHTML)).toBe(
+      true,
+    );
+  });
+
   it("asks the app to navigate on a tab press instead of switching itself", () => {
     const onTabPress = vi.fn();
     renderNative("/pokemon", onTabPress);

package/src/appShell/TabHost.native.tsx

@@ -10,9 +10,10 @@
  *
  * The native view ships in react-native-screens' binary half, so it is
  * feature-detected before react-native-screens' Tabs is required: a binary
- * 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.
+ * without RNSTabsHost, a platform switched off in `nativeTabsPlatforms`, or
+ * an item without its platform's glyph keeps the MPO TabBar. Android's arm
+ * (Material bottom navigation, PNG template icons) is built and switched off
+ * until an Android build proves it (FZ-8140).
  *
  * 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
@@ -20,9 +21,14 @@
  * 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 {
+  useAccentTintedSurface,
+  useGlyphColor,
+  useIdentityInkOnSurface,
+} from "@multiplatform.one/theme";
 import { type ComponentType, type ReactNode, useEffect, useRef, useState } from "react";
-import { Platform, UIManager } from "react-native";
+import { type ImageSourcePropType, Platform, UIManager } from "react-native";
+import { YStack } from "tamagui";
 import { setBottomChromeInset } from "./bottomChrome";
 import { useBottomInset } from "./bottomInset";
 import { type TabBarItem, tabBarInactiveInk } from "./TabBar";
@@ -36,7 +42,17 @@ export const nativeTabsComponents = ["RNSTabsHost", "RNSTabsScreen"] as const;
 /** Points the system tab bar covers above the home-indicator band. */
 export const nativeTabBarHeight = 49;
 
-type IconProp = { ios: { type: "sfSymbol"; name: string } };
+type ImageIcon = { type: "imageSource"; imageSource: ImageSourcePropType };
+type IconProp = { ios?: { type: "sfSymbol"; name: string }; android?: ImageIcon };
+
+/**
+ * The platforms whose system tab bar TabHost draws. Android stays off until
+ * an emulator build shows the Material bar in light and dark (FZ-8140).
+ */
+export const nativeTabsPlatforms: Readonly<Record<string, boolean>> = {
+  ios: true,
+  android: false,
+};
 
 export interface NativeTabs {
   Host: ComponentType<{
@@ -47,6 +63,8 @@ export interface NativeTabs {
     tabBarItemIconColorActive?: string;
     tabBarItemTitleFontColor?: string;
     tabBarItemTitleFontColorActive?: string;
+    tabBarBackgroundColor?: string;
+    tabBarItemActiveIndicatorColor?: string;
     experimentalControlNavigationStateInJS?: boolean;
     onNativeFocusChange?: (event: { nativeEvent: { tabKey: string } }) => void;
   }>;
@@ -56,7 +74,7 @@ export interface NativeTabs {
     title?: string;
     isFocused?: boolean;
     icon?: IconProp;
-    selectedIcon?: IconProp["ios"];
+    selectedIcon?: { type: "sfSymbol"; name: string };
     tabBarItemAccessibilityLabel?: string;
     tabBarItemTestID?: string;
     overrideScrollViewContentInsetAdjustmentBehavior?: boolean;
@@ -74,8 +92,12 @@ const appSources: NativeTabsSources = {
 };
 
 /** react-native-screens' Tabs, or null when this platform or binary cannot draw them. */
-export function resolveNativeTabs(sources: NativeTabsSources, os: string): NativeTabs | null {
-  if (os !== "ios") return null;
+export function resolveNativeTabs(
+  sources: NativeTabsSources,
+  os: string,
+  platforms: Readonly<Record<string, boolean>> = nativeTabsPlatforms,
+): NativeTabs | null {
+  if (!platforms[os]) return null;
   try {
     if (!nativeTabsComponents.every((name) => sources.hasComponent(name))) return null;
     const tabs = sources.screens().Tabs;
@@ -92,9 +114,20 @@ function loadNativeTabs(): NativeTabs | null {
   return cached;
 }
 
-/** True when every item names the SF Symbol the system bar draws. */
-export function itemsHaveNativeIcons(items: readonly TabBarItem[]): boolean {
-  return items.length > 0 && items.every((item) => Boolean(item.nativeIcon?.sfSymbol));
+/** True when every item names the glyph this platform's system bar draws. */
+export function itemsHaveNativeIcons(items: readonly TabBarItem[], os = "ios"): boolean {
+  const glyph = (item: TabBarItem) =>
+    os === "android" ? item.nativeIcon?.android : item.nativeIcon?.sfSymbol;
+  return items.length > 0 && items.every((item) => Boolean(glyph(item)));
+}
+
+/** The item's glyphs in react-native-screens' per-platform icon shape. */
+export function nativeIconFor(item: TabBarItem): IconProp {
+  const { sfSymbol, android } = item.nativeIcon ?? {};
+  return {
+    ...(sfSymbol ? { ios: { type: "sfSymbol" as const, name: sfSymbol } } : {}),
+    ...(android ? { android: { type: "imageSource" as const, imageSource: android } } : {}),
+  };
 }
 
 export function NativeTabHost({
@@ -107,6 +140,8 @@ export function NativeTabHost({
   const { Host, Screen } = tabs;
   const accent = useIdentityInkOnSurface();
   const ink = useGlyphColor(tabBarInactiveInk);
+  const surface = useGlyphColor("$color2");
+  const indicator = useAccentTintedSurface();
   const deviceInset = useBottomInset();
   const [id] = useState(() => Symbol("native-tab-host"));
   const lastKey = useRef(activeKey ?? items[0]?.key);
@@ -126,6 +161,8 @@ export function NativeTabHost({
       tabBarItemIconColorActive={accent}
       tabBarItemTitleFontColor={ink}
       tabBarItemTitleFontColorActive={accent}
+      tabBarBackgroundColor={surface}
+      tabBarItemActiveIndicatorColor={indicator}
       experimentalControlNavigationStateInJS
       onNativeFocusChange={(event) => {
         const key = event.nativeEvent.tabKey;
@@ -138,7 +175,7 @@ export function NativeTabHost({
           tabKey={item.key}
           title={item.label}
           isFocused={item.key === focusedKey}
-          icon={{ ios: { type: "sfSymbol", name: item.nativeIcon!.sfSymbol } }}
+          icon={nativeIconFor(item)}
           selectedIcon={
             item.nativeIcon?.sfSymbolSelected
               ? { type: "sfSymbol", name: item.nativeIcon.sfSymbolSelected }
@@ -148,7 +185,11 @@ export function NativeTabHost({
           tabBarItemTestID={`tab-bar-item-${item.key.replace(/^\/+/, "") || "root"}`}
           overrideScrollViewContentInsetAdjustmentBehavior={false}
         >
-          {item.key === focusedKey ? children : null}
+          {item.key === focusedKey ? (
+            <YStack flex={1} backgroundColor="$background" data-testid="native-tab-screen">
+              {children}
+            </YStack>
+          ) : null}
         </Screen>
       ))}
     </Host>
@@ -157,6 +198,6 @@ export function NativeTabHost({
 
 export function TabHost(props: TabHostProps) {
   const tabs = loadNativeTabs();
-  if (!tabs || !itemsHaveNativeIcons(props.items)) return <MpoTabHost {...props} />;
+  if (!tabs || !itemsHaveNativeIcons(props.items, Platform.OS)) return <MpoTabHost {...props} />;
   return <NativeTabHost tabs={tabs} {...props} />;
 }

package/src/appShell/TabHost.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { HouseIcon, LightningIcon, SparkleIcon, SquaresFourIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { Screen } from "../layouts/page";
+import { Text } from "../Text";
+import type { TabBarItem } from "./TabBar";
+import { TabHost } from "./TabHost";
+
+const meta: Meta<typeof TabHost> = {
+  title: "Components/TabHost",
+  component: TabHost,
+  parameters: { status: { type: "beta" }, layout: "fullscreen" },
+};
+
+export default meta;
+type Story = StoryObj<typeof TabHost>;
+
+const items: TabBarItem[] = [
+  {
+    key: "/",
+    label: "Home",
+    icon: HouseIcon,
+    nativeIcon: { sfSymbol: "house", sfSymbolSelected: "house.fill" },
+  },
+  { key: "/pokemon", label: "Pokemon", icon: SparkleIcon, nativeIcon: { sfSymbol: "sparkles" } },
+  {
+    key: "/moves",
+    label: "Moves",
+    icon: LightningIcon,
+    nativeIcon: { sfSymbol: "bolt", sfSymbolSelected: "bolt.fill" },
+  },
+  {
+    key: "/backoffice",
+    label: "Backoffice",
+    icon: SquaresFourIcon,
+    nativeIcon: { sfSymbol: "square.grid.2x2", sfSymbolSelected: "square.grid.2x2.fill" },
+  },
+];
+
+const rows = Array.from({ length: 30 }, (_, index) => `Row ${index + 1}`);
+
+function Sections({ initial, outside }: { initial: string; outside?: boolean }) {
+  const [active, setActive] = useState(initial);
+  const label = items.find((item) => item.key === active)?.label;
+  return (
+    <TabHost items={items} activeKey={outside ? undefined : active} onTabPress={setActive}>
+      <Screen>
+        <Text>{outside ? "A route under no tab" : label}</Text>
+        {rows.map((row) => (
+          <Text key={row}>{row}</Text>
+        ))}
+      </Screen>
+    </TabHost>
+  );
+}
+
+/**
+ * One tab config: the system tab bar on an iPhone whose binary carries
+ * native tabs, the MPO floating TabBar on the web, GNOME, Android and an
+ * older binary.
+ */
+export const Default: Story = {
+  render: () => <Sections initial="/pokemon" />,
+};
+
+/**
+ * A route under no tab (no `activeKey`): no bar on any platform, and the
+ * screen keeps its place. AppShell keeps the bar on routes below a tab.
+ */
+export const OutsideTabs: Story = {
+  render: () => <Sections initial="/pokemon" outside />,
+};