CODEWITHSUNDEEP
javascriptiosreactjsfontsreact-native
omriki
omriki

Reputation: 529

Unrecognized Font Family on React Native

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";
const icon = (Icon name="menu size={20} color="green"/>);
render()
    return(
         {icon}
    )

But I'm given the error 

Unrecognized Font Family 'Material Icons'

However when I import FontAwesome as: 

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

I get no error.

Upvotes: 7

Views: 24799

Answers (7)

Shivo'ham
Shivo'ham

Reputation: 3062

rm -rf node_modules, npm install

cd android
gradlew clean

cd ..

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

run and confirm it's working

Upvotes: 0

Burk
Burk

Reputation: 3067

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.

Upvotes: 7

noone
noone

Reputation: 6558

The same issue was fixed after triggering loadFont() method

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

Icon.loadFont();

Upvotes: 28

philwilks
philwilks

Reputation: 669

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.

Clean and Build in Xcode

Delete the ios/build folder

Upvotes: 1

Edward Tan
Edward Tan

Reputation: 954

Make sure you have run the command:

react-native link react-native-vector-icons

Upvotes: 13

Pavan Jain
Pavan Jain

Reputation: 241

  • Make sure that you already imported .ttf files to your project.
  • check in the copy bundle Resources as well.
  • Finally, add the files in info.plist as in the image Image Link

Upvotes: -1

Daniel Schmidt
Daniel Schmidt

Reputation: 11921

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.

Upvotes: 3

Related Questions