@oxyhq/bloom 0.61.0 → 0.63.0

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -20,12 +20,13 @@ import Animated, {
     type SharedValue,
     useAnimatedScrollHandler,
     useAnimatedStyle,
+    useDerivedValue,
     useSharedValue,
     withSpring,
     withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Backdrop } from '../overlay';
+import { Backdrop, BACKDROP_DIM_OPACITY } from '../overlay';
 import { useTheme } from '../theme/use-theme';
 
 /** Hook that returns current screen dimensions and updates on rotation/resize. */
@@ -199,8 +200,6 @@ export interface BottomSheetBaseProps extends BottomSheetProps {
     Shell: React.ComponentType<BottomSheetShellProps>;
 }
 
-const AnimatedBackdrop = Animated.createAnimatedComponent(Backdrop);
-
 export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: React.ForwardedRef<BottomSheetRef>) => {
     const {
         Shell,
@@ -215,7 +214,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         onDismissAttempt,
         detached = false,
         showHandle = true,
-        backdropOpacity = 0.5,
+        backdropOpacity = BACKDROP_DIM_OPACITY,
         scrollable = true,
         manualActivation = false,
         dynamicBackdrop = false,
@@ -642,7 +641,11 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     // dim opacity applies smoothly across the animation. When
     // `dynamicBackdrop` is enabled, the dim also fades proportionally with
     // drag distance (iOS Photos style).
-    const backdropStyle = useAnimatedStyle(() => {
+    // A VALUE, not a style: `Backdrop` applies it to its blur and dim layers
+    // itself. Handing it over as an animated style would put the opacity on the
+    // layers' shared ancestor, which composites the group in isolation and
+    // leaves `backdrop-filter` with nothing behind it to blur.
+    const backdropProgress = useDerivedValue(() => {
         const dragFactor = dynamicBackdrop
             ? interpolate(
                 translateY.value,
@@ -651,10 +654,16 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                 'clamp',
             )
             : 1;
-        return {
-            opacity: opacity.value * backdropOpacity * dragFactor,
-        };
-    }, [backdropOpacity, dynamicBackdrop, opacity, translateY, screenHeightSV]);
+        return opacity.value * dragFactor;
+    }, [dynamicBackdrop, opacity, translateY, screenHeightSV]);
+
+    // Only the consumer-supplied `backdropComponent` needs the progress as a
+    // style — it owns its own visuals, blur included, so the ancestor-opacity
+    // hazard is its call to make.
+    const customBackdropStyle = useAnimatedStyle(
+        () => ({ opacity: backdropProgress.value }),
+        [backdropProgress],
+    );
 
     const sheetStyle = useAnimatedStyle(() => {
         const scale = interpolate(translateY.value, [0, screenHeightSV.value], [1, 0.95]);
@@ -787,7 +796,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         <Shell visible={rendered} onRequestClose={dismiss} keyboardHeight={keyboardHeight}>
             <View style={StyleSheet.absoluteFill}>
                 {backdropComponent ? (
-                    <Animated.View style={[StyleSheet.absoluteFill, backdropStyle]}>
+                    <Animated.View style={[StyleSheet.absoluteFill, customBackdropStyle]}>
                         {backdropComponent({ onPress: handleBackdropPress })}
                     </Animated.View>
                 ) : (
@@ -795,10 +804,18 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                     // `backdropStyle` drives the fade; the dim level rides on
                     // `backdropOpacity`, so the shared component's own dim is
                     // switched off here to keep a single source of dimming.
-                    <AnimatedBackdrop
+                    <Backdrop
                         onPress={handleBackdropPress}
-                        dimOpacity={1}
-                        style={[styles.backdrop, backdropStyle]}
+                        // `progress` is the FADE (0 → 1, folding the drag);
+                        // how dark the backdrop gets is `backdropOpacity`,
+                        // which defaults to the library-wide dim so a sheet
+                        // matches every other surface. It goes through
+                        // `progress` rather than an animated style because an
+                        // opacity on the root would sit above the blur layer
+                        // and neutralise it.
+                        dimOpacity={backdropOpacity}
+                        progress={backdropProgress}
+                        style={styles.backdrop}
                     />
                 )}
 

package/src/dialog/Dialog.tsx

@@ -26,6 +26,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { Backdrop } from '../overlay';
 import { Z_INDEX, Z_INDEX_LAYER_STEP } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 import { Context, useDialogControl } from './context';
@@ -46,7 +47,6 @@ import {
   DEFAULT_SIDE_WIDTH,
   DIALOG_SHEET_BACKDROP_TESTID,
   PANEL_RADIUS,
-  SHEET_BACKDROP_OPACITY,
   SIDE_SHEET_MIN_GUTTER,
   useResolvedPlacement,
 } from './placement';
@@ -486,10 +486,6 @@ function SideSheet({
     if (dismissOnBackdrop) onDismiss();
   }, [dismissOnBackdrop, onDismiss]);
 
-  const backdropAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: progress.value * SHEET_BACKDROP_OPACITY,
-  }), []);
-
   const hiddenSign = side === 'left' ? -1 : 1;
   const panelAnimatedStyle = useAnimatedStyle(() => {
     const hidden = 1 - progress.value;
@@ -533,18 +529,14 @@ function SideSheet({
       ]}
       {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
     >
-      <Animated.View
-        style={[sideStyles.backdrop, backdropAnimatedStyle, { pointerEvents: 'auto' }]}
-      >
-        <Pressable
-          testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
-          accessibilityRole="button"
-          accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
-          onPress={handleBackdropPress}
-          disabled={!dismissOnBackdrop}
-          style={StyleSheet.absoluteFill}
-        />
-      </Animated.View>
+      <Backdrop
+        testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
+        accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
+        onPress={handleBackdropPress}
+        disabled={!dismissOnBackdrop}
+        progress={progress}
+        style={sideStyles.backdrop}
+      />
 
       <Animated.View
         accessibilityViewIsModal

package/src/dialog/Dialog.web.tsx

@@ -47,7 +47,6 @@ import {
   DIALOG_SHEET_BACKDROP_TESTID,
   EASE_OUT,
   PANEL_RADIUS,
-  SHEET_BACKDROP_OPACITY,
   SIDE_SHEET_MIN_GUTTER,
   useResolvedPlacement,
 } from './placement';
@@ -60,11 +59,6 @@ import type {
 
 const FADE_OUT_DURATION = CENTER_FADE_OUT_DURATION;
 
-/**
- * The centered card's scrim reads darker than a sheet's because the card floats
- * in the middle of it; the shared blur underneath is identical.
- */
-const DIALOG_BACKDROP_DIM_OPACITY = 0.6;
 
 /**
  * The four CSS `animation` shorthands driving the centered card and its backdrop.
@@ -331,17 +325,17 @@ function CenterOrSideDialog({
               onPress={() => close()}
               disabled={!dismissOnBackdrop}
               accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
-              dimOpacity={DIALOG_BACKDROP_DIM_OPACITY}
-              style={[
-                {
-                  position: WEB_POSITION_FIXED,
-                  zIndex: dialogZIndex.backdrop,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  paddingHorizontal: 20,
-                },
-                isClosing ? BACKDROP_FADE_OUT : BACKDROP_FADE_IN,
-              ]}
+              // The fade rides on the LAYERS, never on the press target: an
+              // opacity animation on the blur's ancestor composites the group in
+              // isolation and leaves `backdrop-filter` nothing to sample.
+              layerStyle={isClosing ? BACKDROP_FADE_OUT : BACKDROP_FADE_IN}
+              style={{
+                position: WEB_POSITION_FIXED,
+                zIndex: dialogZIndex.backdrop,
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingHorizontal: 20,
+              }}
             >
               <DialogPanel
                 testID={testID}
@@ -702,14 +696,11 @@ function SheetSurface({
         accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
         onPress={handleBackdropPress}
         disabled={!dismissOnBackdrop}
-        // The dim rides on the element's own animated opacity here, so the
-        // shared component's dim layer stays fully opaque under it.
-        dimOpacity={1}
-        style={[
-          sheetStyles.backdrop,
-          backdropTransition,
-          { opacity: visible ? SHEET_BACKDROP_OPACITY : 0 },
-        ]}
+        // Same reason as the centred dialog: the transition and the opacity it
+        // animates belong to the layers, not to the press target above them.
+        // No `dimOpacity` override — one darkness for every Bloom surface.
+        layerStyle={backdropTransition}
+        style={[sheetStyles.backdrop, { opacity: visible ? 1 : 0 }]}
       />
 
       <View

package/src/dialog/DialogBottomSheet.tsx

@@ -30,7 +30,6 @@ import {
   DEFAULT_DIALOG_CONTENT_PADDING,
   DEFAULT_MAX_HEIGHT_RATIO,
   PANEL_RADIUS,
-  SHEET_BACKDROP_OPACITY,
 } from './placement';
 import type { DialogControlProps, DialogProps } from './types';
 
@@ -286,7 +285,6 @@ export function DialogBottomSheet({
       }
       // Stronger dim than a lone sheet so an underlying sheet's handle/content
       // doesn't bleed through when a Dialog is stacked over one.
-      backdropOpacity={SHEET_BACKDROP_OPACITY + 0.3}
       // Measures the sheet card — the size a morph starts from.
       onLayout={morphState.onPanelLayout}
       style={sheetStyle}

package/src/dialog/placement.ts

@@ -83,8 +83,6 @@ export const CENTER_FADE_OUT_DURATION = 150;
 /** CSS approximation of reanimated's `Easing.out(Easing.cubic)`. */
 export const EASE_OUT = 'cubic-bezier(0.33, 1, 0.68, 1)';
 
-/** Backdrop dim opacity once fully shown (matches `bg-black/40`). */
-export const SHEET_BACKDROP_OPACITY = 0.4;
 
 /** Stable testID for the dimmed backdrop of a side/bottom placement dialog. */
 export const DIALOG_SHEET_BACKDROP_TESTID = 'bloom-dialog-sheet-backdrop';

package/src/overlay/index.tsx

@@ -39,7 +39,7 @@
  * Use `<OverlayRoot>` for the surface's outermost node and `<Backdrop>` for its
  * dimming layer; do not re-implement either with raw `View`s.
  */
-import { forwardRef, memo, type ReactNode } from 'react';
+import { memo, type ReactNode } from 'react';
 import { BlurView } from 'expo-blur';
 import {
   Platform,
@@ -49,16 +49,26 @@ import {
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
+import Animated, { useAnimatedStyle, type SharedValue } from 'react-native-reanimated';
 
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 
+const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
+
 /**
  * One blur radius for every Bloom overlay. Surfaces differ in what they show,
  * not in how the app behind them recedes.
  */
 export const BACKDROP_BLUR_INTENSITY = 80;
-/** Dim laid over the blur — the blur alone does not give enough contrast. */
-export const BACKDROP_DIM_OPACITY = 0.55;
+/**
+ * Extra dim laid OVER the blur. The blur already paints its own tint wash
+ * (`rgba(25,25,25,~0.62)` at the intensity above), so this is what takes the
+ * total to roughly 0.72 — dark enough to read a panel against, still clearly
+ * see-through. Every surface uses this one value: with each of them picking its
+ * own, menus landed at ~0.83 and read as solid black next to the image viewer's
+ * ~0.72.
+ */
+export const BACKDROP_DIM_OPACITY = 0.28;
 
 export interface OverlayRootProps {
   children?: ReactNode;
@@ -85,6 +95,12 @@ OverlayRoot.displayName = 'OverlayRoot';
 export interface BackdropProps {
   /** Dismiss handler. Omit (or pass `disabled`) for a backdrop that only dims. */
   onPress?: () => void;
+  /**
+   * Fade driver, 0 (hidden) → 1 (fully shown). The backdrop applies it to its
+   * OWN layers — see the note on `style` for why the caller must not animate
+   * opacity from the outside.
+   */
+  progress?: SharedValue<number>;
   /** `true` keeps the dim but makes it inert — a blocking dialog, a busy state. */
   disabled?: boolean;
   /** Blur radius behind the dim. `0` renders the dim alone. */
@@ -95,8 +111,19 @@ export interface BackdropProps {
   dimColor?: string;
   /** Dim opacity, 0–1. */
   dimOpacity?: number;
-  /** Extra style on the press target — animated opacity, insets, z-index. */
+  /**
+   * Geometry for the press target: insets, z-index, layout. NOT opacity —
+   * `backdrop-filter` samples nothing under an ancestor with `opacity < 1`
+   * (the group composites in isolation), so a fade applied here silently kills
+   * the blur. An `opacity` found in this style is redirected onto the layers;
+   * animate the fade through `progress` instead.
+   */
   style?: StyleProp<ViewStyle>;
+  /**
+   * Extra style for the blur + dim LAYERS, for fades a shared value can't
+   * express — the web dialog's CSS keyframes, for instance.
+   */
+  layerStyle?: StyleProp<ViewStyle>;
   /** Rendered ON TOP of the dim, inside the press target (Dialog's panel does this). */
   children?: ReactNode;
   accessibilityLabel?: string;
@@ -108,31 +135,40 @@ export interface BackdropProps {
  * pointer events (that is its whole job), so anything that must stay pressable
  * goes INSIDE it as `children`, never as a sibling rendered over it.
  */
-export const Backdrop = memo(forwardRef<View, BackdropProps>(function Backdrop(
-  {
-    onPress,
-    disabled = false,
-    blurIntensity = BACKDROP_BLUR_INTENSITY,
-    blurTint = 'dark',
-    dimColor = '#000',
-    dimOpacity = BACKDROP_DIM_OPACITY,
-    style,
-    children,
-    accessibilityLabel = 'Dismiss',
-    testID,
-  },
-  ref,
-) {
+export const Backdrop = memo(function Backdrop({
+  onPress,
+  progress,
+  disabled = false,
+  blurIntensity = BACKDROP_BLUR_INTENSITY,
+  blurTint = 'dark',
+  dimColor = '#000',
+  dimOpacity = BACKDROP_DIM_OPACITY,
+  style,
+  layerStyle,
+  children,
+  accessibilityLabel = 'Dismiss',
+  testID,
+}: BackdropProps) {
   const inert = disabled || !onPress;
+
+  // An `opacity` handed in through `style` would sit on the ancestor of the
+  // blur and kill it; hoist it onto the layers instead of honouring it there.
+  const flat: ViewStyle = StyleSheet.flatten(style) ?? {};
+  const { opacity: styleOpacity, ...rootStyle } = flat;
+  const staticOpacity = typeof styleOpacity === 'number' ? styleOpacity : 1;
+
+  // The fade lives on each LAYER, never on their shared ancestor.
+  const blurFade = useAnimatedStyle(
+    () => ({ opacity: (progress ? progress.value : 1) * staticOpacity }),
+    [progress, staticOpacity],
+  );
+  const dimFade = useAnimatedStyle(
+    () => ({ opacity: (progress ? progress.value : 1) * staticOpacity * dimOpacity }),
+    [progress, staticOpacity, dimOpacity],
+  );
+
   return (
     <Pressable
-      // MUST forward the ref: surfaces animate the backdrop through
-      // `Animated.createAnimatedComponent(Backdrop)`, and reanimated applies
-      // those updates by reaching the underlying host view. With the ref
-      // swallowed the animated style never lands, so a backdrop whose opacity
-      // is animated from 0 stays at 0 — fully transparent, with the surface
-      // floating over an undimmed app.
-      ref={ref}
       pointerEvents="auto"
       onPress={inert ? undefined : onPress}
       disabled={inert}
@@ -143,27 +179,27 @@ export const Backdrop = memo(forwardRef<View, BackdropProps>(function Backdrop(
       accessibilityRole={inert ? undefined : 'button'}
       accessibilityLabel={inert ? undefined : accessibilityLabel}
       testID={testID}
-      style={[StyleSheet.absoluteFill, style]}
+      style={[StyleSheet.absoluteFill, rootStyle]}
     >
       {blurIntensity > 0 ? (
-        <BlurView
+        <AnimatedBlurView
           intensity={blurIntensity}
           tint={blurTint}
           // Android's default blur is a no-op on many devices; this is the
           // implementation that actually renders there.
           experimentalBlurMethod="dimezisBlurView"
           pointerEvents="none"
-          style={StyleSheet.absoluteFill}
+          style={[StyleSheet.absoluteFill, layerStyle, blurFade]}
         />
       ) : null}
-      <View
+      <Animated.View
         pointerEvents="none"
-        style={[StyleSheet.absoluteFill, { backgroundColor: dimColor, opacity: dimOpacity }]}
+        style={[StyleSheet.absoluteFill, { backgroundColor: dimColor }, layerStyle, dimFade]}
       />
       {children}
     </Pressable>
   );
-}));
+});
 
 Backdrop.displayName = 'Backdrop';
 

package/src/zoomable-image-gallery/ZoomableImageGallery.tsx

@@ -74,8 +74,6 @@ import type {
 } from './types';
 
 const AnimatedImage = Animated.createAnimatedComponent(Image);
-// The shared overlay backdrop, driven by the viewer's open/drag progress.
-const AnimatedBackdrop = Animated.createAnimatedComponent(Backdrop);
 
 // Web-only interaction hints (no-ops on native): the zoom surfaces are
 // tap-to-dismiss (`cursor: pointer`) and must not select text or drag the
@@ -791,11 +789,14 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
             did nothing on web while Escape still closed. `Backdrop` opts back
             in via the `pointerEvents` PROP, the only form that reaches the DOM
             (see `src/overlay`). */}
-        <AnimatedBackdrop
+        {/* `progress` rather than an animated style: an opacity on the
+            backdrop's root would sit ABOVE the blur layer and neutralise it —
+            `backdrop-filter` samples nothing under an ancestor that composites
+            in isolation. */}
+        <Backdrop
           onPress={handleDismiss}
           accessibilityLabel="Close image viewer"
-          dimColor={theme.colors.overlay}
-          style={backdropStyle}
+          progress={opacity}
         />
 
       <GestureDetector gesture={panGesture}>