react-native-vector-icons v.10.0.3 doesn't work properly in iOS.

[jacopo-ferroni]

Description

Hi everyone,
I'm having a problem with the latest version of react-native-vector-icons which is 10.0.3.

I had to upgrade the SDK to version 51 this morning to continue developing an application on Android/Apple.

Before using SDK version 51 everything worked fine on both devices.

Now it happens to me that when I rebuild the App the icons disappear showing me the question mark only and exclusively on iOS.

Anyone have any idea how to fix the problem?

I can't let you test any demo but I can show you some photos of the problem I'm having:
IPHONE 12 PRO with iOS 17.4.1

SAMSUNG GALAXY A23 with Android 14

[efstathiosntonas]

same here on react-native 0.74.1, vector icons 10.1.0 though, expo 51 using modules-core, FontAwesome6 Pro

If I kill the app everything is fine but after a while after navigating around in the app I start seeing question marks.

[tststs]

same issue. checked everything. checked linking, info.plist, target config for copy bundle resources. do you have the message `unrecognized font family 'font-name' in XCode?

[jacopo-ferroni]

@tststs I'm developing on Windows, but I don't have any kind of error in console anyway

[ThibaultJRD]

Hello,

I have the same issue since the bump to Expo v51. It seems like the problem is only with icons that exist in FontAwesome 5 and not in FontAwesome 6.

I import the package like this: import Icon from '@expo/vector-icons/FontAwesome5';

I tried to import it like this: import Icon from '@expo/vector-icons/FontAwesome';, I have the same issue but with the error: "[icon_name]" is not a valid icon name for family "FontAwesome".

So, some icons have been removed from the free version of FontAwesome 6 that were present in FontAwesome 5.

You can check here : https://icons.expo.fyi/Index

[flecher0]

Same issue here. I am using "react-native-vector-icons": "^10.1.0" and the code is as follows:

import Ionicon from 'react-native-vector-icons/Ionicons';

function getTabBarIcon({
  route,
  focused,
  color,
  size,
}: {
  route: RouteProp<RootStackParamList, keyof RootStackParamList>;
  focused: boolean;
  color: string;
  size: number;
}) {
  let iconName;

  if (route.name === ScreenName.HOME) {
    iconName = focused ? 'home-sharp' : 'home-outlined';
  } else if (route.name === ScreenName.PROFILE) {
    iconName = focused ? 'settings-sharp' : 'settings-outlined';
  }

  return <Ionicon name={iconName} size={size} color={color} />;
}

Each icon is always returned as a a question mark on my end as well.

[efstathiosntonas]

interlinking with expo issue:

• [ios] FontAwesome5 does not import properly with SDK 51 expo/expo#28693

[efstathiosntonas]

I found out that caching the .ttf with expo-fonts leads to question marks, after removing this from my code:

function cacheFonts(fonts: any[]) {
  return fonts.map((font) => Font.loadAsync(font));
}

everything works fine.

[efstathiosntonas]

reverting this PR fixes the issue:

• [font] Fix font name lookup when name is not the same as family expo/expo#28407

expo-font+12.0.4.patch

diff --git a/node_modules/expo-font/ios/FontFamilyAliasManager.swift b/node_modules/expo-font/ios/FontFamilyAliasManager.swift
index 126d577..c86c1fa 100644
--- a/node_modules/expo-font/ios/FontFamilyAliasManager.swift
+++ b/node_modules/expo-font/ios/FontFamilyAliasManager.swift
@@ -53,21 +53,13 @@ private func maybeSwizzleUIFont() {
   if hasSwizzled {
     return
   }
-  let originalFontNamesMethod = class_getClassMethod(UIFont.self, #selector(UIFont.fontNames(forFamilyName:)))
-  let newFontNamesMethod = class_getClassMethod(UIFont.self, #selector(UIFont._expo_fontNames(forFamilyName:)))
+  let originalMethod = class_getClassMethod(UIFont.self, #selector(UIFont.fontNames(forFamilyName:)))
+  let newMethod = class_getClassMethod(UIFont.self, #selector(UIFont._expo_fontNames(forFamilyName:)))
 
-  if let originalFontNamesMethod, let newFontNamesMethod {
-    method_exchangeImplementations(originalFontNamesMethod, newFontNamesMethod)
+  if let originalMethod, let newMethod {
+    method_exchangeImplementations(originalMethod, newMethod)
   } else {
     log.error("expo-font is unable to swizzle `UIFont.fontNames(forFamilyName:)`")
   }
-  let originalInitMethod = class_getClassMethod(UIFont.self, #selector(UIFont.init(name:size:)))
-  let newInitMethod = class_getClassMethod(UIFont.self, #selector(UIFont._expo_init(name:size:)))
-
-  if let originalInitMethod, let newInitMethod {
-    method_exchangeImplementations(originalInitMethod, newInitMethod)
-  } else {
-    log.error("expo-font is unable to swizzle `UIFont.init(name:size:)`")
-  }
   hasSwizzled = true
 }
diff --git a/node_modules/expo-font/ios/UIFont+FontFamilyAlias.swift b/node_modules/expo-font/ios/UIFont+FontFamilyAlias.swift
index 5d3f077..c70e108 100644
--- a/node_modules/expo-font/ios/UIFont+FontFamilyAlias.swift
+++ b/node_modules/expo-font/ios/UIFont+FontFamilyAlias.swift
@@ -15,13 +15,4 @@ public extension UIFont {
     }
     return fontNames
   }
-  @objc
-  static dynamic func _expo_init(name fontName: String, size fontSize: CGFloat) -> UIFont? {
-    let font = UIFont._expo_init(name: fontName, size: fontSize)
-
-    if let aliasedFamilyName = FontFamilyAliasManager.familyName(forAlias: fontName) {
-      return UIFont._expo_init(name: aliasedFamilyName, size: fontSize)
-    }
-    return font
-  }
 }

[efstathiosntonas]

fixed on:

• [iOS][font] Fix some vector icons using incorrect fonts expo/expo#28747

[flecher0]

Same issue here. I am using "react-native-vector-icons": "^10.1.0" and the code is as follows:

import Ionicon from 'react-native-vector-icons/Ionicons';

function getTabBarIcon({
  route,
  focused,
  color,
  size,
}: {
  route: RouteProp<RootStackParamList, keyof RootStackParamList>;
  focused: boolean;
  color: string;
  size: number;
}) {
  let iconName;

  if (route.name === ScreenName.HOME) {
    iconName = focused ? 'home-sharp' : 'home-outlined';
  } else if (route.name === ScreenName.PROFILE) {
    iconName = focused ? 'settings-sharp' : 'settings-outlined';
  }

  return <Ionicon name={iconName} size={size} color={color} />;
}

Each icon is always returned as a a question mark on my end as well.

To provide more information for my previous comment, I built my app using the npx react-native@latest init command. Therefore, the expo fix mentioned by @efstathiosntonas is not quite fixing the issue on my end. Here is my package.json:

{
  "name": "myapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "yarn set-dev react-native run-android",
    "ios": "yarn set-prod react-native run-ios",
    "format": "prettier . --write",
    "lint": "eslint .",
    "set-dev": "ENVFILE=.env.development",
    "set-prod": "ENVFILE=.env.production",
    "start": "react-native start",
    "test": "jest",
    "ios-dev": "yarn set-dev react-native run-ios --mode=Debug --simulator='iPhone 15 Pro'",
    "ios-prod": "yarn set-prod react-native run-ios --mode=Debug --simulator='iPhone 15 Pro'",
    "android-dev": "yarn set-dev react-native run-android",
    "android-prod": "yarn set-prod react-native run-android"
  },
  "dependencies": {
    "@react-native-community/geolocation": "^3.2.1",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "react": "18.2.0",
    "react-native": "0.74.0",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "^3.31.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-vector-icons": "^10.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.74.81",
    "@react-native/eslint-config": "0.74.81",
    "@react-native/metro-config": "0.74.81",
    "@react-native/typescript-config": "0.74.81",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

[Ashishpal438]

same here on react-native 0.74.1, vector icons 10.1.0
I am on react-native cli project.
I am using FontAwesome5, but instead of the icon, I see a question mark.

[doug3d]

@Ashishpal438

same here on react-native 0.74.1, vector icons 10.1.0 I am on react-native cli project. I am using FontAwesome5, but instead of the icon, I see a question mark.

i follow this article and is working for me on CLI. https://aboutreact.com/react-native-vector-icons/
will be a small warning on

" import Icon from 'react-native-vector-icons/FontAwesome' "

i added to with "npm i --save-dev @types/react-native-vector-icons " and is working as expected

hope it helps to u!

[Ashishpal438]

Thank you @doug3d it's working fine now

[MoamberRaza]

it has same result with simple react native project not expo i am referring to.

[aniruddhashevle]

In my case, UIAppFonts was not set properly. Please make sure of the below format in the Info.plist file.

<key>UIAppFonts</key>
<array>
	<string>FontAwesome.ttf</string>
	<string>FontAwesome6_Brands.ttf</string>
	<string>FontAwesome6_Regular.ttf</string>
	<string>FontAwesome6_Solid.ttf</string>
</array>

[emil-malmgaard-rasmussen]

Currently having same problems, here is my package.json:
"react-native": "0.73.6",
"react-native-vector-icons": "10.1.0",
"@types/react-native-vector-icons": "^6.4.18",

I got following code:
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; ... <FontAwesome5 name="toolbox" style={[ focused ? themeStyles.activeBottomIcon : themeStyles.bottomIcon, ]} size={25} />

Im getting following result:

All icons has been added to info.plist, but it's still not working at my end, not sure what im doing wrong