@multiplatform.one/components 7.83.2 → 7.84.1

package/src/Meter/meter.ts

@@ -23,9 +23,11 @@ export type MeterLayout = "adjacent" | "inline" | "bare";
 export const METER_RADIUS_CLASS = "DEFAULT" as const;
 
 /**
- * Zone paint — theme intent tokens, never raw brand or the accent solid.
- * ok is the LAW pairing (no verdict under threshold, DG-FB-06). warn/critical
- * are the same step-9 solid / step-11 ink channel Progress uses (DG-FB-05).
+ * Zone paint — theme tokens, never raw brand or the accent solid. ok carries
+ * no verdict (DG-FB-06), so it is the plain fill on a track Progress paints:
+ * the theme's accent ink, `formSelectedColors.trackFill` (LC-172, FZ-8044).
+ * warn/critical are the same step-9 solid / step-11 ink channel Progress uses
+ * (DG-FB-05).
  *
  * MPO-154: ok carries no `value`. Under no verdict the readout is ordinary
  * secondary text, so its ink is `knobProps.textAccentColor` — a static
@@ -33,7 +35,7 @@ export const METER_RADIUS_CLASS = "DEFAULT" as const;
  * and it pinned the readout dim at `textAccent: high`.
  */
 export const METER_ZONE_PAINT = {
-  ok: { fill: "$color11" },
+  ok: { fill: "$accentColor" },
   warn: { fill: "$orange9", value: "$orange11" },
   critical: { fill: "$red9", value: "$red11" },
 } as const;

package/src/SheetModal/SheetModal.regularWidth.spec.tsx

