@rific/auto-paper 0.12.1 → 0.12.3

package/README.md

@@ -265,7 +265,7 @@ export default function App() {
 | `onChange` | `(settings: ThemeSettings) => void` | Called whenever settings change via `useThemeSettings().set()` |
 | `children` | `ReactNode` | |
 | `defaults` | `PaperDefaults` | Prop defaults for wrapper components (see below) |
-| `expoBlur` | `ExpoBlurModule` | Injects `expo-blur` (`import * as ExpoBlur from 'expo-blur'`) so `<BlurView>` renders the real frosted-glass effect. Omit to always render its solid fallback. |
+| `expoBlur` | `ExpoBlurModule` | Injects `expo-blur` (`import * as ExpoBlur from 'expo-blur'`) so `<BlurView>` renders the real frosted-glass effect. Omit to always render its solid fallback. On Android, expo-blur only blurs when given a `blurTarget` and a `blurMethod` (`'dimezisBlurView'`, or `'dimezisBlurViewSdk31Plus'` on API 31+); without both, `<BlurView>` renders the solid fallback there too, rather than expo-blur's unblurred translucent tint. |
 | `fontFamily` | `string` | Applied to every Paper typography variant (`bodyLarge`, `headlineMedium`, `labelSmall`, ...) via `configureFonts`'s flat-config mode — each variant keeps its own MD3 fontSize/lineHeight/weight, only fontFamily changes. Omit to keep each platform's system font. |
 | `navigationBar` | `ExpoNavigationBarModule` | Injects `expo-navigation-bar` (`import * as ExpoNavigationBar from 'expo-navigation-bar'`) so the Android nav bar icon style auto-syncs with the theme while a `BottomNavigation` is mounted. Omit (and don't pass `onNavBarChange`) to skip nav bar syncing entirely. |
 | `onNavBarChange` | `(color: string, dark: boolean) => void` | Overrides the built-in nav bar sync: called on Android when the theme changes while a `BottomNavigation` is mounted, instead of the automatic `navigationBar`-driven icon-style sync |
@@ -274,6 +274,8 @@ export default function App() {
 | `statusBarProps` | `StatusBarProps` | Spread over the auto-derived `StatusBar` defaults |
 | `style` | `StyleProp<ViewStyle>` | Applied to the wrapper `View` |
 
+`Provider` also renders its own `Portal.Host`, nested inside everything it injects, so anything rendered through `react-native-paper`'s `Portal` (this package's `Dialog`, Paper's `Menu` and `Tooltip`, or a `Modal`/`Snackbar`/anything else you wrap in `<Portal>` yourself) still sees `expoBlur`, `reanimated` and `defaults`. Paper's own host sits above all of those and its `Portal` only carries the theme across, so without this a portaled `Dialog` or `Menu` would silently render its solid fallback. Contexts your app provides *inside* `Provider` (a toast provider, say) are a separate matter: portal content can't see them unless you render another `<Portal.Host>` below them.
+
 `ThemeSettings` fields:
 
 | Field | Type | Default |

package/dist/index.js

@@ -706,7 +706,7 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigatio
   if (!theme) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native_paper4.Provider, { theme, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.Portal.Host, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) })
   ] });
 }
 var styles = import_react_native3.StyleSheet.create({
@@ -718,6 +718,11 @@ var import_react6 = require("react");
 var import_react_native4 = require("react-native");
 var import_react_native_paper5 = require("react-native-paper");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var blursOnAndroid = ({ blurMethod, blurTarget, experimentalBlurMethod }) => {
+  const method = blurMethod ?? experimentalBlurMethod ?? "none";
+  if (!blurTarget || method === "none") return false;
+  return method === "dimezisBlurView" || Number(import_react_native4.Platform.Version) >= 31;
+};
 var ELEVATION_OPACITY = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 };
 var VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 };
 var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = "surface", ...props }) => {
@@ -729,7 +734,7 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
   const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== void 0 ? colors.primary : void 0);
   const resolvedTintOpacity = tintOpacity ?? (tintColor ? dark ? 0.24 : 0.16 : variantColor ? dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light : elevation !== void 0 ? ELEVATION_OPACITY[elevation] : 0);
   const tint = resolvedTintColor && resolvedTintOpacity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
