React native vector icons linking

[nelsonprsousa]

Is your feature request related to a problem? Please describe.
React native vector icons is one of the few libraries that isn't linking automatically. I followed the instructions using CocoaPods option and got the following error after run the app:

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")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink " and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.

I was just expecting this if I followed the react native link option.

Describe the solution you'd like
Autolinking. The current solution seems to link but then I need to unlink 🤷‍♂️

Additional context
I've ran react-native unlink react-native-vector-icons and the line that I added on my Podfile got deleted. After that, the app still runs.

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

[GustavoMSevero]

Hi Nelson,
I had similar problem, but i didn't link react-native-vector-icons because it doesn't change nothing, unfortunately.
now the problem is react-native don't recognize font 'FontAwesome' kkkkkk

[nelsonprsousa]

I also didn't link, just followed the CocoaPods options, but everytime I run the app, the error appears. 🤷‍♂️

Let's see if some maintainer know what's happening 👍 If you guys need something just give me a heads up 👍

[joshuabalduff]

+1

[thaneros]

Same issue here

[honeynegi]

why i get this error event after following all the steps for linking the library

[nelsonprsousa]

why i get this error event after following all the steps for linking the library

Posted the solution here:
#1169 (comment)

[jainRashiTFT]

same issue here

[dstockdale]

+1 Same issue here

[sangameshrently]

Run below commands to solve this issue.
npx react-native link
npx react-native unlink react-native-vector-icons

[nelsonprsousa]

Run below commands to solve this issue.
npx react-native link
npx react-native unlink react-native-vector-icons

Why link and unlink right after? 🤔

[sangameshrently]

Run below commands to solve this issue.
npx react-native link
npx react-native unlink react-native-vector-icons

Why link and unlink right after? 🤔

I am not sure exactly why. But when I follow these steps its working..

[bkh2js]

Run below commands to solve this issue.
npx react-native link
npx react-native unlink react-native-vector-icons

Why link and unlink right after? 🤔

I am not sure exactly why. But when I follow these steps its working..

try to install the pods and the project will fail.

cd ios && pods install 

[bkh2js]

This is really puzzling issue! I have the same issue.

[sangameshrently]

@bkh2js Please try my approach.. That is working..
Run npx react-native link && npx react-native unlink react-native-vector-icons

[sangameshrently]

@bkh2js : Please tell me your issue in details. I will try to answer.

[nelsonprsousa]

We are trying to get some workarounds for a main problem. And the workaround was reported in the first message (the issue): everything works after the unlink.

The problem is, why should we link to unlink right after? Shouldn't the autolinking be working after 0.60? @oblador do you have any idea or what's causing the autolinking to not work as expected?

[bkh2js]

@sangameshrently @nelsonprsousa solution seems to work.

[anastely]

@sangameshrently I'm trying it...
but in every time i got this error when Build

Multiple commands produce '/Users/anas/Library/Developer/Xcode/DerivedData/myApp-dgyemahaekpmtsewexlythyooogi/Build/Products/Debug-iphonesimulator/myApp.app/AntDesign.ttf':

1. Target 'myApp' (project 'myApp') has copy command from '/Volumes/Work/Works/QiamApp/node_modules/react-native-vector-icons/Fonts/AntDesign.ttf' to '/Users/anas/Library/Developer/Xcode/DerivedData/myApp-dgyemahaekpmtsewexlythyooogi/Build/Products/Debug-iphonesimulator/myApp.app/AntDesign.ttf'
2. That command depends on command in Target 'myApp' (project 'myApp'): script phase “[CP] Copy Pods Resources”

[sangameshrently]

@sangameshrently I'm trying it...

but in every time i got this error when Build

Multiple commands produce '/Users/anas/Library/Developer/Xcode/DerivedData/myApp-dgyemahaekpmtsewexlythyooogi/Build/Products/Debug-iphonesimulator/myApp.app/AntDesign.ttf':

