@rific/auto-paper 0.12.0 → 0.12.2

package/README.md

@@ -201,6 +201,8 @@ dispatch(themeActions.setColor('#e91e63'))
 dispatch(themeActions.setAppearance('dark'))
 ```
 
+Dispatching `themeActions` from anywhere in the app reaches the Provider because `initialValue` is live after mount: the Provider adopts any value that changes. That needs @rific/core 0.3.0 or later. With @rific/core 0.2.1 or older, `initialValue` is only read at mount, so write through the Provider's own setters instead.
+
 The `App.tsx` example above hand-builds the `initialValue`/`onReady` prop pair inline. Once you also need `onChange` wired back to `dispatch`, reach for `useThemeBridgeProps` instead of re-deriving that same three-field object by hand: it takes your already-resolved `settings`/`onChange`/`onReady` and reshapes them into the exact, memoized prop bag `Provider` expects.
 
 ```tsx
@@ -263,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 |
@@ -272,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,

package/dist/index.mjs

@@ -417,13 +417,13 @@ 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 { 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,
@@ -705,7 +710,7 @@ 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: [
+  return /* @__PURE__ */ jsx6(Portal2, { 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 }) })
   ] }) });
@@ -876,7 +881,7 @@ var AutoPalettePicker = (props) => {
 
 // src/components/BottomNavigation.tsx
 import { useEffect as useEffect4 } from "react";
-import { Platform } from "react-native";
+import { Platform as Platform2 } from "react-native";
 import { BottomNavigation as PaperBottomNavigation, useTheme as useTheme6 } from "react-native-paper";
 
 // src/navigation-bar.ts
@@ -891,7 +896,7 @@ function useNavigationBarSync() {
   const theme = useTheme6();
   const { navigationBar, onNavBarChange } = useNavBarContext();
   useEffect4(() => {
-    if (Platform.OS !== "android") return;
+    if (Platform2.OS !== "android") return;
     if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark);
     else if (navigationBar) setNavigationBarStyle(navigationBar, theme.dark);
   }, [theme, onNavBarChange, navigationBar]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "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 }]} />