react-native-vector-icons: Unrecognized font family 'FontAwesome5Free-Regular'

Environment

OS: High Siera iOS Version: 12.1 Device: Simulator(iPhone XR)

"dependencies": {
    "native-base": "^2.13.5",
    "react": "16.8.6",
    "react-native": "0.60.5",
    "react-native-vector-icons": "^6.6.0",
  },

Description

In Android its working fine without any issues, in IOS i am getting bellow error in the Xcode Console.

2019-08-31 23:38:46.595 [error][tid:com.facebook.react.ShadowQueue][RCTFont.mm:314] Unrecognized font family 'FontAwesome5Free-Regular'
2019-08-31 23:38:46.595072+0530 MyAppBundle[25998:316276] Unrecognized font family 'FontAwesome5Free-Regular'
2019-08-31 23:38:46.637 [info][tid:com.facebook.react.JavaScript] 'BugReporting extraData:', { 'AppRegistry.runApplication1': 'Running application "MyAppBundle" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF' }
2019-08-31 23:38:46.637703+0530 MyAppBundle[25998:316283] 'BugReporting extraData:', { 'AppRegistry.runApplication1': 'Running application "MyAppBundle" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF' }
2019-08-31 23:39:20.212374+0530 MyAppBundle[25998:316381] [] nw_socket_handle_socket_event [C8.1:2] Socket SO_ERROR [54: Connection reset by peer]

Reproducible Demo

About this issue

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

Most upvoted comments

Solved it with using Icon.loadFont();

import Icon from 'react-native-vector-icons/Ionicons'; Icon.loadFont();

+20

jefelewis on Sep 22, 2019

You forget to add in info.plist

<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
</array>

+17

gemcave on May 5, 2020

For me this issue started when I

Disabled flipper in ios/Podfile like # use_flipper!()
Updated the pods.
Re built the app.

I fixed it by going to App_Name/App_Name/Fonts/Add files to “App_Name” and adding the necessary font files copied from ‘./node_modules/react-native-vector-icons/Fonts’ Adding font files

Manil-SoftNEP on Dec 12, 2022

Dear friends,

After I have stopped using FontAwesome5Pro Icons, the error went in iOS. I think we have to use the pro font with a license only.

rkaartikeyan on Sep 25, 2019

Try to follow steps like this link : https://github.com/oblador/react-native-vector-icons/blob/master/FONTAWESOME5.md @rkaartikeyan

royhanrahim on Sep 2, 2019