refactor: adapt the latest changes

Author: lukewalczak

example/src/RootNavigator.tsx

@@ -20,8 +20,7 @@ export default function Root() {
   return (
     <View style={styles.stackWrapper}>
       <Stack.Navigator
-        screenOptions={({ navigation }) => ({
-          detachPreviousScreen: !navigation.isFocused(),
+        screenOptions={() => ({
           cardStyleInterpolator,
           header: ({ navigation, route, options, back }) => (
             <Appbar.Header elevated>

example/src/index.native.tsx

@@ -28,6 +28,7 @@ import {
   CombinedDefaultTheme,
   CombinedDarkTheme,
   createConfiguredFontTheme,
+  createConfiguredFontNavigationTheme,
 } from '../utils/themes';
 
 const PERSISTENCE_KEY = 'NAVIGATION_STATE';
@@ -192,6 +193,8 @@ export default function PaperExample() {
 
   const combinedTheme = isDarkMode ? CombinedDarkTheme : CombinedDefaultTheme;
   const configuredFontTheme = createConfiguredFontTheme(combinedTheme);
+  const configuredFontNavigationTheme =
+    createConfiguredFontNavigationTheme(combinedTheme);
 
   return (
     <PaperProvider
@@ -200,8 +203,9 @@ export default function PaperExample() {
     >
       <PreferencesContext.Provider value={preferences}>
         <NavigationContainer
-          // @ts-ignore - will be adjusted after merging https://github.com/callstack/react-native-paper/pull/4690
-          theme={combinedTheme}
+          theme={
+            customFontLoaded ? configuredFontNavigationTheme : combinedTheme
+          }
           initialState={initialState}
           onStateChange={(state) =>
             AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))

example/src/index.tsx

@@ -22,6 +22,7 @@ import App from './RootNavigator';
 import {
   CombinedDarkTheme,
   CombinedDefaultTheme,
+  createConfiguredFontNavigationTheme,
   createConfiguredFontTheme,
 } from '../utils/themes';
 
@@ -149,6 +150,8 @@ export default function PaperExample() {
 
   const combinedTheme = isDarkMode ? CombinedDarkTheme : CombinedDefaultTheme;
   const configuredFontTheme = createConfiguredFontTheme(combinedTheme);
+  const configuredFontNavigationTheme =
+    createConfiguredFontNavigationTheme(combinedTheme);
 
   return (
     <PaperProvider
@@ -157,8 +160,9 @@ export default function PaperExample() {
     >
       <PreferencesContext.Provider value={preferences}>
         <NavigationContainer
-          // @ts-ignore - will be adjusted after merging https://github.com/callstack/react-native-paper/pull/4690
-          theme={combinedTheme}
+          theme={
+            customFontLoaded ? configuredFontNavigationTheme : combinedTheme
+          }
           initialState={initialState}
           onStateChange={(state) =>
             AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))

example/utils/themes.ts

@@ -21,6 +21,10 @@ export const CombinedDefaultTheme = {
     ...MD3LightTheme.colors,
     ...LightTheme.colors,
   },
+  fonts: {
+    ...MD3LightTheme.fonts,
+    ...LightTheme.fonts,
+  },
 };
 
 export const CombinedDarkTheme = {
@@ -30,6 +34,10 @@ export const CombinedDarkTheme = {
     ...MD3DarkTheme.colors,
     ...DarkTheme.colors,
   },
+  fonts: {
+    ...MD3DarkTheme.fonts,
+    ...DarkTheme.fonts,
+  },
 };
 
 type CombinedTheme = typeof CombinedDefaultTheme;
@@ -42,3 +50,26 @@ export const createConfiguredFontTheme = (theme: CombinedTheme) => ({
     },
   }),
 });
+
+export const createConfiguredFontNavigationTheme = (theme: CombinedTheme) => ({
+  ...theme,
+  fonts: {
+    ...theme.fonts,
+    regular: {
+      ...theme.fonts.regular,
+      fontFamily: 'Abel',
+    },
+    medium: {
+      ...theme.fonts.medium,
+      fontFamily: 'Abel',
+    },
+    heavy: {
+      ...theme.fonts.heavy,
+      fontFamily: 'Abel',
+    },
+    bold: {
+      ...theme.fonts.bold,
+      fontFamily: 'Abel',
+    },
+  },
+});