fbpx

In this tutorial, we are going to implement the vector icons into our React Native app in iOS. We also implemented vector icon in the React Native Android platform in our other tutorial. For info on the importance of vector icons and how it is important in mobile applications, we can always go and check in the Android part.

Here, we are going to use React Native version 0.61 which is the latest version in the market. The idea is to continue from our implementation of vector icons in Android. The starter React Native project is the same as that in the Android platform tutorial. We are just going to configure the icons package on the iOS platform in this tutorial. We have already set up the starter project as well as installed a react-native-vector-icons package from the Android tutorial. If we need to start over from the beginning, we can get the full insight on how to set up the starter React Native project and install react-native-vector-icons in our Android platform tutorial.

The majority of the configuration will take place in Xcode.

So, let us begin!!

 

Running the starter project in iOS.

Here, we are going to run our starter project from the Android platform tutorial in the iOS emulator. In other to run the project in the iOS platform, we need to run the command from the following code snippet:

>>>react-native run-ios

Hence, unlike in the Android platform where we got the app screen with icons, we will encounter an error here as shown in the emulator screen below:

As we can see, the FontAwesome5 icon bundle that we imported from the react-native-vector-icons package is unrecognized in the iOS emulator. Now, we need to some this manually by using Xcode.

How to Fix the Error?

In order to fix the unrecognized icon package error, we need to install the font for the icons manually using Xcode. For that, we need to open our project’s ‘./ios/’ folder in Xcode as shown in the screenshot below:

 

Then, we need to select the File tab from the menu bar and click on Add Files to “sampleIconProject” as shown in the screenshot below:

Here, the sampleIconProject is the name of our React Native project. For different project folder names, the different names will appear in the File dropdown option. As we click on Add new “sampleIconProject”, a dialog box will appear.

In the dialog box, we need to navigate to ‘./node_modules/react-native-vector-icons/Fonts’ folder and click on the ‘Add’ button as shown in the screenshot below:

Now, we need to register the font to Info.plist file of ./sampleIconProject folder as shown in the screenshot below:

In order to register the font to Info.plist file, we need to right-click on the file and open the file as Source code as shown in the screenshot above.

Now, we need to code the font manually into the Info.plist file. The required font code is provided in the code snippet below:

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

Now, we need to copy the font code provided in the above code snippet and paste it in the Info.plist file as shown in the code snippet screenshot below:

 

Now, we need to re-run the project in the iOS emulator and see if vector icons package works.

Hence, we get the following result in our iOS emulator:

Finally, we have successfully implemented the Vector Icons in the iOS platform of the React Native app as well.

 

Conclusion

In this tutorial is we learned how to set up and use the vector icons in the iOS platform of React Native app. The starter project is from the Android platform part where we installed the react-native-vector-icons package already. But if we run the project on the iOS platform, we encountered an error. Here, we learned how to solve this error by manually integrating the font code to the Info.plist file of the iOS folder. This is one of the main issues faced while installing a vector icon package on the iOS platform. Hence, we finally learned how to solve it and use the vector icons in the iOS platform as well.

 

2 thoughts on “Using Vector Icons in React Native App | iOS Platform

  1. This doesn’t work for me and I get two different errors:
    1. clean just set up project complains that it doesn’t know what Ionicons.ttf is
    2. in project configured using your tutorial build fails with “Multiple commands produce ‘/Users/sbg/Documents/ipot-mobile/ios/build/ipotmobile/Build/Products/Debug-iphonesimulator/ipotmobile.app/Ionicons.ttf’:”

    react-native-vector-icons documentation is not helpful either.

    What worked: after cloning the repo, installing node_modules and ‘pod install’ the only thing I had to do was add the key and array with font names to info.plist and app successfully ran on simulator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.