@rific/auto-paper 0.9.0 → 0.9.2

package/README.md

@@ -33,7 +33,7 @@ npm install expo-blur             # frosted-glass BlurView
 npm install expo-navigation-bar   # (>= 56.0.0, SDK 54+) auto-syncs Android nav bar icon style to the theme when BottomNavigation is mounted
 ```
 
-Neither is auto-detected: pass them to `Provider` (`expoBlur`, `navigationBar`, see the prop table below) and `BlurView`/`BottomNavigation` pick them up automatically. Omit either and you get a working fallback instead: `BlurView` renders its solid (non-blur) look, and the Android nav bar simply isn't synced.
+These integrations are opt-in: pass them to `Provider` (`expoBlur`, `navigationBar`, and `reanimated` — see the prop table below), and the relevant wrappers pick them up automatically. Omit them and you still get working fallbacks: `BlurView` renders its solid (non-blur) look, `BottomNavigation` simply skips nav-bar syncing, and `Dialog` treats `animatedStyle` as a no-op unless a reanimated module is injected.
 
 The exported Redux slice has no dependency on `@reduxjs/toolkit`: it works with RTK stores, vanilla Redux, or no Redux at all.
 
@@ -238,6 +238,7 @@ export default function App() {
 | `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 |
 | `onReady` | `() => void` | Called once when the theme first resolves |
+| `reanimated` | `ReanimatedModule` | Injects `react-native-reanimated` (for example `import Reanimated from 'react-native-reanimated'`) so `<Dialog animatedStyle={...}>` can animate its card on the UI thread. Omit to keep `animatedStyle` as a no-op. |
 | `statusBarProps` | `StatusBarProps` | Spread over the auto-derived `StatusBar` defaults |
 | `style` | `StyleProp<ViewStyle>` | Applied to the wrapper `View` |
 
