@rific/auto-paper 0.9.4 → 0.10.0

package/README.md

@@ -10,6 +10,7 @@ Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-na
 - System/light/dark appearance with live updates via `Appearance` API
 - Tinted surface, surfaceVariant, outline, and elevation levels derived from the seed
 - Fixed `success`/`warning`/`danger` semantic color roles (each with `on*`/`*Container` variants) alongside MD3's built-in `error`
+- App-wide `fontFamily` override, applied across every Paper typography variant in one prop
 - Optional Redux slice for wiring appearance and color into your store
 - Wrapper components (`Appbar`, `AppearancePicker`, `AutoAppearancePicker`, `AutoPalettePicker`, `BlurView`, `BottomNavigation`, `Button`, `Chip`, `ColorPicker`, `Dialog`, `FAB`, `HarmonyPicker`, `IconButton`, `Menu`, `PalettePicker`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
@@ -61,6 +62,14 @@ export default function App() {
 </AutoPaperProvider>
 ```
 
+Pass `fontFamily` to reskin every Paper component's text to a custom typeface app-wide, instead of passing `fontFamily` to each individual `Text`/`TextInput`/`Button` yourself:
+
+```tsx
+<AutoPaperProvider initialValue={{ appearance: 'system', color: '#6750a4' }} fontFamily='Menlo'>
+  {/* your app */}
+</AutoPaperProvider>
+```
+
 Update theme settings from anywhere inside the tree using `useThemeSettings`:
 
 ```tsx
@@ -235,6 +244,7 @@ export default function App() {
 | `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. |
+| `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 |
 | `onReady` | `() => void` | Called once when the theme first resolves |

package/dist/index.d.mts

@@ -305,6 +305,12 @@ type ProviderProps = {
     defaults?: PaperDefaults;
     /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
     expoBlur?: ExpoBlurModule;
+    /** 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. The one-line way to reskin an app's whole text to a custom typeface,
+     * instead of passing `fontFamily` to every individual Text/TextInput/Button across the app. Omit
+     * to keep each platform's system font (MD3's own default). */
+    fontFamily?: string;
     initialValue?: Partial<ThemeSettings>;
     /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
     navigationBar?: ExpoNavigationBarModule;
@@ -316,7 +322,7 @@ type ProviderProps = {
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 

package/dist/index.d.ts

@@ -305,6 +305,12 @@ type ProviderProps = {
     defaults?: PaperDefaults;
     /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
     expoBlur?: ExpoBlurModule;
+    /** 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. The one-line way to reskin an app's whole text to a custom typeface,
+     * instead of passing `fontFamily` to every individual Text/TextInput/Button across the app. Omit
+     * to keep each platform's system font (MD3's own default). */
+    fontFamily?: string;
     initialValue?: Partial<ThemeSettings>;
     /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
     navigationBar?: ExpoNavigationBarModule;
@@ -316,7 +322,7 @@ type ProviderProps = {
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
 
 declare const useAutoPaperTheme: () => AutoPaperTheme;
 

package/dist/index.js

@@ -685,13 +685,15 @@ var BlurModuleContext = (0, import_react7.createContext)(void 0);
 var useBlurModule = () => (0, import_react7.useContext)(BlurModuleContext);
 var ReanimatedModuleContext = (0, import_react7.createContext)(void 0);
 var useReanimatedModule = () => (0, import_react7.useContext)(ReanimatedModuleContext);
-function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
   const [settings, setSettings] = (0, import_react7.useState)(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set = (0, import_react7.useCallback)((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
   }, []);
   const onChangeRef = (0, import_react7.useRef)(onChange);
-  onChangeRef.current = onChange;
+  (0, import_react7.useEffect)(() => {
+    onChangeRef.current = onChange;
+  });
   const prevSettings = (0, import_react7.useRef)(settings);
   (0, import_react7.useEffect)(() => {
     if (prevSettings.current !== settings) {
@@ -699,7 +701,12 @@ function Provider({ children, defaults, expoBlur, initialValue, navigationBar, o
       onChangeRef.current?.(settings);
     }
   }, [settings]);
-  const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
+  const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
+  const theme = (0, import_react7.useMemo)(() => {
+    if (!computedTheme) return null;
+    if (!fontFamily) return computedTheme;
+    return { ...computedTheme, fonts: (0, import_react_native_paper4.configureFonts)({ config: { fontFamily } }) };
+  }, [computedTheme, fontFamily]);
   const called = (0, import_react7.useRef)(false);
   (0, import_react7.useEffect)(() => {
     if (theme && !called.current) {
@@ -756,18 +763,20 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
   const { bottom, left, right, top } = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const opacity = (0, import_react9.useRef)(new import_react_native5.Animated.Value(visible ? 1 : 0)).current;
+  const [opacity] = (0, import_react9.useState)(() => new import_react_native5.Animated.Value(visible ? 1 : 0));
   const [mounted, setMounted] = (0, import_react9.useState)(visible);
+  if (visible && !mounted) {
+    setMounted(true);
+  }
   (0, import_react9.useEffect)(() => {
     if (visible) {
-      setMounted(true);
       import_react_native5.Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic), toValue: 1, useNativeDriver: true }).start();
     } else {
       import_react_native5.Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
         if (finished) setMounted(false);
       });
     }
-  }, [visible]);
+  }, [visible, opacity, scale]);
   (0, import_react9.useEffect)(() => {
     if (!visible) return void 0;
     const onHardwareBackPress = () => {

package/dist/index.mjs

@@ -417,15 +417,15 @@ import { StyleSheet as StyleSheet4, TouchableOpacity, View as View4 } from "reac
 import { Icon, TouchableRipple, useTheme as useTheme4 } from "react-native-paper";
 
 // src/components/Dialog.tsx
-import React, { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import React, { useEffect as useEffect3, useState as useState4 } 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 { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // src/ThemeProvider.tsx
-import { createContext as createContext3, useCallback as useCallback2, useContext as useContext4, useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { createContext as createContext3, useCallback as useCallback2, useContext as useContext4, useEffect as useEffect2, useMemo, useRef, useState as useState3 } from "react";
 import { StatusBar as StatusBar2, StyleSheet, View } from "react-native";
-import { Provider as PaperProvider } from "react-native-paper";
+import { configureFonts, Provider as PaperProvider } from "react-native-paper";
 
 // src/useComputedTheme.ts
 import { useCallback, useEffect, useState as useState2 } from "react";
@@ -603,13 +603,15 @@ var BlurModuleContext = createContext3(void 0);
 var useBlurModule = () => useContext4(BlurModuleContext);
 var ReanimatedModuleContext = createContext3(void 0);
 var useReanimatedModule = () => useContext4(ReanimatedModuleContext);
-function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
+function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
   const [settings, setSettings] = useState3(() => ({ ...defaultThemeSettings, ...initialValue }));
   const set = useCallback2((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
   }, []);
   const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
+  useEffect2(() => {
+    onChangeRef.current = onChange;
+  });
   const prevSettings = useRef(settings);
   useEffect2(() => {
     if (prevSettings.current !== settings) {
@@ -617,7 +619,12 @@ function Provider({ children, defaults, expoBlur, initialValue, navigationBar, o
       onChangeRef.current?.(settings);
     }
   }, [settings]);
-  const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
+  const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
+  const theme = useMemo(() => {
+    if (!computedTheme) return null;
+    if (!fontFamily) return computedTheme;
+    return { ...computedTheme, fonts: configureFonts({ config: { fontFamily } }) };
+  }, [computedTheme, fontFamily]);
   const called = useRef(false);
   useEffect2(() => {
     if (theme && !called.current) {
@@ -674,18 +681,20 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
   const { bottom, left, right, top } = useSafeAreaInsets();
-  const opacity = useRef2(new Animated.Value(visible ? 1 : 0)).current;
+  const [opacity] = useState4(() => new Animated.Value(visible ? 1 : 0));
   const [mounted, setMounted] = useState4(visible);
+  if (visible && !mounted) {
+    setMounted(true);
+  }
   useEffect3(() => {
     if (visible) {
-      setMounted(true);
       Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 1, useNativeDriver: true }).start();
     } else {
       Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
         if (finished) setMounted(false);
       });
     }
-  }, [visible]);
+  }, [visible, opacity, scale]);
   useEffect3(() => {
     if (!visible) return void 0;
     const onHardwareBackPress = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.9.4",
+  "version": "0.10.0",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -76,6 +76,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-package-json": "^1.0.0",
     "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-native": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^13.0.0",
     "expo-blur": "^56.0.3",

package/src/ThemeProvider.tsx

@@ -1,6 +1,6 @@
-import { createContext, type ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { StatusBar, type StatusBarProps, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
-import { Provider as PaperProvider } from 'react-native-paper'
+import { configureFonts, Provider as PaperProvider } from 'react-native-paper'
 
 import type { ExpoBlurModule } from './components/BlurView'
 import type { ReanimatedModule } from './components/Dialog'
@@ -29,6 +29,12 @@ export type ProviderProps = {
   defaults?: PaperDefaults
   /** Injects expo-blur for `<BlurView>`. Pass `import * as ExpoBlur from 'expo-blur'`; omit to always render BlurView's solid fallback. */
   expoBlur?: ExpoBlurModule
+  /** 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. The one-line way to reskin an app's whole text to a custom typeface,
+   * instead of passing `fontFamily` to every individual Text/TextInput/Button across the app. Omit
+   * to keep each platform's system font (MD3's own default). */
+  fontFamily?: string
   initialValue?: Partial<ThemeSettings>
   /** Injects expo-navigation-bar so the Android nav bar icon style auto-syncs with the theme. Pass `import * as ExpoNavigationBar from 'expo-navigation-bar'`; omit (and don't pass onNavBarChange) to skip nav bar syncing entirely. */
   navigationBar?: ExpoNavigationBarModule
@@ -41,7 +47,7 @@ export type ProviderProps = {
   style?: StyleProp<ViewStyle>
 }
 
-export function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps) {
+export function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps) {
   const [settings, setSettings] = useState<ThemeSettings>(() => ({ ...defaultThemeSettings, ...initialValue }))
 
   const set = useCallback((patch: Partial<ThemeSettings>) => {
@@ -49,7 +55,9 @@ export function Provider({ children, defaults, expoBlur, initialValue, navigatio
   }, [])
 
   const onChangeRef = useRef(onChange)
-  onChangeRef.current = onChange
+  useEffect(() => {
+    onChangeRef.current = onChange
+  })
   const prevSettings = useRef(settings)
   useEffect(() => {
     if (prevSettings.current !== settings) {
@@ -58,7 +66,17 @@ export function Provider({ children, defaults, expoBlur, initialValue, navigatio
     }
   }, [settings])
 
-  const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony)
+  const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony)
+  // Layered on top of useComputedTheme's own output rather than folded into it — that hook only
+  // ever recomputes for a color/appearance/harmony change, and fontFamily is a completely
+  // independent axis; merging it there would mean either re-running the whole color computation on
+  // every fontFamily change (wasteful) or threading fontFamily through as a fourth computeTheme
+  // dependency for a value it never actually uses.
+  const theme = useMemo(() => {
+    if (!computedTheme) return null
+    if (!fontFamily) return computedTheme
+    return { ...computedTheme, fonts: configureFonts({ config: { fontFamily } }) }
+  }, [computedTheme, fontFamily])
   const called = useRef(false)
 
   useEffect(() => {

package/src/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { type ComponentType, type ReactNode, useEffect, useRef, useState } from 'react'
+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 { 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'
@@ -46,19 +46,22 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
   const { colors, isV3, roundness } = theme
   const { scale } = theme.animation
   const { bottom, left, right, top } = useSafeAreaInsets()
-  const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current
+  const [opacity] = useState(() => new Animated.Value(visible ? 1 : 0))
   const [mounted, setMounted] = useState(visible)
 
+  if (visible && !mounted) {
+    setMounted(true)
+  }
+
   useEffect(() => {
     if (visible) {
-      setMounted(true)
       Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 1, useNativeDriver: true }).start()
     } else {
       Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: Easing.out(Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
         if (finished) setMounted(false)
       })
     }
-  }, [visible])
+  }, [visible, opacity, scale])
 
   useEffect(() => {
     if (!visible) return undefined

package/src/useComputedTheme.ts

@@ -147,6 +147,7 @@ export function useComputedTheme(appearance: ThemeAppearance, color: string | Tr
   }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony])
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: first render must stay theme-less (README's onReady/splash-screen contract) and Appearance must not be read during render (SSR/hydration risk)
     computeTheme()
   }, [computeTheme])