refactor: override completely navigation fonts

Author: lukewalczak

docs/docs/guides/02-theming.mdx

@@ -2,7 +2,7 @@
 title: Theming
 ---
 
-import DynamicColorTheme from '@site/src/components/DynamicColorTheme.tsx'
+import DynamicColorTheme from '@site/src/components/DynamicColorTheme.tsx';
 
 # Theming
 
@@ -188,18 +188,18 @@ export default function Main() {
 
 ## Creating dynamic theme colors
 
-Dynamic Color Themes allows for generating two color schemes lightScheme and darkScheme, based on the provided source color. 
+Dynamic Color Themes allows for generating two color schemes lightScheme and darkScheme, based on the provided source color.
 Created schemes are following the Material Design 3 color system and covering colors structure from the Paper theme. User may generate these schemes using the following tool:
 
 <DynamicColorTheme />
 
 <br />
 
-Passed source color into the util is translated into tones to automatically provide the range of tones that map to color roles. 
+Passed source color into the util is translated into tones to automatically provide the range of tones that map to color roles.
 
 ![customColors](../../static/screenshots/custom-colors.png)
 
-*Source: [Material You Color System](https://m3.material.io/styles/color/the-color-system/custom-colors)*
+_Source: [Material You Color System](https://m3.material.io/styles/color/the-color-system/custom-colors)_
 
 ### Using schemes
 
@@ -240,11 +240,7 @@ To get started, follow the [installation instructions](https://github.com/pchmn/
 ```tsx
 import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
 import { useColorScheme } from 'react-native';
-import {
-  MD3DarkTheme,
-  MD3LightTheme,
-  PaperProvider,
-} from 'react-native-paper';
+import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper';
 import App from './src/App';
 
 export default function Main() {
@@ -269,29 +265,65 @@ export default function Main() {
 The `adaptNavigationTheme` function takes an existing React Navigation theme and returns a React Navigation theme using the colors from Material Design 3. This theme can be passed to `NavigationContainer` so that React Navigation's UI elements have the same color scheme as Paper.
 
 ```ts
-adaptNavigationTheme(themes)
+adaptNavigationTheme(themes);
+```
+
+:::info
+For users of `react-navigation` version `7.0.0` and above, `adaptNavigationTheme` overrides the **fonts** from the navigation theme as follows:
+
+```ts
+fonts: {
+  regular: {
+    fontFamily: materialTheme.fonts.bodyMedium.fontFamily,
+    fontWeight: materialTheme.fonts.bodyMedium.fontWeight,
+    letterSpacing: materialTheme.fonts.bodyMedium.letterSpacing,
+  },
+  medium: {
+    fontFamily: materialTheme.fonts.titleMedium.fontFamily,
+    fontWeight: materialTheme.fonts.titleMedium.fontWeight,
+    letterSpacing: materialTheme.fonts.titleMedium.letterSpacing,
+  },
+  bold: {
+    fontFamily: materialTheme.fonts.headlineSmall.fontFamily,
+    fontWeight: materialTheme.fonts.headlineSmall.fontWeight,
+    letterSpacing: materialTheme.fonts.headlineSmall.letterSpacing,
+  },
+  heavy: {
+    fontFamily: materialTheme.fonts.headlineLarge.fontFamily,
+    fontWeight: materialTheme.fonts.headlineLarge.fontWeight,
+    letterSpacing: materialTheme.fonts.headlineLarge.letterSpacing,
+  },
+}
 ```
 
+:::
+
 <b>Parameters:</b>
 
-| NAME        | TYPE        |
-| ----------- | ----------- |
-| themes      | object      |
+| NAME   | TYPE   |
+| ------ | ------ |
+| themes | object |
 
 Valid `themes` keys are:
 
-  * `reactNavigationLight` () - React Navigation compliant light theme.
-  * `reactNavigationDark` () - React Navigation compliant dark theme.
-  * `materialLight` () - React Native Paper compliant light theme.
-  * `materialDark` () - React Native Paper compliant dark theme.
+- `reactNavigationLight` () - React Navigation compliant light theme.
+- `reactNavigationDark` () - React Navigation compliant dark theme.
+- `materialLight` () - React Native Paper compliant light theme.
+- `materialDark` () - React Native Paper compliant dark theme.
 
 ```ts
 // App.tsx
 import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import { PaperProvider, MD3LightTheme, adaptNavigationTheme } from 'react-native-paper';
+import {
+  PaperProvider,
+  MD3LightTheme,
+  adaptNavigationTheme,
+} from 'react-native-paper';
 const Stack = createStackNavigator();
-const { LightTheme } = adaptNavigationTheme({ reactNavigationLight: DefaultTheme });
+const { LightTheme } = adaptNavigationTheme({
+  reactNavigationLight: DefaultTheme,
+});
 export default function App() {
   return (
     <PaperProvider theme={MD3LightTheme}>
@@ -312,12 +344,19 @@ By default, TypeScript works well whenever you change the value of the built-in
 
 There are two supported ways of overriding the theme:
 
-1. <b>Simple built-in theme overrides</b> - when you only customize the values and the whole theme schema remains the same
-2. <b>Advanced theme overrides</b> - when you <i>add new properties</i> or <i>change the built-in schema shape</i>
+1. <b>Simple built-in theme overrides</b> - when you only customize the values and
+   the whole theme schema remains the same
+2. <b>Advanced theme overrides</b> - when you <i>add new properties</i> or <i>
+     change the built-in schema shape
+   </i>
 
 :::caution
-TypeScript support for `withTheme` is currently limited to <b>Material You (MD3)</b> theme only. 
-<i>We are planning to provide a better support of handling custom theme overrides in future releases.</i>
+TypeScript support for `withTheme` is currently limited to <b>Material You (MD3)</b> theme only.
+
+<i>
+  We are planning to provide a better support of handling custom theme overrides
+  in future releases.
+</i>
 :::
 
 ### Simple built-in theme overrides
@@ -387,11 +426,7 @@ export default function Main() {
 
 ```ts
 import * as React from 'react';
-import {
-  MD3LightTheme,
-  PaperProvider,
-  useTheme,
-} from 'react-native-paper';
+import { MD3LightTheme, PaperProvider, useTheme } from 'react-native-paper';
 import App from './src/App';
 
 const theme = {
@@ -499,11 +534,7 @@ The final example for Material Design 2 would look like this:
 
 ```ts
 import * as React from 'react';
-import {
-  MD2LightTheme,
-  PaperProvider,
-  useTheme,
-} from 'react-native-paper';
+import { MD2LightTheme, PaperProvider, useTheme } from 'react-native-paper';
 import App from './src/App';
 
 const theme = {

src/core/__tests__/theming.test.tsx

@@ -238,22 +238,25 @@ describe('adaptNavigationTheme', () => {
         notification: MD3LightTheme.colors.error,
       },
       fonts: {
-        ...NavigationThemeWithFonts.fonts,
         regular: {
-          ...NavigationThemeWithFonts.fonts.regular,
-          fontFamily: MD3LightTheme.fonts.default.fontFamily,
+          fontFamily: MD3LightTheme.fonts.bodyMedium.fontFamily,
+          fontWeight: MD3LightTheme.fonts.bodyMedium.fontWeight,
+          letterSpacing: MD3LightTheme.fonts.bodyMedium.letterSpacing,
         },
         medium: {
-          ...NavigationThemeWithFonts.fonts.medium,
-          fontFamily: MD3LightTheme.fonts.default.fontFamily,
+          fontFamily: MD3LightTheme.fonts.titleMedium.fontFamily,
+          fontWeight: MD3LightTheme.fonts.titleMedium.fontWeight,
+          letterSpacing: MD3LightTheme.fonts.titleMedium.letterSpacing,
         },
         bold: {
-          ...NavigationThemeWithFonts.fonts.bold,
-          fontFamily: MD3LightTheme.fonts.default.fontFamily,
+          fontFamily: MD3LightTheme.fonts.headlineSmall.fontFamily,
+          fontWeight: MD3LightTheme.fonts.headlineSmall.fontWeight,
+          letterSpacing: MD3LightTheme.fonts.headlineSmall.letterSpacing,
         },
         heavy: {
-          ...NavigationThemeWithFonts.fonts.heavy,
-          fontFamily: MD3LightTheme.fonts.default.fontFamily,
+          fontFamily: MD3LightTheme.fonts.headlineLarge.fontFamily,
+          fontWeight: MD3LightTheme.fonts.headlineLarge.fontWeight,
+          letterSpacing: MD3LightTheme.fonts.headlineLarge.letterSpacing,
         },
       },
     });

src/core/theming.tsx

@@ -14,7 +14,6 @@ import type {
   MD3Theme,
   MD3AndroidColors,
   NavigationTheme,
-  NavigationFonts,
 } from '../types';
 
 export const DefaultTheme = MD3LightTheme;
@@ -132,26 +131,28 @@ const getAdaptedTheme = <T extends NavigationTheme>(
   };
 
   if ('fonts' in theme) {
-    const navigationFonts = theme.fonts as NavigationFonts;
     return {
       ...base,
       fonts: {
-        ...navigationFonts,
         regular: {
-          ...navigationFonts.regular,
-          fontFamily: materialTheme.fonts.default.fontFamily,
+          fontFamily: materialTheme.fonts.bodyMedium.fontFamily,
+          fontWeight: materialTheme.fonts.bodyMedium.fontWeight,
+          letterSpacing: materialTheme.fonts.bodyMedium.letterSpacing,
         },
         medium: {
-          ...navigationFonts.medium,
-          fontFamily: materialTheme.fonts.default.fontFamily,
+          fontFamily: materialTheme.fonts.titleMedium.fontFamily,
+          fontWeight: materialTheme.fonts.titleMedium.fontWeight,
+          letterSpacing: materialTheme.fonts.titleMedium.letterSpacing,
         },
         bold: {
-          ...navigationFonts.bold,
-          fontFamily: materialTheme.fonts.default.fontFamily,
+          fontFamily: materialTheme.fonts.headlineSmall.fontFamily,
+          fontWeight: materialTheme.fonts.headlineSmall.fontWeight,
+          letterSpacing: materialTheme.fonts.headlineSmall.letterSpacing,
         },
         heavy: {
-          ...navigationFonts.heavy,
-          fontFamily: materialTheme.fonts.default.fontFamily,
+          fontFamily: materialTheme.fonts.headlineLarge.fontFamily,
+          fontWeight: materialTheme.fonts.headlineLarge.fontWeight,
+          letterSpacing: materialTheme.fonts.headlineLarge.letterSpacing,
         },
       },
     };

src/types.tsx

@@ -214,26 +214,3 @@ export type NavigationTheme = {
     notification: string;
   };
 };
-
-type NavigationFontStyle = {
-  fontFamily: string;
-  fontWeight:
-    | 'normal'
-    | 'bold'
-    | '100'
-    | '200'
-    | '300'
-    | '400'
-    | '500'
-    | '600'
-    | '700'
-    | '800'
-    | '900';
-};
-
-export type NavigationFonts = {
-  regular: NavigationFontStyle;
-  medium: NavigationFontStyle;
-  bold: NavigationFontStyle;
-  heavy: NavigationFontStyle;
-};