React-native-vector-icons: Cannot load FontAwesome5 or FontAwesome5Pro fonts

[AlexWang-16]

I'm having some issues importing react-native-vector-icons when I select FontAwesome5 or FontAwesome5Pro.

Here's how I'm importing it
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5Pro';

Here's the error message:
bundling failed: Error: Unable to resolve module react-native-vector-icons/FontAwesome5Pro from ...: Module react-native-vector-icons/FontAwesome5Pro does not exist in the Haste module map

I've tried

• npm install react-native-vector-icons
• uninstall and use yarn to reinstall
• uninstall and run npm to reinstall
• reinstall the package via npm/yarn then, react-native start --reset-cache
• Executing ./node_modules/.bin/fa5-upgrade from project root directory to upgrade from FontAwesome to FontAwesome5Pro. It shows "No such file or directory" error

Additional notes:

• under./node_modules/react-native-vector-icons/Fonts in my project folder, FontAwesome styled fonts (i.e. FontAwesome5_Brands.ttf) is not present.

• under./node_modules/react-native-vector-icons/Fonts in my project folder, FontAwesome5.js and FontAwesome5Pro.js is not present

Any suggestion is appreciated.

[hampustagerud]

Did you install this from npm or git? The npm version does not contain the FA5 updates 🙃

[AlexWang-16]

Ah ok, that explains it. I tried npm and yarn. How can I install this via git and integrate it with my react-native project?

[hampustagerud]

Good to hear that we found the problem 🙂

You can choose where npm should install the package from, check out the docs here 🙂

[AlexWang-16]

Thanks for helping! Sorry to bump this thread, but I thought it would be related and helpful to others who may have the same problem as I do...

I used the instructions from your link to add the project using github's link. When I import and try to use FontAwesome5.getImageSource() after importing from "react-native-vector-icons/FontAwesome5" or "react-native-vector-icons/FontAwesome5Pro", I get this red screen on my iPhone.

It looks like this error message has to do with Object-C/Swift code. I'm wondering if you may know how to resolve this?

[hampustagerud]

Could you share some javascript? 🙂

[AlexWang-16]

import FontAwesome from 'react-native-vector-icons/FontAwesome5Pro';

Promise.all([
  FontAwesome.getImageSource("angle-left", 38),
  FontAwesome.getImageSource("ellipsis-h", 26)])
      .then(icons => {
          const rightButtons = (this.options.length > 0)? [{ icon: icons[1], id: 'dots' }] : [];
          const leftButtons = [{ icon: icons[0], id: 'back' }];
          this.props.navigator.setButtons({
              rightButtons,
              leftButtons
    });
});

[hampustagerud]

Hmm, I can't seem to be able to reproduce the error... Can you use regular icons?

[AlexWang-16]

Yes. I can use FontAwesome and IonIcons without issues.

[hampustagerud]

Can you include the entire callstack (should be printed to the console as well)?

[AlexWang-16]

Exception '* -[__NSPlaceholderDictionary initWithObjects:forKeys:count:]: attempt to insert nil object from objects[0]' was thrown while invoking getImageForFontAwesome5 on target RNVectorIconsManager with params (
"Font Awesome 5 Free",
"\Uf104",
38,
0,
4278190080,
12515
)
callstack: (
0 CoreFoundation 0x0000000183496da4 + 252
1 libobjc.A.dylib 0x00000001826505ec objc_exception_throw + 56
2 CoreFoundation 0x000000018342f750 _CFArgv + 0
3 CoreFoundation 0x00000001833680cc + 352
4 CoreFoundation 0x0000000183367f48 + 64
5 SproutNative 0x0000000100eb29f8 -[RNVectorIconsManager createAndSaveGlyphImage:withFont:withFilePath:withColor:] + 412
6 SproutNative 0x0000000100eb34fc -[RNVectorIconsManager getImageForFontAwesome5:withGlyph:withFontSize:withFontStyle:withColor:callback:] + 1428
7 CoreFoundation 0x000000018349e580 + 144
8 CoreFoundation 0x000000018337d748 + 284
9 CoreFoundation 0x000000018338256c + 60
10 SproutNative 0x00000001010089a0 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 2064
11 SproutNative 0x00000001010b3130 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 664
12 SproutNative 0x00000001010b2cc0 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 132
13 SproutNative 0x00000001010b2c30 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 28
14 libdispatch.dylib 0x0000000101ebd1dc _dispatch_call_block_and_release + 24
15 libdispatch.dylib 0x0000000101ebd19c _dispatch_client_callout + 16
16 libdispatch.dylib 0x0000000101ecbdfc _dispatch_queue_serial_drain + 768
17 libdispatch.dylib 0x0000000101ec06ac _dispatch_queue_invoke + 328
18 libdispatch.dylib 0x0000000101eccd54 _dispatch_root_queue_drain_deferred_wlh + 352
19 libdispatch.dylib 0x0000000101ed3e38 _dispatch_workloop_worker_thread + 676
20 libsystem_pthread.dylib 0x00000001830bbe70 _pthread_wqthread + 860
21 libsystem_pthread.dylib 0x00000001830bbb08 start_wqthread + 4
)

RCTFatal
facebook::react::invokeInner(RCTBridge, RCTModuleData, unsigned int, folly::dynamic const&)
facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const
invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_queue_serial_drain
_dispatch_queue_invoke
_dispatch_root_queue_drain_deferred_wlh
_dispatch_workloop_worker_thread
_pthread_wqthread
start_wqthread

