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.
If you want to properly install react-native-vector-icons on an android platform, follow the steps below:
- 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
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.
- Using XCode, open the file in the path
2. Create a Fonts folder
3. Open the
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
10. Start the development server and run:
npx react-native run-ios
I hope you will find this tutorial useful. If you have any feedback, kindly comment in the comment section below. Thank you.