Error: Unrecognized font family Material Design icons after installing react-native-elements?

Question

I am a Newbie in react-native. I created a new project using react-native-cli. I am Using react-native-elements As A UI component library for React Native. So I ran following commands

**npm i react-native-elements --save**

After this i ran my simulator command,

react-native run-ios

not sure how to resolve this error.

Solution 1

Try running following command -

react-native link react-native-vector-icons

if this does not solve your problem then once rebuild your app using,

react-native run-ios

sometimes CLI is not able to get the updates automatically.

Solution 2

If you are coming from react-native 0.60+ so please add the UIAppFonts (below mention) in info.plist file . And drag and drop the fonts folder under node_modules/react-native-vector-icons to the project in xcode. Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder.

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

Solution 3

Just add these lines in info.plist, delete the build/ folder inside ios folder and rebuild the app npx react-native run-ios It worked for me.

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

Solution 4

Ok, so for the people who didn't find the above answer helpful, I just added this into info.plist

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

and then go to ios folder and run pod install. Run again the app and it should work

Solution 5

Add the given code in the info.plist file in folder yourAppName/info.plist

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

and then in the terminal run

cd ios
pod install
cd ..
npx react-native run-ios //if react-native installed then just react-native run-ios

View more solutions

Comments

[Pratik Khadka]

Hello @abhushek , In my case, after following your steps I had to dragged node_modules/react-native-vector-icons/RNVectorIcons.xcodepr‌​oj to Libraries and again libRNVectorIcons.a to Linked Frameworks and library list . Thank you

[Raju]

This solution Working fine. There is 3 info.plist file in ios sub folders. Added above code in all 3 places. Then i Run "pod install" command. then i run "react-native run-ios" command. working fine. I had above listed all .tiff files in node_modules/react-native-vector-icons/Fonts folder.

[Arosha]

Above worked fine. Didn't have to delete build folder inside ios

[Emre Tapcı]

I am using react-native version 5.0.1 and it gives the following error: error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: - react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons")