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 Xcode, the fonts are already in the build phase. What am I missing?
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 Xcode, the fonts are already in the build phase. What am I missing?
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" ([email protected]),
Expanding on the exisiting answer and using the solution found on this github issue, do the following;
react-native link react-native-vector-icons
react-native start --reset-cache
react-native run-ios
to restart the simulatorUse the Icon.loadFont()
method to load the fonts.
Example (Add your App.tsx):
import AntDesign from 'react-native-vector-icons/AntDesign';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Feather from 'react-native-vector-icons/Feather';
AntDesign.loadFont().then();
Ionicons.loadFont().then();
Feather.loadFont().then();
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 :)
Editing PodFile and adding pod RNVectorIcons
not necessary because auto-linking will work fine after adding react-native-vector-icons
adding to PodFile will cause a warning after the next run with react-native run-ios
:
Warning: following modules are linked manually: - react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons"
Just add this line of codes to your info.plist that exist on ios/yourPorjectName/
find UIAppFonts and add codes inside :
<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>
worked with:
"react-native": "0.63.3",
"react-native-vector-icons": "^7.1.0"