Fix custom fonts failed to load in react-native-vector-icons #267
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -9,6 +9,8 @@ import { | |||
| TextStyle, | |||
| ViewStyle, | |||
| } from "react-native"; | |||
| // @ts-expect-error: AssetRegistry is not typed | |||
| import { getAssetByID } from "react-native/Libraries/Image/AssetRegistry"; | |||
There was a problem hiding this comment.
Isn't it better to use Image.resolveAssetSource() instead?
There was a problem hiding this comment.
Yes, but I have used it for non images as well.
There was a problem hiding this comment.
using Image.resolveAssetSource() here may work since we only check whether the result value is null. however, it will do more unnecessary/incorrect computations for images (not for fonts): https://github.com/facebook/react-native/blob/be2bb51c70a6885cd6607f0ea5df35f053645817/packages/react-native/Libraries/Image/AssetSourceResolver.js#L74-L86
| // If `getAssetByID` returns `null`, the call path is probably from react-native-vector-icons | ||
| // that the `expoAssetId` parameter is a string font name. e.g. `MaterialIcons.ttf`. | ||
| // We just pass the font to react-native-vector-icons without checking if it's loaded. | ||
| fontIsLoaded: Font.isLoaded(fontName) || !getAssetByID(expoAssetId), |
There was a problem hiding this comment.
let's talk about this at our sync tmrw!
|
Any updates on this or workarounds to make custom fonts work in bare workflow? |
|
I don't really like to ping PRs but is there any chance that this will land soon? |
|
sorry for being late to this pr. together with Brent we discussed an alternative solution than this pr. basically that |
# Why follow up with expo/vector-icons#267 (comment) # How add the custom native font support for `Font.isLoaded` # Test Plan - add a **icomoon.ttf** getting from https://icomoon.io/app/ to bare-expo as a custom font and add a test suite test case - also attach the download zip here as a reference [icomoon.zip](https://github.com/expo/expo/files/13576921/icomoon.zip) - test react-native-vector-icon with the custom icomoon font
# Why follow up with expo/vector-icons#267 (comment) # How add the custom native font support for `Font.isLoaded` # Test Plan - add a **icomoon.ttf** getting from https://icomoon.io/app/ to bare-expo as a custom font and add a test suite test case - also attach the download zip here as a reference [icomoon.zip](https://github.com/expo/expo/files/13576921/icomoon.zip) - test react-native-vector-icon with the custom icomoon font
Why
react-native-vector-icons uses
createIconSet(glyphmaps: Record<string, number>, fontName: string, fontFileName: string)to load custom fonts. the third parameter is passed in string and developers should include the font into native (learn more from the doc).since we alias react-native-vector-icons to @expo/vector-icons, if people using bare react-native with custom fonts. our font loading logic will break react-native-vector-icons custom font.
How
our way to load the font is something like
createIconSet(glyphmaps, fontName, require('./assets/MaterialIcons.ttf'). we can check the first parameter with AssetRegistry, if it is not a valid asset, we then fallback to the react-native-vector-icons use case.to make the
@ts-expect-errorwork, i have bumped typescript version inside expo-module-scripts in this pr.Test Plan
tested the two cases on react-native 0.72 (adding the
MaterialIcons2.ttfto xcode)@expo/vector-icons classic code
react-native-vector-icons custom fonts