expo-font-loader

Almost 2 years ago I've shared a little hack for expo-font. Now, it's improved and it's a npm package!

It's about smartly loading and using fonts with @expo-google-fonts and icons with @expo/vector-icons - icons are actually fonts!

Without this, you have to manually type the fontFamily in a Text style, e.g. fontFamily: 'Roboto_500Medium'. This is bad because you may not know or forget exactly what is its name, you may make a typo, you may have forgot to load it, you have to fully type it...

With this package, you speficify the fonts to be loaded, and it's returned a Fonts (or F, alias) object to be used in the fontFamily. As it's type smart, when you have fontFamily: F., the IntelliSense will show all the available fontsFamilies you can use, and you can safely and quickly pick the one you want. It will complete with for example F.Roboto_500Medium. It's very useful when dealing with various fontsFamilies, so you can see all the options and quickly pick the one that best fits the text.

If you remove a font to be loaded and it's being used somewhere, there will be a Type error, as it knows that font isn't available to be used.

💿 Installation

expo install expo-font expo-font-loader

To avoid incompabilities of Expo SDK versions, we install expo-font with expo install.

📖 Usage

Setup

import { Platform } from 'react-native';
// Your icons to be loaded on start
import { Entypo, MaterialCommunityIcons } from '@expo/vector-icons';
// Your fonts to be loaded on start
import * as Roboto from '@expo-google-fonts/roboto';
// You can load single fonts instead of the whole family
import { Inter_900Black } from '@expo-google-fonts/inter';
import { createFontsToLoad } from 'expo-font-loader'

// F is an alias to Fonts, as I is an alias to Icons.
export const { F, Icons, useFonts, loadFonts } = createFontsToLoad({
  fontsToLoad: {
    ...Roboto,
    Inter_900Black
  },
  // If we don't previously load the icons, they may take a while to show up!
  iconsToLoad: {
    MaterialCommunityIcons,
    Entypo,
  },
  aliases: {
    monospace: Platform.OS === 'ios' ? 'Courier' : 'monospace', // 'monospace' is automatically added by default!
  },
});

App init

import { useFonts } from './fonts.ts'

const App () => {
  /**
   * 1.1.0 Update!
   * You can now use loadFonts instead of useFonts, to be used instead of Font.loadAsync(fonts)
   * as described in https://docs.expo.dev/versions/latest/sdk/splash-screen.
   * */
  const [fontsLoaded, error] = useFonts();

  if (!fontsLoaded)
    // https://docs.expo.dev/versions/latest/sdk/app-loading/
    return <AppLoading/>

  return <Components ... />
}

Font and icon usage

const styles = StyleSheet.create({
  text: {
    // Type safe and smart! And loaded when used!
    fontFamily: F.Roboto_500Medium
  },
  monoText: {
    // Alias are used in the same way!
    fontFamily: F.monospace
  }
});

function Component() {
  return (<Icons.MaterialCommunityIcons ... />)
}

📰 Changelog