@oxyhq/bloom 0.59.2 → 0.59.3

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -20,6 +20,7 @@ import Animated, {
     type SharedValue,
     useAnimatedScrollHandler,
     useAnimatedStyle,
+    useDerivedValue,
     useSharedValue,
     withSpring,
     withTiming,
@@ -27,6 +28,7 @@ import Animated, {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 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. */
@@ -126,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;
     /**
@@ -219,7 +220,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         backdropOpacity = BACKDROP_DIM_OPACITY,
         scrollable = true,
         manualActivation = false,
-        dynamicBackdrop = false,
+        dynamicBackdrop = true,
         handleComponent,
         scrollY: externalScrollY,
         headerOverlay,
@@ -257,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);
@@ -644,19 +649,25 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     // 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.
-    const backdropStyle = useAnimatedStyle(() => {
+    // 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 * dragFactor,
-        };
-    }, [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]);
@@ -692,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;
@@ -800,13 +817,14 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                         onPress={handleBackdropPress}
                         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 })}
@@ -845,7 +863,7 @@ const styles = StyleSheet.create({
     sheetDetached: {
         left: 16,
         right: 16,
-        borderRadius: 28,
+        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: 28,
+        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.

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: 28,
+      borderRadius: DETACHED_SHEET_RADIUS,
     }),
     [theme.colors.background],
   );

package/src/overlay/index.tsx

@@ -41,6 +41,7 @@
  */
 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,
@@ -61,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>;
@@ -98,6 +101,8 @@ export interface BackdropProps {
   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). */
@@ -120,6 +125,7 @@ export const Backdrop = memo(forwardRef<View, BackdropProps>(function Backdrop(
     dimColor = '#000',
     dimOpacity = BACKDROP_DIM_OPACITY,
     blurTarget,
+    blurProgress,
     style,
     children,
     accessibilityLabel = 'Dismiss',
@@ -128,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
@@ -150,8 +160,9 @@ export const Backdrop = memo(forwardRef<View, BackdropProps>(function Backdrop(
       style={[StyleSheet.absoluteFill, style]}
     >
       {blurIntensity > 0 ? (
-        <BlurView
+        <AnimatedBlurView
           intensity={blurIntensity}
+          animatedProps={animatedBlurProps}
           tint={blurTint}
           blurTarget={blurTarget}
           // Expo disables Android blur without an explicit target. Sheets get

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;