react-native-vector-icons Font Awesome 5 Pro icons not working

Question

I'm trying to use fontAwesome5Pro in react-native-vector-icons. Even the fontAwesome5 non-pro icons don't seem to be displaying. The older font awesome 4 icons display. I do have Pro version of fontawesome and I ran the command to automatically update my react-native-vector-icons to pro fontAwesome: ./node_modules/.bin/fa5-upgrade and entered my fontAwesome npm token. That part seems to have been successful.

I'm getting this error in the app:

The icons just show up as question marks.

Code:

import AwesomeIcon from 'react-native-vector-icons/FontAwesome5Pro'

<AwesomeIcon
     style={{
         marginLeft: 20
     }}
     name={'utensils'}
/>

I've put the icons into xCode:

I've got the Icons in the project as shown in VS Code:

The rnpm in package.json references the fonts:

I have changed 'react-native-vector-icons` from version 6.6.0 to version 6.3.0 because of this SO answer. But I still get the same error. What else can I check to get these font awesome pro icons working?

Answer 1

in my case, I fixed it by:

1. for ios:

the naming of "FontAwesome5Pro-Solid.ttf" (both add reference to Resources and add to info.plist)

2. for android the file naming should be "FontAwesome5_Pro_Solid.ttf" in assets/fonts

the naming is different but the doc never say that. btw, android must use real device, simulator does not render the fontawesome pro icons.

Answer 2

To use FontAwesome5Pro you should buy a licence.
You can use all free icons of FontAwesome5 by import down text:

import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

Usage:

<FontAwesome5 name="youtube" size={60} />

Answer 3

After updating the font, run react-native link to copy the fonts to the respective platform(ios/android)

Answer 4

The fonts were not in info.plist

Solution: Add this to info.plist where the other fonts for the app are located.

<string>FontAwesome5_Pro_Solid.ttf</string>
<string>FontAwesome5_Pro_Brands.ttf</string>
<string>FontAwesome5_Pro_Light.ttf</string>
<string>FontAwesome5_Pro_Regular.ttf</string>