@@ -255,6 +256,8 @@ export default function App() {
 
 Returns `{ settings: ThemeSettings, set: (patch: Partial<ThemeSettings>) => void }`. Use this hook from any component inside `Provider` to read or update the current theme settings.
 
+`useReanimatedModule()` is also available inside the provider tree when you need to read the injected reanimated module directly; it returns `undefined` unless `Provider` was given a `reanimated` prop.
+
 ```tsx
 import { useThemeSettings } from '@rific/auto-paper'
 
@@ -377,6 +380,35 @@ import { Chip } from '@rific/auto-paper'
 
 `ChipProps` is exported from `@rific/auto-paper` and extends `react-native-paper`'s `ChipProps` with the `variant` field. Use `PaperChipProps` if you need the base paper type.
 
+### `Dialog`
+
+A thin wrapper around `react-native-paper`'s `Dialog` with built-in blur support and optional UI-thread animation hooks. `blur` overrides the ambient blur setting for that dialog, and `animatedStyle` can be used to animate the card wrapper when a reanimated module has been injected into `Provider`.
+
+```tsx
+import { Dialog, Provider } from '@rific/auto-paper'
+import Reanimated, { useAnimatedStyle } from 'react-native-reanimated'
+
+function SettingsDialog({ visible }: { visible: boolean }) {
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: 1 }))
+
+  return (
+    <Provider initialValue={{ appearance: 'system', color: '#6750a4' }} reanimated={Reanimated}>
+      <Dialog visible={visible} onDismiss={() => {}} animatedStyle={animatedStyle} blur>
+        {/* dialog contents */}
+      </Dialog>
+    </Provider>
+  )
+}
+```
+
+| Prop | Type | Description |
+|---|---|---|
+| `blur` | `boolean` | Overrides the ambient blur setting for this component's dialog |
+| `animatedStyle` | `unknown` | Applied to the card's outer wrapper when a reanimated module has been injected; otherwise ignored |
+| ...all `DialogProps` | | All props from `react-native-paper`'s `Dialog` are supported |
+
+`DialogProps` is exported from `@rific/auto-paper` and extends `react-native-paper`'s `DialogProps` with the `blur` and `animatedStyle` fields. Use `PaperDialogProps` if you need the base paper type.
+
 ### `IconButton`
 
 A thin wrapper around `react-native-paper`'s `IconButton` that adds a `variant` prop for applying theme-derived container and icon colors.

package/dist/index.d.mts

@@ -127,11 +127,19 @@ type Props$2 = {
 };
 declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$2) => react.JSX.Element;
 
+interface ReanimatedModule {
+    View: ComponentType<{
+        children?: ReactNode;
+        style?: any;
+        testID?: string;
+    }>;
+}
 type DialogProps = Omit<DialogProps$1, 'style'> & {
     blur?: boolean;
     style?: StyleProp<ViewStyle>;
+    animatedStyle?: unknown;
 };
-declare function DialogComponent({ blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
+declare function DialogComponent({ animatedStyle, blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
 declare namespace DialogComponent {
     var Title: react__default.FC<DialogTitleProps>;
     var Content: react__default.FC<DialogContentProps>;
@@ -273,6 +281,7 @@ type NavBarContextType = {
 };
 declare const useNavBarContext: () => NavBarContextType;
 declare const useBlurModule: () => ExpoBlurModule | undefined;
+declare const useReanimatedModule: () => ReanimatedModule | undefined;
 type ProviderProps = {
     children: ReactNode;
     defaults?: PaperDefaults;
@@ -284,10 +293,12 @@ type ProviderProps = {
     onChange?: (settings: ThemeSettings) => void;
     onNavBarChange?: (color: string, dark: boolean) => void;
     onReady?: () => void;
+    /** Injects react-native-reanimated so `<Dialog animatedStyle={...}>` (e.g. from `useAnimatedStyle()`) can animate its card on the UI thread. Pass `import Reanimated from 'react-native-reanimated'`; omit to keep Dialog's `animatedStyle` prop a no-op. */
+    reanimated?: ReanimatedModule;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
@@ -323,4 +334,4 @@ declare const getTonalColor: (color: string, lightness: number) => string;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Appbar, type AppearanceIcons, AppearancePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeSettings };

package/dist/index.d.ts

@@ -127,11 +127,19 @@ type Props$2 = {
 };
 declare const ColorPicker: ({ value, onChange, colors, blur: blurProp }: Props$2) => react.JSX.Element;
 
+interface ReanimatedModule {
+    View: ComponentType<{
+        children?: ReactNode;
+        style?: any;
+        testID?: string;
+    }>;
+}
 type DialogProps = Omit<DialogProps$1, 'style'> & {
     blur?: boolean;
     style?: StyleProp<ViewStyle>;
+    animatedStyle?: unknown;
 };
-declare function DialogComponent({ blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
+declare function DialogComponent({ animatedStyle, blur: blurProp, dismissable, dismissableBackButton, visible, onDismiss, children, style, testID }: DialogProps): react__default.JSX.Element | null;
 declare namespace DialogComponent {
     var Title: react__default.FC<DialogTitleProps>;
     var Content: react__default.FC<DialogContentProps>;
@@ -273,6 +281,7 @@ type NavBarContextType = {
 };
 declare const useNavBarContext: () => NavBarContextType;
 declare const useBlurModule: () => ExpoBlurModule | undefined;
+declare const useReanimatedModule: () => ReanimatedModule | undefined;
 type ProviderProps = {
     children: ReactNode;
     defaults?: PaperDefaults;
@@ -284,10 +293,12 @@ type ProviderProps = {
     onChange?: (settings: ThemeSettings) => void;
     onNavBarChange?: (color: string, dark: boolean) => void;
     onReady?: () => void;
+    /** Injects react-native-reanimated so `<Dialog animatedStyle={...}>` (e.g. from `useAnimatedStyle()`) can animate its card on the UI thread. Pass `import Reanimated from 'react-native-reanimated'`; omit to keep Dialog's `animatedStyle` prop a no-op. */
+    reanimated?: ReanimatedModule;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 
@@ -323,4 +334,4 @@ declare const getTonalColor: (color: string, lightness: number) => string;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Appbar, type AppearanceIcons, AppearancePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useThemeSettings };
+export { Appbar, type AppearanceIcons, AppearancePicker, type AutoPaperTheme, BlurView, type BlurViewProps, BottomNavigation, Button, Chip, type ChipProps, type ColorHarmony, ColorPicker, type ColorRoles, Dialog, type DialogProps, type ExpoBlurModule, type ExpoNavigationBarModule, FAB, HarmonyPicker, IconButton, type IconButtonProps, Menu, type MenuProps, PalettePicker, type PaletteWeights, type PaperDefaults, Provider, type ProviderProps, type RGB, type ReanimatedModule, SEMANTIC_BASE_COLORS, type SeedColor, type SemanticColorRoles, TextInput, type ThemeAppearance, type ThemeSettings, ThemeSettingsContext, type ThemeSettingsContextType, type ThemeState, type TriadicPalette, createThemeReducer, defaultColors, defaultThemeSettings, getBlendedColor, getColorRoles, getContrastColor, getHex, getRgb, getThirdColor, getTintTextColor, getTonalColor, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer, useAutoPaperTheme, useBlur, useBlurModule, useComputedTheme, useNavBarContext, usePaperDefaults, useReanimatedModule, useThemeSettings };

package/dist/index.js

@@ -72,6 +72,7 @@ __export(index_exports, {
   useComputedTheme: () => useComputedTheme,
   useNavBarContext: () => useNavBarContext,
   usePaperDefaults: () => usePaperDefaults,
+  useReanimatedModule: () => useReanimatedModule,
   useThemeSettings: () => useThemeSettings
 });
 module.exports = __toCommonJS(index_exports);
@@ -634,7 +635,9 @@ var NavBarContext = (0, import_react5.createContext)({});
 var useNavBarContext = () => (0, import_react5.useContext)(NavBarContext);
 var BlurModuleContext = (0, import_react5.createContext)(void 0);
 var useBlurModule = () => (0, import_react5.useContext)(BlurModuleContext);
-function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }) {
+var ReanimatedModuleContext = (0, import_react5.createContext)(void 0);
+var useReanimatedModule = () => (0, import_react5.useContext)(ReanimatedModuleContext);
+function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
   const [settings, setSettings] = (0, import_react5.useState)(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set = (0, import_react5.useCallback)((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
@@ -659,7 +662,7 @@ function Provider({ children, defaults, expoBlur, initialValue, navigationBar, o
   if (!theme) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ThemeSettingsContext.Provider, { value: { settings, set }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native_paper4.Provider, { theme, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
   ] }) });
 }
 var styles = import_react_native3.StyleSheet.create({
@@ -778,8 +781,9 @@ var import_react_native_safe_area_context = require("react-native-safe-area-cont
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
-function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
+function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
+  const reanimated = useReanimatedModule();
   const theme = (0, import_react_native_paper9.useTheme)();
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
@@ -820,7 +824,7 @@ function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackBu
   const borderRadius = (isV3 ? 7 : 1) * roundness;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native6.Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [import_react_native6.StyleSheet.absoluteFill, { opacity }], testID, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [import_react_native6.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.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_runtime8.jsx)(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
   ] }) });
 }
 DialogComponent.Title = import_react_native_paper9.Dialog.Title;
@@ -1200,5 +1204,6 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   useComputedTheme,
   useNavBarContext,
   usePaperDefaults,
+  useReanimatedModule,
   useThemeSettings
 });

package/dist/index.mjs

@@ -556,7 +556,9 @@ var NavBarContext = createContext3({});
 var useNavBarContext = () => useContext3(NavBarContext);
 var BlurModuleContext = createContext3(void 0);
 var useBlurModule = () => useContext3(BlurModuleContext);
-function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }) {
+var ReanimatedModuleContext = createContext3(void 0);
+var useReanimatedModule = () => useContext3(ReanimatedModuleContext);
+function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
   const [settings, setSettings] = useState2(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set = useCallback2((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
@@ -581,7 +583,7 @@ function Provider({ children, defaults, expoBlur, initialValue, navigationBar, o
   if (!theme) return null;
   return /* @__PURE__ */ jsx3(ThemeSettingsContext.Provider, { value: { settings, set }, children: /* @__PURE__ */ jsxs2(PaperProvider, { theme, children: [
     /* @__PURE__ */ jsx3(StatusBar2, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ jsx3(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx3(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx3(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx3(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) })
+    /* @__PURE__ */ jsx3(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx3(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ jsx3(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ jsx3(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ jsx3(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
   ] }) });
 }
 var styles = StyleSheet.create({
@@ -700,8 +702,9 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
-function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
+function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
+  const reanimated = useReanimatedModule();
   const theme = useTheme5();
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
@@ -742,7 +745,7 @@ function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackBu
   const borderRadius = (isV3 ? 7 : 1) * roundness;
   return /* @__PURE__ */ jsx8(Portal, { children: /* @__PURE__ */ jsxs4(Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [StyleSheet3.absoluteFill, { opacity }], testID, children: [
     /* @__PURE__ */ jsx8(Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [StyleSheet3.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
-    /* @__PURE__ */ jsx8(View3, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: /* @__PURE__ */ jsx8(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
+    /* @__PURE__ */ jsx8(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__ */ jsx8(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ jsx8(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ jsx8(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
   ] }) });
 }
 DialogComponent.Title = PaperDialog.Title;
@@ -1121,5 +1124,6 @@ export {
   useComputedTheme,
   useNavBarContext,
   usePaperDefaults,
+  useReanimatedModule,
   useThemeSettings
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -31,7 +31,7 @@
   "type": "commonjs",
   "exports": {
     ".": {
-      "react-native": "./dist/index.mjs",
+      "react-native": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
@@ -39,7 +39,7 @@
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "react-native": "dist/index.mjs",
+  "react-native": "src/index.ts",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
@@ -95,9 +95,9 @@
     "typescript-eslint": "^8.59.3"
   },
   "peerDependencies": {
-    "expo-blur": ">=14.0.0",
+    "expo-blur": ">=56.0.0",
     "expo-navigation-bar": ">=56.0.0",
-    "react": ">=18.0.0",
+    "react": ">=19.0.0",
     "react-native": ">=0.76.0",
     "react-native-paper": ">=5.0.0",
     "react-native-safe-area-context": "*"

package/src/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { StatusBar, type StatusBarProps, type StyleProp, StyleSheet, View, type
 import { Provider as PaperProvider } from 'react-native-paper'
 
 import type { ExpoBlurModule } from './components/BlurView'
+import type { ReanimatedModule } from './components/Dialog'
 import type { ExpoNavigationBarModule } from './navigation-bar'
 import { type PaperDefaults, PaperDefaultsContext } from './PaperDefaultsContext'
 import { defaultThemeSettings, type ThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
@@ -20,6 +21,9 @@ export const useNavBarContext = () => useContext(NavBarContext)
 const BlurModuleContext = createContext<ExpoBlurModule | undefined>(undefined)
 export const useBlurModule = () => useContext(BlurModuleContext)
 
+const ReanimatedModuleContext = createContext<ReanimatedModule | undefined>(undefined)
+export const useReanimatedModule = () => useContext(ReanimatedModuleContext)
+
 export type ProviderProps = {
   children: ReactNode
   defaults?: PaperDefaults
@@ -31,11 +35,13 @@ export type ProviderProps = {
   onChange?: (settings: ThemeSettings) => void
   onNavBarChange?: (color: string, dark: boolean) => void
   onReady?: () => void
+  /** Injects react-native-reanimated so `<Dialog animatedStyle={...}>` (e.g. from `useAnimatedStyle()`) can animate its card on the UI thread. Pass `import Reanimated from 'react-native-reanimated'`; omit to keep Dialog's `animatedStyle` prop a no-op. */
+  reanimated?: ReanimatedModule
   statusBarProps?: StatusBarProps
   style?: StyleProp<ViewStyle>
 }
 
-export function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, statusBarProps, style }: ProviderProps) {
+export function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps) {
   const [settings, setSettings] = useState<ThemeSettings>(() => ({ ...defaultThemeSettings, ...initialValue }))
 
   const set = useCallback((patch: Partial<ThemeSettings>) => {
@@ -71,7 +77,9 @@ export function Provider({ children, defaults, expoBlur, initialValue, navigatio
         <PaperDefaultsContext.Provider value={defaults ?? {}}>
           <NavBarContext.Provider value={{ navigationBar, onNavBarChange }}>
             <BlurModuleContext.Provider value={expoBlur}>
-              <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+              <ReanimatedModuleContext.Provider value={reanimated}>
+                <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+              </ReanimatedModuleContext.Provider>
             </BlurModuleContext.Provider>
           </NavBarContext.Provider>
         </PaperDefaultsContext.Provider>

package/src/components/Dialog.tsx

@@ -1,16 +1,35 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { type ComponentType, type ReactNode, useEffect, useRef, useState } from 'react'
 import { Animated, BackHandler, Easing, 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'
 
 import { useBlur } from '../BlurContext'
+import { useReanimatedModule } from '../ThemeProvider'
 import { BlurView } from './BlurView'
 
-// `style` is narrowed to a plain ViewStyle: unlike react-native-paper's Dialog, the surface here is
-// never wrapped in Animated.View, so it can't drive an Animated-value style the way upstream's can.
+// Minimal local mirror of react-native-reanimated's Animated.View — same reasoning as BlurView's
+// ExpoBlurModule: Metro doesn't rewrite a require()-in-try/catch call into its module graph inside
+// an ESM build, so the already-imported peer module is injected via <Provider reanimated={...}>
+// (see ThemeProvider.tsx) instead of required directly. Only `View` is needed here. `style: any`,
+// not a real style type — reanimated's actual AnimatedView only accepts its own branded
+// AnimatedStyle shape, which this package never imports (no reanimated dependency at all), so `any`
+// is the only type that both sides (this interface and the real component passed in) can agree on.
+export interface ReanimatedModule {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  View: ComponentType<{ children?: ReactNode; style?: any; testID?: string }>
+}
+
 export type DialogProps = Omit<PaperDialogProps, 'style'> & {
   blur?: boolean
   style?: StyleProp<ViewStyle>
+  // Applied to the card's outer wrapper instead of the card itself, and only takes effect once a
+  // reanimated module has been injected via <Provider reanimated={...}> — otherwise ignored. `style`
+  // above is a plain object read once per render, so a fast-changing value (e.g. tracking the
+  // keyboard height every frame) driven through it needs a full JS re-render per update to paint at
+  // all; wiring the same value through `animatedStyle` (e.g. the result of Reanimated's
+  // useAnimatedStyle()) instead paints on the UI thread with no JS round-trip, which is the whole
+  // difference between a smooth follow and a laggy snap.
+  animatedStyle?: unknown
 }
 
 // Matches react-native-paper's Modal: DEFAULT_DURATION * theme.animation.scale, eased the same way,
@@ -20,8 +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
 
-function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = 'dialog' }: DialogProps) {
+function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = 'dialog' }: DialogProps) {
   const blur = useBlur(blurProp)
+  const reanimated = useReanimatedModule()
   const theme = useTheme()
   const { colors, isV3, roundness } = theme
   const { scale } = theme.animation
@@ -75,9 +95,17 @@ function DialogComponent({ blur: blurProp, dismissable = true, dismissableBackBu
       <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`} />
         <View pointerEvents='box-none' style={[styles.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }]} testID={`${testID}-wrapper`}>
