React-native-vector-icons: Not working with RN v0.62.0

[ajaybhatia]

This package in not working with RN v0.62.0. It's not getting linked in native dirs

[EvertonCosmo]

I Just link it (react-native link) , after this I clean gradle : cd android; ./gradlew clean and this work

[ajaybhatia]

I Just link it (react-native link), after this I clean gradle : cd android; ./gradlew clean and this work

Not working

[lucastryhorn]

I found solution, make sure that the fonts are on the right path, by linking to 0.62, he created a src on the root of android, right path, android\app\src\main

[ajaybhatia]

I found solution, make sure that the fonts are on the right path, by linking to 0.62, he created a src on the root of android, right path, android\app\src\main

I think the issue is with v0.62.0 itself and not with this package. I e opened an issue on react-native repo https://github.com/facebook/react-native/issues/28430. Everyone facing issue and comment there.

[abolfazlyounesi]

it works for me by Manual linking
of course with skipping 'Edit your MainApplication.java... ' step

[stefanorueda]

Any solution? I tried react-native link and still doesn't work.

[siriwatknp]

If your found this error Red screen with "Unrecognized font family" error, try this.

put this

<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>

at the end in Info.plist. It works for me react-native: 0.62.1

[stefanorueda]

If your found this error Red screen with "Unrecognized font family" error, try this.

put this

<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>

at the end in Info.plist. It works for me react-native: 0.62.1

This solves my problem. Thanks!

[nbcnc]

Not working in RN 62.1 Tried everything.

[allpwrfulroot]

You also need to add the fonts as assets:

react-native.config.js:

module.exports = {
  assets: ['./assets/fonts/'],
};

Add the font(s) to said folder:

(Not sure if required but maybe do it anyway): cd ios && pod install

Example test case (I don't know where to find all the type names, some guessing required):

  <Input
     label="Phone number"
     placeholder="555 5555"
     leftIcon={
        <Icon name="phone" type="simple-line-icon" color="#517fa4" />
     }
     value={phoneNumber}
     errorStyle={{color: 'red'}}
     errorMessage="ENTER A VALID ERROR HERE"
  />

Clean the build folder and start up your project again:

[nbcnc]

suggestion from @allpwrfulroot worked.

So, here's the rundown on what finally got this working for me in RN v0.62.1. I am also using react-native-elements, which has a dependency on react-native-vector-icons, so this fix was extremely important.

yarn add react-native-vector-icons

Android:

1. Follow the instructions on the react-native-vector-icons page under the heading "Option: With Gradle (recommended)"
2. Add react-native.config.js to your project as described above
3. Copy the .ttf files into the new assets/fonts/ directory in your project as described above
4. I ran cd android && ./gradlew clean but that may not be necessary

iOS:

1. Updated the Info.plist file with all of the fonts files I want as described above
2. I did not need to copy the font files into Xcode as described in the instructions.
3. I ran cd ios && pod install

Thank you!

[sirakoff]

For anyone using npx react-native run-ios, you have to use it like:

import Icon from "react-native-vector-icons/Feather";

Icon.loadFont();

[vladp]

I use manual linking as described in the readme
https://github.com/oblador/react-native-vector-icons#android
So, I do not need to specifying anything related to vector-icons in react-native.config.js.
This all works with RN 0.62.

The only blocking issue to migrate to 0.62, is https://github.com/oblador/react-native-vector-icons/pull/1153 (and it is because 6.6.1 release with ToolbarAndroid fix is not published to npm)

[phanghos]

@nbcnc detailed step-by-step, based on @allpwrfulroot answer worked for me. Guys, you saved my day! Thank you!!!

[micnguyen]

Isn't @allpwrfulroot 's solution just manually copying the fonts to the local RN project and not linking it anyway to the node_modules?