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 ... />)
}