React-native-vector-icons: Unrecognized font family 'FontAwesome'

[hepu-appmeup]

I keep getting this Red Screen and message despite of having done the Instructions and Troubleshooting in the Readme.
Anyone having the same or anything else to try?

Thanks

[benjamingeorge]

I had the same problem. I solved it by closing the ios Simulator, and restarting the RN packager in the terminal (run-ios). Or maybe you can open xCode and rebuild the project.

[nicoecheza]

Same problem here.
I have added the fonts to the Resources folder, edited Info.plist and also made sure they are listed in Copy Bundle Resources.
Also the bundle is succeding.

Anything else I can try?

[CoderStav]

Also having this problem, has anyone solved this?

[pannz]

updated!
the cache is to be blame for
delete ios/build folder, then use Xcode to rebuild, show the custom font!

---

same!
I have my custom font named my-font.ttf generated by Fontello, and I have set the font name as my-font at fontello font name inputbox before downlowd the font
then unpack the download file, the name in config.json is my-font , and the font folder there is my-font.ttf, my-font.eot ...,
I config the Info.plist add the <string>my-font.ttf</string> and make sure add in copy bundle resource and the Resources folder has list my-font.ttf
and I have reboot my app use react-native run-ios and also tried use Xcode run debug button.
still show Unrecognized fontFamily my-font

so, anything wrong? comfused

[chrise86]

I was having the same issue, then basically did what @benjamingeorge suggested and it started working.

[flute]

Same problem.
Firstly, I import folder, It failed.
Then I import font directly,It works

[oblador]

Seems solved, so closing 👍

[bossnass1986]

have tried everything here, still get the same issue

[austinyearlykim]

+1 benjamingeorge running react-native run-ios after closing down the simulator fixed the issue, thanks a bunch.

[jcollum]

I've tried a couple of the fixes here as well, not working.

Tried:

• deleting ios/build folder, build in xcode, start from xcode
• restarting the simulator
• clean & build from xcode

edit: yeahhh turns out I needed to follow the instructions and link the fonts into my xcode project.

[leizard]

I have the same problem after update RN and call react-native eject. Tried everything but no luck.

[guofoo]

Try the solution from this issue: https://github.com/oblador/react-native-vector-icons/issues/135

[ltfschoen]

Follow the instructions in the README including:

• Install the library npm install react-native-vector-icons --save
• Follow the steps in: iOS > Option: Manually

[jseverinson]

I had this problem and tried most suggested solutions without luck.

Turns out that I had previously imported the font from my Downloads folder on my computer, which I had then emptied. To solve this, make sure that your font still exists on your disk (ie the font is not red in Xcode) and the reference under "Build Phases" and then "Copy Bundle Resources" is to the still-existing font file.

Lesson learned: Always put a font file in the project folder before importing it into Xcode.

[ggross87]

react-native link react-native-vector-icons solved it for me.

[SamiChab]

I did:
npm install react-native-vector-icons --save
react-native link react-native-vector-icons
and stopped the packager. Then,
react-native run-ios
And it worked!

[yokesharun]

• Uninstall the existing app form the simulator or device
• Re-install this package using this cmd : npm install react-native-vector-icons --save
• Link the packages by using this cmd : react-native link react-native-vector-icons
• Rebuild the applictaion by using : react-native run-ios or react-native run-android
• this above steps worked for me .Hope this will help you also 👍

[vTrip]

Leaving this here for anyone who followed instructions to a tee and stick experiencing problems as I did.

• Ensure that you do follow the instructions outlined
• During your recompile step try deleting the app from the simulator and running it through run-ios or even run it through Xcode

I experienced success with the second step by running it in Xcode and restarting package manager. Seems as though there may be some caching going on that isn't necessarily cleared as intended by just re running 'run-ios` from the CLI.

_This is only from my experience in my specific scenario _

[tangkunyin]

@ggross87 thank you very much && solved it for me.

[hileix]

@pannz According to your method,it's works!thank you vary much.

[stefan030]

react-native link react-native-vector-icons solved it for me.

@ggross87 Still works perfectly, thanks man! Just make sure to restart simulator and it will work like a charm!

[developermhayden]

Closing simulator and cli then:
running:
react-native link

then run the app from command line (i.e. react-native run-ios)

Solved the issue for me.

[lukebrandonfarrell]

In my case I needed to re-authenticate FontAwesome Pro with:

./node_modules/.bin/fa5-upgrade

[abdulbasit1248]

go to your xcode project. select project
under General >Linked frameworks with binaries .Drag the file libRNVectorIcons.a into it. if it is not present in left side under Libraries then add it by right clickin from node modules

[mpmprudencio]

My app is now requiring FontAwesome5Brands-Regular is that new?

[nolan12345]

Option: With CocoaPods
Add the following to your Podfile and run pod update:

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
Edit Info.plist as described above.

If you are using use_frameworks! in your Podfile you instead need to dynamically load the icon font by doing Icon.loadFont() when boostrapping your application.

[youssame]

this command solve the problem for me react-native link react-native-vector-icons

[wanxchao]

I did:
npm install react-native-vector-icons --save
react-native link react-native-vector-icons
and stopped the packager. Then,
react-native run-ios
And it worked!

Thank you

[HannahCarney]

cd ios
pod install

[SanuKumar]

Same problem here.
I have added the fonts to the Resources folder, edited Info.plist and also made sure they are listed in Copy Bundle Resources.
Also the bundle is succeding.

Anything else I can try?

try adding this

import Icon from 'react-native-vector-icons/dist/FontAwesome';
Icon.loadFont();

[Piteraguayo]

So, after hours of researching, I found the solution. The probleme with Fontawesome or WHATEVER font we want to add on RN V0.6> is that the fonts from "react-native-vector-icons" are not linked well from the node_modules folder. This is what I did:

• create a folder "assets/fonts" on the RN root project

• Copy the ttf files there and, HERE IS THE BUG, the name of the files has to be "lowercase.ttf" or "lowercase_whatever_also_lowercase.ttf". If you put Uppercases or "-" it will crash. don't know why.

• create a file "react-native.config.js" on the RN project and paste the following:
  module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts'] };

• And finnally execute the follwing on the terminal:

react-native start --reset-cache
react-native link
npm run ios

EDIT:
Found another issue: on IOS, we need to call the fontFamily by the name of the font (the one the TTF shows when you click on it on whatever editor) but on ANDROID we need to call the fontFamily by the NAME OF THE FILE. Very weird :)

So, imagine we have a "roboto_regular.ttf" file (on assets folder), we need to create the style for "fontFamily" in the following way:
import { Platform } from "react-native";
{ fontFamily: Platform.OS === 'android' ? 'roboto_regular' : 'Roboto-Regular' }

[douglasrcjames]

@Piteraguayo that fixed it for me, but I don't think that is how they intend for the lib to work. Hopefully they fix in the future!

[Piteraguayo]

@Piteraguayo that fixed it for me, but I don't think that is how they intend for the lib to work. Hopefully they fix in the future!

Yes I know, but it's a (weird) bug :)