fix: new approach to load fonts for all platforms

Author: ChristopherGabba

boilerplate/app.config.ts

@@ -1,4 +1,20 @@
 import { ExpoConfig, ConfigContext } from "@expo/config"
+import fs from "fs"
+import path from "path"
+
+/**
+ * Automatically discover all .ttf fonts under app/assets/fonts
+ * so we never have to hardcode them.
+ */
+function getFontFiles(): string[] {
+  const fontsDir = path.resolve(__dirname, "app/assets/fonts")
+  if (!fs.existsSync(fontsDir)) return []
+
+  return fs
+    .readdirSync(fontsDir)
+    .filter((file) => file.endsWith(".ttf"))
+    .map((file) => `./app/assets/fonts/${file}`)
+}
 
 /**
  * Use ts-node here so we can use TypeScript for our Config Plugins
@@ -14,9 +30,10 @@ require("ts-node/register")
  */
 module.exports = ({ config }: ConfigContext): Partial<ExpoConfig> => {
   const existingPlugins = config.plugins ?? []
-
+  const fonts = getFontFiles()
   return {
     ...config,
+
     ios: {
       ...config.ios,
       // This privacyManifests is to get you started.
@@ -34,6 +51,15 @@ module.exports = ({ config }: ConfigContext): Partial<ExpoConfig> => {
         ],
       },
     },
-    plugins: [...existingPlugins, require("./plugins/withSplashScreen").withSplashScreen],
+    plugins: [
+      ...existingPlugins,
+      [
+        "expo-font",
+        {
+          fonts,
+        },
+      ],
+      require("./plugins/withSplashScreen").withSplashScreen,
+    ],
   }
 }

boilerplate/app.json