-  if (blur && expoBlur)
+  if (blur && expoBlur && (import_react_native4.Platform.OS !== "android" || blursOnAndroid(props)))
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(expoBlur.BlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
       tint,
@@ -745,6 +750,8 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
+var AnimatedBlurView = import_react_native5.Animated.createAnimatedComponent(BlurView);
+var AnimatedPressable = import_react_native5.Animated.createAnimatedComponent(import_react_native5.Pressable);
 function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
   const reanimated = useReanimatedModule();
@@ -788,9 +795,16 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
     return child;
   });
   const borderRadius = (isV3 ? 7 : 1) * roundness;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [import_react_native5.StyleSheet.absoluteFill, { opacity }], testID, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [import_react_native5.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
+  const web = import_react_native5.Platform.OS === "web";
+  const fade = { opacity };
+  const styleOpacity = import_react_native5.StyleSheet.flatten(style)?.opacity;
+  const cardFade = typeof styleOpacity === "number" ? { opacity: import_react_native5.Animated.multiply(opacity, styleOpacity) } : fade;
+  const Backdrop = web ? AnimatedPressable : import_react_native5.Pressable;
+  const Card = web ? AnimatedBlurView : BlurView;
+  const card = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Card, { blur, style: [styles2.card, { borderRadius }, style, web && cardFade], testID: `${testID}-surface`, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [import_react_native5.StyleSheet.absoluteFill, !web && fade], testID, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Backdrop, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [import_react_native5.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }, web && fade], testID: `${testID}-backdrop` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: card }) : card })
   ] }) });
 }
 DialogComponent.Title = import_react_native_paper6.Dialog.Title;
@@ -1031,25 +1045,45 @@ function IconButton({ variant, iconColor, containerColor, ...props }) {
 }
 
 // src/components/Menu.tsx
+var import_react11 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_paper15 = require("react-native-paper");
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var ANIMATION_DURATION2 = 250;
+var EASING = import_react_native9.Easing.bezier(0.4, 0, 0.2, 1);
+var DEFAULT_ELEVATION = 2;
+var SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8];
+var SHADOW_RADIUS = [0, 3, 6, 8, 10, 12];
+var AnimatedBlurView2 = import_react_native9.Animated.createAnimatedComponent(BlurView);
+var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }) => {
+  const { animation, roundness } = (0, import_react_native_paper15.useTheme)(themeOverrides);
+  const [opacity] = (0, import_react11.useState)(() => new import_react_native9.Animated.Value(0));
+  const [closing, setClosing] = (0, import_react11.useState)(false);
+  if (!visible && !closing) setClosing(true);
+  (0, import_react11.useEffect)(() => {
+    import_react_native9.Animated.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
+  }, [animation.scale, closing, opacity]);
+  const shadow = elevation > 0 ? { shadowColor: "#000000", shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
+};
 var MenuComponent = ({ blur: blurProp, children, ...props }) => {
   const blur = useBlur(blurProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles5.content, props.contentStyle], children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlurView, { blur, children }) });
+  const web = import_react_native9.Platform.OS === "web";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles5.content, web && styles5.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlurView, { blur, children }) });
 };
 var Menu = Object.assign(MenuComponent, {
   Item: import_react_native_paper15.Menu.Item
 });
 var styles5 = import_react_native9.StyleSheet.create({
-  content: { backgroundColor: "transparent", paddingVertical: 0 }
+  content: { backgroundColor: "transparent", paddingVertical: 0 },
+  webSurface: { opacity: 1, shadowOpacity: 0 }
 });
 
 // src/components/TextInput.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_native_paper16 = require("react-native-paper");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TextInput = (0, import_react11.forwardRef)(function TextInput2(props, ref) {
+var TextInput = (0, import_react12.forwardRef)(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
 });
@@ -1080,10 +1114,10 @@ var import_react_native_paper17 = require("react-native-paper");
 var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
 
 // src/useThemeBridgeProps.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useThemeBridgeProps(props) {
   const { initialValue, onChange, onReady } = props;
