How to install React Native Vector Icons

In this article, we are going to show how to install React Native Vector Icons package to the app.

As you know React Native introduced the Autolinking feature with 0.60. But for the vector icons package, there is something to do for assets.

Let's see what needs to be done. if you don't have an existing app. create one app

npx react-native init TestVectorIcons

Then add vector icon package with your preferred choice of package manager npm or yarn. I prefer yarn btw.

yarn add react-native-vector-icons && npx pod-install

Change to App.js  to like this.

import React from 'react';
import {SafeAreaView, View} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const App = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <MaterialCommunityIcons name="home" color={'red'} size={50} />
      </View>
    </SafeAreaView>
  );
};

export default App;

then run the app for iOS for example. You will get an error like this: Unrecognized font family 'Material Design Icons'

We got an error because the packager could not find our icons assets. To solve this. We should add the code snippet below to our  Info.plist file.

<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>
  <string>Fontisto.ttf</string>
</array>

When you re-run the project error will be gone.

We solved for iOS, let's see what we need to do for Android.

For Android go to in your app android/app/android.gradle file. then add this code below the end of the code.

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

That's all. We just need to re-run the project to see working properly for Android also.