24

React native autolink not working for react native vector icons. I fixed this into android with this https://github.com/oblador/react-native-vector-icons/issues/1035

But on IOS i am still facing issues. Please let me know if anyone solved this...Thanks!

Here is screenshot what issue i am facing.

enter image description here

Rahul Mishra
  • 4,263
  • 7
  • 32
  • 53

5 Answers5

53

This worked for me on an upgraded project and on a brand new RN 0.60.0

For IOS add this to ios/projectname/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>MaterialCommunityIcons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Zocial.ttf</string>
    </array>

For Android add this line to android/app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

That is fixed my issues and react native vector icons working in both the platform.

Rahul Mishra
  • 4,263
  • 7
  • 32
  • 53
  • 1
    After doing this I am getting the following error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: - react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons") . I am using RN V0.62.2 – Diptesh Atha Jun 05 '20 at 09:58
  • Thanks for this answer, was looking for this from hrs.. realy helpful.. – Kalpesh Kundanani Nov 06 '20 at 18:42
  • Glad to know the answer is helping you. – Rahul Mishra Nov 07 '20 at 02:57
2

If you did react-native link on iOS do cd ios and then pod install.

Some packages still need to be updated by the maintainers to work with react native.

Aniway, if you dont wanna link go inside your podfile and add:

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

after that do the same steps i said before

Auticcat
  • 4,359
  • 2
  • 13
  • 28
1

Run 

npx react-native link

at root folder project to resolve this problem.

Hope it helps.

CKE
  • 1,533
  • 19
  • 18
  • 29
Duyv
  • 19
  • 1
-1

Fonts, images, and other external assets should still be linked by using react-native link command, which is the only reason why the command still exists.

However, the configuration to link assets changed, once in the past it was by placing a rnpm entry in package.json with the paths to be linked. Check here.

The correct way now to have fontawesome linked is to have a react-native.config.js file.

1 - Create a react-native.config.js file

 module.exports = {
      project: {
        ios: {},
        android: {},
      },
      assets: [
        './node_modules/react-native-vector-icons/PATH_TO_FONT_A',
        './node_modules/react-native-vector-icons/PATH_TO_FONT_B',
      ],
    };

2 - run command

react-native link

This time, now, the link command will produce a log message such as 

info Linking assets to ios project
warn Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.
info Linking assets to android project
success Assets have been successfully linked to your project
Guilherme Ferreira
  • 2,209
  • 21
  • 23
  • Adding just some fonts from `node_modules/react-native-vector-icons/Fonts` to `assets` array does not exclude all the other ones. How to exclude unnecessary fonts from `react-native-vector-icons`? – Christos Lytras Nov 12 '19 at 16:14
-2

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

Icon.loadFont();

try this

CrewXcoder
  • 1