Unrecognized Font Family on React Native

Question

I\'m running into a peculiar error using React Native. Inside my button.js I am doing

import Icon from \"react-native-vector-icons/MaterialIcons\";         


        

Answer 1

The same issue was fixed after triggering loadFont() method

import Icon from 'react-native-vector-icons/FontAwesome';

Icon.loadFont();

Answer 2

npm install --save react-native-vector-icons

add the line below to the ios/podfile file then run pod update

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

in the ios/projectNameFolder/info.plist add codes below between tags. If you already have this UIAppFonts array just edit strings. Be sure you have fonts under node_modules>react-native-vector-icons

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

clean cache and restart application with rebuild. It suppose to work.

Answer 3

The library you use has a specific section about this problem, it states (in version 2.0.3):

• Make sure you've added the fonts to your XCode project.
• Check that the font you are trying to use appears in Info.plist, if you've added the whole folder and it's blue in color, then you need to add it to the path.
• Check that the font is copied in the Copy Bundle Resources in Build Phases.
• Recompile the project.

Answer 4

If you have completed all the above steps and still get the same error, you need to Clean your iOS project from Xcode then Build it. This will completely reset the project and ensure that the .ttf file is included.

Run your project from within Xcode and it should now work.

You may still find your project still doesn't work using react-native run-ios. If this is the case, open Finder and navigate to the ios folder in your project and delete the entire build folder. Then close your simulator and package manager terminal, and run react-native run-ios again. This will take a couple of minutes as it's rebuilding everything, but then (hopefully) your app will run correctly.

Answer 5

Make sure you have run the command:

react-native link react-native-vector-icons