@@ -0,0 +1,87 @@
+/**
+ * FZ-8939 (LC-266): the web SheetModal at regular width is the native
+ * panel's twin (FZ-8116). On a desktop window the Tier 2 cells
+ * `components-sheetframe--default` and `components-formlayouts--sign-in-in-sheet`
+ * drew the sheet as a band across the whole window. It is a bottom panel
+ * SHEET_PANEL_WIDTH wide, centred, with the scrim showing on both sides, and a
+ * press beside it dismisses. At compact width it stays the full-width sheet.
+ */
+import { SHEET_PANEL_WIDTH } from "@multiplatform.one/forms";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { SheetModal } from "./index";
+
+// The DOM under test reports no window width of its own, so the window is
+// set here, as the native regular-width spec does.
+const screen = vi.hoisted(() => ({ width: 1280, height: 800 }));
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  useWindowDimensions: () => ({ ...screen, scale: 1, fontScale: 1 }),
+}));
+
+function setWindowWidth(width: number) {
+  screen.width = width;
+}
+
+afterEach(() => {
+  cleanup();
+  screen.width = 1280;
+});
+
+async function openAt(width: number) {
+  setWindowWidth(width);
+  const onOpenChange = vi.fn();
+  const view = renderWithProviders(
+    <SheetModal open onOpenChange={onOpenChange}>
+      <Text>Sign in</Text>
+    </SheetModal>,
+  );
+  // tamagui draws a cover under the frame with the frame's own props; the
+  // frame is the one that is not the cover.
+  let frame: HTMLElement | null = null;
+  await waitFor(() => {
+    frame = document.querySelector('[role="dialog"]:not([data-sheet-cover])');
+    expect(frame).not.toBeNull();
+  });
+  return { view, frame: frame as unknown as HTMLElement, onOpenChange };
+}
+
+const atoms = (node: Element) => String(node.className).split(/\s+/).filter(Boolean);
+
+describe("SheetModal web at regular width (FZ-8939, LC-266)", () => {
+  it("is a centred panel capped at the panel width on a desktop window", async () => {
+    const { frame } = await openAt(1280);
+    expect(frame.getAttribute("data-sheet-form")).toBe("panel");
+    const width = frame.style.width || atoms(frame).find((a) => a.startsWith("_w-")) || "";
+    expect(width).toContain(`${SHEET_PANEL_WIDTH}px`);
+    expect(atoms(frame).some((a) => a === "_als-center")).toBe(true);
+    // A panel keeps its side edges; the compact band drops them.
+    expect(atoms(frame)).not.toContain("_blw-0px");
+    expect(atoms(frame)).not.toContain("_brw-0px");
+  });
+
+  it("dismisses on a press beside the panel, not on a press inside it", async () => {
+    const { frame, onOpenChange } = await openAt(1280);
+    await act(async () => {
+      fireEvent.click(frame);
+    });
+    expect(onOpenChange).not.toHaveBeenCalled();
+    await act(async () => {
+      fireEvent.click(frame.parentElement as HTMLElement);
+    });
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("stays the full-width bottom sheet at phone width", async () => {
+    const { frame, onOpenChange } = await openAt(390);
+    expect(frame.getAttribute("data-sheet-form")).toBe("bottom");
+    expect(atoms(frame)).toContain("_blw-0px");
+    expect(atoms(frame)).toContain("_brw-0px");
+    await act(async () => {
+      fireEvent.click(frame.parentElement as HTMLElement);
+    });
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+});

package/src/SheetModal/index.tsx

@@ -15,7 +15,12 @@ import {
   transitionProps,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import { OverlayStackProvider, useOverlayZIndex } from "@multiplatform.one/forms";
+import {
+  OverlayStackProvider,
+  overlaySizeClass,
+  sheetPanelWidth,
+  useOverlayZIndex,
+} from "@multiplatform.one/forms";
 import { useEffect, useId, useRef, type ReactNode } from "react";
 import { isWeb, Sheet, View, useWindowDimensions } from "tamagui";
 import { OverlayTitleIdContext } from "../actions/StandardAction";
@@ -69,6 +74,47 @@ const IN_DIALOG_REGION = { inDialogRegion: true } as const;
 const fillSlot = { flex: 1, minHeight: 0 } as const;
 const nonShrinking = { flexShrink: 0 } as const;
 
+/** A compact sheet spans the window: only its top edge meets the page. */
+const bottomEdges = { borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth: 0 } as const;
+
+/**
+ * LC-266 (FZ-8939): at regular width the sheet is the native panel's twin, a
+ * bottom panel `sheetPanelWidth` wide and centred with the scrim on both
+ * sides. Its side edges stay, so it reads as a panel rather than a band.
+ */
+function regularPanel(windowWidth: number) {
+  return {
+    width: sheetPanelWidth(windowWidth),
+    alignSelf: "center",
+    borderBottomWidth: 0,
+  } as const;
+}
+
+/**
+ * The sheet's frame sits in a window-wide band that tamagui's pan responder
+ * owns, so a press on the band beside a regular-width panel never reaches the
+ * scrim. A press that lands on the band itself, not inside the panel or the
+ * grabber, is a press outside the sheet, and dismisses it (LC-266).
+ */
+function useBandDismiss(
+  enabled: boolean,
+  frameRef: { current: HTMLElement | null },
+  onDismiss: () => void,
+) {
+  const onDismissRef = useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+  useEffect(() => {
+    if (!isWeb || !enabled) return;
+    const band = frameRef.current?.parentElement;
+    if (!band) return;
+    const onClick = (event: MouseEvent) => {
+      if (event.target === band) onDismissRef.current();
+    };
+    band.addEventListener("click", onClick);
+    return () => band.removeEventListener("click", onClick);
+  });
+}
+
 /** LC-71: the sheet frame is not a control. Auto-focus must not paint a ring. */
 const frameRingReset = {
   outlineWidth: 0,
@@ -112,7 +158,8 @@ export function SheetModal({
       />
     ) : null;
   const snap = resolveWebSnap({ snapPoint, fill });
-  const { height: windowHeight } = useWindowDimensions();
+  const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+  const regular = overlaySizeClass(windowWidth) === "regular";
   const { knobProps } = useResolvedKnobs();
   const sheetZIndex = useOverlayZIndex("sheet");
   const transition = knobProps.motion.slide.transition;
@@ -120,6 +167,7 @@ export function SheetModal({
 
   useSheetFrameFocus(open, frameRef);
   useSheetEscapeDismiss(open, () => onOpenChange(false));
+  useBandDismiss(open && regular, frameRef, () => onOpenChange(false));
 
   return (
     <Sheet
@@ -147,6 +195,7 @@ export function SheetModal({
           role: "dialog",
           "aria-modal": true,
           "aria-labelledby": headerContent ? titleId : undefined,
+          "data-sheet-form": regular ? "panel" : "bottom",
         } as Record<string, unknown>)}
         {...knobProps.gap}
         {...(snap.snapPointsMode === "fit"
@@ -154,9 +203,7 @@ export function SheetModal({
           : null)}
         borderBottomLeftRadius={0}
         borderBottomRightRadius={0}
-        borderLeftWidth={0}
-        borderRightWidth={0}
-        borderBottomWidth={0}
+        {...(regular ? regularPanel(windowWidth) : bottomEdges)}
         overflow="hidden"
         {...frameRingReset}
       >

package/src/Text.stories.tsx

@@ -71,6 +71,19 @@ export const FontWeightFlip: Story = {
   ),
 };
 
+export const InterFaces: Story = {
+  name: "Inter faces (400 to 800)",
+  render: () => (
+    <YStack gap="$2" maxWidth={520}>
+      {(["400", "500", "600", "700", "800"] as const).map((weight) => (
+        <SizableText key={weight} size="$6" fontWeight={weight}>
+          {weight} Hamburgefonstiv 0123
+        </SizableText>
+      ))}
+    </YStack>
+  ),
+};
+
 const digitPresets = {
   Default: defaultPreset,
   Bold: boldPreset,

package/src/appShell/TabBar.spec.tsx

@@ -10,8 +10,9 @@ import {
   Preset,
   createDefaultThemeConfig,
   normalizeToHex,
-  useAccentOnSurface,
+  useActiveTabInk,
   useGlyphColor,
+  useIdentityInkOnSurface,
 } from "@multiplatform.one/theme";
 import { act, cleanup, fireEvent, renderHook, screen } from "@testing-library/react";
 import fs from "node:fs";
@@ -67,9 +68,10 @@ function probeItems(seen: Record<string, GlyphProps>): TabBarItem[] {
   ];
 }
 
-const expected: { accent?: string; secondary?: string; primary?: string } = {};
+const expected: { accent?: string; secondary?: string; primary?: string; identity?: string } = {};
 function InkProbe() {
-  expected.accent = useAccentOnSurface();
+  expected.accent = useActiveTabInk();
+  expected.identity = useIdentityInkOnSurface();
   expected.secondary = useGlyphColor(tabBarInactiveInk);
   expected.primary = useGlyphColor("$color");
   return null;
@@ -152,9 +154,13 @@ describe("TabBar (LC-150 TAB-BAR-ANATOMY)", () => {
       });
     }
 
-    it(`${scheme}, no hue: the active tab is the preset's accent ink, inactive the secondary ink`, () => {
+    it(`${scheme}, no hue: the active tab is the neutral accent's ink, bold mono, never grey`, () => {
       const seen = renderBar(scheme, "/");
       expect(expected.accent).toBeTruthy();
+      // The house accent is the neutral inverse: the active tab is the same
+      // ink the system bar draws, never the grey accent-ramp step (Round 54).
+      expect(expected.accent).toBe(expected.identity);
+      expect(expected.accent).not.toBe(expected.secondary);
       expect(seen["/"]).toMatchObject({ color: expected.accent, weight: "fill" });
       expect(seen["/moves"]).toMatchObject({ color: expected.secondary, weight: "regular" });
     });

package/src/appShell/TabBar.tsx

@@ -10,14 +10,10 @@
  * (`useBottomChromeInset`), so the last row clears it. The bottom accessory
  * (LC-174, e.g. a pager) floats as its own smaller capsule above it. A theme
  * changes the colours only: the active item is the theme's accent as
- * readable ink on an accent-wash pill, inactive items are the secondary text
- * ink.
+ * readable ink (`useActiveTabInk`, the same pick as the system tab bar's) on
+ * an accent-wash pill, inactive items are the secondary text ink.
  */
-import {
-  useAccentOnSurface,
-  useAccentTintedSurface,
-  useGlyphColor,
-} from "@multiplatform.one/theme";
+import { useAccentTintedSurface, useActiveTabInk, useGlyphColor } from "@multiplatform.one/theme";
 import { zIndex } from "@multiplatform.one/forms";
 import { isWeb } from "@multiplatform.one/platform";
 import { type ComponentType, type ReactNode, useEffect, useState } from "react";
@@ -134,7 +130,7 @@ function TabBarButton({
   onPress?: () => void;
   testID: string;
 }) {
-  const accent = useAccentOnSurface();
+  const accent = useActiveTabInk();
   const wash = useAccentTintedSurface();
   const secondaryInk = useGlyphColor(tabBarInactiveInk);
   const ink = active ? accent : secondaryInk;

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

@@ -8,6 +8,12 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup, fireEvent, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  BottomAccessoryHost,
+  BottomAccessoryScope,
+  BottomAccessory,
+  createBottomAccessoryStore,
+} from "../layouts/bottomAccessory";
 import { useBottomChromeInset } from "./bottomChrome";
 import type { TabBarItem } from "./TabBar";
 import {
@@ -18,7 +24,10 @@ import {
   itemsHaveNativeIcons,
   nativeIconFor,
   nativeTabBarHeight,
+  nativeTabsAccessoryComponent,
+  nativeTabsAccessoryHeight,
   nativeTabsPlatforms,
+  resolveNativeAccessory,
   resolveNativeTabs,
 } from "./TabHost.native";
 
@@ -49,9 +58,12 @@ const items: TabBarItem[] = [
 ];
 
 const fakeTabs: NativeTabs = {
-  Host: ({ children, onNativeFocusChange, tabBarHidden }) => (
+  Host: ({ children, onNativeFocusChange, tabBarHidden, bottomAccessory }) => (
     <div data-testid="native-host" data-hidden={String(Boolean(tabBarHidden))}>
       {children}
+      {bottomAccessory ? (
+        <aside data-testid="native-bottom-accessory">{bottomAccessory("regular")}</aside>
+      ) : null}
       <button
         type="button"
         data-testid="native-press-moves"
@@ -271,3 +283,99 @@ describe("TabHost fallback", () => {
     expect(screen.queryByTestId("tab-bar")).toBeNull();
   });
 });
+
+describe("bottom accessory under the system bar (FZ-7995, LC-174)", () => {
+  const registered = [...["RNSTabsHost", "RNSTabsScreen"], nativeTabsAccessoryComponent];
+
+  it("hosts it on iOS 26 when the binary carries the accessory view", () => {
+    expect(
+      resolveNativeAccessory(
+        sources(registered, () => ({})),
+        "ios",
+        "26.0",
+      ),
+    ).toBe(true);
+  });
+
+  it("keeps the page's slot before iOS 26, on a binary without the view, off iOS, or when the probe throws", () => {
+    expect(
+      resolveNativeAccessory(
+        sources(registered, () => ({})),
+        "ios",
+        "18.5",
+      ),
+    ).toBe(false);
+    expect(
+      resolveNativeAccessory(
+        sources(["RNSTabsHost", "RNSTabsScreen"], () => ({})),
+        "ios",
+        "26.1",
+      ),
+    ).toBe(false);
+    expect(
+      resolveNativeAccessory(
+        sources(registered, () => ({})),
+        "android",
+        36,
+      ),
+    ).toBe(false);
+    const throws = () => {
+      throw new Error("unavailable");
+    };
+    expect(resolveNativeAccessory({ hasComponent: throws }, "ios", "26.0")).toBe(false);
+  });
+
+  function renderWithPager(hostsAccessory: boolean, pushed = false) {
+    const activeKey = pushed ? undefined : "/moves";
+    const store = createBottomAccessoryStore();
+    return renderWithProviders(
+      <NativeTabHost
+        tabs={fakeTabs}
+        items={items}
+        activeKey={activeKey}
+        onTabPress={vi.fn()}
+        hostsAccessory={hostsAccessory}
+      >
+        <BottomAccessoryScope store={store}>
+          <div data-testid="page">
+            <BottomAccessory>
+              <span data-testid="pager">1–15 of 900</span>
+            </BottomAccessory>
+          </div>
+          <BottomAccessoryHost store={store} />
+        </BottomAccessoryScope>
+        <Inset />
+      </NativeTabHost>,
+    );
+  }
+
+  it("moves the page's pager into the system bar's accessory and clears it", () => {
+    renderWithPager(true);
+    const accessory = screen.getByTestId("native-bottom-accessory");
+    expect(accessory.contains(screen.getByTestId("pager"))).toBe(true);
+    expect(screen.getByTestId("native-tab-accessory")).toBeTruthy();
+    expect(document.querySelector('[data-bottom-accessory="slot"]')).toBeNull();
+    expect(Number(screen.getByTestId("inset").textContent)).toBeGreaterThanOrEqual(
+      nativeTabBarHeight + nativeTabsAccessoryHeight,
+    );
+  });
+
+  it("falls back to the page's slot, standing on the bar, where the system bar cannot host it", () => {
+    renderWithPager(false);
+    expect(screen.queryByTestId("native-bottom-accessory")).toBeNull();
+    const slot = document.querySelector('[data-bottom-accessory="slot"]');
+    expect(slot?.contains(screen.getByTestId("pager"))).toBe(true);
+    expect(screen.getByTestId("bottom-accessory-lift")).toBeTruthy();
+    const inset = Number(screen.getByTestId("inset").textContent);
+    expect(inset).toBeGreaterThanOrEqual(nativeTabBarHeight);
+    expect(inset).toBeLessThan(nativeTabBarHeight + nativeTabsAccessoryHeight);
+  });
+
+  it("returns the pager to the slot on a pushed screen, where the bar is hidden", () => {
+    renderWithPager(true, true);
+    expect(screen.queryByTestId("native-bottom-accessory")).toBeNull();
+    const slot = document.querySelector('[data-bottom-accessory="slot"]');
+    expect(slot?.contains(screen.getByTestId("pager"))).toBe(true);
+    expect(screen.queryByTestId("bottom-accessory-lift")).toBeNull();
+  });
+});

package/src/appShell/TabHost.native.tsx

@@ -15,21 +15,23 @@
  * (Material bottom navigation, PNG template icons) is built and switched off
  * until an Android build proves it (FZ-8140).
  *
+ * A page's bottom accessory (LC-174, e.g. a DataTable pager) rides the
+ * system bar too: on iOS 26, where the binary carries RNSTabsBottomAccessory,
+ * it is UITabBarController's bottom accessory, the system's own glass capsule
+ * above the bar (FZ-7995). Anywhere else it stays in the page's slot, which
+ * sits above the bar.
+ *
  * 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 {
-  useAccentTintedSurface,
-  useGlyphColor,
-  useIdentityInkOnSurface,
-} from "@multiplatform.one/theme";
+import { useAccentTintedSurface, useActiveTabInk, useGlyphColor } from "@multiplatform.one/theme";
 import { type ComponentType, type ReactNode, useEffect, useRef, useState } from "react";
 import { type ImageSourcePropType, Platform, UIManager } from "react-native";
-import { YStack } from "tamagui";
-import { setBottomChromeInset } from "./bottomChrome";
+import { XStack, YStack } from "tamagui";
+import { setBottomChromeInset, setFloatingBarMounted, useBottomAccessory } from "./bottomChrome";
 import { useBottomInset } from "./bottomInset";
 import { type TabBarItem, tabBarInactiveInk } from "./TabBar";
 import { MpoTabHost, type TabHostProps } from "./MpoTabHost";
@@ -42,6 +44,12 @@ export const nativeTabsComponents = ["RNSTabsHost", "RNSTabsScreen"] as const;
 /** Points the system tab bar covers above the home-indicator band. */
 export const nativeTabBarHeight = 49;
 
+/** The Fabric component behind UITabBarController's bottom accessory (iOS 26). */
+export const nativeTabsAccessoryComponent = "RNSTabsBottomAccessory";
+
+/** Points the bottom accessory's capsule adds above the system bar, its gap included. */
+export const nativeTabsAccessoryHeight = 56;
+
 type ImageIcon = { type: "imageSource"; imageSource: ImageSourcePropType };
 type IconProp = { ios?: { type: "sfSymbol"; name: string }; android?: ImageIcon };
 
@@ -66,6 +74,7 @@ export interface NativeTabs {
     tabBarBackgroundColor?: string;
     tabBarItemActiveIndicatorColor?: string;
     experimentalControlNavigationStateInJS?: boolean;
+    bottomAccessory?: (environment: "regular" | "inline") => ReactNode;
     onNativeFocusChange?: (event: { nativeEvent: { tabKey: string } }) => void;
   }>;
   Screen: ComponentType<{
@@ -107,13 +116,39 @@ export function resolveNativeTabs(
   }
 }
 
+/**
+ * True when the system bar can host the page's bottom accessory: iOS 26 or
+ * later (UITabAccessory) and a binary that carries react-native-screens'
+ * accessory view. Otherwise the accessory stays in the page's slot.
+ */
+export function resolveNativeAccessory(
+  sources: Pick<NativeTabsSources, "hasComponent">,
+  os: string,
+  version: string | number,
+): boolean {
+  if (os !== "ios" || Number.parseInt(String(version), 10) < 26) return false;
+  try {
+    return sources.hasComponent(nativeTabsAccessoryComponent);
+  } catch {
+    return false;
+  }
+}
+
 let cached: NativeTabs | null | undefined;
+let cachedAccessory: boolean | undefined;
 
 function loadNativeTabs(): NativeTabs | null {
   if (cached === undefined) cached = resolveNativeTabs(appSources, Platform.OS);
   return cached;
 }
 
+function loadNativeAccessory(): boolean {
+  if (cachedAccessory === undefined) {
+    cachedAccessory = resolveNativeAccessory(appSources, Platform.OS, Platform.Version);
+  }
+  return cachedAccessory;
+}
+
 /** 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) =>
@@ -130,15 +165,31 @@ export function nativeIconFor(item: TabBarItem): IconProp {
   };
 }
 
+/** The accessory's content inside the system capsule: one centred row. */
+function NativeAccessoryContent({ children }: { children: ReactNode }) {
+  return (
+    <XStack
+      flex={1}
+      alignItems="center"
+      justifyContent="center"
+      paddingHorizontal="$3"
+      data-testid="native-tab-accessory"
+    >
+      {children}
+    </XStack>
+  );
+}
+
 export function NativeTabHost({
   tabs,
   items,
   activeKey,
   onTabPress,
   children,
-}: TabHostProps & { tabs: NativeTabs }) {
+  hostsAccessory = false,
+}: TabHostProps & { tabs: NativeTabs; hostsAccessory?: boolean }) {
   const { Host, Screen } = tabs;
-  const accent = useIdentityInkOnSurface();
+  const accent = useActiveTabInk();
   const ink = useGlyphColor(tabBarInactiveInk);
   const surface = useGlyphColor("$color2");
   const indicator = useAccentTintedSurface();
@@ -147,11 +198,28 @@ export function NativeTabHost({
   const lastKey = useRef(activeKey ?? items[0]?.key);
   if (activeKey) lastKey.current = activeKey;
   const focusedKey = lastKey.current;
+  const hosting = hostsAccessory && Boolean(activeKey);
+  const pageAccessory = useBottomAccessory();
+  const accessory = hosting ? pageAccessory : null;
 
   useEffect(() => {
-    setBottomChromeInset(id, activeKey ? nativeTabBarHeight + deviceInset : null);
-  }, [activeKey, deviceInset, id]);
-  useEffect(() => () => setBottomChromeInset(id, null), [id]);
+    setBottomChromeInset(
+      id,
+      activeKey
+        ? nativeTabBarHeight + deviceInset + (accessory ? nativeTabsAccessoryHeight : 0)
+        : null,
+    );
+  }, [activeKey, accessory, deviceInset, id]);
+  useEffect(() => {
+    setFloatingBarMounted(id, hosting);
+  }, [hosting, id]);
+  useEffect(
+    () => () => {
+      setBottomChromeInset(id, null);
+      setFloatingBarMounted(id, false);
+    },
+    [id],
+  );
 
   return (
     <Host
@@ -164,6 +232,9 @@ export function NativeTabHost({
       tabBarBackgroundColor={surface}
       tabBarItemActiveIndicatorColor={indicator}
       experimentalControlNavigationStateInJS
+      bottomAccessory={
+        accessory ? () => <NativeAccessoryContent>{accessory}</NativeAccessoryContent> : undefined
+      }
       onNativeFocusChange={(event) => {
         const key = event.nativeEvent.tabKey;
         if (key !== activeKey) onTabPress(key);
@@ -199,5 +270,5 @@ export function NativeTabHost({
 export function TabHost(props: TabHostProps) {
   const tabs = loadNativeTabs();
   if (!tabs || !itemsHaveNativeIcons(props.items, Platform.OS)) return <MpoTabHost {...props} />;
-  return <NativeTabHost tabs={tabs} {...props} />;
+  return <NativeTabHost tabs={tabs} hostsAccessory={loadNativeAccessory()} {...props} />;
 }