実装背景
FontAwesomeでアイコンを実装していて、Navigationを導入しようとして、
react-navigationをnpm installした時に上記のエラーに遭遇した。
エラー内容
fontFamily "FontAwesome" is not a system font and has not been loaded through Font.loadAsync.
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
- If this is a custom font, be sure to load it with Font.loadAsync.
ライブラリ依存関係
package.json
"dependencies": {
"@expo/vector-icons": "^10.2.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/native": "^5.7.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.4.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.3",
"expo": "~37.0.0",
"expo-font": "^8.2.1",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.7.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.3.7",
"react-navigation-stack": "^2.3.13"
},
解決方法
https://github.com/expo/expo/issues/5507
こちらのissueを見ると、
rm -rf ./node_modules/expo/node_modules/expo-font/
上記をTerminalで実行するしか対応方法はなさそう・・。