Feat/precompile fonts

boilerplate/app.json

@@ -35,7 +35,67 @@
   },
   "plugins": [
     "expo-localization",
-    "expo-font",
+    [
+      "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"
+        ],
+        "android": {
+          "fonts": [
+            {
+              "fontFamily": "SpaceGrotesk-300Light",
+              "fontDefinitions": [
+                {
+                  "path": "./assets/fonts/SpaceGrotesk-300Light.ttf",
+                  "weight": 300
+                }
+              ]
+            },
+            {
+              "fontFamily": "SpaceGrotesk-400Regular",
+              "fontDefinitions": [
+                {
+                  "path": "./assets/fonts/SpaceGrotesk-400Regular.ttf",
+                  "weight": 400
+                }
+              ]
+            },
+            {
+              "fontFamily": "SpaceGrotesk-500Medium",
+              "fontDefinitions": [
+                {
+                  "path": "./assets/fonts/SpaceGrotesk-500Medium.ttf",
+                  "weight": 500
+                }
+              ]
+            },
+            {
+              "fontFamily": "SpaceGrotesk-600SemiBold",
+              "fontDefinitions": [
+                {
+                  "path": "./assets/fonts/SpaceGrotesk-600SemiBold.ttf",
+                  "weight": 600
+                }
+              ]
+            },
+            {
+              "fontFamily": "SpaceGrotesk-700Bold",
+              "fontDefinitions": [
+                {
+                  "path": "./assets/fonts/SpaceGrotesk-700Bold.ttf",
+                  "weight": 700
+                }
+              ]
+            }
+          ]
+        }
+      }
+    ],
     [
       "expo-splash-screen",
       {

boilerplate/app/app.tsx

@@ -19,6 +19,7 @@ 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"
@@ -29,7 +30,7 @@ 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 { customFontsToLoadWebOnly } from "./theme/typography"
 import { loadDateFnsLocale } from "./utils/formatDate"
 import * as storage from "./utils/storage"
 
@@ -68,7 +69,11 @@ export function App() {
     isRestored: isNavigationStateRestored,
   } = useNavigationPersistence(storage, NAVIGATION_PERSISTENCE_KEY)
 
-  const [areFontsLoaded, fontLoadError] = useFonts(customFontsToLoad)
+  // 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 [isI18nInitialized, setIsI18nInitialized] = useState(false)
 
   useEffect(() => {
@@ -83,7 +88,11 @@ 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 ||
+    (!areFontsLoadedWebOnly && !fontLoadErrorWebOnly && Platform.OS === "web")
+  ) {
     return null
   }
 

boilerplate/app/theme/typography.ts

@@ -2,6 +2,7 @@
 // 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,
@@ -10,22 +11,48 @@ import {
   SpaceGrotesk_700Bold as spaceGroteskBold,
 } from "@expo-google-fonts/space-grotesk"
 
-export const customFontsToLoad = {
-  spaceGroteskLight,
-  spaceGroteskRegular,
-  spaceGroteskMedium,
-  spaceGroteskSemiBold,
-  spaceGroteskBold,
-}
+export const customFontsToLoadWebOnly =
+  Platform.OS === "web"
+    ? {
+        spaceGroteskLight,
+        spaceGroteskRegular,
+        spaceGroteskMedium,
+        spaceGroteskSemiBold,
+        spaceGroteskBold,
+      }
+    : ({} as Record<string, FontSource>)
 
 const fonts = {
   spaceGrotesk: {
-    // Cross-platform Google font.
-    light: "spaceGroteskLight",
-    normal: "spaceGroteskRegular",
-    medium: "spaceGroteskMedium",
-    semiBold: "spaceGroteskSemiBold",
-    bold: "spaceGroteskBold",
+    // 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",
+    }),
+    normal: Platform.select({
+      ios: "SpaceGrotesk-Regular",
+      android: "SpaceGrotesk-400Regular",
+      web: "spaceGroteskRegular",
+    }),
+    medium: Platform.select({
+      ios: "SpaceGrotesk-Medium",
+      android: "SpaceGrotesk-500Medium",
+      web: "spaceGroteskMedium",
+    }),
+    semiBold: Platform.select({
+      ios: "SpaceGrotesk-SemiBold",
+      android: "SpaceGrotesk-600SemiBold",
+      web: "spaceGroteskSemiBold",
+    }),
+    bold: Platform.select({
+      ios: "SpaceGrotesk-Bold",
+      android: "SpaceGrotesk-700Bold",
+      web: "spaceGroteskBold",
+    }),
   },
   helveticaNeue: {
     // iOS only font.

boilerplate/src/app/_layout.tsx

@@ -1,12 +1,13 @@
 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 { customFontsToLoad } from "@/theme/typography"
+import { customFontsToLoadWebOnly } from "@/theme/typography"
 import { loadDateFnsLocale } from "@/utils/formatDate"
 
 SplashScreen.preventAutoHideAsync()
@@ -21,7 +22,11 @@ if (__DEV__) {
 export { ErrorBoundary } from "@/components/ErrorBoundary/ErrorBoundary"
 
 export default function Root() {
-  const [fontsLoaded, fontError] = useFonts(customFontsToLoad)
+  // 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 [isI18nInitialized, setIsI18nInitialized] = useState(false)
 
   useEffect(() => {
@@ -30,11 +35,11 @@ export default function Root() {
       .then(() => loadDateFnsLocale())
   }, [])
 
-  const loaded = fontsLoaded && isI18nInitialized
+  const loaded = Platform.OS === "web" ? fontsLoadedWebOnly && isI18nInitialized : isI18nInitialized
 
   useEffect(() => {
-    if (fontError) throw fontError
-  }, [fontError])
+    if (fontErrorWebOnly && Platform.OS === "web") throw fontErrorWebOnly
+  }, [fontErrorWebOnly])
 
   useEffect(() => {
     if (loaded) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ignite-cli",
-  "version": "11.2.0",
+  "version": "11.2.1",
   "description": "Infinite Red's hottest boilerplate for React Native.",
   "bin": {
     "ignite": "bin/ignite",