@oxyhq/bloom 0.51.1 → 0.52.0

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));
+  });
+});

package/src/__tests__/TabBarWebFork.test.ts

@@ -49,6 +49,7 @@ const NEUTRAL_AND_WEB_FILES = [
   'tab-bar/shared.ts',
   'tab-bar/TabBarBase.tsx',
   'tab-bar/minimize-context.tsx',
+  'tab-bar/use-reserved-space.ts',
   'tab-bar/surface.tsx',
   'tab-bar/surface-solid.tsx',
   'tab-bar/surface.web.tsx',

package/src/frosted-icon-button/shared.ts

@@ -109,6 +109,16 @@ type FillableElement = ReactElement<{ fill?: unknown }>;
  * so any bare Bloom icon element gets the theme-aware color for free while an
  * explicitly-colored icon is never overridden. Non-element children (plain
  * text/strings) pass through unchanged.
+ *
+ * KNOWN LIMIT, deliberately not papered over: an icon component that paints from
+ * a `color` PROP rather than from `fill`/`style.color` ignores this entirely, and
+ * does so SILENTLY — nothing throws, the glyph renders, it simply never takes the
+ * tint. `color` is not injected alongside `fill` because the prop is not ours to
+ * claim: components use it for semantic variants (`color="danger"`), so writing an
+ * `rgb(…)` string into it can produce a worse failure than the one it fixes, and
+ * an icon already carrying its own `color` would be clobbered. Consumers with such
+ * a set pre-color the element themselves; the tab bar additionally offers
+ * `TabBarItem.activeIcon`, which carries selection by shape instead of by tint.
  */
 export function applyIconColor(node: ReactNode, color: string): ReactNode {
   if (!isValidElement(node)) return node;

package/src/tab-bar/TabBarBase.tsx

@@ -49,10 +49,12 @@ import {
   ITEM_GAP,
   ITEM_PAD_V,
   LABEL_FONT_SIZE,
+  LONG_PRESS_MIN_DURATION,
   MINIMIZED_HEIGHT,
   MINIMIZED_INSET,
   ROW_PAD_H,
   SLIDE_SPRING,
+  tabBarBottomGap,
   useTabBarTheme,
   type TabBarGlyphProps,
   type TabBarSurfaceProps,
@@ -93,6 +95,7 @@ function TabBarBody({
   children,
   activeIndex,
   onIndexChange,
+  onIndexLongPress,
   theme: themeOverrides,
   haptics = true,
   style,
@@ -121,6 +124,14 @@ function TabBarBody({
   // scrubbing makes the content jump under the finger.
   const selectIndex = useCallback((index: number) => onIndexChange?.(index), [onIndexChange]);
 
+  // Long press is reported through the same shape, and deliberately does NOT
+  // select: it is a secondary action on the tab under the finger.
+  const longPressIndex = useCallback(
+    (index: number) => onIndexLongPress?.(index),
+    [onIndexLongPress],
+  );
+  const hasLongPress = onIndexLongPress !== undefined;
+
   // CONTROLLED path: the bar owns the highlight when `activeIndex` is provided,
   // so it tracks the prop even when a consumer renders custom children instead
   // of `TabBarButton`s. Syncing an imperative animation to a controlled prop is
@@ -200,11 +211,30 @@ function TabBarBody({
         runOnJS(selectIndex)(index);
       });
 
-    return Gesture.Race(pan, tap);
+    if (!hasLongPress) return Gesture.Race(pan, tap);
+
+    // Long press: the ONLY path to one, because the detector consumes the
+    // bar's touches and a button's inner `Pressable` therefore never sees a
+    // real finger (see `TabBarButtonBody`). Added to the race only when a
+    // handler was supplied — an always-armed long press would cancel the pan
+    // for anyone who rests a finger before scrubbing, and no existing consumer
+    // asked for that. It cannot cost a tap either: the tap gesture gives up at
+    // 400ms, before this one can activate at 500ms, so the two are never
+    // candidates at the same instant. Resolves its index through the same
+    // `indexAtX` worklet as tap and pan, so all three agree on the geometry.
+    const longPress = Gesture.LongPress()
+      .minDuration(LONG_PRESS_MIN_DURATION)
+      .onStart((event) => {
+        runOnJS(longPressIndex)(Math.round(indexAtX(event.x, progress.value)));
+      });
+
+    return Gesture.Race(pan, tap, longPress);
   }, [
     windowWidth,
     tabCount,
     selectIndex,
+    hasLongPress,
+    longPressIndex,
     tick,
     isDragging,
     lastTicked,
@@ -287,7 +317,9 @@ function TabBarBody({
     };
   }, [progress, slideIndex, windowWidth, tabCount]);
 
-  const bottomOffset = Math.max(insets.bottom - 16, 12);
+  // Shared with `useTabBarReservedSpace`, so a consumer reserving layout space
+  // for the bar can never drift from where the bar actually sits.
+  const bottomOffset = tabBarBottomGap(insets.bottom);
   const barContext = useMemo(
     () => ({ slideIndex, isDragging, theme, activeIndex, selectIndex }),
     [slideIndex, isDragging, theme, activeIndex, selectIndex],
@@ -430,11 +462,13 @@ function TabBarButtonBody({
       }
     >
       <Animated.View style={[styles.itemBox, boxStyle]}>
-        {/* Inactive glyph underneath, active glyph crossfading on top. */}
+        {/* Inactive glyph underneath, active glyph crossfading on top. `active`
+            tells each layer which one it is, so an item with an `activeIcon`
+            crossfades between two different nodes and not just two tints. */}
         <View>
-          <Glyph item={item} tint={theme.inactiveTint} size={ICON_SIZE} />
+          <Glyph item={item} tint={theme.inactiveTint} size={ICON_SIZE} active={false} />
           <Animated.View style={[StyleSheet.absoluteFill, styles.glyphLayer, activeGlyphStyle]}>
-            <Glyph item={item} tint={theme.activeTint} size={ICON_SIZE} />
+            <Glyph item={item} tint={theme.activeTint} size={ICON_SIZE} active />
           </Animated.View>
         </View>
         {/* Fades out and is clipped by the shrinking box — no layout anim. */}

package/src/tab-bar/glyph.native.tsx

@@ -17,7 +17,7 @@ import { Platform, View } from 'react-native';
 import { applyIconColor } from '../frosted-icon-button/shared';
 import type { TabBarGlyphProps } from './shared';
 
-export function TabBarGlyph({ item, tint, size }: TabBarGlyphProps) {
+export function TabBarGlyph({ item, tint, size, active }: TabBarGlyphProps) {
   if (item.sfSymbol && Platform.OS === 'ios') {
     // `TabBarItem.sfSymbol` is a plain `string` because `types.ts` may import
     // from react/react-native only — pulling `expo-symbols`' `SFSymbol` union
@@ -36,9 +36,12 @@ export function TabBarGlyph({ item, tint, size }: TabBarGlyphProps) {
     );
   }
 
+  // Same node-swapping crossfade as the neutral variant: the active layer takes
+  // `activeIcon` when the item has one. An SF Symbol never reaches here, and is
+  // tinted natively above, so the tint crossfade remains its correct expression.
   return (
     <View style={{ height: size, alignItems: 'center', justifyContent: 'center' }}>
-      {applyIconColor(item.icon, tint)}
+      {applyIconColor(active ? (item.activeIcon ?? item.icon) : item.icon, tint)}
     </View>
   );
 }

package/src/tab-bar/glyph.tsx

@@ -2,8 +2,8 @@
  * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
  * (MIT © 2026 David Mokos). See the top-level NOTICE.
  *
- * NEUTRAL default variant of a tab glyph: renders the item's own `icon` node,
- * tinted for this crossfade layer.
+ * NEUTRAL default variant of a tab glyph: renders the item's own `icon` node —
+ * or its `activeIcon` on the active layer — tinted for this crossfade layer.
  *
  * `item.icon` is the primary icon API for the whole family — a Bloom icon
  * element, exactly like `TabsTrigger` and `FrostedIconButton` take. `sfSymbol`
@@ -17,13 +17,17 @@ import { View } from 'react-native';
 import { applyIconColor } from '../frosted-icon-button/shared';
 import type { TabBarGlyphProps } from './shared';
 
-export function TabBarGlyph({ item, tint, size }: TabBarGlyphProps) {
+export function TabBarGlyph({ item, tint, size, active }: TabBarGlyphProps) {
   // The tint is injected as the icon's `fill` FALLBACK — an icon that sets its
   // own `fill` (a brand mark, say) keeps it, so the crossfade layers simply
   // render it twice at full opacity and it never flickers.
+  //
+  // `activeIcon` is what makes the crossfade able to swap NODES: an icon set
+  // whose selected state is a different SHAPE (outline → filled) cannot be
+  // expressed by tinting one node two ways. Absent, the layer renders `icon`.
   return (
     <View style={{ height: size, alignItems: 'center', justifyContent: 'center' }}>
-      {applyIconColor(item.icon, tint)}
+      {applyIconColor(active ? (item.activeIcon ?? item.icon) : item.icon, tint)}
     </View>
   );
 }

package/src/tab-bar/index.ts

@@ -29,4 +29,5 @@ export {
   useTabBarMinimized,
 } from './minimize-context';
 export type { MinimizeState } from './minimize-context';
+export { useTabBarReservedSpace } from './use-reserved-space';
 export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';

package/src/tab-bar/index.web.tsx

@@ -31,4 +31,5 @@ export {
   useTabBarMinimized,
 } from './minimize-context';
 export type { MinimizeState } from './minimize-context';
+export { useTabBarReservedSpace } from './use-reserved-space';
 export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';

package/src/tab-bar/shared.ts

@@ -51,6 +51,27 @@ export const BLUR_BLEED = 44;
 /** Label type size. Small by design — the icon carries the meaning. */
 export const LABEL_FONT_SIZE = 9.5;
 
+/**
+ * How much of the bottom safe-area inset the bar's own gap absorbs. The pill
+ * already floats clear of the content, so sitting the FULL inset below it
+ * strands it in the middle of the screen on a home-indicator device.
+ */
+const SAFE_AREA_ABSORBED = 16;
+/** Gap floor, for a device (or a browser) reporting no bottom inset at all. */
+const MIN_BOTTOM_GAP = 12;
+
+/**
+ * Vertical gap between the bottom of the pill and the bottom of the window.
+ *
+ * The safe-area inset is folded in HERE, which is why anything reserving layout
+ * space for the bar must go through `useTabBarReservedSpace` (which derives its
+ * number from this same function) rather than adding `insets.bottom` to a
+ * hardcoded height — that double-counts the inset.
+ */
+export function tabBarBottomGap(bottomInset: number): number {
+  return Math.max(bottomInset - SAFE_AREA_ABSORBED, MIN_BOTTOM_GAP);
+}
+
 /**
  * Slide spring: interruptible by design — rapid tab-hopping retargets with
  * preserved velocity. Slight under-damping gives the pill a tiny settle, safe
@@ -58,6 +79,15 @@ export const LABEL_FONT_SIZE = 9.5;
  */
 export const SLIDE_SPRING = { duration: 420, dampingRatio: 0.82 };
 
+/**
+ * How long a press must be held before `onIndexLongPress` fires.
+ *
+ * Comfortably above the tap gesture's own 400ms ceiling: the two can never both
+ * be candidates at the same instant, so arming the long press cannot cost the
+ * bar a tap. Matches the platform long-press feel (iOS ~0.5s).
+ */
+export const LONG_PRESS_MIN_DURATION = 500;
+
 // ---------------------------------------------------------------------------
 //  Theme
 // ---------------------------------------------------------------------------
@@ -156,4 +186,12 @@ export interface TabBarGlyphProps {
   tint: string;
   /** Rendered icon size in px ({@link ICON_SIZE}). */
   size: number;
+  /**
+   * Which crossfade layer this is: `false` for the inactive one underneath,
+   * `true` for the one fading in on top. The active layer renders
+   * `item.activeIcon` when the item has one, so a set that expresses selection
+   * by shape (outline → filled) crossfades between two different nodes rather
+   * than between two tints of the same node.
+   */
+  active: boolean;
 }

package/src/tab-bar/types.ts

@@ -26,9 +26,31 @@ export type TabBarItem = {
    * type. This is the primary icon API — same convention as `Tabs`/`TabsTrigger`
    * and `FrostedIconButton`. The bar renders it TWICE (an inactive layer with the
    * active layer crossfading on top), injecting the layer's tint as the icon's
-   * `fill` unless the element already sets one.
+   * `fill` unless the element already sets one. See {@link TabBarItem.activeIcon}
+   * for a set whose selected state is a different shape rather than a tint.
    */
   icon: ReactNode;
+  /**
+   * Optional second node rendered by the ACTIVE crossfade layer instead of
+   * `icon`; without it that layer renders `icon` again, which is the original
+   * behaviour.
+   *
+   * For icon sets that express selection by SHAPE rather than by tint — an
+   * outline glyph that becomes a filled one, with a different path — a tint
+   * crossfade cannot say what the set says, because both layers would draw the
+   * same shape in two colors. Supplying the filled variant here makes the
+   * existing crossfade swap NODES, so the outline dissolves into the fill.
+   *
+   * It is also the escape hatch for an icon that ignores the injected tint: the
+   * bar tints a glyph by cloning it with a `fill` prop (see `applyIconColor`),
+   * so an icon set that paints from a `color` prop instead never lights up, with
+   * no error. Pre-color both nodes yourself and the crossfade still works.
+   *
+   * On iOS an item carrying `sfSymbol` renders the symbol on both layers and
+   * ignores this — a symbol is tinted natively, so the tint crossfade is the
+   * right expression there.
+   */
+  activeIcon?: ReactNode;
   /**
    * Optional SF Symbol name, used INSTEAD of `icon` on iOS only. A pure
    * enhancement handled solely in `glyph.native.tsx`; the neutral and web
@@ -63,6 +85,20 @@ export type TabBarProps = ViewProps & {
    * or by keyboard/assistive-technology activation of a `TabBarButton`.
    */
   onIndexChange?: (index: number) => void;
+  /**
+   * Called with the index under the finger when a tab is pressed and HELD.
+   *
+   * This is the only way to reach a long press on the bar: its gesture detector
+   * consumes the touches (that is what makes scrubbing possible), so a button's
+   * own `onLongPress` never fires for a real finger. The gesture is added to the
+   * bar's gesture race only when this prop is supplied — holding still for half
+   * a second on a bar without it keeps behaving exactly as before, and can still
+   * start a scrub.
+   *
+   * Long-pressing does NOT move the highlight or select the tab; it is a
+   * secondary action (an account switcher on the profile tab, say).
+   */
+  onIndexLongPress?: (index: number) => void;
   /** Partial override of the theme resolved from Bloom's color tokens. */
   theme?: Partial<TabBarTheme>;
   /**

package/src/tab-bar/use-reserved-space.ts

@@ -0,0 +1,44 @@
+/**
+ * How much room a screen must leave at the bottom for the floating bar.
+ *
+ * The bar is `position: absolute` over the content, so nothing reserves space
+ * for it automatically — every scrollable screen under a tab layout has to pad
+ * its own content out from under the pill. That number is built from the bar's
+ * private geometry (its expanded height and the gap it keeps from the window's
+ * bottom edge), which is exactly why it is exported as a hook: hardcoding it in
+ * an app silently drifts the moment the bar changes by a pixel.
+ *
+ * Platform-neutral, like the rest of the family — `react-native-safe-area-context`
+ * is already a required Bloom peer and is what the bar itself measures with.
+ */
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { EXPANDED_HEIGHT, tabBarBottomGap } from './shared';
+
+/**
+ * The vertical space the tab bar occupies above the bottom of the window, in
+ * px. Use it directly as the bottom padding (or bottom offset) of anything that
+ * would otherwise sit under the bar:
+ *
+ * ```tsx
+ * const reserved = useTabBarReservedSpace();
+ *
+ * <Animated.ScrollView contentContainerStyle={{ paddingBottom: reserved }} />
+ * <Fab style={{ position: 'absolute', right: 16, bottom: reserved + 12 }} />
+ * ```
+ *
+ * The value ALREADY INCLUDES the bottom safe-area inset — the bar folds the
+ * inset into its own bottom gap, so it is measured from the true window edge,
+ * not from the safe area. Never write `reserved + insets.bottom`: that counts
+ * the home indicator twice and strands a visible band of dead space under every
+ * list (a 76px bar reserving 110px on an iOS device or PWA). It is the whole
+ * number; nothing needs adding to it.
+ *
+ * It is the EXPANDED height, deliberately. The bar minimizes while scrolling
+ * down and re-expands on the way up, so reserving the minimized height would
+ * hide the end of a list the moment the user scrolled back to it.
+ */
+export function useTabBarReservedSpace(): number {
+  const insets = useSafeAreaInsets();
+  return tabBarBottomGap(insets.bottom) + EXPANDED_HEIGHT;
+}