@oxyhq/bloom 0.59.1 → 0.59.3

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -20,12 +20,15 @@ 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 { useBloomBlurTarget } from '../overlay/blur-target';
+import { DETACHED_SHEET_RADIUS } from '../styles/radii';
 import { useTheme } from '../theme/use-theme';
 
 /** Hook that returns current screen dimensions and updates on rotation/resize. */
@@ -125,12 +128,11 @@ export interface BottomSheetProps {
      */
     manualActivation?: boolean;
     /**
-     * When `true`, the backdrop dims proportionally with drag distance — the
-     * overlay fades from full opacity (sheet at rest) to 30% as the sheet is
-     * pulled down 40% of the screen height. iOS Photos style. The base
-     * `backdropOpacity` still controls the resting dim level.
+     * When `true`, the backdrop and native blur fade proportionally with drag
+     * distance — fully visible at rest and fully gone once the sheet leaves the
+     * viewport. The base `backdropOpacity` still controls the resting dim level.
      *
-     * Defaults to `false` (constant opacity during drag).
+     * Defaults to `true`. Set to `false` only for a deliberately fixed backdrop.
      */
     dynamicBackdrop?: boolean;
     /**
@@ -215,10 +217,10 @@ 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,
+        dynamicBackdrop = true,
         handleComponent,
         scrollY: externalScrollY,
         headerOverlay,
@@ -226,6 +228,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     } = props;
 
     const insets = useSafeAreaInsets();
+    const blurTarget = useBloomBlurTarget();
     const theme = useTheme();
     const { colors } = theme;
     const { height: screenHeight } = useScreenDimensions();
@@ -255,6 +258,10 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     }, [screenHeight, screenHeightSV]);
 
     const translateY = useSharedValue(screenHeight);
+    // The blur must reach zero when the CARD itself has moved fully below the
+    // viewport. A short detached dialog can be far smaller than the screen, so
+    // screen height is not a valid denominator for this interaction.
+    const sheetHeight = useSharedValue(screenHeight);
     const opacity = useSharedValue(0);
     const scrollOffsetY = useSharedValue(0);
     const isScrollAtTop = useSharedValue(true);
@@ -637,24 +644,30 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     // Native (with the plugin) auto-tracks and ignores the extra deps, so this
     // is safe on both platforms. Do NOT strip the shared values from these deps.
     //
-    // `opacity.value` drives the fade in/out (0 -> 1). `backdropOpacity` is the
-    // final dim level once fully visible. We multiply so the consumer-provided
-    // 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(() => {
+    // `opacity.value` drives the whole blur+dim layer in/out (0 -> 1).
+    // `backdropOpacity` belongs ONLY to Backdrop's black dim layer below; if it
+    // is multiplied into this group opacity instead, the opaque black child
+    // hides the BlurView and Android looks like a plain dark scrim.
+    // `dynamicBackdrop` fades the composed blur+dim proportionally with drag.
+    // The SAME progress drives BlurView's native `intensity` prop below:
+    // Android's RenderEffect can remain visibly blurred when only an ancestor's
+    // alpha changes, so reducing the radius itself is required for the content
+    // behind the sheet to become genuinely sharp during the gesture.
+    const backdropProgress = useDerivedValue(() => {
         const dragFactor = dynamicBackdrop
             ? interpolate(
                 translateY.value,
-                [0, screenHeightSV.value * 0.4],
-                [1, 0.3],
+                [0, sheetHeight.value],
+                [1, 0],
                 'clamp',
             )
             : 1;
-        return {
-            opacity: opacity.value * backdropOpacity * dragFactor,
-        };
-    }, [backdropOpacity, dynamicBackdrop, opacity, translateY, screenHeightSV]);
+        return opacity.value * dragFactor;
+    }, [dynamicBackdrop, opacity, translateY, sheetHeight]);
+
+    const backdropStyle = useAnimatedStyle(() => ({
+        opacity: backdropProgress.value,
+    }), [backdropProgress]);
 
     const sheetStyle = useAnimatedStyle(() => {
         const scale = interpolate(translateY.value, [0, screenHeightSV.value], [1, 0.95]);
@@ -690,6 +703,12 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         dismiss();
     }, [onDismissAttempt, dismiss]);
 
+    const handleSheetLayout = useCallback((event: LayoutChangeEvent) => {
+        const measuredHeight = event.nativeEvent.layout.height;
+        if (measuredHeight > 0) sheetHeight.value = measuredHeight;
+        onLayout?.(event);
+    }, [onLayout, sheetHeight]);
+
     const scrollHandler = useAnimatedScrollHandler({
         onScroll: (event) => {
             scrollOffsetY.value = event.contentOffset.y;
@@ -792,19 +811,20 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                     </Animated.View>
                 ) : (
                     // The ONE Bloom backdrop (blur + dim + press-to-dismiss).
-                    // `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.
+                    // `backdropStyle` drives the entrance/drag fade; the black
+                    // dim stays translucent so the BlurView remains visible.
                     <AnimatedBackdrop
                         onPress={handleBackdropPress}
-                        dimOpacity={1}
+                        dimOpacity={backdropOpacity}
+                        blurTarget={blurTarget ?? undefined}
+                        blurProgress={backdropProgress}
                         style={[styles.backdrop, backdropStyle]}
                     />
                 )}
 
                 <GestureDetector gesture={panGesture}>
                     <Animated.View
-                        onLayout={onLayout}
+                        onLayout={handleSheetLayout}
                         style={[dynamicStyles.sheet, sheetMarginStyle, sheetStyle, sheetHeightStyle, style]}
                     >
                         {backgroundComponent?.({ style: styles.background })}
@@ -827,10 +847,7 @@ BottomSheetBase.displayName = 'BottomSheetBase';
 
 const styles = StyleSheet.create({
     backdrop: {
-        // Color is solid black; the dim level is driven by `backdropOpacity` via
-        // the animated `opacity` style on the wrapping <Animated.View>.
         flex: 1,
-        backgroundColor: '#000',
     },
     backdropTouchable: {
         flex: 1,
@@ -846,7 +863,7 @@ const styles = StyleSheet.create({
     sheetDetached: {
         left: 16,
         right: 16,
-        borderRadius: 24,
+        borderRadius: DETACHED_SHEET_RADIUS,
     },
     sheetNormal: {
         left: 0,

package/src/dialog/Dialog.tsx

@@ -26,6 +26,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { DETACHED_SHEET_RADIUS } from '../styles/radii';
 import { Z_INDEX, Z_INDEX_LAYER_STEP } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 import { Context, useDialogControl } from './context';
@@ -251,7 +252,7 @@ function CenteredOrSideDialog({
         // All four corners rounded — bloom's BottomSheet defaults to top-only
         // radius in flush mode, but we use `detached` so the whole card is
         // floating and rounded uniformly.
-        borderRadius: 20,
+        borderRadius: DETACHED_SHEET_RADIUS,
       },
       // Drives the card's `height` only while a morph is in flight; at rest it
       // resolves to `height: 'auto'` — the card's normal content sizing.
@@ -344,9 +345,6 @@ function CenteredOrSideDialog({
           />
         ) : undefined
       }
-      // Stronger dim when a Dialog is stacked over another sheet so the
-      // underlying sheet's handle/content doesn't bleed through.
-      backdropOpacity={0.7}
       // Measures the floating card — the size a morph starts from.
       onLayout={morphState.onPanelLayout}
       style={sheetStyle}

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';
 
@@ -284,9 +283,6 @@ export function DialogBottomSheet({
           />
         ) : undefined
       }
-      // 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/SheetShell.tsx

@@ -14,6 +14,7 @@ import React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react'
 import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { DETACHED_SHEET_RADIUS } from '../styles/radii';
 import { Z_INDEX } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 import { Context } from './context';
@@ -87,7 +88,7 @@ export function SheetShell({
     () => ({
       maxWidth: 500,
       backgroundColor: theme.colors.background,
-      borderRadius: 20,
+      borderRadius: DETACHED_SHEET_RADIUS,
     }),
     [theme.colors.background],
   );
@@ -98,7 +99,6 @@ export function SheetShell({
       onDismiss={handleDismiss}
       enablePanDownToClose
       detached
-      backdropOpacity={0.7}
       style={sheetStyle}
     >
       <Context.Provider value={context}>

package/src/overlay/blur-target.tsx

@@ -0,0 +1,45 @@
+import { createContext, useContext, useRef, type ReactNode, type RefObject } from 'react';
+import { BlurTargetView } from 'expo-blur';
+import { Platform, StyleSheet, type View } from 'react-native';
+
+type BlurTargetRef = RefObject<View | null>;
+
+const BlurTargetContext = createContext<BlurTargetRef | null>(null);
+
+/**
+ * Gives Android overlay blurs a real view to sample.
+ *
+ * Expo Blur 56+ intentionally disables the Dimezis implementation unless a
+ * `BlurTargetView` is supplied. Bloom's sheets render their backdrop inside a
+ * native `Modal`, so the target must live around the app content in the
+ * underlying window and travel to the modal through React context.
+ *
+ * Only modal backdrops consume this target. Ordinary in-tree BlurViews never
+ * target their own ancestor, avoiding the recursive capture/crash that causes.
+ */
+export function BloomBlurTargetProvider({ children }: { children: ReactNode }) {
+  const targetRef = useRef<View>(null);
+
+  if (Platform.OS !== 'android') {
+    return <>{children}</>;
+  }
+
+  return (
+    <BlurTargetContext.Provider value={targetRef}>
+      <BlurTargetView ref={targetRef} style={styles.target}>
+        {children}
+      </BlurTargetView>
+    </BlurTargetContext.Provider>
+  );
+}
+
+/** Internal target used only by Bloom's native modal backdrops. */
+export function useBloomBlurTarget(): BlurTargetRef | null {
+  return useContext(BlurTargetContext);
+}
+
+const styles = StyleSheet.create({
+  target: {
+    flex: 1,
+  },
+});

package/src/overlay/index.tsx

@@ -39,14 +39,16 @@
  * 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 { forwardRef, memo, type ReactNode, type RefObject } from 'react';
 import { BlurView } from 'expo-blur';
+import Animated, { type SharedValue, useAnimatedProps } from 'react-native-reanimated';
 import {
   Platform,
   Pressable,
   StyleSheet,
   View,
   type StyleProp,
+  type View as NativeView,
   type ViewStyle,
 } from 'react-native';
 
@@ -60,6 +62,8 @@ export const BACKDROP_BLUR_INTENSITY = 40;
 /** Dim laid over the blur — the blur alone does not give enough contrast. */
 export const BACKDROP_DIM_OPACITY = 0.45;
 
+const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
+
 export interface OverlayRootProps {
   children?: ReactNode;
   style?: StyleProp<ViewStyle>;
@@ -95,6 +99,10 @@ export interface BackdropProps {
   dimColor?: string;
   /** Dim opacity, 0–1. */
   dimOpacity?: number;
+  /** Android view sampled by the native blur. Modal surfaces receive this from BloomProvider. */
+  blurTarget?: RefObject<NativeView | null>;
+  /** Live visibility progress used to reduce native blur while a surface leaves. */
+  blurProgress?: SharedValue<number>;
   /** Extra style on the press target — animated opacity, insets, z-index. */
   style?: StyleProp<ViewStyle>;
   /** Rendered ON TOP of the dim, inside the press target (Dialog's panel does this). */
@@ -116,6 +124,8 @@ export const Backdrop = memo(forwardRef<View, BackdropProps>(function Backdrop(
     blurTint = 'dark',
     dimColor = '#000',
     dimOpacity = BACKDROP_DIM_OPACITY,
+    blurTarget,
+    blurProgress,
     style,
     children,
     accessibilityLabel = 'Dismiss',
@@ -124,6 +134,10 @@ export const Backdrop = memo(forwardRef<View, BackdropProps>(function Backdrop(
   ref,
 ) {
   const inert = disabled || !onPress;
+  const animatedBlurProps = useAnimatedProps(() => ({
+    intensity: Math.max(0, Math.min(100, blurIntensity * (blurProgress?.value ?? 1))),
+  }), [blurIntensity, blurProgress]);
+
   return (
     <Pressable
       // MUST forward the ref: surfaces animate the backdrop through
@@ -146,12 +160,14 @@ export const Backdrop = memo(forwardRef<View, BackdropProps>(function Backdrop(
       style={[StyleSheet.absoluteFill, style]}
     >
       {blurIntensity > 0 ? (
-        <BlurView
+        <AnimatedBlurView
           intensity={blurIntensity}
+          animatedProps={animatedBlurProps}
           tint={blurTint}
-          // Android's default blur is a no-op on many devices; this is the
-          // implementation that actually renders there.
-          experimentalBlurMethod="dimezisBlurView"
+          blurTarget={blurTarget}
+          // Expo disables Android blur without an explicit target. Sheets get
+          // one from BloomProvider; targetless surfaces degrade without warning.
+          blurMethod={Platform.OS === 'android' && blurTarget ? 'dimezisBlurViewSdk31Plus' : undefined}
           pointerEvents="none"
           style={StyleSheet.absoluteFill}
         />

package/src/provider/index.tsx

@@ -34,6 +34,7 @@ import type { ReactNode } from 'react';
 
 import { ImageResolverProvider, type ImageResolver } from '../image-resolver';
 import { BloomHapticsProvider } from '../hooks/useHaptics';
+import { BloomBlurTargetProvider } from '../overlay/blur-target';
 import { TabBarMinimizeProvider } from '../tab-bar/minimize-context';
 import { BloomThemeProvider, type BloomThemeProviderProps } from '../theme';
 import { ScrollRestorationProvider } from './scroll-provider';
@@ -57,17 +58,19 @@ export function BloomProvider({
   ...themeProps
 }: BloomProviderProps) {
   return (
-    // `value` is passed unconditionally (null when unset) so toggling a resolver
-    // never changes the tree shape and remounts everything below it.
-    <ImageResolverProvider value={imageResolver ?? null}>
-      <BloomThemeProvider {...themeProps}>
-        <ScrollRestorationProvider>
-          <BloomHapticsProvider enabled={haptics}>
-            <TabBarMinimizeProvider>{children}</TabBarMinimizeProvider>
-          </BloomHapticsProvider>
-        </ScrollRestorationProvider>
-      </BloomThemeProvider>
-    </ImageResolverProvider>
+    <BloomBlurTargetProvider>
+      {/* `value` is passed unconditionally (null when unset) so toggling a resolver
+          never changes the tree shape and remounts everything below it. */}
+      <ImageResolverProvider value={imageResolver ?? null}>
+        <BloomThemeProvider {...themeProps}>
+          <ScrollRestorationProvider>
+            <BloomHapticsProvider enabled={haptics}>
+              <TabBarMinimizeProvider>{children}</TabBarMinimizeProvider>
+            </BloomHapticsProvider>
+          </ScrollRestorationProvider>
+        </BloomThemeProvider>
+      </ImageResolverProvider>
+    </BloomBlurTargetProvider>
   );
 }
 

package/src/styles/radii.ts

@@ -0,0 +1,2 @@
+/** Radius for floating bottom sheets and native detached dialog cards. */
+export const DETACHED_SHEET_RADIUS = 32;