@oxyhq/bloom 0.61.0 → 0.62.0

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -20,6 +20,7 @@ import Animated, {
     type SharedValue,
     useAnimatedScrollHandler,
     useAnimatedStyle,
+    useDerivedValue,
     useSharedValue,
     withSpring,
     withTiming,
@@ -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,
@@ -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,11 +654,17 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                 'clamp',
             )
             : 1;
-        return {
-            opacity: opacity.value * backdropOpacity * dragFactor,
-        };
+        return opacity.value * backdropOpacity * dragFactor;
     }, [backdropOpacity, 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]);
         return {
@@ -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,16 @@ 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}
+                        // `backdropProgress` already folds in `backdropOpacity`
+                        // and the drag factor, so the dim rides at full weight.
+                        // 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={1}
-                        style={[styles.backdrop, backdropStyle]}
+                        progress={backdropProgress}
+                        style={styles.backdrop}
                     />
                 )}
 

package/src/dialog/Dialog.web.tsx

@@ -332,16 +332,17 @@ function CenterOrSideDialog({
               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 +703,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.
+        dimOpacity={SHEET_BACKDROP_OPACITY}
+        layerStyle={backdropTransition}
+        style={[sheetStyles.backdrop, { opacity: visible ? 1 : 0 }]}
       />
 
       <View

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,9 +49,12 @@ 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.
@@ -85,6 +88,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 +104,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 +128,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 +172,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,15 @@ 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}>