expo / vector-icons

https://icons.expo.fyi
MIT License
647 stars 114 forks source link

Fix custom fonts failed to load in react-native-vector-icons #267

Closed Kudo closed 1 month ago

Kudo commented 10 months ago

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-error work, 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.ttf to xcode)

@expo/vector-icons classic code

const Icon = createIconSet(
  require('@expo/vector-icons/build/vendor/react-native-vector-icons/glyphmaps/FontAwesome.json'),
  'FontAwesome',
  require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/FontAwesome.ttf'),
);
<Icon name="work" size={30} color="#900" />

react-native-vector-icons custom fonts

const Icon = createIconSet(
  require('./assets/MaterialIcons.json'),
  'Material Icons',
  'MaterialIcons2.ttf',
);
<Icon name="comments" size={30} color="#900" />
vercel[bot] commented 10 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
vector-icons ✅ Ready (Inspect) Visit Preview Aug 14, 2023 4:28pm
matinzd commented 10 months ago

May fix: https://github.com/oblador/react-native-vector-icons/issues/1523

Aleksandar-FFWD commented 9 months ago

Any updates on this or workarounds to make custom fonts work in bare workflow?

enfipy commented 8 months ago

I don't really like to ping PRs but is there any chance that this will land soon?

Kudo commented 8 months ago

sorry for being late to this pr. together with Brent we discussed an alternative solution than this pr. basically that Font.isLoaded(fontName) should support fonts added from native setup. i will create a pr before sdk 50 and the issue should be fixed in sdk 50. does that make sense to you? or let me know if the issue is a blocker to you.