Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

View sourceExpoReact NativePerformanceMotion

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills
title
Load fonts natively at build time
impact
LOW
impactDescription
fonts available at launch, no async loading
tags
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):

tsx
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):

json
// app.json{  "expo": {    "plugins": [      [        "expo-font",        {          "fonts": ["./assets/fonts/Geist-Bold.otf"]        }      ]    ]  }}
tsx
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