react-native-vector-icons v.10.0.3 doesn't work properly in iOS.
jacopo-ferroni opened this issue · 20 comments
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
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.
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?
@tststs I'm developing on Windows, but I don't have any kind of error in console anyway
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
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.
interlinking with expo issue:
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.
reverting this PR fixes the issue:
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
- }
}fixed on:
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"
}
}
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.
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!
Thank you @doug3d it's working fine now
it has same result with simple react native project not expo i am referring to.
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>
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
Is this still an issue or has the upstream expo fix solved it?
Same issue
This is extremely annoying, this issue is opened since days now without a solution, please provide at least a patch or a workaround so we can build our apps with sdk51 and { Entypo, MaterialIcons, FontAwesome } from '@expo/vector-icons'
I'm closing this as I believe the initial problem was fixed upstream in expo.
If you are still experiencing issues please open a new issue with exact details of the problem.