Fixing react-native-vector-icons issues in React Native

Fixing react-native-vector-icons issues in React Native

If you’ve ever worked on a React Native app, tried using the react-native-vector-icons module, and compile your app only to be greeted by a box with an “X” on Android or “?” on iOS instead of your icons, you’re not alone.

I’ve run into this problem multiple times, especially after taking a break from app development and never remember how to fix it when I get back to working on apps; so I’m writing this as a quick reference to save myself (and hopefully others) from future frustration.

Why This Happens

When you install a package with npm install, it’s supposed to link everything automatically. However, with react-native-vector-icons, the necessary font files sometimes don’t get linked correctly in the build process. The solution is to manually ensure the correct fonts are in place for both Android and iOS.

Fixing the Issue

For the purposes of simplicity, we’ll assume you’v already run npm install react-native-vector-icons and you want to use Ionicons.ttf as your icon font.

Android Fix

1. Navigate to the font file:

./node_modules/react-native-vector-icons/Fonts/Ionicons.ttf

2. Copy the file to your Android project’s assets folder (create it if it doesn’t exist):

./android/app/src/main/assets/fonts

3. Rebuild your app:

npx react-native run-android

iOS Fix

1. Navigate to your iOS project directory:

./ios/<yourappname>

2. Open Info.plist and put the following key under <dict>

<key>UIAppFonts</key>
  <array>
    <string>Ionicons.ttf</string>
  </array>

3. Install the necessary CocoaPods dependencies:

cd ios && pod install

4. Return to your project root and run:

npx react-native run-ios

Conclusion

This simple fix ensures that your react-native-vector-icons fonts are properly linked and displayed on both Android and iOS. Hopefully, this saves you (I’m talking to my future self) time and frustration the next time you encounter this issue!