@oxyhq/bloom 0.51.0 → 0.52.0

package/src/__tests__/TabBarGlassFallback.test.tsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import type { ReactTestInstance } from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
+
+import type { TabBarSurfaceProps } from '../tab-bar/shared';
+import type { TabBarTheme } from '../tab-bar/types';
+
+/**
+ * The native capsule surface must DEGRADE, never crash, when `expo-glass-effect`
+ * is not really usable.
+ *
+ * This is the one thing the rest of the tab-bar suite structurally cannot see.
+ * `TabBar.test.tsx` renders the native surface against the manual mock in
+ * `__mocks__/expo-glass-effect.ts`, which is a HEALTHY install reporting
+ * `isLiquidGlassAvailable() === false` — so it only ever exercises the branch a
+ * correctly-packaged Android device takes. Every failure mode below is a
+ * different install: the module resolved but handed back no exports, or the JS
+ * package is there while the native module is not.
+ *
+ * Each case is re-mocked into its own module registry because both hazards live at
+ * MODULE scope. `Animated.createAnimatedComponent(GlassView)` runs on import, and
+ * on iOS `isLiquidGlassAvailable()` reaches a native module through
+ * `requireNativeModule`, which throws by contract when it is absent. Mocking after
+ * the module under test was imported would test a render branch and miss both.
+ *
+ * The two counter-tests at the end are what keep the rest honest: a guard that
+ * always fell through to the solid surface would satisfy every other assertion
+ * here while silently deleting the glass look on every iOS 26 device.
+ */
+
+/** Every export may be absent — that is the whole point of these fixtures. */
+interface GlassEffectModule {
+  GlassView?: unknown;
+  isLiquidGlassAvailable?: () => boolean;
+  isGlassEffectAPIAvailable?: () => boolean;
+}
+
+/**
+ * A host tag stands in for the real `GlassView` component: under the reanimated
+ * mock `createAnimatedComponent` is the identity, so whatever the package exports
+ * IS the element type, and a string host is the cheapest valid one to assert on.
+ * It matches the tag the manual mock renders.
+ */
+const GLASS_HOST = 'GlassView';
+
+const THEME: TabBarTheme = {
+  activeTint: 'rgb(20 20 20)',
+  inactiveTint: 'rgb(120 120 120)',
+  highlight: 'rgb(230 230 230)',
+  glassTint: 'rgba(255, 255, 255, 0.55)',
+  solidFallback: 'rgb(246 246 246)',
+};
+
+const STYLE = { borderRadius: 29 };
+
+function flattenStyle(style: unknown): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  const visit = (s: unknown): void => {
+    if (Array.isArray(s)) s.forEach(visit);
+    else if (s && typeof s === 'object') Object.assign(out, s);
+  };
+  visit(style);
+  return out;
+}
+
+/** Every host node rendered as `tag`. */
+function hosts(root: ReactTestInstance, tag: string): ReactTestInstance[] {
+  return root.findAll((node) => typeof node.type === 'string' && node.type === tag);
+}
+
+/**
+ * Render `surface.native.tsx` against a given `expo-glass-effect`.
+ *
+ * Only the surface comes from the isolated registry — testing-library registers
+ * suite-level hooks when it loads, so it has to be imported at the top of the file
+ * rather than inside a test. Nothing in the rendered tree calls a hook, and the
+ * surface renders host strings from the reanimated mock, so the two registries
+ * never have to agree on a React instance. `times` re-renders within one registry,
+ * for the assertion about module-scoped memoization.
+ */
+function renderNativeSurface(glassEffect: GlassEffectModule, times = 1): ReactTestInstance {
+  let root: ReactTestInstance | undefined;
+
+  jest.isolateModules(() => {
+    jest.doMock('expo-glass-effect', () => glassEffect);
+
+    const { TabBarSurface } = require('../tab-bar/surface.native') as {
+      TabBarSurface: React.ComponentType<TabBarSurfaceProps>;
+    };
+
+    for (let i = 0; i < times; i += 1) {
+      root = render(<TabBarSurface theme={THEME} style={STYLE} />).UNSAFE_root;
+    }
+  });
+
+  if (!root) throw new Error('the native surface did not render');
+  return root;
+}
+
+/** Assert the tree is the opaque non-glass surface, filled from the theme. */
+function expectSolidFallback(root: ReactTestInstance): void {
+  expect(hosts(root, GLASS_HOST)).toHaveLength(0);
+  const surface = hosts(root, 'Animated.View')[0];
+  expect(surface).toBeTruthy();
+  expect(flattenStyle(surface?.props.style).backgroundColor).toBe(THEME.solidFallback);
+  // The animated capsule radius must survive the fallback — the pill still
+  // reshapes as the bar minimizes.
+  expect(flattenStyle(surface?.props.style).borderRadius).toBe(STYLE.borderRadius);
+}
+
+describe('TabBarSurface (native) — degrading when glass is unusable', () => {
+  let warn: jest.SpyInstance<void, Parameters<typeof console.warn>>;
+
+  beforeEach(() => {
+    jest.resetModules();
+    warn = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    warn.mockRestore();
+  });
+
+  it('falls back when the module resolved without GlassView', () => {
+    // `createAnimatedComponent(undefined)` produces an element type React rejects
+    // with "Element type is invalid … but got: undefined" — and it happens at
+    // import, so the whole screen the bar is on goes down with it.
+    expectSolidFallback(
+      renderNativeSurface({ GlassView: undefined, isLiquidGlassAvailable: () => true }),
+    );
+  });
+
+  it('falls back when the module delivered no exports at all', () => {
+    // A stub, an alias, or a resolver that landed on a platform-specific file:
+    // there is no `isLiquidGlassAvailable` to call either, so calling it blindly
+    // is a TypeError.
+    expectSolidFallback(renderNativeSurface({}));
+  });
+
+  it('falls back when the native module is missing from the build', () => {
+    // On iOS `isLiquidGlassAvailable()` resolves `ExpoGlassEffect` through
+    // `requireNativeModule`, which THROWS by contract when the module is not in
+    // the binary — an OTA JS update landing on a binary built before the package
+    // was linked reaches exactly this state.
+    expectSolidFallback(
+      renderNativeSurface({
+        GlassView: GLASS_HOST,
+        isLiquidGlassAvailable: () => {
+          throw new Error("Cannot find native module 'ExpoGlassEffect'");
+        },
+      }),
+    );
+  });
+
+  it('reports the missing native module instead of swallowing it', () => {
+    renderNativeSurface({
+      GlassView: GLASS_HOST,
+      isLiquidGlassAvailable: () => {
+        throw new Error("Cannot find native module 'ExpoGlassEffect'");
+      },
+    });
+
+    expect(warn).toHaveBeenCalledTimes(1);
+    const [message, detail] = warn.mock.calls[0] ?? [];
+    expect(String(message)).toContain('expo-glass-effect');
+    expect(String(detail)).toContain("Cannot find native module 'ExpoGlassEffect'");
+  });
+
+  it('falls back when the platform has no glass API (iOS 26 betas)', () => {
+    // Upstream's own guard: on those builds `isLiquidGlassAvailable()` answers
+    // true while touching `GlassView` crashes NATIVELY, below JS.
+    expectSolidFallback(
+      renderNativeSurface({
+        GlassView: GLASS_HOST,
+        isLiquidGlassAvailable: () => true,
+        isGlassEffectAPIAvailable: () => false,
+      }),
+    );
+  });
+
+  it('renders real glass when the package is fully there', () => {
+    const root = renderNativeSurface({
+      GlassView: GLASS_HOST,
+      isLiquidGlassAvailable: () => true,
+      isGlassEffectAPIAvailable: () => true,
+    });
+
+    const glass = hosts(root, GLASS_HOST)[0];
+    expect(glass).toBeTruthy();
+    expect(glass?.props.glassEffectStyle).toBe('regular');
+    expect(flattenStyle(glass?.props.style).backgroundColor).toBe(THEME.glassTint);
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it('renders glass on a version that predates isGlassEffectAPIAvailable', () => {
+    // The probe first shipped in 0.1.9, so the `>=0.1.9` peer floor guarantees it
+    // — but a peer range only WARNS, so a consumer can still resolve an older
+    // copy. A missing probe means "not applicable", never "unavailable"; treating
+    // it as the latter would delete the glass look on every working device.
+    expect(
+      hosts(
+        renderNativeSurface({ GlassView: GLASS_HOST, isLiquidGlassAvailable: () => true }),
+        GLASS_HOST,
+      ),
+    ).toHaveLength(1);
+  });
+
+  it('probes availability once per session, not once per render', () => {
+    let probes = 0;
+    renderNativeSurface(
+      {
+        GlassView: GLASS_HOST,
+        isLiquidGlassAvailable: () => {
+          probes += 1;
+          return true;
+        },
+      },
+      3,
+    );
+    expect(probes).toBe(1);
+  });
+
+  it('reuses the neutral surface rather than a second implementation', () => {
+    // Two copies of the fallback would drift: the neutral variant is what web
+    // bundlers and a consumer's `tsc` resolve, and it must paint exactly what an
+    // Android device paints.
+    jest.isolateModules(() => {
+      const { TabBarSurface } = require('../tab-bar/surface') as { TabBarSurface: unknown };
+      const { SolidTabBarSurface } = require('../tab-bar/surface-solid') as {
+        SolidTabBarSurface: unknown;
+      };
+      expect(TabBarSurface).toBe(SolidTabBarSurface);
+    });
+  });
+});

package/src/__tests__/TabBarLongPress.test.tsx

@@ -0,0 +1,258 @@
+import React from 'react';
+import { act, render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { TabBar, TabBarButton } from '../tab-bar';
+import type { TabBarItem } from '../tab-bar/types';
+
+/**
+ * `onIndexLongPress` — the bar's only reachable long press.
+ *
+ * `TabBarButtonProps extends PressableProps`, so a consumer's `onLongPress`
+ * type-checks and silently does nothing: the bar's `GestureDetector` consumes
+ * the touches (that is what makes scrubbing possible), so the inner `Pressable`
+ * only ever fires for assistive technology and keyboard activation. A real held
+ * finger fails the tap gesture at 400ms, never activates the pan, and dies in
+ * `onFinalize`'s early return. The gesture below is the only path in.
+ *
+ * Like `BottomSheetGesture.test.tsx`, this file replaces the shared
+ * gesture-handler mock (which discards every registered callback) with a
+ * RECORDING one, so the gestures the bar builds can be inspected and their
+ * worklets invoked directly. What that CAN prove: which gestures are composed
+ * into the race, the duration windows they are configured with, and that the
+ * long-press worklet resolves the same index from the same x as the tap
+ * worklet. What it cannot prove is gesture-handler's own arbitration — that a
+ * held finger really reaches this handler on a device. The 400ms/500ms split
+ * asserted below is what makes that arbitration decidable rather than a race,
+ * and the behaviour itself is verified on a real build.
+ */
+
+interface MockGestureEvent {
+  x: number;
+}
+
+interface MockGesture {
+  kind: string;
+  /** Values captured from the builder chain. */
+  minDurationMs?: number;
+  maxDurationMs?: number;
+  /** Worklets captured from the builder chain. */
+  start?: (event: MockGestureEvent) => void;
+  update?: (event: MockGestureEvent) => void;
+  end?: (event: MockGestureEvent, success: boolean) => void;
+  /** Members of a composed `Gesture.Race(…)`; empty for a leaf gesture. */
+  members: MockGesture[];
+  /** Builder chain — every method returns the same object. */
+  activeOffsetX: (range: number[]) => MockGesture;
+  failOffsetY: (range: number[]) => MockGesture;
+  maxDistance: (px: number) => MockGesture;
+  maxDuration: (ms: number) => MockGesture;
+  minDuration: (ms: number) => MockGesture;
+  onStart: (worklet: (event: MockGestureEvent) => void) => MockGesture;
+  onUpdate: (worklet: (event: MockGestureEvent) => void) => MockGesture;
+  onEnd: (worklet: (event: MockGestureEvent, success: boolean) => void) => MockGesture;
+  onFinalize: (worklet: () => void) => MockGesture;
+}
+
+// Every gesture built since the last reset. Must be `mock`-prefixed so the
+// hoisted `jest.mock` factory may reference it.
+const mockGestures: MockGesture[] = [];
+
+jest.mock('react-native-gesture-handler', () => {
+  const build = (kind: string): MockGesture => {
+    const gesture: MockGesture = {
+      kind,
+      members: [],
+      activeOffsetX: () => gesture,
+      failOffsetY: () => gesture,
+      maxDistance: () => gesture,
+      maxDuration: (ms) => {
+        gesture.maxDurationMs = ms;
+        return gesture;
+      },
+      minDuration: (ms) => {
+        gesture.minDurationMs = ms;
+        return gesture;
+      },
+      onStart: (worklet) => {
+        gesture.start = worklet;
+        return gesture;
+      },
+      onUpdate: (worklet) => {
+        gesture.update = worklet;
+        return gesture;
+      },
+      onEnd: (worklet) => {
+        gesture.end = worklet;
+        return gesture;
+      },
+      onFinalize: () => gesture,
+    };
+    mockGestures.push(gesture);
+    return gesture;
+  };
+
+  return {
+    Gesture: {
+      Pan: () => build('Pan'),
+      Tap: () => build('Tap'),
+      LongPress: () => build('LongPress'),
+      Race: (...members: MockGesture[]) => {
+        const race = build('Race');
+        race.members.push(...members);
+        return race;
+      },
+    },
+    GestureDetector: ({ children }: { children: React.ReactNode }) => children,
+    GestureHandlerRootView: ({ children }: { children: React.ReactNode }) => children,
+  };
+});
+
+const ITEMS: TabBarItem[] = [
+  { name: 'home', label: 'Home', icon: null },
+  { name: 'search', label: 'Search', icon: null },
+  { name: 'you', label: 'You', icon: null },
+];
+
+/**
+ * Touch x positions inside the bar, in the 375pt window the react-native mock
+ * reports. Named by the tab they land on rather than by the geometry that puts
+ * them there: an edge touch belongs to the first/last tab and a centered one to
+ * the middle tab whatever the exact item width turns out to be.
+ */
+const NEAR_LEFT_EDGE = 8;
+const WINDOW_CENTER = 187;
+const NEAR_RIGHT_EDGE = 340;
+
+function renderBar(props: {
+  onIndexChange?: (index: number) => void;
+  onIndexLongPress?: (index: number) => void;
+}) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      <TabBar activeIndex={0} {...props}>
+        {ITEMS.map((item, index) => (
+          <TabBarButton key={item.name} item={item} index={index} />
+        ))}
+      </TabBar>
+    </BloomThemeProvider>,
+  );
+}
+
+const gesturesOfKind = (kind: string) => mockGestures.filter((gesture) => gesture.kind === kind);
+
+/** The gesture the detector was actually given — the last race constructed. */
+function race(): MockGesture {
+  const races = gesturesOfKind('Race');
+  const last = races[races.length - 1];
+  if (!last) throw new Error('The bar composed no gesture race');
+  return last;
+}
+
+function member(kind: string): MockGesture {
+  const found = race().members.find((gesture) => gesture.kind === kind);
+  if (!found) throw new Error(`No ${kind} gesture in the bar's race`);
+  return found;
+}
+
+/** Hold a finger at `x` until the long press activates. */
+function longPressAt(x: number) {
+  act(() => {
+    member('LongPress').start?.({ x });
+  });
+}
+
+/** A tap that succeeded at `x`. */
+function tapAt(x: number) {
+  act(() => {
+    member('Tap').end?.({ x }, true);
+  });
+}
+
+describe('TabBar long press', () => {
+  beforeEach(() => {
+    mockGestures.length = 0;
+  });
+
+  it('composes no long-press gesture when no handler is given', () => {
+    // An always-armed long press would cancel the pan for anyone who rests a
+    // finger before scrubbing — a regression for every existing consumer.
+    renderBar({});
+    expect(gesturesOfKind('LongPress')).toHaveLength(0);
+    expect(race().members.map((gesture) => gesture.kind)).toEqual(['Pan', 'Tap']);
+  });
+
+  it('adds one to the race, alongside the pan and the tap, when a handler is given', () => {
+    renderBar({ onIndexLongPress: jest.fn() });
+    expect(race().members.map((gesture) => gesture.kind)).toEqual(['Pan', 'Tap', 'LongPress']);
+  });
+
+  it('arms it after the tap gesture has already given up', () => {
+    // The two windows must not overlap, or arming a long press would sometimes
+    // cost the bar a tap. The tap gives up at 400ms; the long press activates
+    // at 500ms, so at no instant are both candidates.
+    renderBar({ onIndexLongPress: jest.fn() });
+    expect(member('LongPress').minDurationMs).toBe(500);
+    expect(member('Tap').maxDurationMs).toBe(400);
+    expect(member('Tap').maxDurationMs ?? 0).toBeLessThan(member('LongPress').minDurationMs ?? 0);
+  });
+
+  it('reports the index of the tab under the finger', () => {
+    const onIndexLongPress = jest.fn();
+    renderBar({ onIndexLongPress });
+
+    longPressAt(NEAR_LEFT_EDGE);
+    longPressAt(WINDOW_CENTER);
+    longPressAt(NEAR_RIGHT_EDGE);
+
+    expect(onIndexLongPress.mock.calls).toEqual([[0], [1], [2]]);
+  });
+
+  it('resolves the same index a tap at the same point would', () => {
+    // Long press, tap and scrub all share one `indexAtX` worklet; this is what
+    // keeps a long press from ever acting on a different tab than the one the
+    // finger is visibly on.
+    const onIndexChange = jest.fn();
+    const onIndexLongPress = jest.fn();
+    renderBar({ onIndexChange, onIndexLongPress });
+
+    for (const x of [NEAR_LEFT_EDGE, 100, WINDOW_CENTER, 250, NEAR_RIGHT_EDGE]) {
+      tapAt(x);
+      longPressAt(x);
+    }
+
+    expect(onIndexLongPress.mock.calls).toEqual(onIndexChange.mock.calls);
+  });
+
+  it('does not select the tab it long-presses', () => {
+    // It is a secondary action (an account sheet, say) — navigating as well
+    // would take the user off the screen they opened it from.
+    const onIndexChange = jest.fn();
+    renderBar({ onIndexChange, onIndexLongPress: jest.fn() });
+
+    longPressAt(NEAR_RIGHT_EDGE);
+
+    expect(onIndexChange).not.toHaveBeenCalled();
+  });
+
+  it('still selects on a short tap while the long press is armed', () => {
+    const onIndexChange = jest.fn();
+    const onIndexLongPress = jest.fn();
+    renderBar({ onIndexChange, onIndexLongPress });
+
+    tapAt(NEAR_RIGHT_EDGE);
+
+    expect(onIndexChange).toHaveBeenCalledTimes(1);
+    expect(onIndexChange).toHaveBeenCalledWith(2);
+    expect(onIndexLongPress).not.toHaveBeenCalled();
+  });
+
+  it('keeps the scrub gesture in the race', () => {
+    // The pan is what makes the highlight scrubbable; a long press must not
+    // have displaced it.
+    renderBar({ onIndexLongPress: jest.fn() });
+    // Its scrub worklet, not merely a pan object: this is the handler that
+    // drags the highlight under the finger.
+    expect(typeof member('Pan').update).toBe('function');
+  });
+});

package/src/__tests__/TabBarReservedSpace.test.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import type { ReactTestInstance } from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { TabBar, TabBarButton, useTabBarReservedSpace } from '../tab-bar';
+import type { TabBarItem } from '../tab-bar/types';
+
+/**
+ * `useTabBarReservedSpace()` — the number a screen pads its content by so a
+ * list does not end underneath the floating bar.
+ *
+ * The bar is absolutely positioned, so nothing reserves that space
+ * automatically, and the geometry it is built from (expanded height, bottom
+ * gap) is private. Without the hook a consumer hardcodes both — which drifts
+ * silently the first time the bar changes by a pixel — and, worse, tends to add
+ * `insets.bottom` on top, because that is what reserving space for bottom
+ * chrome normally requires. The bar already folds the inset into its own gap,
+ * so that double-counts the home indicator.
+ *
+ * The suite therefore asserts three separate things: the absolute pixel values
+ * (so a change to the constants must be deliberate), the inset relationship (so
+ * the double-count can never creep back in), and equality with the bar's own
+ * rendered geometry (so the hook cannot drift from where the bar actually sits).
+ */
+
+// Mutated per test; must be `mock`-prefixed for the hoisted factory.
+const mockInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+
+jest.mock('react-native-safe-area-context', () => ({
+  ...jest.requireActual('react-native-safe-area-context'),
+  useSafeAreaInsets: () => mockInsets,
+}));
+
+const ITEMS: TabBarItem[] = [
+  { name: 'home', label: 'Home', icon: null },
+  { name: 'search', label: 'Search', icon: null },
+];
+
+/** A device with a home indicator (iPhone-class bottom inset). */
+const HOME_INDICATOR_INSET = 34;
+
+function ReservedProbe({ onValue }: { onValue: (space: number) => void }) {
+  onValue(useTabBarReservedSpace());
+  return null;
+}
+
+function withTheme(ui: React.ReactElement) {
+  return (
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>
+  );
+}
+
+/** The space the hook reserves on a device whose bottom inset is `inset`. */
+function reservedFor(inset: number): number {
+  mockInsets.bottom = inset;
+  let space: number | undefined;
+  render(withTheme(<ReservedProbe onValue={(value) => (space = value)} />));
+  if (space === undefined) throw new Error('ReservedProbe never ran');
+  return space;
+}
+
+function flattenStyle(style: unknown): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  const visit = (value: unknown): void => {
+    if (Array.isArray(value)) value.forEach(visit);
+    else if (value && typeof value === 'object') Object.assign(out, value);
+  };
+  visit(style);
+  return out;
+}
+
+/**
+ * The flattened style of every styled node in the tree.
+ *
+ * Restricted to HOST nodes: the RN mock renders each component as a composite
+ * wrapping a host element of the same name, and both carry the same `style`, so
+ * counting all of them would double every match.
+ */
+function styledNodes(root: ReactTestInstance): Record<string, unknown>[] {
+  return root
+    .findAll((node) => typeof node.type === 'string' && node.props?.style !== undefined)
+    .map((node) => flattenStyle(node.props.style));
+}
+
+describe('useTabBarReservedSpace', () => {
+  beforeEach(() => {
+    mockInsets.bottom = 0;
+  });
+
+  it('reserves the bar plus its gap where there is no bottom inset', () => {
+    // 58pt bar + the 12pt floor the gap never goes below.
+    expect(reservedFor(0)).toBe(70);
+  });
+
+  it('reserves more on a device with a home indicator', () => {
+    expect(reservedFor(HOME_INDICATOR_INSET)).toBe(76);
+  });
+
+  it('already includes the inset — adding insets.bottom would double-count it', () => {
+    // The bar absorbs 16pt of the inset into its own gap, so the space grows by
+    // the REMAINDER, never by the whole inset. A consumer writing
+    // `reserved + insets.bottom` would reserve 110pt for a 76pt bar.
+    const grown = reservedFor(HOME_INDICATOR_INSET) - reservedFor(0);
+    expect(grown).toBe(6);
+    expect(grown).toBeLessThan(HOME_INDICATOR_INSET);
+  });
+
+  it('does not shrink below the floor for a small inset', () => {
+    // An inset under what the gap absorbs must not pull the bar down toward the
+    // window edge — the gap is clamped, and the reserved space with it.
+    expect(reservedFor(8)).toBe(reservedFor(0));
+  });
+
+  it('equals the space the rendered bar actually occupies', () => {
+    // The invariant that makes the hook worth exporting: its number is the bar's
+    // own geometry (the gap it holds off the window edge plus its expanded
+    // height), not a second copy that can drift.
+    mockInsets.bottom = HOME_INDICATOR_INSET;
+    let reserved: number | undefined;
+    const { UNSAFE_root } = render(
+      withTheme(
+        <>
+          <ReservedProbe onValue={(value) => (reserved = value)} />
+          <TabBar activeIndex={0}>
+            {ITEMS.map((item, index) => (
+              <TabBarButton key={item.name} item={item} index={index} />
+            ))}
+          </TabBar>
+        </>,
+      ),
+    );
+
+    const styles = styledNodes(UNSAFE_root);
+    // The wrapper holding the pill off the bottom edge — the only node with a
+    // bottom margin.
+    const gaps = styles.filter((style) => typeof style.marginBottom === 'number');
+    expect(gaps).toHaveLength(1);
+    // The pill itself: the animated capsule sizes BOTH its height and its
+    // horizontal inset, which nothing else in the bar does.
+    const pills = styles.filter(
+      (style) => typeof style.height === 'number' && typeof style.marginHorizontal === 'number',
+    );
+    expect(pills).toHaveLength(1);
+
+    expect(reserved).toBe(Number(gaps[0]?.marginBottom) + Number(pills[0]?.height));
+  });
+});