@oxyhq/bloom 0.59.0 → 0.59.2

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -25,7 +25,8 @@ import Animated, {
     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 { useTheme } from '../theme/use-theme';
 
 /** Hook that returns current screen dimensions and updates on rotation/resize. */
@@ -215,7 +216,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,
@@ -226,6 +227,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();
@@ -637,11 +639,11 @@ 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).
+    // `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.
     const backdropStyle = useAnimatedStyle(() => {
         const dragFactor = dynamicBackdrop
             ? interpolate(
@@ -652,9 +654,9 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
             )
             : 1;
         return {
-            opacity: opacity.value * backdropOpacity * dragFactor,
+            opacity: opacity.value * dragFactor,
         };
-    }, [backdropOpacity, dynamicBackdrop, opacity, translateY, screenHeightSV]);
+    }, [dynamicBackdrop, opacity, translateY, screenHeightSV]);
 
     const sheetStyle = useAnimatedStyle(() => {
         const scale = interpolate(translateY.value, [0, screenHeightSV.value], [1, 0.95]);
@@ -792,12 +794,12 @@ 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}
                         style={[styles.backdrop, backdropStyle]}
                     />
                 )}
@@ -827,10 +829,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 +845,7 @@ const styles = StyleSheet.create({
     sheetDetached: {
         left: 16,
         right: 16,
-        borderRadius: 24,
+        borderRadius: 28,
     },
     sheetNormal: {
         left: 0,

package/src/dialog/Dialog.tsx

@@ -251,7 +251,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: 28,
       },
       // 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 +344,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/DialogContent.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import {
+  ActivityIndicator,
   Text,
   TouchableOpacity,
   View,
@@ -91,11 +92,13 @@ function ActionButton({ action }: { action: DialogAction }) {
   const theme = useTheme();
   const color: DialogActionColor = action.color ?? 'default';
   const shouldCloseOnPress = action.shouldCloseOnPress ?? true;
+  const inactive = action.disabled === true || action.loading === true;
 
   const { background, foreground } = getActionPalette(color, theme.colors);
 
   const handlePress = useCallback(
     (e: GestureResponderEvent) => {
+      if (inactive) return;
       const onPress = action.onPress;
       if (color === 'cancel') {
         // Cancel always dismisses; consumer's onPress (rare) runs after.
@@ -108,7 +111,7 @@ function ActionButton({ action }: { action: DialogAction }) {
         onPress?.(e);
       }
     },
-    [action.onPress, close, color, shouldCloseOnPress],
+    [action.onPress, close, color, inactive, shouldCloseOnPress],
   );
 
   return (
@@ -118,18 +121,25 @@ function ActionButton({ action }: { action: DialogAction }) {
         alignItems: 'center',
         justifyContent: 'center',
         backgroundColor: background,
-        opacity: action.disabled ? 0.5 : 1,
+        opacity: inactive ? 0.5 : 1,
         paddingVertical: 12,
         paddingHorizontal: 24,
       }}
       onPress={handlePress}
-      disabled={action.disabled}
+      disabled={inactive}
+      accessibilityState={{ disabled: inactive, busy: action.loading === true }}
+      aria-disabled={inactive}
+      aria-busy={action.loading || undefined}
       activeOpacity={0.7}
       testID={action.testID}
     >
-      <Text style={{ fontSize: 16, fontWeight: '500', color: foreground }}>
-        {action.label}
-      </Text>
+      {action.loading ? (
+        <ActivityIndicator color={foreground} size="small" />
+      ) : (
+        <Text style={{ fontSize: 16, fontWeight: '500', color: foreground }}>
+          {action.label}
+        </Text>
+      )}
     </TouchableOpacity>
   );
 }

package/src/dialog/SheetShell.tsx

@@ -87,7 +87,7 @@ export function SheetShell({
     () => ({
       maxWidth: 500,
       backgroundColor: theme.colors.background,
-      borderRadius: 20,
+      borderRadius: 28,
     }),
     [theme.colors.background],
   );
@@ -98,7 +98,6 @@ export function SheetShell({
       onDismiss={handleDismiss}
       enablePanDownToClose
       detached
-      backdropOpacity={0.7}
       style={sheetStyle}
     >
       <Context.Provider value={context}>

package/src/dialog/types.ts

@@ -185,6 +185,11 @@ export type DialogAction = {
   onPress?: (e: GestureResponderEvent) => void;
   color?: DialogActionColor;
   disabled?: boolean;
+  /**
+   * Replaces the label with a progress indicator and disables interaction while
+   * an async action is in flight.
+   */
+  loading?: boolean;
   /**
    * Defaults to `true`. When `true`, the dialog closes (and runs the close
    * animation) before `onPress` is invoked, which gives the surrounding

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,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 { forwardRef, memo, type ReactNode, type RefObject } from 'react';
 import { BlurView } from 'expo-blur';
 import {
   Platform,
@@ -47,6 +47,7 @@ import {
   StyleSheet,
   View,
   type StyleProp,
+  type View as NativeView,
   type ViewStyle,
 } from 'react-native';
 
@@ -95,6 +96,8 @@ 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>;
   /** 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 +119,7 @@ export const Backdrop = memo(forwardRef<View, BackdropProps>(function Backdrop(
     blurTint = 'dark',
     dimColor = '#000',
     dimOpacity = BACKDROP_DIM_OPACITY,
+    blurTarget,
     style,
     children,
     accessibilityLabel = 'Dismiss',
@@ -149,9 +153,10 @@ export const Backdrop = memo(forwardRef<View, BackdropProps>(function Backdrop(
         <BlurView
           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"
+          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>
   );
 }