HausApp/.agents/skills/vercel-react-native-skills/rules/fonts-config-plugin.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Load fonts natively at build time	LOW	fonts available at launch, no async loading	fonts, expo, performance, config-plugin

Use Expo Config Plugin for Font Loading

Use the expo-font config plugin to embed fonts at build time instead of useFonts or Font.loadAsync. Embedded fonts are more efficient.

Incorrect (async font loading):

import { useFonts } from "expo-font";
import { Text, View } from "react-native";

function App() {
  const [fontsLoaded] = useFonts({
    "Geist-Bold": require("./assets/fonts/Geist-Bold.otf"),
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View>
      <Text style={{ fontFamily: "Geist-Bold" }}>Hello</Text>
    </View>
  );
}

Correct (config plugin, fonts embedded at build):

// app.json
{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "fonts": ["./assets/fonts/Geist-Bold.otf"]
        }
      ]
    ]
  }
}

import { Text, View } from "react-native";

function App() {
  // No loading state needed—font is already available
  return (
    <View>
      <Text style={{ fontFamily: "Geist-Bold" }}>Hello</Text>
    </View>
  );
}

After adding fonts to the config plugin, run npx expo prebuild and rebuild the native app.

Reference: Expo Font Documentation