1. Target 'myApp' (project 'myApp') has copy command from '/Volumes/Work/Works/QiamApp/node_modules/react-native-vector-icons/Fonts/AntDesign.ttf' to '/Users/anas/Library/Developer/Xcode/DerivedData/myApp-dgyemahaekpmtsewexlythyooogi/Build/Products/Debug-iphonesimulator/myApp.app/AntDesign.ttf'

2. That command depends on command in Target 'myApp' (project 'myApp'): script phase “[CP] Copy Pods Resources”

Sorry I am not getting you.

[anastely]

@sangameshrently I'm trying it...

but in every time i got this error when Build

Multiple commands produce '/Users/anas/Library/Developer/Xcode/DerivedData/myApp-dgyemahaekpmtsewexlythyooogi/Build/Products/Debug-iphonesimulator/myApp.app/AntDesign.ttf':

1. Target 'myApp' (project 'myApp') has copy command from '/Volumes/Work/Works/QiamApp/node_modules/react-native-vector-icons/Fonts/AntDesign.ttf' to '/Users/anas/Library/Developer/Xcode/DerivedData/myApp-dgyemahaekpmtsewexlythyooogi/Build/Products/Debug-iphonesimulator/myApp.app/AntDesign.ttf'

2. That command depends on command in Target 'myApp' (project 'myApp'): script phase “[CP] Copy Pods Resources”

Sorry I am not getting you.

After Linking the lib I couldn't build the app and I got this error in Xcode Logs

[sangameshrently]

@anastely : You have to link then unlink.. it will work . Read my previous comments in same post.

[anastely]

@sangameshrently Yes, that's what I was doing but it does not work for me sadly.

[sangameshrently]

@anastely oh. Can you try manually deleting font names from info Plist

[anastely]

@sangameshrently Same...

[evanb2]

I'm on:

react-native: 0.60.6
react-native-vector-icons: 6.6.0

What worked for me was running npx pod-install, which you can see in the output detects the Podfile:

Detected React Native module pods for RNVectorIcons, BugsnagReactNative, RNCAsyncStorage, RNCPushNotificationIOS, RNGestureHandler, react-native-image-picker, react-native-intercom, react-native-netinfo, react-native-pusher-push-notifications, react-native-splash-screen, react-native-video, and react-native-webview

Then, add the font assets to your Info.plist but make sure your App.xcodeproj does not contain references to them,

I did not run the link/unlink commands as others have said here, nor did I need to add RNVectorIcons to my project's Podfile directly.

Also, make sure you clean your build folder + yarn start --reset-cache (aka 🔥 it all down) before building.

[vinibiso]

Well for me the linking and unlinking solution made it not crash every time the app is reloaded but for some reason i only get a ? icon the icons never appears.

[evanb2]

Well for me the linking and unlinking solution made it not crash every time the app is reloaded but for some reason i only get a ? icon the icons never appears.

Instead of running the commands, manually add the icon files to your Info.plist

[vinibiso]

Tried it, but when I do that the app just stays in the "Feather" not found error and not even reloading does the trick.

[evanb2]

Tried it, but when I do that the app just stays in the "Feather" not found error and not even reloading does the trick.

And you ran pod install and saw the package listed in the output?

[evanb2]

And you restarted your watchman?
yarn start —reset-cache

[vinibiso]

I delete all my pods.

Then ran xcodebuild clean inside de iOS.

Re-installed all my pods where i got:
Auto-linking React Native modules for target AntroAv: BVLinearGradient, RNCMaskedView, RNGestureHandler, RNReanimated, RNScreens, RNVectorIcons, RealmJS, and react-native-safe-area-context

Uninstalled the app from my simulator.
Ran yarn ios and on another tab yarn start —reset-cache

When the app opened I got this:

Then when I save a file and the app reloads it loads but the icons doesn't show:

I get the same Error above when I change the name of the icon.

Edit:
Just to add a little bit more of confusion I also tried changing the import to material icons and trying a different icons:

And got this:

[evanb2]

@vinibiso Mmk and you said you added them to your Info.plist.

Did you check:

“ensure that they also appear under Copy Bundle Resources in Build Phases.”

[vinibiso]

