Cannot reproduce, the examples within this repo run just fine with react-native run-ios. It's likely a cache or something, have you tried deleting build intermediates?

I tried:

• rm -fr $TMPDIR/react-*
• watchman watch-del-all

Do you mean this or something else?

it wasn't connected to react-native-vector-icons. Basically I switched my build to release so that react-native run-ios wasn't compile in the proper way. Once I rollback to debug I got my custom icons :)

Hello. I am sorry for raising a dead thread, but I have run into this exact problem, however the fix listed here does not apply (at least I don't think it does).

Here is my situation. The app has had this package installed and working fine for awhile now with only 1 custom iconFont for our company. Recently we have needed to branch out, so I added the FontAwesome font to the project. I followed all of the steps and everything works great if you run from xcode. I also completely removed the package and reinstalled using rnpm but got the same result. I have tried reseting npm cache, deleting node_modules folders and reinstalling everything, killing tempdir, and deleting xcode project derived data. I am out of options. Any help would be greatly appreciated!

I'm having the same issue now with RN 0.34.x and 0.35.0, Xcode 8. Basically the font is loaded when run from XCode (debug and release) but not picked up when run with npm and react-native on the command line.

Did anyone get this fixed?

I am having the exact same issue as @ekhall. I upgraded to RN 0.35.0 and running Xcode 8. The fonts will load fine if I run the project through Xcode but get the Unrecognized font family error with react-native run-ios.

I tried downgrading back to RN 0.34.0 but that didn't help.

I got the issue fixed for RN 0.35.0 and Xcode 8. Delete the items in your build folder under the ios folder. Then rebuild the project with react-native run-ios.

This will start you off with a clean slate.

Pretty much the same answer here - something got very messed up with the iOS build shortly after this post. I created a new project, copied in the js source, and it worked fine.

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

Have the same thing with:

• RN 0.37 (have also tried 0.38)

Exact error after splash screen disappears:
Unrecognized font family 'Lato-Black'

Have tried:

• deleting /ios/build items
• react-native link react-native-vector-icons
• deleting /node_modules and reinstalling

Only happens when running via CLI

@simonstewart That's a regular font and is unrelated to this module.

was having the same issue as mentioned by @ekhall . Even I run the command "react-native link react-native-vector-icons" but it was not working. Then i dont know what happened, I ran the same command again then npm start and reloaded the project, it was running fine. surprising!!!

You absolutely need to check that you did that:
"Check that the font is copied in the Copy Bundle Resources in Build Phases."

This is the step I was missing. Also check you follow the first 2 steps (Resources and info.plist) from the Troubleshooting section.

You may need to double-check whether xCode is importing those assets from react-native-vector-icons or another module (eg native-base). If it's a different package then make sure your import FontAwesome from 'react-native-vector-icons/FontAwesome' is changed to import FontAwesome from 'some-other-package'

I had the same issue of not able to load the fonts on Mac for IOS... I was getting unrecognized font family 'material icons'. Even react-native link react-native-vector-icons didn't help.

I pulled up the fonts in app directory and loaded it using package.json

"rnpm": {
"assets": [
"app/fonts"
]
}

https://hiddentao.com/archives/2017/03/10/get-custom-fonts-working-in-react-native/ @hiddentao's article explains it very well!

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.

You should run react-native install react-native-vector-icons & react-native link react-native-vector-icons
If this happend when you use react-native-elements, install react-native-elements again after above changes.

A probable solution:
Build & run on android emulator (react-native run-android), this downloads any missing or needed icons.
then running on IOS device (through xcode), resolves the above error.

p.s. there's still a lot of warnings regarding prop usage etc. but the errors are resolved and the build runs successfully.

One thing that might have not been checked is that after you copy all fonts from react-native-vector-icons folder to your XCode project, those fonts are removed from fonts folder; therefore you should try installing react-native-vector-icons again (assuming that you've correctly set up Build phases/Copy Bundle Resource, and Info.plist). Hope this helps.

I found out that following the manual instructions were kind of complicated (I'm not used to Xcode at all, react-native is my first project on a mobile). So what I did was:
npm install react-native-vector-icons --save
react-native link react-native-vector-icons
--stopped the npm server--
react-native run-ios

So, what I mean here is that i actually had to go for "run-ios", if I had just "npm start" it wouldn't be enough to work for me, run-ios to kind of "recompile" everything the way you want it to be :)

If someone else have had this error "Unrecognized font family 'Lato'" look at the last copy pasted example and remove/change the font family attribute, that has helped me 😄

// Example from https://react-native-training.github.io/react-native-elements/API/card/

......
// implemented with Text and Button as children
<Card
  title='HELLO WORLD'
  image={require('../images/pic2.jpg')}>
  <Text style={{marginBottom: 10}}>
    The idea with React Native Elements is more about component structure than actual design.
  </Text>
  <Button
    icon={{name: 'code'}}
    backgroundColor='#03A9F4'
    fontFamily='Lato'   <------ remove / change this Line!!
    buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
    title='VIEW NOW' />
</Card>

delete build under ios worked

I was having the same problem. I linked with react-native link react-native-vector-icons, force quit my simulator, then reran react-native run-ios . It worked! Don't mean to sound like a noob, but try restarting the app!

Open your font with a text editor and search the real name of your font.
Use it as name on the font-family for example

In some cases, font name is different from the file name.

I'm using a custom font (not vector icons) and here's my thoughts

Didn't Work

• remove the build folder and rebuild using react-native run-ios
• copy the file to the folder before using run in xcode
• restarting the app

Worked

• run the project through XCode after using react-native link

Hope it helps someone :)

I got this error when I was trying to use custom icons from icomoon.ttf and I am able to find solution for this.

check out this article.
https://medium.com/@maulikdhameliya/how-to-solve-unrecognised-font-family-error-in-react-native-when-using-custom-icons-for-ios-42c2aa1c4f08

After cobbling together bits and pieces on loading the icons for react-native-elements I finally figured this out. Check out my blog for a write-up.
https://javascriptrambling.blogspot.com/2018/03/expo-icon-fonts-with-react-native-and.html

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

This saved my day

I had the same problem and it was solved by running react-native link react-native-vector-icons and then building the project once in xcode.

Hi, I fixed this by opening Info.plist in my text editor, searching for .ttf and making sure my font file names were included in the list with the other fonts. The key of the section is called UIAppFonts.

In addition to this I also made sure the fonts were visible in the XCode project, and under "Copy Bundle Resources" they are listed out.

This happened to me when I remove the fonts I wasn't using from the "Fonts provided by application" section of the info.plist and the "Copy Bundle Resources" section of the main target. Apparently there are lingering references to those fonts even if you don't use them. You can manually add all those files back, or what is much easier to do is run react-native unlink react-native-vector-icons, then run react-native link react-native-vector-icons again. If you actually deleted those unwanted font files altogether, then delete your node-modules directory and run npm install again.

RN 0.6 supposed to do autolinking now, however it doesn't seem to work properly with react-native-vector-icons

1. delete build folder
2. npm i --save react-native-vector-icons
3. react-native link react-native-vector-icons
4. npm start -- -- reset-cache
5. react-native run-ios

worked for me on 0.6 based on this issue's scattered instructions. @oblador could you confirm RN0.6 autolinking?

Same issue, need to link manually

+1
RN 0.60

exclude files inside build folder in ios working in RN 0.60

After installation, you need to link the library (After the updation of React Native 0.60, they have introduced autolinking feature means we do not require to link the library but they have also mentioned that some libraries need linking and react-native-vector-icons is one of those cases).
After the linking just install the ios/pod file using pod install

You can follow Example to Use Vector Icons in React Native for the updated example of React Native 0.60

Every above solutions didn't work. Only command react-native link works! <3

Add the following to your info.plist. Feel free to add or remove any font.

  <key>UIAppFonts</key>
  <array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>Zocial.ttf</string>
  </array>

On RN0.61.5 and using react-native-vector-icons i copy the .tff files into the node_modules/react-native-vector-icons/fonts/

And run
react-native link

If fixes above didn't do the job, you may be using the wrong font family name. By adding this code to your AppDelegate.m you can see a list of fonts loaded - ensure you use the same name as in output.

for (NSString* family in [UIFont familyNames]) { NSLog(@"%@", family); for (NSString* name in [UIFont fontNamesForFamilyName: family]) { NSLog(@" %@", name); } }

For me the case was that output from the above was "FontName-Regular", but in a style file it was "FontNameRegular".

In my case it only threw error when i was trying to use weighted font directly like FontWeight_Bold
when i changed it to regular form and used font weight explicitly it worked.

still having this error

The combination of:

1. Adding pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' to my Podfile file
2. Adding the UIAppFonts key to my Info.plist file
3. Running react-native link (despite using react-native 0.62.2)

Made the icons appear for me on iOS. I have yet to try for Android.

Edit: I also had to mess around with the placement of the script noted in point 1 (Podfile related), so that may be a part of the solution.

I'm using a custom font (not vector icons) and here's my thoughts

Didn't Work

• remove the build folder and rebuild using react-native run-ios
• copy the file to the folder before using run in xcode
• restarting the app

Worked

• run the project through XCode after using react-native link

Hope it helps someone :)

This worked for me too, thanks

After you do everything but still not working.
try this

1. rm -rf ~/library/developer/xcode/
2. rm -rf ~/.rncache

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

Thank you very much that solved it for me as well!!
did that command and built again on xcode

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

This is the jackpot. Works like a charm. Thank you so much @brandonmwest

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

This worked!. had to run react-native run-ios to rebuild the app

For anyone else still struggling, this is what sorted it for me:

import EntypoIcon from 'react-native-vector-icons/Entypo';
EntypoIcon.loadFont();

If fixes above didn't do the job, you may be using the wrong font family name. By adding this code to your AppDelegate.m you can see a list of fonts loaded - ensure you use the same name as in output.

for (NSString* family in [UIFont familyNames]) { NSLog(@"%@", family); for (NSString* name in [UIFont fontNamesForFamilyName: family]) { NSLog(@" %@", name); } }

For me the case was that output from the above was "FontName-Regular", but in a style file it was "FontNameRegular".

you saved my life @dooleyb1 ❤️

react-native link react-native-vector-icons

error Linking "react-native-vector-icons" failed.

just type 'npx react-native-asset ' after installation setup finish