Comments (16)
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!
from react-native-vector-icons.
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
from react-native-vector-icons.
Thank you @doug3d it's working fine now
from react-native-vector-icons.
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>
from react-native-vector-icons.
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.
from react-native-vector-icons.
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?
from react-native-vector-icons.
@tststs I'm developing on Windows, but I don't have any kind of error in console anyway
from react-native-vector-icons.
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.
from react-native-vector-icons.
interlinking with expo issue:
from react-native-vector-icons.
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.
from react-native-vector-icons.
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
- }
}
from react-native-vector-icons.
fixed on:
from react-native-vector-icons.
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"
}
}
from react-native-vector-icons.
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.
from react-native-vector-icons.
it has same result with simple react native project not expo i am referring to.
from react-native-vector-icons.
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} />
All icons has been added to info.plist, but it's still not working at my end, not sure what im doing wrong
from react-native-vector-icons.
Related Issues (20)
- Error when using with react-native-web HOT 1
- The latest version is not working on Android. Please fix the bug.
- Wrong Icons Showing HOT 4
- [NOTIFEE] Could not resolve all files for configuration ':notifee_react-native:androidJdkImage'. HOT 2
- React-native-vector-icons not working in ios HOT 7
- dedicated page for icons from a specific icon package
- Missing icons in MaterialCommunityIcons HOT 1
- Can't see Custom Icon(imported from local) HOT 3
- Unable to run react-native (0.70.15) and react-native-web (0.18) with RNVI (10.0.3) HOT 3
- Unable to install fontawesome6 HOT 1
- Some of the icons are incomplete???
- New Major Version Coming (Testers wanted) HOT 4
- fa-upgrade script didn't work for me and Android Font Awesome Pro6 Naming Conventions
- Multiple commands produce ------- xcodebuild: WARNING: Using the first of multiple matching destinations: HOT 2
- Question mark showing rather than icon HOT 1
- Invariant Violation: expected workspace package to exist for 'react-native' when installing in a monorepo HOT 1
- Add Support for Google Material Symbols Icon Fonts HOT 3
- react-native-macos: "Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found." HOT 7
- Execution failed for task ':react-native-vector-icons_common:copyFonts'.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-vector-icons.