Importing and using react-native-vector-icons the right way in a React Native project

Installing vector icons in a bare React Native application requires some few steps to follow in order to set it up correctly for both android and ios platforms.

If you’re using expo, react-native-vector-icons is installed by default on the template project that get through expo init. It is part of the expo project.

For a bare React Native project, some additional steps need to be followed after running the command npm install react-native-vector-icons depending on the platform you are running.

Android Devices

If you want to properly install react-native-vector-icons on an android platform, follow the steps below:

  1. Open and Edit build.gradle file:
android/app/build.gradle (NOT app/build.gradle)

2. Add the code below in the file opened (build.gradle):

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

3. Stop the development server and restart the server again by running:

npx react-native run-android

iOS Devices

Installing react-native-vector-icons on an ios platform requires more steps as compared to the android platform. Follow the steps below to add the icon library to ios.

  1. Using XCode, open the file in the path ios/project_name.xcworkspace file.

2. Create a Fonts folder

3. Open the node_modules folder.

4. Locate the react-native-vector-iconsfolder. Open the folder and copy the files within the fonts folder.

5. Drag the files copied into the Fonts folder created inside of the ios/project_name folder in XCode.

6. Open the info.plist file and add the fonts copied in there by creating Fonts provided by application under Information Property List

7. Add all or the selected icon you will need in your project

8. Clean build the folder. Product -> Clean build folder

9. Inside vscode or any text editor you’re using to build your application, cd /ios and run pod install

10. Start the development server and run:

npx react-native run-ios

Final Result

Conclusion

I hope you will find this tutorial useful. If you have any feedback, kindly comment in the comment section below. Thank you.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victor Bruce-Crabbe

Victor Bruce-Crabbe

127 Followers

A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.