@@ -35,18 +35,6 @@
   },
   "plugins": [
     "expo-localization",
-    [
-      "expo-font",
-      {
-        "fonts": [
-          "./assets/fonts/SpaceGrotesk-300Light.ttf",
-          "./assets/fonts/SpaceGrotesk-400Regular.ttf",
-          "./assets/fonts/SpaceGrotesk-500Medium.ttf",
-          "./assets/fonts/SpaceGrotesk-600SemiBold.ttf",
-          "./assets/fonts/SpaceGrotesk-700Bold.ttf"
-        ]
-      }
-    ],
     [
       "expo-splash-screen",
       {

boilerplate/app/app.tsx

@@ -19,18 +19,15 @@ if (__DEV__) {
 import "./utils/gestureHandler"
 
 import { useEffect, useState } from "react"
-import { Platform } from "react-native"
-import { useFonts } from "expo-font"
 import * as Linking from "expo-linking"
 import { KeyboardProvider } from "react-native-keyboard-controller"
 import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context"
-
 import { AuthProvider } from "./context/AuthContext" // @demo remove-current-line
 import { initI18n } from "./i18n"
 import { AppNavigator } from "./navigators/AppNavigator"
 import { useNavigationPersistence } from "./navigators/navigationUtilities"
 import { ThemeProvider } from "./theme/context"
-import { customFontsToLoadWebOnly } from "./theme/typography"
+import { useCustomFonts } from "./theme/typography"
 import { loadDateFnsLocale } from "./utils/formatDate"
 import * as storage from "./utils/storage"
 
@@ -69,11 +66,7 @@ export function App() {
     isRestored: isNavigationStateRestored,
   } = useNavigationPersistence(storage, NAVIGATION_PERSISTENCE_KEY)
 
-  // We load fonts dynamically for web only, the rest are handled by
-  // the expo-font config plugin in `app.json`. If not using web,
-  // you can delete this permissive check along with associated
-  // code in `typography'.
-  const [areFontsLoadedWebOnly, fontLoadErrorWebOnly] = useFonts(customFontsToLoadWebOnly)
+  const [areFontsLoaded, fontLoadError] = useCustomFonts()
   const [isI18nInitialized, setIsI18nInitialized] = useState(false)
 
   useEffect(() => {
@@ -88,11 +81,7 @@ export function App() {
   // In iOS: application:didFinishLaunchingWithOptions:
   // In Android: https://stackoverflow.com/a/45838109/204044
   // You can replace with your own loading component if you wish.
-  if (
-    !isNavigationStateRestored ||
-    !isI18nInitialized ||
-    (!areFontsLoadedWebOnly && !fontLoadErrorWebOnly && Platform.OS === "web")
-  ) {
+  if (!isNavigationStateRestored || !isI18nInitialized || !areFontsLoaded || fontLoadError) {
     return null
   }
 

boilerplate/app/theme/typography.ts

@@ -2,56 +2,63 @@
 // markdown file and add links from here
 
 import { Platform } from "react-native"
-import type { FontSource } from "expo-font"
-import {
-  SpaceGrotesk_300Light as spaceGroteskLight,
-  SpaceGrotesk_400Regular as spaceGroteskRegular,
-  SpaceGrotesk_500Medium as spaceGroteskMedium,
-  SpaceGrotesk_600SemiBold as spaceGroteskSemiBold,
-  SpaceGrotesk_700Bold as spaceGroteskBold,
-} from "@expo-google-fonts/space-grotesk"
+import { FontSource, useFonts } from "expo-font"
 
-export const customFontsToLoadWebOnly =
-  Platform.OS === "web"
-    ? {
-        spaceGroteskLight,
-        spaceGroteskRegular,
-        spaceGroteskMedium,
-        spaceGroteskSemiBold,
-        spaceGroteskBold,
-      }
-    : ({} as Record<string, FontSource>)
+export const FONT_FILES: Record<string, string> = {
+  SpaceGrotesk_300Light: require("../../assets/fonts/SpaceGrotesk-300Light.ttf"),
+  SpaceGrotesk_400Regular: require("../../assets/fonts/SpaceGrotesk-400Regular.ttf"),
+  SpaceGrotesk_500Medium: require("../../assets/fonts/SpaceGrotesk-500Medium.ttf"),
+  SpaceGrotesk_600SemiBold: require("../../assets/fonts/SpaceGrotesk-600SemiBold.ttf"),
+  SpaceGrotesk_700Bold: require("../../assets/fonts/SpaceGrotesk-700Bold.ttf"),
+}
+
+export const customFontsToLoad = FONT_FILES as Record<string, FontSource>
+
+/**
+ * On iOS and Android, the fonts are embedded as part of the app binary
+ * using the expo config plugin in `app.json`. See the project
+ * [`app.json`](../../app.json) for the expo-fonts configuration. The assets
+ * are added via the `app/assets/fonts` folder. This config plugin
+ * does NOT work for web, so we have to dynamically load the fonts via this hook.
+ *
+ * For more info: https://docs.expo.dev/versions/latest/sdk/font/
+ */
+export const useCustomFonts = (): [boolean, Error | null] => {
+  if (Platform.OS === "web") {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useFonts(customFontsToLoad)
+  }
+
+  // On native, fonts are precompiled and ready
+  return [true, null]
+}
 
 const fonts = {
   spaceGrotesk: {
-    // The way expo-fonts config plugin applies
-    // fonts to the individual platforms, the names come out different
-    // on ios and android. For web, we have to load fonts asynchronously
-    // using useFonts.
     light: Platform.select({
       ios: "SpaceGrotesk-Light",
       android: "SpaceGrotesk-300Light",
-      web: "spaceGroteskLight",
+      web: "SpaceGrotesk_300Light",
     }),
     normal: Platform.select({
       ios: "SpaceGrotesk-Regular",
       android: "SpaceGrotesk-400Regular",
-      web: "spaceGroteskRegular",
+      web: "SpaceGrotesk_400Regular",
     }),
     medium: Platform.select({
       ios: "SpaceGrotesk-Medium",
       android: "SpaceGrotesk-500Medium",
-      web: "spaceGroteskMedium",
+      web: "SpaceGrotesk_500Medium",
     }),
     semiBold: Platform.select({
       ios: "SpaceGrotesk-SemiBold",
       android: "SpaceGrotesk-600SemiBold",
-      web: "spaceGroteskSemiBold",
+      web: "SpaceGrotesk_600SemiBold",
     }),
     bold: Platform.select({
       ios: "SpaceGrotesk-Bold",
       android: "SpaceGrotesk-700Bold",
-      web: "spaceGroteskBold",
+      web: "SpaceGrotesk_700Bold",
     }),
   },
   helveticaNeue: {

boilerplate/package.json

@@ -29,7 +29,6 @@
     "build:android:prod": "eas build --profile production --platform android --local"
   },
   "dependencies": {
-    "@expo-google-fonts/space-grotesk": "^0.4.0",
     "@expo/metro-runtime": "~6.1.2",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",

boilerplate/src/app/_layout.tsx

@@ -1,13 +1,11 @@
 import { useEffect, useState } from "react"
-import { Platform } from "react-native"
 import { Slot, SplashScreen } from "expo-router"
-import { useFonts } from "@expo-google-fonts/space-grotesk"
 import { KeyboardProvider } from "react-native-keyboard-controller"
 import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context"
 
 import { initI18n } from "@/i18n"
 import { ThemeProvider } from "@/theme/context"
-import { customFontsToLoadWebOnly } from "@/theme/typography"
+import { useCustomFonts } from "@/theme/typography"
 import { loadDateFnsLocale } from "@/utils/formatDate"
 
 SplashScreen.preventAutoHideAsync()
@@ -22,11 +20,8 @@ if (__DEV__) {
 export { ErrorBoundary } from "@/components/ErrorBoundary/ErrorBoundary"
 
 export default function Root() {
-  // We load fonts dynamically for web only, the rest are handled by
-  // the expo-font config plugin in `app.json`. If not using web, 
-  // you can delete this permissive check along with associated
-  // code in `typography'.
-  const [fontsLoadedWebOnly, fontErrorWebOnly] = useFonts(customFontsToLoadWebOnly)
+
+  const [areFontsLoaded, fontLoadError] = useCustomFonts()
   const [isI18nInitialized, setIsI18nInitialized] = useState(false)
 
   useEffect(() => {
@@ -35,11 +30,11 @@ export default function Root() {
       .then(() => loadDateFnsLocale())
   }, [])
 
-  const loaded = Platform.OS === "web" ? fontsLoadedWebOnly && isI18nInitialized : isI18nInitialized
+  const loaded = areFontsLoaded && isI18nInitialized
 
   useEffect(() => {
-    if (fontErrorWebOnly && Platform.OS === "web") throw fontErrorWebOnly
-  }, [fontErrorWebOnly])
+    if (fontLoadError ) throw fontLoadError
+  }, [fontLoadError])
 
   useEffect(() => {
     if (loaded) {