React Native vector icons only show a question mark

Question

I have a React Native project and I want to use vector icons in my project. I installed the fonts that the vector icons require, and it worked well. However, after I tried to install some dependencies for my bottom tab navigator, my app suddenly stopped showing the icons and only displayed a question mark.

I declared the font in my Info.plist using Xcode workspace.

    <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>FontAwesome6_Brands.ttf</string>
        <string>FontAwesome6_Regular.ttf</string>
        <string>FontAwesome6_Solid.ttf</string>
        <string>Fontisto.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Zocial.ttf</string>
    </array>

This is my package.json file

    {
      "name": "ReactNativeDemo",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "android": "react-native run-android",
        "ios": "react-native run-ios",
        "lint": "eslint .",
        "start": "react-native start",
        "test": "jest"
      },
      "dependencies": {
        "@react-native-community/masked-view": "^0.1.11",
        "@react-native-community/slider": "^4.4.3",
        "@react-navigation/bottom-tabs": "^6.5.11",
        "@react-navigation/native": "^6.1.9",
        "@react-navigation/native-stack": "^6.9.17",
        "@react-navigation/stack": "^6.3.20",
        "react": "18.2.0",
        "react-native": "0.72.5",
        "react-native-gesture-handler": "^2.14.0",
        "react-native-reanimated": "^3.5.4",
        "react-native-safe-area-context": "^4.7.4",
        "react-native-screens": "^3.27.0",
        "react-native-vector-icons": "^10.0.2"
      },
      "devDependencies": {
        "@babel/core": "^7.20.0",
        "@babel/preset-env": "^7.20.0",
        "@babel/runtime": "^7.20.0",
        "@react-native/eslint-config": "^0.72.2",
        "@react-native/metro-config": "^0.72.11",
        "@tsconfig/react-native": "^3.0.0",
        "@types/react": "^18.0.24",
        "@types/react-native-vector-icons": "^6.4.18",
        "@types/react-test-renderer": "^18.0.0",
        "babel-jest": "^29.2.1",
        "eslint": "^8.19.0",
        "jest": "^29.2.1",
        "metro-react-native-babel-preset": "0.76.8",
        "prettier": "^2.4.1",
        "react-test-renderer": "18.2.0",
        "typescript": "4.8.4"
      },
      "engines": {
        "node": ">=16"
      }
    }

Answer 1

I also faced a similar issue even after following the correct installation steps.

Following this solved the issue,

In your project directory, open android/app/build.gradle and add below line at the end

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

Clean and Rebuild the application. Icons will be loaded properly now.

Answer 2

I encountered a similar issue with react-native-vector-icons where it displayed a box with a question mark. Fortunately, I resolved the problem by navigating to the ios/{project_name/Info.plist file and adding the following lines inside the <array>:

<string>Zocial.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>Ionicons.ttf</string>
<string>Foundation.ttf</string>
<string>Fontisto.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome.ttf</string>
<string>Feather.ttf</string>
<string>EvilIcons.ttf</string>
<string>Entypo.ttf</string>
<string>AntDesign.ttf</string>

Additionally, I created a Fonts folder within the ios directory and placed the corresponding TTF files in it. After doing this, make sure to rebuild, close Xcode, and remove the build folder from the ios directory in Visual Studio Code or any other IDE. Open Xcode again, rebuild the project, and this should solve the issue. Now you can use icons in your code like this:

import FeatherIcon from "react-native-vector-icons/Feather";

<FeatherIcon size={24} color={colors.text} name={'box'}/>

Don't forget to add the following configuration in your react-native.config.js:

// react-native.config.js

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./src/assets/fonts'],
};