CODEWITHSUNDEEP
reactjsreact-nativereact-native-iosreact-native-vector-icons
Rahul Mishra
Rahul Mishra

Reputation: 4583

React native vector icon not working on current version 0.60

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

Upvotes: 24

Views: 26616

Answers (5)

CrewXcoder
CrewXcoder

Reputation: 1

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

Icon.loadFont();

try this

Upvotes: -2

Duyv
Duyv

Reputation: 19

Run 

npx react-native link

at root folder project to resolve this problem.

Hope it helps.

Upvotes: 1

Guilherme Oliveira
Guilherme Oliveira

Reputation: 2369

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

Upvotes: -1

Rahul Mishra
Rahul Mishra

Reputation: 4583

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.

Upvotes: 55

Auticcat
Auticcat

Reputation: 4489

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

Upvotes: 4

Related Questions