CODEWITHSUNDEEP
react-nativeexporeact-native-vector-icons
mginn
mginn

Reputation: 16104

Expo vector-icons, font not loading

Getting the following error in relation to Expo/vector-icons ever since upgrading to Expo 34.

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.

I have tried manually loading the font in App.js with

Font.loadAsync({FontAwesome: require("../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/FontAwesome.ttf")})

but it has no effect. I have updated expo-font to the latest version, cleared node_modules and package-lock, and rebuilt the project.

Any clues?

Upvotes: 6

Views: 10487

Answers (6)

Isaac Frank
Isaac Frank

Reputation: 129

For me, the fix was to update the packages.

First, you need to update your app.json or app.config.json and make sure sdkVersion points to the right version (expo version in your package.json.. this can be removed in recent sdks, expo is smart enough to detect what sdk you need based on your package.json

Then simply run npx expo install --fix, this should fix your dependencies and all should be good

Upvotes: 0

Pravin S.
Pravin S.

Reputation: 485

  • Delete your package-lock.json
  • Delete your .expo
  • Execute npm i
  • Run your App

and import * as FontAwesome from "@expo/vector-icon";

Upvotes: 8

Abass Dev
Abass Dev

Reputation: 1

Try this...

  1. rm yarn.lock OR rm package.json.lock
  2. rm -rf ./.expo
  3. yarn install OR npm install
  4. npx expo start -c // Clear the cache

You're done!

Upvotes: 0

Giorgi Gvimradze
Giorgi Gvimradze

Reputation: 2129

expo doctor --fix-dependencies fixed it.

Upvotes: 5

Ankur Kedia
Ankur Kedia

Reputation: 3853

I updated the expo-font package to the version shown in the warnings and it worked for me.

Upvotes: 2

CampbellMG
CampbellMG

Reputation: 2220

Not a fix but a workaround as I had the same problem and couldn't find a solution.

Try changing 

import Font from 'expo-font';

to 

import {Font} from 'expo';

Edit: Looks like there might be a fix for the issue I was experiencing, try updating to [email protected] and [email protected]

Upvotes: 0

Related Questions