[AlexWang-16]

Console version:

ExceptionsManager.js:71 Exception '* -[__NSPlaceholderDictionary initWithObjects:forKeys:count:]: attempt to insert nil object from objects[0]' was thrown while invoking getImageForFontAwesome5 on target RNVectorIconsManager with params (
"Font Awesome 5 Free",
"\Uf104",
38,
0,
4278190080,
16165
)
callstack: (
0 CoreFoundation 0x0000000183496da4 + 252
1 libobjc.A.dylib 0x00000001826505ec objc_exception_throw + 56
2 CoreFoundation 0x000000018342f750 _CFArgv + 0
3 CoreFoundation 0x00000001833680cc + 352
4 CoreFoundation 0x0000000183367f48 + 64
5 SproutNative 0x0000000100eb29f8 -[RNVectorIconsManager createAndSaveGlyphImage:withFont:withFilePath:withColor:] + 412
6 SproutNative 0x0000000100eb34fc -[RNVectorIconsManager getImageForFontAwesome5:withGlyph:withFontSize:withFontStyle:withColor:callback:] + 1428
7 CoreFoundation 0x000000018349e580 + 144
8 CoreFoundation 0x000000018337d748 + 284
9 CoreFoundation 0x000000018338256c + 60
10 SproutNative 0x00000001010089a0 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 2064
11 SproutNative 0x00000001010b3130 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 664
12 SproutNative 0x00000001010b2cc0 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 132
13 SproutNative 0x00000001010b2c30 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 28
14 libdispatch.dylib 0x0000000101ebd1dc _dispatch_call_block_and_release + 24
15 libdispatch.dylib 0x0000000101ebd19c _dispatch_client_callout + 16
16 libdispatch.dylib 0x0000000101ecbdfc _dispatch_queue_serial_drain + 768
17 libdispatch.dylib 0x0000000101ec06ac _dispatch_queue_invoke + 328
18 libdispatch.dylib 0x0000000101eccd54 _dispatch_root_queue_drain_deferred_wlh + 352
19 libdispatch.dylib 0x0000000101ed3e38 _dispatch_workloop_worker_thread + 676
20 libsystem_pthread.dylib 0x00000001830bbe70 _pthread_wqthread + 860
21 libsystem_pthread.dylib 0x00000001830bbb08 start_wqthread + 4
)
reactConsoleErrorHandler @ ExceptionsManager.js:71
console.error @ YellowBox.js:69
logToConsole @ RCTLog.js:46
logIfNoNativeHook @ RCTLog.js:29
__callFunction @ MessageQueue.js:351
(anonymous) @ MessageQueue.js:116
__guardSafe @ MessageQueue.js:314
callFunctionReturnFlushedQueue @ MessageQueue.js:115
(anonymous) @ debuggerWorker.js:70

[hampustagerud]

I'm sorry, I still can't reproduce or figure out what is wrong. Can you try removing the ./node_modules/react-native-vector-icons folder, reinstalling npm install and relinking react-native link react-native-vector-icons the library? Maybe there is some remains from the old npm library that you installed.

[AlexWang-16]

I tried it just now, but the issue is still happening on my end. Here's what I did:

1. npm uninstall react-native-vector-icon. Verified the package was deleted from node_modules directory.

2. Added "react-native-vector-icon": "oblador/react-native-vector-icons" to package.json under dependencies property.

3. npm install

4. react-native link react-native-vector-icons.

I noticed that when I installed the package using github repo style link, index.js was not under dist directory, leading to error. I modified the package's package.json to set main property to "index.js" to get my app to load.

[Khorkhe]

Hello, any chance this will be made available through Expo directly? I was able to get others running without any additional steps, but it seems FA5 would require me to eject and work directly with the native platforms? Or is it that other fonts will also require me to eject once I want to build native binaries? It would be great if those could be clarified in the README. Thanks!

[hampustagerud]

Expo is not supported by this package, use https://github.com/expo/vector-icons. It doesn't require FA5 at the moment (see https://github.com/expo/vector-icons/issues/58). The other fonts seem (and should) be supported.

[kenmistry]

hi, i have a slightly different issue. i can't seem to load up FA5 Pro fonts v5.4.1 nor v5.4.2 (the latest version at this time). in the README, under Bundled Icon Sets, i noticed that the version of FA5 /FA5 Pro fonts is at v5.3.1. does this imply that newer versions won't work?

[hampustagerud]

Indeed, the new icons are not included in the glyphmap. Technically the font should load fine and work whether it's 5.3 or 5.4 but the icons from 5.4 are not accessible using this framework (currently). I'll upgrade it this week 🙂

Is not working at all or just missing icons?

[kenmistry]

hi, @hampustagerud. good to know! looking forward to it and thanks for the awesome work.

the FA5 Pro fonts are working up to 5.3, while newer icons from 5.4 are showing up as ? despite updating to 5.4 .ttf files.

[hampustagerud]

Then that is an upgrading problem, good to know! Stay tuned for the next release 🙂 If you want it before it is released on npm you should use the github repo in your package.json:

"react-native-vector-icons": "oblador/react-native-vector-icons"

[gongmingqm10]

I also faced this issue when upgrade the version from v4.6.0 to v6.6.0. And finally found this is caused the new font resource is not under my QA target. Fixed it by clicking it to my current target.