-  return (0, import_react12.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
+  return (0, import_react13.useMemo)(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady]);
 }
 
 // src/utils/getThirdColor.ts

package/dist/index.mjs

@@ -416,14 +416,14 @@ import { Icon, TouchableRipple, useTheme as useTheme4 } from "react-native-paper
 
 // src/components/Dialog.tsx
 import React, { useEffect as useEffect3, useState as useState3 } from "react";
-import { Animated, BackHandler, Easing, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
-import { Dialog as PaperDialog, Portal, useTheme as useTheme3 } from "react-native-paper";
+import { Animated, BackHandler, Easing, Platform as Platform2, Pressable, StyleSheet as StyleSheet3, View as View3 } from "react-native";
+import { Dialog as PaperDialog, Portal as Portal2, useTheme as useTheme3 } from "react-native-paper";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // src/ThemeProvider.tsx
 import { createContext as createContext2, useContext as useContext3, useEffect as useEffect2, useMemo, useRef } from "react";
 import { StatusBar as StatusBar2, StyleSheet, View } from "react-native";
-import { configureFonts, Provider as PaperProvider } from "react-native-paper";
+import { configureFonts, Portal, Provider as PaperProvider } from "react-native-paper";
 
 // src/useComputedTheme.ts
 import { useCallback, useEffect, useState as useState2 } from "react";
@@ -623,7 +623,7 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigatio
   if (!theme) return null;
   return /* @__PURE__ */ jsxs2(PaperProvider, { theme, children: [
     /* @__PURE__ */ jsx4(StatusBar2, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ jsx4(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx4(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx4(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx4(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx4(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
+    /* @__PURE__ */ jsx4(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx4(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx4(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx4(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx4(Portal.Host, { children: /* @__PURE__ */ jsx4(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) }) })
   ] });
 }
 var styles = StyleSheet.create({
@@ -632,9 +632,14 @@ var styles = StyleSheet.create({
 
 // src/components/BlurView.tsx
 import { useContext as useContext4 } from "react";
-import { StyleSheet as StyleSheet2, View as View2 } from "react-native";
+import { Platform, StyleSheet as StyleSheet2, View as View2 } from "react-native";
 import { useTheme as useTheme2 } from "react-native-paper";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var blursOnAndroid = ({ blurMethod, blurTarget, experimentalBlurMethod }) => {
+  const method = blurMethod ?? experimentalBlurMethod ?? "none";
+  if (!blurTarget || method === "none") return false;
+  return method === "dimezisBlurView" || Number(Platform.Version) >= 31;
+};
 var ELEVATION_OPACITY = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 };
 var VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 };
 var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = "surface", ...props }) => {
@@ -646,7 +651,7 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
   const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== void 0 ? colors.primary : void 0);
   const resolvedTintOpacity = tintOpacity ?? (tintColor ? dark ? 0.24 : 0.16 : variantColor ? dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light : elevation !== void 0 ? ELEVATION_OPACITY[elevation] : 0);
   const tint = resolvedTintColor && resolvedTintOpacity > 0 ? /* @__PURE__ */ jsx5(View2, { style: [StyleSheet2.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
-  if (blur && expoBlur)
+  if (blur && expoBlur && (Platform.OS !== "android" || blursOnAndroid(props)))
     return /* @__PURE__ */ jsxs3(expoBlur.BlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
       /* @__PURE__ */ jsx5(View2, { style: [StyleSheet2.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
       tint,
@@ -662,6 +667,8 @@ var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacit
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
+var AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
   const reanimated = useReanimatedModule();
@@ -705,9 +712,16 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
     return child;
   });
   const borderRadius = (isV3 ? 7 : 1) * roundness;
-  return /* @__PURE__ */ jsx6(Portal, { children: /* @__PURE__ */ jsxs4(Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [StyleSheet3.absoluteFill, { opacity }], testID, children: [
-    /* @__PURE__ */ jsx6(Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [StyleSheet3.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
-    /* @__PURE__ */ jsx6(View3, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ jsx6(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ jsx6(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ jsx6(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
+  const web = Platform2.OS === "web";
+  const fade = { opacity };
+  const styleOpacity = StyleSheet3.flatten(style)?.opacity;
+  const cardFade = typeof styleOpacity === "number" ? { opacity: Animated.multiply(opacity, styleOpacity) } : fade;
+  const Backdrop = web ? AnimatedPressable : Pressable;
+  const Card = web ? AnimatedBlurView : BlurView;
+  const card = /* @__PURE__ */ jsx6(Card, { blur, style: [styles2.card, { borderRadius }, style, web && cardFade], testID: `${testID}-surface`, children: content });
+  return /* @__PURE__ */ jsx6(Portal2, { children: /* @__PURE__ */ jsxs4(Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [StyleSheet3.absoluteFill, !web && fade], testID, children: [
+    /* @__PURE__ */ jsx6(Backdrop, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [StyleSheet3.absoluteFill, { backgroundColor: colors.backdrop }, web && fade], testID: `${testID}-backdrop` }),
+    /* @__PURE__ */ jsx6(View3, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ jsx6(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: card }) : card })
   ] }) });
 }
 DialogComponent.Title = PaperDialog.Title;
@@ -876,7 +890,7 @@ var AutoPalettePicker = (props) => {
 
 // src/components/BottomNavigation.tsx
 import { useEffect as useEffect4 } from "react";
-import { Platform } from "react-native";
+import { Platform as Platform3 } from "react-native";
 import { BottomNavigation as PaperBottomNavigation, useTheme as useTheme6 } from "react-native-paper";
 
 // src/navigation-bar.ts
@@ -891,7 +905,7 @@ function useNavigationBarSync() {
   const theme = useTheme6();
   const { navigationBar, onNavBarChange } = useNavBarContext();
   useEffect4(() => {
-    if (Platform.OS !== "android") return;
+    if (Platform3.OS !== "android") return;
     if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark);
     else if (navigationBar) setNavigationBarStyle(navigationBar, theme.dark);
   }, [theme, onNavBarChange, navigationBar]);
@@ -948,18 +962,38 @@ function IconButton({ variant, iconColor, containerColor, ...props }) {
 }
 
 // src/components/Menu.tsx
-import { StyleSheet as StyleSheet6 } from "react-native";
-import { Menu as PaperMenu } from "react-native-paper";
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { Animated as Animated2, Easing as Easing2, Platform as Platform4, StyleSheet as StyleSheet6 } from "react-native";
+import { Menu as PaperMenu, useTheme as useTheme9 } from "react-native-paper";
 import { jsx as jsx16 } from "react/jsx-runtime";
+var ANIMATION_DURATION2 = 250;
+var EASING = Easing2.bezier(0.4, 0, 0.2, 1);
+var DEFAULT_ELEVATION = 2;
+var SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8];
+var SHADOW_RADIUS = [0, 3, 6, 8, 10, 12];
+var AnimatedBlurView2 = Animated2.createAnimatedComponent(BlurView);
+var FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }) => {
+  const { animation, roundness } = useTheme9(themeOverrides);
+  const [opacity] = useState6(() => new Animated2.Value(0));
+  const [closing, setClosing] = useState6(false);
+  if (!visible && !closing) setClosing(true);
+  useEffect5(() => {
+    Animated2.timing(opacity, { duration: animation.scale * ANIMATION_DURATION2, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start();
+  }, [animation.scale, closing, opacity]);
+  const shadow = elevation > 0 ? { shadowColor: "#000000", shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null;
+  return /* @__PURE__ */ jsx16(AnimatedBlurView2, { blur, style: [{ borderRadius: roundness, opacity }, shadow], children });
+};
 var MenuComponent = ({ blur: blurProp, children, ...props }) => {
   const blur = useBlur(blurProp);
-  return /* @__PURE__ */ jsx16(PaperMenu, { ...props, contentStyle: [styles5.content, props.contentStyle], children: /* @__PURE__ */ jsx16(BlurView, { blur, children }) });
+  const web = Platform4.OS === "web";
+  return /* @__PURE__ */ jsx16(PaperMenu, { ...props, contentStyle: [styles5.content, web && styles5.webSurface, props.contentStyle], children: web ? /* @__PURE__ */ jsx16(FadingBlurView, { blur, elevation: props.mode === "flat" ? 0 : props.elevation ?? DEFAULT_ELEVATION, theme: props.theme, visible: props.visible, children }) : /* @__PURE__ */ jsx16(BlurView, { blur, children }) });
 };
 var Menu = Object.assign(MenuComponent, {
   Item: PaperMenu.Item
 });
 var styles5 = StyleSheet6.create({
-  content: { backgroundColor: "transparent", paddingVertical: 0 }
+  content: { backgroundColor: "transparent", paddingVertical: 0 },
+  webSurface: { opacity: 1, shadowOpacity: 0 }
 });
 
 // src/components/TextInput.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",

package/src/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 import { createContext, type ReactNode, useContext, useEffect, useMemo, useRef } from 'react'
 import { StatusBar, type StatusBarProps, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
-import { configureFonts, Provider as PaperProvider } from 'react-native-paper'
+import { configureFonts, Portal, Provider as PaperProvider } from 'react-native-paper'
 
 import type { ExpoBlurModule } from './components/BlurView'
 import type { ReanimatedModule } from './components/Dialog'
@@ -99,7 +99,17 @@ function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigatio
         <NavBarContext.Provider value={{ navigationBar, onNavBarChange }}>
           <BlurModuleContext.Provider value={expoBlur}>
             <ReanimatedModuleContext.Provider value={reanimated}>
-              <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+              {/* PaperProvider's own PortalHost sits above every context provided here, and Paper's
+                  Portal only carries its theme and settings across, so anything rendered through a
+                  Portal (this package's Dialog, Paper's Menu and Tooltip, or anything an app wraps
+                  in <Portal> itself) would otherwise lose expoBlur, reanimated, defaults and the nav
+                  bar hooks: Dialog/Menu's blur silently fell back to solid. This nested host is the
+                  nearest one for every Portal under Provider, so their content mounts inside all of
+                  these contexts instead. It wraps the styled View, not the other way round, so
+                  portals still cover the full area regardless of `style`. */}
+              <Portal.Host>
+                <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+              </Portal.Host>
             </ReanimatedModuleContext.Provider>
           </BlurModuleContext.Provider>
         </NavBarContext.Provider>

package/src/components/BlurView.tsx

@@ -1,5 +1,5 @@
 import { type ComponentType, type ReactNode, type RefObject, useContext } from 'react'
-import { type StyleProp, StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native'
+import { Platform, type StyleProp, StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native'
 import { useTheme } from 'react-native-paper'
 
 import { useBlurModule } from '../ThemeProvider'
@@ -33,6 +33,18 @@ type ExpoBlurViewProps = {
   tint?: ExpoBlurTint
 } & ViewProps
 
+// On Android, expo-blur only really blurs when it has both a blurTarget and a blur method
+// ('dimezisBlurView', or 'dimezisBlurViewSdk31Plus' on API 31+); blurMethod defaults to 'none'.
+// Otherwise it paints its tint as a flat translucent fill (roughly 0.35-0.39 alpha at the default
+// intensity) with the screen showing through unblurred, so BlurView renders its solid look instead.
+// Checks the blurTarget ref object, not its .current, same as expo-blur's own JS: the target view
+// usually commits after this render, so .current is still null here even when wired correctly.
+const blursOnAndroid = ({ blurMethod, blurTarget, experimentalBlurMethod }: ExpoBlurViewProps) => {
+  const method = blurMethod ?? experimentalBlurMethod ?? 'none'
+  if (!blurTarget || method === 'none') return false
+  return method === 'dimezisBlurView' || Number(Platform.Version) >= 31
+}
+
 const ELEVATION_OPACITY: Record<number, number> = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 }
 const VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 }
 
@@ -55,7 +67,7 @@ export const BlurView = ({ blur = true, children, elevation, style, tintColor, t
   const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== undefined ? colors.primary : undefined)
   const resolvedTintOpacity = tintOpacity ?? (tintColor ? (dark ? 0.24 : 0.16) : variantColor ? (dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light) : elevation !== undefined ? ELEVATION_OPACITY[elevation] : 0)
   const tint = resolvedTintColor && resolvedTintOpacity > 0 ? <View style={[StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }]} /> : null
-  if (blur && expoBlur)
+  if (blur && expoBlur && (Platform.OS !== 'android' || blursOnAndroid(props)))
     return (
       <expoBlur.BlurView {...props} tint={dark ? 'dark' : 'light'} style={style}>
         <View style={[StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }]} />

package/src/components/Dialog.tsx

@@ -1,5 +1,5 @@
 import React, { type ComponentType, type ReactNode, useEffect, useState } from 'react'
-import { Animated, BackHandler, Easing, Pressable, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
+import { Animated, BackHandler, Easing, Platform, Pressable, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Dialog as PaperDialog, type DialogActionsProps, type DialogContentProps, type DialogProps as PaperDialogProps, type DialogScrollAreaProps, type DialogTitleProps, Portal, useTheme } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
@@ -39,6 +39,9 @@ const ANIMATION_DURATION = 220
 // Minimum breathing room between the card and the screen edge, clamped up from safe-area insets.
 const DIALOG_MARGIN = 32
 
+const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
 function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = 'dialog' }: DialogProps) {
   const blur = useBlur(blurProp)
   const reanimated = useReanimatedModule()
@@ -93,21 +96,34 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
 
   const borderRadius = (isV3 ? 7 : 1) * roundness
 
+  // On web, an ancestor below opacity 1 cuts the card's CSS backdrop-filter off from the page behind
+  // it, and Chromium doesn't restore the blur once that ancestor fades back up to 1, so fading the
+  // whole layer would leave the open card see-through. There the fade runs on the backdrop and on the
+  // card (the backdrop-filter element) itself instead, off the same value. A numeric opacity in the
+  // card's own style still applies there, multiplied into the fade.
+  const web = Platform.OS === 'web'
+  const fade = { opacity }
+  const styleOpacity = StyleSheet.flatten(style)?.opacity
+  const cardFade = typeof styleOpacity === 'number' ? { opacity: Animated.multiply(opacity, styleOpacity) } : fade
+  const Backdrop = web ? AnimatedPressable : Pressable
+  const Card = web ? AnimatedBlurView : BlurView
+  const card = (
+    <Card blur={blur} style={[styles.card, { borderRadius }, style, web && cardFade]} testID={`${testID}-surface`}>
+      {content}
+    </Card>
+  )
+
   return (
     <Portal>
-      <Animated.View accessibilityLiveRegion='polite' accessibilityViewIsModal pointerEvents={visible ? 'box-none' : 'none'} style={[StyleSheet.absoluteFill, { opacity }]} testID={testID}>
-        <Pressable accessibilityLabel='Close modal' accessibilityRole='button' disabled={!dismissable} onPress={dismissable ? onDismiss : undefined} style={[StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }]} testID={`${testID}-backdrop`} />
+      <Animated.View accessibilityLiveRegion='polite' accessibilityViewIsModal pointerEvents={visible ? 'box-none' : 'none'} style={[StyleSheet.absoluteFill, !web && fade]} testID={testID}>
+        <Backdrop accessibilityLabel='Close modal' accessibilityRole='button' disabled={!dismissable} onPress={dismissable ? onDismiss : undefined} style={[StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }, web && fade]} testID={`${testID}-backdrop`} />
         <View pointerEvents='box-none' style={[styles.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }]} testID={`${testID}-wrapper`}>
           {reanimated && animatedStyle ? (
             <reanimated.View style={animatedStyle} testID={`${testID}-animated-wrapper`}>
-              <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
-                {content}
-              </BlurView>
+              {card}
             </reanimated.View>
           ) : (
-            <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
-              {content}
-            </BlurView>
+            card
           )}
         </View>
       </Animated.View>

package/src/components/Menu.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
-import { StyleSheet } from 'react-native'
-import { Menu as PaperMenu, type MenuItemProps, type MenuProps as PaperMenuProps } from 'react-native-paper'
+import React, { type ReactNode, useEffect, useState } from 'react'
+import { Animated, Easing, Platform, StyleSheet } from 'react-native'
+import { type MD2Theme, type MD3Theme, Menu as PaperMenu, type MenuItemProps, type MenuProps as PaperMenuProps, useTheme } from 'react-native-paper'
 
 import { useBlur } from '../BlurContext'
 import { BlurView } from './BlurView'
@@ -9,11 +9,61 @@ export type MenuProps = PaperMenuProps & {
   blur?: boolean
 }
 
+// Mirror react-native-paper's Menu: its fade (ANIMATION_DURATION * theme.animation.scale, eased with
+// EASING), its default elevation, and the MD3 shadow its Surface draws at each elevation level.
+const ANIMATION_DURATION = 250
+const EASING = Easing.bezier(0.4, 0, 0.2, 1)
+const DEFAULT_ELEVATION = 2
+const SHADOW_HEIGHT = [0, 1, 2, 4, 6, 8]
+const SHADOW_RADIUS = [0, 3, 6, 8, 10, 12]
+
+const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
+
+type FadingBlurViewProps = {
+  blur: boolean
+  children: ReactNode
+  elevation: number
+  theme: PaperMenuProps['theme']
+  visible: boolean
+}
+
+// Paper fades the menu's Surface in and out. On web, an ancestor below opacity 1 cuts BlurView's CSS
+// backdrop-filter off from the page behind it, and Chromium doesn't restore the blur once the Surface
+// reaches 1, so the open menu stays see-through until something else repaints it. So on web the Surface
+// is pinned at opacity 1 with its shadow hidden, and BlurView itself (the backdrop-filter element) runs
+// Paper's fades and draws that shadow, so the two still fade together.
+const FadingBlurView = ({ blur, children, elevation, theme: themeOverrides, visible }: FadingBlurViewProps) => {
+  const { animation, roundness } = useTheme<MD2Theme | MD3Theme>(themeOverrides)
+  const [opacity] = useState(() => new Animated.Value(0))
+  // Once Paper starts hiding the menu it unmounts this content when that fade-out ends, even if visible
+  // turns back on first, so a close is final here too rather than fading back in only to vanish.
+  const [closing, setClosing] = useState(false)
+  if (!visible && !closing) setClosing(true)
+
+  useEffect(() => {
+    Animated.timing(opacity, { duration: animation.scale * ANIMATION_DURATION, easing: EASING, toValue: closing ? 0 : 1, useNativeDriver: false }).start()
+  }, [animation.scale, closing, opacity])
+
+  const shadow = elevation > 0 ? { shadowColor: '#000000', shadowOffset: { height: SHADOW_HEIGHT[elevation], width: 0 }, shadowOpacity: 0.3, shadowRadius: SHADOW_RADIUS[elevation] } : null
+  return (
+    <AnimatedBlurView blur={blur} style={[{ borderRadius: roundness, opacity }, shadow]}>
+      {children}
+    </AnimatedBlurView>
+  )
+}
+
 const MenuComponent = ({ blur: blurProp, children, ...props }: MenuProps) => {
   const blur = useBlur(blurProp)
+  const web = Platform.OS === 'web'
   return (
-    <PaperMenu {...props} contentStyle={[styles.content, props.contentStyle]}>
-      <BlurView blur={blur}>{children}</BlurView>
+    <PaperMenu {...props} contentStyle={[styles.content, web && styles.webSurface, props.contentStyle]}>
+      {web ? (
+        <FadingBlurView blur={blur} elevation={props.mode === 'flat' ? 0 : (props.elevation ?? DEFAULT_ELEVATION)} theme={props.theme} visible={props.visible}>
+          {children}
+        </FadingBlurView>
+      ) : (
+        <BlurView blur={blur}>{children}</BlurView>
+      )}
     </PaperMenu>
   )
 }
@@ -23,5 +73,6 @@ export const Menu = Object.assign(MenuComponent, {
 })
 
 const styles = StyleSheet.create({
-  content: { backgroundColor: 'transparent', paddingVertical: 0 }
+  content: { backgroundColor: 'transparent', paddingVertical: 0 },
+  webSurface: { opacity: 1, shadowOpacity: 0 }
 })