Feat/precompile fonts

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 getFontPathsFromAssetsFolder(): string[] {
+  const fontsDir = path.resolve(__dirname, "assets/fonts")
+  if (!fs.existsSync(fontsDir)) return []
+
+  return fs
+    .readdirSync(fontsDir)
+    .filter((file) => file.endsWith(".ttf"))
+    .map((file) => `./assets/fonts/${file}`)
+}
 
 /**
  * Use tsx/cjs here so we can use TypeScript for our Config Plugins
@@ -16,9 +32,11 @@ import "tsx/cjs"
  */
 module.exports = ({ config }: ConfigContext): Partial<ExpoConfig> => {
   const existingPlugins = config.plugins ?? []
+  const fontPaths = getFontPathsFromAssetsFolder()
 
   return {
     ...config,
+
     ios: {
       ...config.ios,
       // This privacyManifests is to get you started.
@@ -36,6 +54,15 @@ module.exports = ({ config }: ConfigContext): Partial<ExpoConfig> => {
         ],
       },
     },
-    plugins: [...existingPlugins],
+    plugins: [
+      ...existingPlugins,
+      [
+        "expo-font",
+        {
+          fonts: fontPaths,
+        },
+      ],
+      require("./plugins/withSplashScreen").withSplashScreen,
+    ],
   }
 }

boilerplate/app.json

@@ -35,7 +35,6 @@
   },
   "plugins": [
     "expo-localization",
-    "expo-font",
     [
       "expo-splash-screen",
       {

boilerplate/app/app.tsx

@@ -19,17 +19,15 @@ if (__DEV__) {
 import "./utils/gestureHandler"
 
 import { useEffect, useState } from "react"
-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 { customFontsToLoad } from "./theme/typography"
+import { useCustomFonts } from "./theme/typography"
 import { loadDateFnsLocale } from "./utils/formatDate"
 import * as storage from "./utils/storage"
 
@@ -68,7 +66,7 @@ export function App() {
     isRestored: isNavigationStateRestored,
   } = useNavigationPersistence(storage, NAVIGATION_PERSISTENCE_KEY)
 
-  const [areFontsLoaded, fontLoadError] = useFonts(customFontsToLoad)
+  const [areFontsLoaded, fontLoadError] = useCustomFonts()
   const [isI18nInitialized, setIsI18nInitialized] = useState(false)
 
   useEffect(() => {
@@ -83,7 +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 || (!areFontsLoaded && !fontLoadError)) {
+  if (!isNavigationStateRestored || !isI18nInitialized || !areFontsLoaded || fontLoadError) {
     return null
   }
 

boilerplate/app/theme/typography.ts

@@ -2,30 +2,60 @@
 // markdown file and add links from here
 
 import { Platform } from "react-native"
-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 customFontsToLoad = {
-  spaceGroteskLight,
-  spaceGroteskRegular,
-  spaceGroteskMedium,
-  spaceGroteskSemiBold,
-  spaceGroteskBold,
+export const customFontsToLoad: Record<string, FontSource> =
+  Platform.OS === "web"
+    ? {
+        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"),
+      }
+    : {}
+
+/**
+ * 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] => {
+  const [areFontsLoaded, fontError] = useFonts(customFontsToLoad)
+  if (Platform.OS === "web") {
+    return [areFontsLoaded, fontError]
+  }
+
+  // On native, fonts are precompiled and ready
+  return [true, null]
 }
 
 const fonts = {
   spaceGrotesk: {
-    // Cross-platform Google font.
-    light: "spaceGroteskLight",
-    normal: "spaceGroteskRegular",
-    medium: "spaceGroteskMedium",
-    semiBold: "spaceGroteskSemiBold",
-    bold: "spaceGroteskBold",
+    light: Platform.select({
+      ios: "SpaceGrotesk-Light",
+      android: "SpaceGrotesk_300Light",
+    }),
+    normal: Platform.select({
+      ios: "SpaceGrotesk-Regular",
+      android: "SpaceGrotesk_400Regular",
+    }),
+    medium: Platform.select({
+      ios: "SpaceGrotesk-Medium",
+      android: "SpaceGrotesk_500Medium",
+    }),
+    semiBold: Platform.select({
+      ios: "SpaceGrotesk-SemiBold",
+      android: "SpaceGrotesk_600SemiBold",
+    }),
+    bold: Platform.select({
+      ios: "SpaceGrotesk-Bold",
+      android: "SpaceGrotesk_700Bold",
+    }),
   },
   helveticaNeue: {
     // iOS only font.

boilerplate/package.json

@@ -31,7 +31,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,12 +1,11 @@
 import { useEffect, useState } from "react"
 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 { customFontsToLoad } from "@/theme/typography"
+import { useCustomFonts } from "@/theme/typography"
 import { loadDateFnsLocale } from "@/utils/formatDate"
 
 SplashScreen.preventAutoHideAsync()
@@ -19,7 +18,8 @@ if (__DEV__) {
 }
 
 export default function Root() {
-  const [fontsLoaded, fontError] = useFonts(customFontsToLoad)
+
+  const [areFontsLoaded, fontLoadError] = useCustomFonts()
   const [isI18nInitialized, setIsI18nInitialized] = useState(false)
 
   useEffect(() => {
@@ -28,11 +28,11 @@ export default function Root() {
       .then(() => loadDateFnsLocale())
   }, [])
 
-  const loaded = fontsLoaded && isI18nInitialized
+  const loaded = areFontsLoaded && isI18nInitialized
 
   useEffect(() => {
-    if (fontError) throw fontError
-  }, [fontError])
+    if (fontLoadError ) throw fontLoadError
+  }, [fontLoadError])
 
   useEffect(() => {
     if (loaded) {