-          <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
-            {content}
-          </BlurView>
+          {reanimated && animatedStyle ? (
+            <reanimated.View style={animatedStyle} testID={`${testID}-animated-wrapper`}>
+              <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
+                {content}
+              </BlurView>
+            </reanimated.View>
+          ) : (
+            <BlurView blur={blur} style={[styles.card, { borderRadius }, style]} testID={`${testID}-surface`}>
+              {content}
+            </BlurView>
+          )}
         </View>
       </Animated.View>
     </Portal>

package/src/index.ts

@@ -10,7 +10,7 @@ export type { ChipProps } from './components/Chip'
 export { Chip } from './components/Chip'
 export type { SeedColor } from './components/ColorPicker'
 export { ColorPicker, defaultColors } from './components/ColorPicker'
-export type { DialogProps } from './components/Dialog'
+export type { DialogProps, ReanimatedModule } from './components/Dialog'
 export { Dialog } from './components/Dialog'
 export { FAB } from './components/FAB'
 export { HarmonyPicker } from './components/HarmonyPicker'
@@ -27,7 +27,7 @@ export { usePaperDefaults } from './PaperDefaultsContext'
 export type { ThemeState } from './redux/themeSlice'
 export { createThemeReducer, selectThemeAppearance, selectThemeBlur, selectThemeColor, selectThemeHarmony, themeActions, themeReducer } from './redux/themeSlice'
 export type { ProviderProps } from './ThemeProvider'
-export { Provider, useBlurModule, useNavBarContext } from './ThemeProvider'
+export { Provider, useBlurModule, useNavBarContext, useReanimatedModule } from './ThemeProvider'
 export type { ThemeSettings, ThemeSettingsContextType } from './ThemeSettingsContext'
 export { defaultThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
 export type { AutoPaperTheme, SemanticColorRoles, ThemeAppearance } from './useComputedTheme'