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

Photo by Caspar Camille Rubin on Unsplash

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.

Selecting the .xcworkspace file

.xcworspace file finally opened in Xcode

2. Create a Fonts folder

creating 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

Adding the necessary icon font names

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

ios device(on your left hand) and android device (on your right hand)

Conclusion

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