@evanb2 So i checked it out and i wasn't.
So I did that section again.
And I had the

`Build system information
error: Multiple commands produce '/Users/vinicius/Library/Developer/Xcode/DerivedData/AntroAv-cabktmpcoouhuqbirxunajjpegko/Build/Products/Debug-iphonesimulator/AntroAv.app/Feather.ttf':

1. Target 'AntroAv' (project 'AntroAv') has copy command from '/Users/vinicius/Documents/projects/AntroAv/node_modules/react-native-vector-icons/Fonts/Feather.ttf' to '/Users/vinicius/Library/Developer/Xcode/DerivedData/AntroAv-cabktmpcoouhuqbirxunajjpegko/Build/Products/Debug-iphonesimulator/AntroAv.app/Feather.ttf'
2. That command depends on command in Target 'AntroAv' (project 'AntroAv'): script phase “[CP] Copy Pods Resources”`

And yes I reisntalled pods and did everything I did before.

So i manually eddited the project.pbxproj file and removed de duplicate.
The build worked, but still the same problems as reported earlier.
Icons don't show up.

It's very weird. But maybe I'm still doing something wrong.

[HundredBillion]

This was the only thing that worked for me!

Run below commands to solve this issue.
npx react-native link
npx react-native unlink react-native-vector-icons

I am on react-native-vector-icons 7.0.0 and react-native 0.63.2
Not sure if this means that I am now "unlinked" but it works and I've spent 2hrs trying to figure this stupid thing out, so I'm just going with it.

[lfoliveir4]

This was the only thing that worked for me!

Run below commands to solve this issue.
npx react-native link
npx react-native unlink react-native-vector-icons

I am on react-native-vector-icons 7.0.0 and react-native 0.63.2
Not sure if this means that I am now "unlinked" but it works and I've spent 2hrs trying to figure this stupid thing out, so I'm just going with it.

Solved to me

[kylerjensen]

I think this is happening because there is a resources line in the .podspec AND an assets line in react-native.config.js. I think it's causing the font files to be copied twice when auto linking occurs, so removing one of these should solve the problem.

[AliRehman7141]

cd ios && pods install

it's not pods install, It's pod install

[IvanMtz97]

I have solved this instead of unlinking the package removing all the .ttf resources from Build Phases -> Copy Bundle Resources and then running the application.

[sam-uraii]

Hey guys!! Initially, my project was working fine with react-native-vector-icons without doing any of these things. But then I installed expo-media-library and for that to work on the bare app I had to use "unimodules-font-interface", "react-native-unimodules": "^0.14.6",expo-task-manager-interface": "^3.0.0", all these libraries. And after installing these libraries I was getting unrecognized font family "material-community" error. And I have tried every single thing on the internet. But not being able to get the resolution. PS: I am using React-native-paper library. plz help.......

[Versiani-R]

Okay, so on Mac m1, I solved by uninstalling react-native-vector-icons, running npx react-native link, and then cd ios and pod install. I have absolutely no idea why it worked. And all icons are working ?????

[h22k]

worked for me, thanks.

[TALBI-svg]

Run below commands to solve this issue. npx react-native link npx react-native unlink react-native-vector-icons

Yes I did but react native is give that's unrecognized "link"

[kylerjensen]

Run below commands to solve this issue. npx react-native link npx react-native unlink react-native-vector-icons

Yes I did but react native is give that's unrecognized "link"

The link command has been removed as of react-native@0.69, (react-native-cli@8.0). See react-native-community/cli#1537.

[TALBI-svg]

Run below commands to solve this issue. npx react-native link npx react-native unlink react-native-vector-icons

Yes I did but react native is give that's unrecognized "link"

The link command has been removed as of react-native@0.69, (react-native-cli@8.0). See react-native-community/cli#1537.

so how we gonna link native labraries using this new version of react-native ??

[sarib-app]

Dont't worry its not a problem !
Make sure you have linked the package after installing and then add this line in
Android folder -> App Folder -> Build.gradle file -> dependencies section
like this
dependencies { implementation project(':react-native-vector-icons') //ADD THIS LINE }