Unrecognized font family ionicons

Question

I followed the setup instructions in the NativeBase Docs and ran rnpm link. I am getting this error: Unrecognized font family ionicons

also checked by Xco

Answer 1

For RN 0.60+ don't use react-native link ...! (see Autolinking)

Instead add this in your Podfile:

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

and run pod update (or pod install).

Furthermore add this in your 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>

(took from https://github.com/oblador/react-native-vector-icons#option-with-cocoapods)

Works fine in my project with:

"react": "16.9.0",
"react-native": "0.61.1",
"native-base": "2.13.8" (react-native-vector-icons@6.6.0),

Answer 2

This happens if you start your packager and then link packages through rnpm link.

This requires you to restart your packager and try again.

Answer 3

native-base has 'react-native-vector-icons' as dependency but if you are using react-native <=0.59.10 then you have link.

Just simple command :

react-native link react-native-vector-icons

Answer 4

if you are using 0.60 and above then you need to do the following step :-

<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 after this run below command:-

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

After clean and build. Run the ios app. This solution work for me :)

Answer 5

If your iOS project is using CocoaPods (contains Podfile) and linked library has podspec file, then react-native link will link the library using Podfile.

Add the comment below to the bottom of your podfile.

# Add new pods below this line

Then run "react-native link [package_name]"

This works for me.

Answer 6

Use the Icon.loadFont() method to load the fonts.