@oxyhq/bloom 0.51.1 → 0.52.1

package/src/dialog/Dialog.web.tsx

@@ -21,7 +21,7 @@ import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
-import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useTheme } from '../theme/use-theme';
 import { Context, useDialogContext, useDialogControl } from './context';
@@ -59,6 +59,23 @@ import type {
 
 const FADE_OUT_DURATION = CENTER_FADE_OUT_DURATION;
 
+/**
+ * The four CSS `animation` shorthands driving the centered card and its backdrop.
+ * `animation` has no `ViewStyle` key at all — react-native-web forwards it to the
+ * DOM node — so these are annotated `WebCssStyle` rather than cast. The
+ * `@keyframes` they name are self-injected by `useDialogCss()`.
+ */
+const ZOOM_FADE_IN: WebCssStyle = {
+  animation: 'bloomDialogZoomFadeIn cubic-bezier(0.16, 1, 0.3, 1) 0.3s',
+};
+const ZOOM_FADE_OUT: WebCssStyle = {
+  animation: `bloomDialogZoomFadeOut ease-in ${FADE_OUT_DURATION}ms forwards`,
+};
+const BACKDROP_FADE_IN: WebCssStyle = { animation: 'bloomDialogFadeIn ease-out 0.15s' };
+const BACKDROP_FADE_OUT: WebCssStyle = {
+  animation: `bloomDialogFadeOut ease-in ${FADE_OUT_DURATION}ms forwards`,
+};
+
 const stopPropagation = (e: { stopPropagation: () => void }) => e.stopPropagation();
 
 const ClosingContext = createContext(false);
@@ -475,9 +492,7 @@ function DialogPanel({
           ...bloomShadowStyle('m'),
           zIndex: surfaceZIndex,
         },
-        isClosing
-          ? ({ animation: `bloomDialogZoomFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle)
-          : ({ animation: 'bloomDialogZoomFadeIn cubic-bezier(0.16, 1, 0.3, 1) 0.3s' } as ViewStyle),
+        isClosing ? ZOOM_FADE_OUT : ZOOM_FADE_IN,
         // Drives `height` (and `maxWidth`) only while a morph is in flight; at
         // rest it resolves to `height: 'auto'` — the natural sizing above. Placed
         // before `style` so a consumer's explicit size still wins.
@@ -625,23 +640,21 @@ function SheetSurface({
 
   const visible = shown && entered;
 
-  const panelTransition = useMemo<ViewStyle>(
-    () =>
-      ({
-        transitionProperty: 'transform, opacity',
-        transitionDuration: `${ANIMATION_DURATION}ms`,
-        transitionTimingFunction: EASE_OUT,
-      }) as ViewStyle,
+  const panelTransition = useMemo<WebCssStyle>(
+    () => ({
+      transitionProperty: 'transform, opacity',
+      transitionDuration: `${ANIMATION_DURATION}ms`,
+      transitionTimingFunction: EASE_OUT,
+    }),
     [],
   );
 
-  const backdropTransition = useMemo<ViewStyle>(
-    () =>
-      ({
-        transitionProperty: 'opacity',
-        transitionDuration: `${ANIMATION_DURATION}ms`,
-        transitionTimingFunction: EASE_OUT,
-      }) as ViewStyle,
+  const backdropTransition = useMemo<WebCssStyle>(
+    () => ({
+      transitionProperty: 'opacity',
+      transitionDuration: `${ANIMATION_DURATION}ms`,
+      transitionTimingFunction: EASE_OUT,
+    }),
     [],
   );
 
@@ -664,7 +677,7 @@ function SheetSurface({
       borderRadius: PANEL_RADIUS,
       transform: [{ translateX: visible ? 0 : hiddenSign }],
       opacity: visible ? 1 : 0,
-    } as ViewStyle;
+    };
   }, [visible, placement, width, inset, viewportWidth]);
 
   const handleBackdropPress = useCallback(() => {
@@ -798,9 +811,7 @@ function DialogBackdrop({ isClosing }: { isClosing: boolean }) {
       bottom: 0,
       backgroundColor: 'rgba(0,0,0,0.8)',
     },
-    isClosing
-      ? ({ animation: `bloomDialogFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle)
-      : ({ animation: 'bloomDialogFadeIn ease-out 0.15s' } as ViewStyle),
+    isClosing ? BACKDROP_FADE_OUT : BACKDROP_FADE_IN,
   ];
 
   return <View style={style} />;
@@ -839,7 +850,11 @@ export function AutoMountedDialog({
   );
 }
 
-const sheetStyles = {
+// Annotated rather than cast: a plain object literal widens `position: 'absolute'`
+// to `string`, which is what the three `as ViewStyle` casts here used to silence.
+// The annotation supplies the contextual type instead, so the literals narrow and
+// a genuine mistake still fails.
+const sheetStyles: Record<'root' | 'backdrop' | 'panel', ViewStyle> = {
   // `zIndex` for the root (backdrop) and panel (surface) is applied inline from
   // the per-layer `createOverlayZIndex(layer)` in `SheetSurface`, so a side
   // dialog stacked on top of another (surface stack) paints above it.
@@ -849,7 +864,7 @@ const sheetStyles = {
     left: 0,
     right: 0,
     bottom: 0,
-  } as ViewStyle,
+  },
   backdrop: {
     position: 'absolute',
     top: 0,
@@ -857,13 +872,13 @@ const sheetStyles = {
     right: 0,
     bottom: 0,
     backgroundColor: '#000',
-  } as ViewStyle,
+  },
   panel: {
     position: 'absolute',
     overflow: 'hidden',
     // Elevation is applied at the usage site via `bloomShadowStyle('m')`
     // (`boxShadow` on web); the deprecated `shadow*` props were removed.
-  } as ViewStyle,
+  },
 };
 
 /**

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/index.web.ts

@@ -146,8 +146,8 @@ export { SubtleHover } from './subtle-hover';
 export type { SubtleHoverProps } from './subtle-hover';
 
 // Motion presets (Reanimated enter/exit + directional screen transition)
-export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition } from './motion';
-export type { ScreenTransitionProps, ScreenTransitionDirection } from './motion';
+export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition } from './motion/index.web';
+export type { ScreenTransitionProps, ScreenTransitionDirection } from './motion/index.web';
 export { AnimatedCheck } from './animated-check';
 export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
 

package/src/loading/Loading.web.tsx

@@ -1,5 +1,7 @@
 import React, { memo, useMemo } from 'react';
-import { View, Text, StyleSheet, type DimensionValue, type ViewStyle } from 'react-native';
+import { View, Text, StyleSheet, type DimensionValue } from 'react-native';
+
+import type { WebCssStyle } from '../styles/web-view-style';
 
 import { useTheme } from '../theme/use-theme';
 import { animation } from '../styles/tokens';
@@ -87,17 +89,17 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   // reanimated's `Easing.out(Easing.cubic)` used by the native variant.
   const easing = 'cubic-bezier(0.33, 1, 0.68, 1)';
 
-  const containerTransition = {
+  const containerTransition: WebCssStyle = {
     transitionProperty: 'height',
     transitionDuration: `${duration}ms`,
     transitionTimingFunction: easing,
-  } as ViewStyle;
+  };
 
-  const innerTransition = {
+  const innerTransition: WebCssStyle = {
     transitionProperty: 'opacity, transform',
     transitionDuration: `${duration}ms`,
     transitionTimingFunction: easing,
-  } as ViewStyle;
+  };
 
   return (
     <View

package/src/loading/SpinnerIcon.web.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
 
+import type { WebCssStyle } from '../styles/web-view-style';
+
 interface SpinnerIconProps {
   size?: number;
   color?: string;
@@ -59,6 +61,15 @@ export const BLOOM_SPINNER_CSS = `
 @keyframes ${SPIN_ANIMATION_NAME} { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 `;
 
+/**
+ * `animation` is a real CSS prop on web; react-native-web passes it through to
+ * the DOM node. RN's `ViewStyle` has no `animation` key, which is what
+ * `WebCssStyle` covers.
+ */
+const SPIN_STYLE: WebCssStyle = {
+  animation: `${SPIN_ANIMATION_NAME} ${SPIN_DURATION_MS}ms linear infinite`,
+};
+
 function useKeyframes(): void {
   useEffect(() => {
     if (typeof document === 'undefined') return;
@@ -87,15 +98,7 @@ export const SpinnerIcon: React.FC<SpinnerIconProps> = ({
   return (
     <View
       {...(className ? ({ className } as Record<string, string>) : {})}
-      // `animation` is a real CSS prop on web; react-native-web passes it
-      // through to the DOM node. Typed as a cast because RN's ViewStyle has no
-      // `animation` key.
-      style={[
-        styles.container,
-        { width: size, height: size },
-        { animation: `${SPIN_ANIMATION_NAME} ${SPIN_DURATION_MS}ms linear infinite` } as ViewStyle,
-        style,
-      ]}
+      style={[styles.container, { width: size, height: size }, SPIN_STYLE, style]}
     >
       {BLADES.map(({ angle, opacity }) => (
         <View

package/src/motion/index.web.ts

@@ -0,0 +1,8 @@
+/**
+ * Web variant of the `motion` barrel. Only the three layout-animation presets
+ * fork — see `motion.web.ts` for why. `ScreenTransition` is universal: it already
+ * branches on `Platform.OS` internally.
+ */
+export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop } from './motion.web';
+export { ScreenTransition } from './ScreenTransition';
+export type { ScreenTransitionProps, ScreenTransitionDirection } from './ScreenTransition';

package/src/motion/motion.ts

@@ -2,17 +2,25 @@ import {
   withDelay,
   withSequence,
   withTiming,
-  type LayoutAnimation,
+  type EntryOrExitLayoutType,
 } from 'react-native-reanimated';
 
 /**
- * Reanimated custom layout-animation presets. Each is a worklet builder
- * compatible with an `Animated.View`'s `entering` / `exiting` prop:
+ * Reanimated layout-animation presets. Each is a value you hand to an
+ * `Animated.View`'s `entering` / `exiting` prop:
  *
  * ```tsx
  * <Animated.View entering={ScaleAndFadeIn} exiting={ScaleAndFadeOut} />
  * ```
  *
+ * THIS IS THE NATIVE FILE. Custom worklet builders animate correctly on native
+ * and do NOTHING on web, where reanimated resolves an animation by preset name —
+ * `motion.web.ts` reimplements all three against the mechanisms web actually
+ * supports and documents why the two platforms cannot share one. The exported
+ * TYPE is deliberately reanimated's own "thing you can pass to entering/exiting"
+ * union rather than the concrete builder shape, so the two files present one
+ * contract and no consumer can depend on the mechanism.
+ *
  * Ported from Bluesky's custom-animation set. The `'worklet'` directive is
  * preserved through Bloom's build; the consuming app's Metro + reanimated Babel
  * plugin transforms it so the animation runs on the UI thread (same path the
@@ -20,7 +28,7 @@ import {
  */
 
 /** Entering: fade in while growing from 70% to full size. */
-export const ScaleAndFadeIn: () => LayoutAnimation = () => {
+export const ScaleAndFadeIn: EntryOrExitLayoutType = () => {
   'worklet';
   return {
     animations: {
@@ -35,7 +43,7 @@ export const ScaleAndFadeIn: () => LayoutAnimation = () => {
 };
 
 /** Exiting counterpart to {@link ScaleAndFadeIn}: fade out while shrinking to 70%. */
-export const ScaleAndFadeOut: () => LayoutAnimation = () => {
+export const ScaleAndFadeOut: EntryOrExitLayoutType = () => {
   'worklet';
   return {
     animations: {
@@ -53,7 +61,7 @@ export const ScaleAndFadeOut: () => LayoutAnimation = () => {
  * Exiting with a brief "pop": the scale dips to 70%, overshoots to 110%, and the
  * element fades out. Good for confirming a tapped or removed item.
  */
-export const ShrinkAndPop: () => LayoutAnimation = () => {
+export const ShrinkAndPop: EntryOrExitLayoutType = () => {
   'worklet';
   return {
     animations: {

package/src/motion/motion.web.ts

@@ -0,0 +1,99 @@
+/**
+ * WEB FORK of `motion.ts`. Same three names, same contract ("a value you hand to
+ * an `Animated.View`'s `entering` / `exiting`"), different mechanism — because on
+ * web the native mechanism does nothing at all and the obvious replacement is
+ * worse than nothing.
+ *
+ * WHY THE DEFAULT FILE CANNOT SERVE WEB. `motion.ts` exports custom
+ * `EntryExitAnimationFunction` worklet builders. Reanimated's web layout-animation
+ * manager resolves an animation by NAME: `tryGetAnimationConfig` reads
+ * `config.presetName` off the function, a custom builder has none, and
+ * `checkUndefinedAnimationFail` then bails to `makeElementVisible(element, 0)`.
+ * Measured in Chrome 5.x/reanimated 4.5.0: the card mounts at `transform: none`,
+ * `opacity: 1` and stays there for every sampled frame of both directions, with
+ * one `[Reanimated] Couldn't load entering/exiting animation` warning per element.
+ * Native is unaffected — it runs the builder directly, with no name lookup.
+ *
+ * WHY THE ENTER AND THE EXITS USE DIFFERENT MECHANISMS. Rebuilding all three as
+ * `Keyframe`s is the obvious fix and is only HALF right, because reanimated's two
+ * web directions differ in one decisive argument:
+ *
+ *   - `exiting` -> `handleExitingAnimation` calls `setElementAnimation` on a
+ *     throwaway clone with `shouldSavePosition` FALSE. The custom keyframe's
+ *     `duration x 5` cleanup only tears that clone down, which is what it is for.
+ *     A `Keyframe` here is safe AND exact: it compiles to a real CSS `@keyframes`
+ *     rule, so the full scale + opacity shape survives.
+ *   - `entering` -> `chooseAction` calls `setElementAnimation` on the REAL element
+ *     with `shouldSavePosition` TRUE, and since a custom keyframe's generated
+ *     `REA-ENTERING-n` name is absent from reanimated's built-in `Animations`
+ *     map, `scheduleAnimationCleanup` fires
+ *     `setElementPosition` at `duration x 5` — `position: absolute`, a frozen
+ *     `top`/`left`/`width`/`height` snapshot, `transform` cleared. The animation
+ *     plays and the element is then pinned, silently, one and a half seconds
+ *     later. That is failure mode (C) in `~/Oxy/AGENTS.md` and it is strictly
+ *     worse than the inert animation it would replace.
+ *
+ * So the enter uses a PREDEFINED builder, whose `presetName` IS in `Animations`
+ * and therefore skips `scheduleAnimationCleanup` entirely. Predefined builders
+ * cannot combine a fade with a scale, so the web enter keeps the fade and drops
+ * the 0.7 -> 1 growth. `ScreenTransition` in this same folder already made that
+ * trade for the same reason ("on web the slide is intentionally dropped").
+ *
+ * The imperative shared-value drive (failure mode (A)'s remedy, and what
+ * `toast/ToastRow.tsx` uses for its own enter) is the third option and is not
+ * available here: these are exported VALUES, not components, so there is no
+ * render to hang a `useSharedValue` off — and it could not express an exit at
+ * all, since keeping an unmounting element alive is exactly what `exiting` is for.
+ *
+ * WEB EASING IS LINEAR. `Keyframe` has no `.easing()` modifier, and a per-stop
+ * easing only survives `convertAnimationObjectToKeyframes` when it resolves to one
+ * of reanimated's seven `WebEasings` names (all of them ease-IN curves), while
+ * `.easing(Easing.bezier(...))` needs the `__closure` the worklets babel plugin
+ * adds — absent in every Oxy web build — and degrades to linear WITH a warning.
+ * `ShrinkAndPop` therefore carries an extra midpoint stop so its piecewise-linear
+ * web curve tracks the native `withTiming` segments closely rather than cutting
+ * the corner.
+ */
+import {
+  FadeIn,
+  Keyframe,
+  type EntryOrExitLayoutType,
+} from 'react-native-reanimated';
+
+/** `withTiming`'s default, which is what the native builders animate over. */
+const DEFAULT_DURATION = 300;
+/** `ShrinkAndPop`: 75ms shrink + 150ms overshoot, with the fade ending with it. */
+const POP_DURATION = 250;
+
+/**
+ * Entering: fade in.
+ *
+ * The scale is dropped on web — see the header. `FadeIn`'s own default duration
+ * is already 300ms, matching the native builder, and the bare class is exported
+ * rather than a `.duration()` instance so nothing shares a mutable builder.
+ */
+export const ScaleAndFadeIn: EntryOrExitLayoutType = FadeIn;
+
+/** Exiting counterpart to {@link ScaleAndFadeIn}: fade out while shrinking to 70%. */
+export const ScaleAndFadeOut: EntryOrExitLayoutType = new Keyframe({
+  from: { opacity: 1, transform: [{ scale: 1 }] },
+  to: { opacity: 0, transform: [{ scale: 0.7 }] },
+}).duration(DEFAULT_DURATION);
+
+/**
+ * Exiting with a brief "pop": the scale dips to 70%, overshoots to 110%, and the
+ * element fades out.
+ *
+ * Stops are the native timeline sampled at its own breakpoints, so every property
+ * is declared at every stop and nothing depends on CSS's cross-stop interpolation:
+ * scale reaches 0.7 at 75ms (30%) and 1.1 at 225ms (90%); opacity holds until
+ * 125ms (50%) and then falls to 0 by 250ms. The 50% stop's 0.8333 scale and the
+ * 90% stop's 0.2 opacity are the native values at those instants.
+ */
+export const ShrinkAndPop: EntryOrExitLayoutType = new Keyframe({
+  0: { opacity: 1, transform: [{ scale: 1 }] },
+  30: { opacity: 1, transform: [{ scale: 0.7 }] },
+  50: { opacity: 1, transform: [{ scale: 0.8333 }] },
+  90: { opacity: 0.2, transform: [{ scale: 1.1 }] },
+  100: { opacity: 0, transform: [{ scale: 1.1 }] },
+}).duration(POP_DURATION);

package/src/progressive-blur/index.web.tsx

@@ -2,8 +2,9 @@
  * Ported from expo-glass-tabs v0.1.1 — src/progressive-blur.tsx
  * (MIT © 2026 David Mokos). See the top-level NOTICE.
  */
-import { View, type ViewStyle } from 'react-native';
+import { View } from 'react-native';
 
+import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import {
   buildMaskGradient,
@@ -50,14 +51,14 @@ export function ProgressiveBlur({
   // Web-only CSS, unknown to React Native's `ViewStyle`. Both spellings are set
   // for `backdrop-filter` and `mask-image`: Safari still needs the prefixed
   // form of each.
-  const webStyle = {
+  const webStyle: WebCssStyle = {
     pointerEvents: 'none',
     backdropFilter: filter,
     WebkitBackdropFilter: filter,
     maskImage: mask,
     WebkitMaskImage: mask,
     backgroundImage: buildTailGradient(colors.background, direction),
-  } as ViewStyle;
+  };
 
   return <View {...rest} style={[webStyle, style]} />;
 }

package/src/styles/web-view-style.ts

@@ -19,3 +19,53 @@ import type { ViewStyle } from 'react-native';
  * where Yoga silently ignores it.
  */
 export const WEB_POSITION_FIXED = 'fixed' as ViewStyle['position'];
+
+/**
+ * A `ViewStyle` that may ALSO carry CSS react-native-web forwards straight to the
+ * DOM node but React Native does not model at all.
+ *
+ * This is the OTHER shape of the same RN/RNW type gap `WEB_POSITION_FIXED`
+ * covers, and it needs a different escape hatch because the two are structurally
+ * different: `position` is a key RN DOES model, just with a narrower value union,
+ * so a value-level cast is enough and it can still be written inside an ordinary
+ * style object. The properties below have no key on `ViewStyle` at all, so the
+ * whole OBJECT has to cross the boundary.
+ *
+ * ANNOTATE, DO NOT CAST. Every `.web` fork used to spell this `{ … } as ViewStyle`
+ * inline. That is not a widening, it is SILENCING: `as` only requires the two
+ * types to be COMPARABLE, so `{ animatoin: '…' } as ViewStyle` compiles happily
+ * and the typo ships as a style key react-native-web drops on the floor.
+ * Annotating with this interface restores excess-property checking — a key that
+ * is neither a real RN style nor a listed web-only property is a compile error —
+ * and, unlike a widening helper function, it erases completely, so the emitted
+ * JavaScript is byte-identical to the cast it replaces.
+ *
+ * ```ts
+ * const glass: WebCssStyle = { backdropFilter: 'blur(24px)' };
+ * // …then pass it anywhere a `ViewStyle` is expected.
+ * ```
+ *
+ * Only add a key here once react-native-web is confirmed to pass it through and
+ * RN has no equivalent. Several near-misses do NOT belong: RN 0.83 models
+ * `cursor`, `boxShadow`, `filter` and `pointerEvents` on `ViewStyle` directly, so
+ * those need no widening at all (`userSelect` is the trap — RN declares it on
+ * `TextStyle` only). Prefixed spellings sit alongside the standard ones because
+ * Safari still needs them for `backdrop-filter` and `mask-image`.
+ */
+export interface WebCssStyle extends ViewStyle {
+  /** CSS `animation` shorthand. Bloom's web forks self-inject the `@keyframes`. */
+  animation?: string;
+  animationDelay?: string;
+  transitionProperty?: string;
+  transitionDuration?: string;
+  transitionTimingFunction?: string;
+  backdropFilter?: string;
+  WebkitBackdropFilter?: string;
+  maskImage?: string;
+  WebkitMaskImage?: string;
+  backgroundImage?: string;
+  scrollbarWidth?: 'auto' | 'thin' | 'none';
+  scrollbarColor?: string;
+  /** RN declares this on `TextStyle`, not `ViewStyle`. */
+  userSelect?: 'auto' | 'none' | 'text' | 'contain' | 'all';
+}

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,
@@ -230,16 +260,21 @@ function TabBarBody({
       [EXPANDED_HEIGHT, MINIMIZED_HEIGHT],
       Extrapolation.CLAMP,
     );
-    return {
-      height,
-      // Revolut-style: the pill shrinks in both dimensions.
-      marginHorizontal: interpolate(
-        progress.value,
-        [0, 1],
-        [0, MINIMIZED_INSET],
-        Extrapolation.CLAMP,
-      ),
-    };
+    // Revolut-style: the pill shrinks in both dimensions.
+    //
+    // Written as the two long-form margins, NEVER as `marginHorizontal`.
+    // Reanimated's web path hands a mapper's result to react-native-web's
+    // `createReactDOMStyle`, whose `STYLE_SHORT_FORM_EXPANSIONS` map covers
+    // `marginInline` but NOT React Native's `marginHorizontal` (verified absent
+    // from the whole file in RNW 0.21.2). An unexpanded shorthand is written
+    // straight onto the DOM node as `style.marginHorizontal`, which is not a CSS
+    // property, so the browser drops it silently: the bar keeps its full width
+    // while `highlightStyle` still subtracts `MINIMIZED_INSET` from `barWidth`,
+    // leaving the highlight narrower than the tab it sits under. Static styles
+    // are unaffected — they take RNW's own StyleSheet path, which does handle
+    // the shorthand — so this only bites inside a mapper.
+    const inset = interpolate(progress.value, [0, 1], [0, MINIMIZED_INSET], Extrapolation.CLAMP);
+    return { height, marginLeft: inset, marginRight: inset };
   }, [progress]);
 
   // The capsule shape lives on the surface itself: iOS 26 glass renders its own
@@ -287,7 +322,9 @@ function TabBarBody({
     };
   }, [progress, slideIndex, windowWidth, tabCount]);
 
-  const bottomOffset = Math.max(insets.bottom - 16, 12);
+  // Shared with `useTabBarFootprint`, so a consumer accounting for the bar in
+  // its own layout 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 +467,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>
   );
 }