@oxyhq/bloom 0.51.0 → 0.52.0

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

@@ -2,7 +2,8 @@
  * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
  * (MIT © 2026 David Mokos). See the top-level NOTICE.
  *
- * NATIVE variant of the tab bar's capsule surface — real liquid glass.
+ * NATIVE variant of the tab bar's capsule surface — real liquid glass, degrading
+ * to the solid surface whenever the glass is not actually usable.
  *
  * `expo-glass-effect` is imported STATICALLY and this file is the only place it
  * appears: Metro selects `.native` on iOS/Android, so the import never reaches
@@ -14,18 +15,88 @@
  *
  * `isLiquidGlassAvailable()` is false on Android and pre-iOS-26, where the
  * package's `GlassView` has no material to render; those platforms get the same
- * opaque fallback the neutral variant paints.
+ * opaque fallback the neutral variant paints. "Installed" is not "usable"
+ * though, and BOTH remaining hazards sit at MODULE scope, which is why neither
+ * can be handled by a branch inside the component:
+ *
+ *  1. THE NATIVE MODULE. On iOS `isLiquidGlassAvailable()` resolves
+ *     `ExpoGlassEffect` through `requireNativeModule`, which THROWS
+ *     `Cannot find native module …` by contract when that module is not in the
+ *     binary. For these apps it is a normal deploy state rather than a
+ *     misconfiguration: an OTA JS update can land on a binary built before the
+ *     package was linked, while the JS side always resolves because expo-router
+ *     depends on it. Unguarded, the throw escapes render and takes down the whole
+ *     screen the bar is on.
+ *  2. THE EXPORTS. `Animated.createAnimatedComponent(GlassView)` runs at IMPORT
+ *     time, so a tree that resolves the specifier to something without
+ *     `GlassView` hands React an `undefined` element type before any render
+ *     happens.
+ *
+ * `isGlassEffectAPIAvailable()` is upstream's own third condition: on some iOS 26
+ * betas `UIGlassEffect` is missing and touching `GlassView` crashes NATIVELY,
+ * below JS (expo/expo#40911). It first shipped in expo-glass-effect 0.1.9, which is
+ * exactly why the peer floor is `>=0.1.9`: this file imports the symbol STATICALLY,
+ * and a floor predating it would be the same incoherence as declaring a
+ * statically-imported package optional. The `typeof` guard below is still not
+ * redundant — a peer range only WARNS, so a consumer can resolve an older copy
+ * anyway. A missing probe therefore means "not applicable", never "unavailable";
+ * reading it the other way would delete the glass look from every working device.
+ *
+ * Everything that fails routes to the SAME solid surface Android already paints —
+ * the intended fallback path, not a new one.
  */
-import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
+import { GlassView, isGlassEffectAPIAvailable, isLiquidGlassAvailable } from 'expo-glass-effect';
 import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import type { TabBarSurfaceProps } from './shared';
+import { SolidTabBarSurface } from './surface-solid';
+
+/**
+ * The animated glass view, or `null` when the package did not deliver the two
+ * exports this file needs. Built once, and guarded HERE rather than in the
+ * component because `createAnimatedComponent` runs on import (hazard 2 above).
+ */
+const AnimatedGlassView =
+  Boolean(GlassView) && typeof isLiquidGlassAvailable === 'function'
+    ? Animated.createAnimatedComponent(GlassView)
+    : null;
 
-const AnimatedGlassView = Animated.createAnimatedComponent(GlassView);
+/** Memo for {@link glassIsUsable} — the answer cannot change within a session. */
+let glassUsable: boolean | undefined;
+
+/**
+ * Whether this build can really render glass. Probed once: the native lookup
+ * behind it is not free, and on the failing path it throws.
+ *
+ * The `catch` reports rather than swallows. A bar that silently painted itself
+ * opaque on every iOS device would be far more expensive to find than one warning
+ * line, and reaching this branch always means a real, fixable packaging mistake.
+ * Warning exactly once falls out of the memo — the body runs at most one time.
+ */
+function glassIsUsable(): boolean {
+  if (glassUsable !== undefined) return glassUsable;
+
+  try {
+    glassUsable =
+      isLiquidGlassAvailable() &&
+      (typeof isGlassEffectAPIAvailable !== 'function' || isGlassEffectAPIAvailable());
+  } catch (error) {
+    glassUsable = false;
+    // eslint-disable-next-line no-console
+    console.warn(
+      '[Bloom] TabBar: expo-glass-effect could not report liquid-glass availability, ' +
+        'so the bar is painting its solid surface. Install expo-glass-effect and ' +
+        'rebuild the native app to get the glass capsule.',
+      error,
+    );
+  }
+
+  return glassUsable;
+}
 
 export function TabBarSurface({ theme, style }: TabBarSurfaceProps) {
-  if (isLiquidGlassAvailable()) {
+  if (AnimatedGlassView !== null && glassIsUsable()) {
     return (
       <AnimatedGlassView
         glassEffectStyle="regular"
@@ -39,16 +110,7 @@ export function TabBarSurface({ theme, style }: TabBarSurfaceProps) {
     );
   }
 
-  return (
-    <Animated.View
-      style={[
-        StyleSheet.absoluteFill,
-        styles.surface,
-        { backgroundColor: theme.solidFallback },
-        style,
-      ]}
-    />
-  );
+  return <SolidTabBarSurface theme={theme} style={style} />;
 }
 
 TabBarSurface.displayName = 'TabBarSurface';

package/src/tab-bar/surface.tsx

@@ -2,8 +2,7 @@
  * 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 the tab bar's capsule surface: a plain animated
- * view filled with the theme's solid fallback.
+ * NEUTRAL default variant of the tab bar's capsule surface: the non-glass one.
  *
  * This is the file resolved by everything that does NOT do React Native's
  * platform-extension resolution — a consumer's `tsc` (which follows Bloom's
@@ -14,34 +13,16 @@
  * resolution outright. Same three-way split, for the same reason, as
  * `theme/native-root-vars{,.native,.web}.ts`.
  *
+ * The surface itself lives in `surface-solid.tsx`, because `surface.native.tsx`
+ * renders it as its own fallback and cannot import this file to get it — Metro
+ * resolves `./surface` back to `surface.native.tsx`, i.e. to itself. This module's
+ * job is to give that one implementation the name every entry module imports.
+ *
  * The variants — all three implement `TabBarSurfaceProps` exactly, so the entry
  * modules can swap them freely:
- *   - `surface.native.tsx` — iOS/Android (Metro), real `UIGlassEffect` glass;
+ *   - `surface.native.tsx` — iOS/Android (Metro), real `UIGlassEffect` glass, with
+ *     the solid surface as its fallback;
  *   - `surface.web.tsx`    — web, a CSS `backdrop-filter`;
- *   - this file            — everywhere else, the opaque fallback.
+ *   - this file            — everywhere else, the opaque fallback alone.
  */
-import { StyleSheet } from 'react-native';
-import Animated from 'react-native-reanimated';
-
-import type { TabBarSurfaceProps } from './shared';
-
-export function TabBarSurface({ theme, style }: TabBarSurfaceProps) {
-  return (
-    <Animated.View
-      style={[
-        StyleSheet.absoluteFill,
-        styles.surface,
-        { backgroundColor: theme.solidFallback },
-        style,
-      ]}
-    />
-  );
-}
-
-TabBarSurface.displayName = 'TabBarSurface';
-
-const styles = StyleSheet.create({
-  surface: {
-    borderCurve: 'continuous',
-  },
-});
+export { SolidTabBarSurface as TabBarSurface } from './surface-solid';

package/src/tab-bar/types.ts

@@ -19,13 +19,38 @@ export type TabBarItem = {
   /** Text under the icon; fades out and is clipped when the bar minimizes. */
   label: string;
   /**
-   * The glyph, as a Bloom icon element (`<Icons.Home />`) or any node. This is
-   * the primary icon API — same convention as `Tabs`/`TabsTrigger` and
-   * `FrostedIconButton`. The bar renders it TWICE (an inactive layer with the
+   * The glyph, as a Bloom icon element (`<Icons.Home_Stroke2_Corner0_Rounded />`)
+   * or any node. Every `@oxyhq/bloom/icons` export carries its full style and
+   * corner suffix; a shortened `Home` is not an export, and a name that does not
+   * exist is simply `undefined`, which React then rejects as an invalid element
+   * 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
@@ -60,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;
+}