@oxyhq/bloom 0.60.0 → 0.62.0

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

@@ -40,6 +40,7 @@ import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import {
   getAspectRatio,
+  getIntrinsicSize,
   fetchAspectRatio,
   DEFAULT_ASPECT_RATIO,
 } from '../image-aspect-ratio-cache';
@@ -73,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
@@ -216,9 +215,12 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
     [SCREEN_WIDTH, SCREEN_HEIGHT]
   );
 
-  // Compute the largest width/height for `ratio` that fits inside `fitBox`
-  // without cropping (contain).
-  const fitForRatio = useCallback((ratio: number): FittedSize => {
+  // Largest width/height for `ratio` that fits inside `fitBox` without cropping
+  // (contain), never exceeding the image's own resolution: filling the viewport
+  // with a 512px avatar or a small thumbnail just renders it soft. `uri` is what
+  // lets us look the intrinsic size up; without it (not measured yet) the fit
+  // box wins and the clamp applies on the next frame.
+  const fitForRatio = useCallback((ratio: number, uri?: string): FittedSize => {
     const safeRatio = ratio > 0 && Number.isFinite(ratio) ? ratio : DEFAULT_ASPECT_RATIO;
     let width = fitBox.width;
     let height = width / safeRatio;
@@ -226,6 +228,11 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
       height = fitBox.height;
       width = height * safeRatio;
     }
+    const intrinsic = uri ? getIntrinsicSize(uri) : undefined;
+    if (intrinsic && intrinsic.width > 0 && width > intrinsic.width) {
+      width = intrinsic.width;
+      height = width / safeRatio;
+    }
     return { width, height };
   }, [fitBox]);
 
@@ -234,7 +241,11 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
   // after swiping it tracks the viewed image so the collapse-on-dismiss renders
   // and flies back the image actually on screen.
   const activeRatio = pageRatios[activeIndex] ?? openRatio;
-  const activeFit = useMemo(() => fitForRatio(activeRatio), [fitForRatio, activeRatio]);
+  const activeUri = images[activeIndex]?.uri;
+  const activeFit = useMemo(
+    () => fitForRatio(activeRatio, activeUri),
+    [fitForRatio, activeRatio, activeUri],
+  );
 
   // Alt text (accessibility description) of the image currently on screen, shown
   // as a caption at the bottom of the viewer (Bluesky-style lightbox footer).
@@ -391,7 +402,7 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
       // animation grows it from the thumbnail's footprint (scale < 1) up to 1,
       // mirroring the avatar's small→big scale. The initial scale is the ratio
       // of the thumbnail width to the fitted width.
-      const fitted = fitForRatio(ratio);
+      const fitted = fitForRatio(ratio, target.uri);
       const centerX = SCREEN_WIDTH / 2;
       const centerY = SCREEN_HEIGHT / 2;
       if (rect && rect.width > 0) {
@@ -778,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}>
@@ -829,7 +844,7 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
               >
                 {images.map((img, idx) => {
                   const ratio = pageRatios[idx] ?? getAspectRatio(img.uri) ?? DEFAULT_ASPECT_RATIO;
-                  const fit = fitForRatio(ratio);
+                  const fit = fitForRatio(ratio, img.uri);
                   // Only the active page is zoomable + gesture-wrapped (double-tap
                   // / single-tap dismiss / pinch / pan). Off-screen pages stay a
                   // plain image; the active image handles its own tap-to-dismiss