react-native-vector-icons: iOS + Hermes, Error: Font failed to load (generatorResume)

Review the documentation: https://github.com/oblador/react-native-vector-icons
Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

Environment

iOS 16 “react-native-vector-icons”: “9.2.0”, react-native: 0.70.3

Description

When building an iOS version with Hermes enable, the app crashers at startup:

Error: Font failed to load
  at apply(node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:105:55)
  at ? (node_modules/react-native-vector-icons/lib/create-icon-set.js:175:13)
  at generatorResume([native code])
  at asyncGeneratorStep(node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:20)
  at _next(node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
  at fn(node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7)
  at tryCallTwo(node_modules/promise/setimmediate/core.js:45:5)
  at doResolve(node_modules/promise/setimmediate/core.js:200:13)
  at Promise(node_modules/promise/setimmediate/core.js:66:3)
  at apply(node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:16)
  at _loadFont(node_modules/react-native-vector-icons/lib/create-icon-set.js:26:3)
  at loadFont(node_modules/react-native-vector-icons/lib/create-icon-set.js:26:3)
  at ? (src/App.js:312:12)
  at generatorResume([native code])
  at asyncGeneratorStep(node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:20)
  at _next(node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
  at fn(node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7)
  at tryCallTwo(node_modules/promise/setimmediate/core.js:45:5)
  at doResolve(node_modules/promise/setimmediate/core.js:200:13)
  at Promise(node_modules/promise/setimmediate/core.js:66:3)
  at apply(node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:16)
  at _init(src/App.js:100:21)
  at init(src/App.js:100:21)
  at ? (src/App.js:622:11)
  at generatorResume([native code])
  at asyncGeneratorStep(node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:20)
  at _next(node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
  at fn(node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7)
  at tryCallTwo(node_modules/promise/setimmediate/core.js:45:5)
  at doResolve(node_modules/promise/setimmediate/core.js:200:13)
  at Promise(node_modules/promise/setimmediate/core.js:66:3)
  at apply(node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:16)
  at _componentDidMountAsync(src/App.js:100:21)
  at componentDidMountAsync(src/App.js:100:21)
  at create$73(src/App.js:143:5)
  at commitHookEffectListMount(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:5828:26)
  at flushPassiveEffects(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7532:23)
  at d(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7371:7)
  at J(node_modules/scheduler/cjs/scheduler.production.min.js:13:203)
  at R(node_modules/scheduler/cjs/scheduler.production.min.js:14:128)
  at callback(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:248:18)
  at _callTimer(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:112:7)
  at _callReactNativeMicrotasksPass(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:162:5)
  at _reactNativeMicrotasksCallback(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:413:12)
  at __callReactNativeMicrotasks(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:390:12)
  at fn(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:132:12)
  at __guard(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:367:9)
  at value(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:131:10)
  at value([native code])
  at value([native code])

Reproducible Demo

Let us know how to reproduce the issue. Include a code sample, share a project, or share an app that reproduces the issue using https://snack.expo.io/. Please follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve

import Icon from 'react-native-vector-icons/FontAwesome';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 6
Comments: 16 (1 by maintainers)

Commits related to this issue

Chore: Mobile: Remove no-longer-necessary warning workaround Removes Icon.loadFont, which is no longer necessary ([see the upstream issue](https://github.com/oblador/react-native-vector-icons/issues/... — committed to personalizedrefrigerator/joplin by personalizedrefrigerator 3 months ago

Most upvoted comments

@tsukudabuddha 's solution worked for me:

diff --git a/node_modules/react-native-vector-icons/RNVectorIconsManager/RNVectorIconsManager.m b/node_modules/react-native-vector-icons/RNVectorIconsManager/RNVectorIconsManager.m
index 2823543..2c49d26 100644
--- a/node_modules/react-native-vector-icons/RNVectorIconsManager/RNVectorIconsManager.m
+++ b/node_modules/react-native-vector-icons/RNVectorIconsManager/RNVectorIconsManager.m
@@ -163,7 +163,7 @@ - (NSString *)createGlyphImagePathForFont:(NSString *)fontName
     CFErrorRef errorRef = NULL;
     if (CTFontManagerRegisterGraphicsFont(font, &errorRef) == NO) {
       NSError *error = (__bridge NSError *)errorRef;
-      if (error.code == kCTFontManagerErrorAlreadyRegistered) {
+      if (error.code == kCTFontManagerErrorAlreadyRegistered || error.code == kCTFontManagerErrorDuplicatedName) {
         resolve(nil);
       } else {
         reject(@"font_load_failed", @"Font failed to load", error);

+17

arthurgeron-work on Feb 7, 2023

You can use this workaround to suppress the warnings:

Icon.loadFont().catch((error) => { console.info(error); });

Instead of having the useless warning in the yellow box, it will now print it to the console only. The icons still load fine with this.

laurent22 on Jan 4, 2023

I have the same issue, but I’m not using hermes.

WARN Possible Unhandled Promise Rejection (id: 0): Error: Font failed to load

mMarcos208 on Oct 17, 2022

I did some debugging and it looks like the error occurs when trying to register the font (triggered by loadFont). The error is error __NSCFError * domain: @"com.apple.CoreText.CTFontManagerErrorDomain" - code: 305 0x0000600002a667c0. Not sure why this is happening, but considering the images are still working I think it would be fine to add || kCTFontManagerErrorDuplicatedName to the conditional on l:166 of RNVectorIconsManager as a short term fix for now

tsukudabuddha on Dec 9, 2022

I can confirm the same behavior. The error is only present on iOS 16+, but the font icons work in spite of the error.

react-native-vector-icons: 9.2.0 react: 18.1.0 react-native: 0.70.6

brianlenz on Dec 2, 2022

@tsukudabuddha 's solution worked for me:

diff --git a/node_modules/react-native-vector-icons/RNVectorIconsManager/RNVectorIconsManager.m b/node_modules/react-native-vector-icons/RNVectorIconsManager/RNVectorIconsManager.m
index 2823543..2c49d26 100644
--- a/node_modules/react-native-vector-icons/RNVectorIconsManager/RNVectorIconsManager.m
+++ b/node_modules/react-native-vector-icons/RNVectorIconsManager/RNVectorIconsManager.m
@@ -163,7 +163,7 @@ - (NSString *)createGlyphImagePathForFont:(NSString *)fontName
     CFErrorRef errorRef = NULL;
     if (CTFontManagerRegisterGraphicsFont(font, &errorRef) == NO) {
       NSError *error = (__bridge NSError *)errorRef;
-      if (error.code == kCTFontManagerErrorAlreadyRegistered) {
+      if (error.code == kCTFontManagerErrorAlreadyRegistered || error.code == kCTFontManagerErrorDuplicatedName) {
         resolve(nil);
       } else {
         reject(@"font_load_failed", @"Font failed to load", error);

Creating a patch file with the above changes worked for my project, thanks!

PunainenAurinko on Mar 2, 2023