react-native-vector-icons: Unrecognized font family only with react-native run-ios

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

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 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.

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>

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>

I tried:

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

Do you mean this or something else?

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”.

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.

delete build under ios worked

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!

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.

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

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

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 😃

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 😃

Hi i did the following when this error hit me.

1. adding fonts to assests/fonts of the root folder of react-native project

2. adding this to package.json file , “rnpm”:{ “assets”:[ “./assests/fonts/” ] }

3. running react-native link command

4. check info.plist in xcode for fonts listing

5. check resources folder for fonts file.

6. delete derived data from pref>location in xcode.

7. rebuild project and done.

These steps solved my error.

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

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 😃

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

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

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

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?

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 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

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.

Every above solutions didn’t work. Only command react-native link works! ❤️

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

This saved my day

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!

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.

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.

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

After you do everything but still not working. try this

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

FWIW

This blog post of @maulikdhameliya https://medium.com/@maulikdhameliya/how-to-solve-unrecognised-font-family-error-in-react-native-when-using-custom-icons-for-ios-42c2aa1c4f08

4th section from the blog post solved my issue. I opened file in Sublime and manually created that <array>...</array> of all my fonts and saved file. Then react-native run-ios from cli and boom, no error thrown.

IOS is evil. Android simulator on Linux works blazingly fast. Compiles fast too.

check the name if the relname!!! I fix it by change name

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.