I hope this is the right place to post this! I’ve got a problem with my builds where my custom fonts and my expo-vector-icons icons don’t render in my built apps. Custom fonts default to sans-serif, and icons appear as squares with question marks and Asian glyphs.
In my Expo development versions, everything works just fine.
Here’s my package.json
:
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-native-community/masked-view": "0.1.6",
"@react-native-community/netinfo": "5.5.1",
"@react-navigation/bottom-tabs": "^5.3.3",
"@react-navigation/drawer": "^5.6.4",
"@react-navigation/native": "^5.2.3",
"@react-navigation/stack": "^5.2.18",
"@use-expo/font": "^2.0.0",
"axios": "^0.19.2",
"expo": "^37.0.0",
"expo-constants": "~9.0.0",
"expo-font": "~8.1.0",
"expo-image-picker": "~8.1.0",
"expo-image-picker-multiple": "^1.1.5",
"expo-permissions": "~8.1.0",
"expo-screen-orientation": "~1.0.0",
"expo-updates": "~0.1.2",
"install": "^0.13.0",
"jwt-decode": "^2.2.0",
"moment": "^2.25.0",
"nanoid": "^3.1.3",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-native": "0.61.4",
"react-native-aws3": "^0.0.9",
"react-native-collapsible": "^1.5.2",
"react-native-gesture-handler": "~1.6.0",
"react-native-image-zoom-viewer": "^2.2.27",
"react-native-mime-types": "^2.3.0",
"react-native-paper": "^3.9.0",
"react-native-picker-select": "^7.0.0",
"react-native-reanimated": "~1.7.0",
"react-native-render-html": "^4.2.0",
"react-native-safe-area-context": "0.7.3",
"react-native-screens": "~2.2.0",
"react-native-status-bar-height": "^2.5.0",
"react-native-unimodules": "~0.8.1",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.7",
"react-native-webview": "8.1.1"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"babel-jest": "~25.2.6",
"jest": "~25.2.6",
"react-test-renderer": "~16.9.0"
},
"jest": {
"preset": "react-native"
},
"private": true
}
And the output of Expo’s diagnostics:
Expo CLI 3.20.3 environment info:
System:
OS: Linux 5.6 Arch Linux
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 14.1.0 - ~/.nvm/versions/node/v14.1.0/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v14.1.0/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v14.1.0/bin/npm
npmPackages:
expo: ^37.0.0 => 37.0.9
react: 16.9.0 => 16.9.0
react-dom: 16.9.0 => 16.9.0
react-native: 0.61.4 => 0.61.4
react-native-web: ^0.11.7 => 0.11.7
npmGlobalPackages:
expo-cli: 3.20.3
And here’s an extract of the relevant code:
const App = () => {
useEffect(() => {
// Snip
_loadFontsAsync();
}, [])
const fonts = {
'Quicksand-Light': require('./assets/fonts/Quicksand-Light.ttf'),
'Quicksand-Medium': require('./assets/fonts/Quicksand-Medium.ttf'),
'Quicksand-Regular': require('./assets/fonts/Quicksand-Regular.ttf'),
'Quicksand-SemiBold': require('./assets/fonts/Quicksand-SemiBold.ttf'),
'Quicksand-Bold': require('./assets/fonts/Quicksand-Bold.ttf'),
'Ubuntu-Regular': require('./assets/fonts/Ubuntu-Regular.ttf'),
'Ubuntu-Bold': require('./assets/fonts/Ubuntu-Bold.ttf'),
'Ubuntu-Medium': require('./assets/fonts/Ubuntu-Medium.ttf'),
'Ubuntu-Light': require('./assets/fonts/Ubuntu-Light.ttf'),
'Ubuntu-Italic': require('./assets/fonts/Ubuntu-Italic.ttf'),
'Ubuntu-BoldItalic': require('./assets/fonts/Ubuntu-BoldItalic.ttf'),
...FontAwesome5.font,
...MaterialCommunityIcons.font
};
async function _loadFontsAsync() {
await Font.loadAsync(fonts);
setFontsLoaded(true)
}
if (!fontsLoaded) {
return <AppLoading />
} else {
return (
// Snip
)
}
}
I’ve been tearing my hair out over this all day, and I can see from GitHub that there have been issues in the past with Font.loadAsync - so if I’ve ended up installing any packages in desperation that I wasn’t meant to, let me know…
Here’s one seemingly relevant issue: Font.loadAsync not loading third-party fonts and also vector icons · Issue #6476 · expo/expo · GitHub (but as the fix is to update to an earlier version of the SDK, I haven’t followed it.)
I’m also not convinced that I’m loading the icon fonts right, but then, nothing really seemed to make a difference, and the normal fonts aren’t loading either.