Add autolinking compatibility for RN >=0.60.0

[Matiyeu]

Hello Could you add support for autolinking for RN >=0.60.0 please thanks! https://github.com/react-native-community/cli/blob/master/docs/autolinking.md

[qlerebours]

I think you also need to upgrade two variables for Android:

compileSdkVersion 28
buildToolsVersion "28.0.1"

For those who can't upgrade to RN 0.60 ATM, you can use npm patch package to patch the module

[StefanDorresteijn]

I think you also need to upgrade two variables for Android:

compileSdkVersion 28
buildToolsVersion "28.0.1"

For those who can't upgrade to RN 0.60 ATM, you can use npm patch package to patch the module

It'll automatically use the correct compileSdkVersion and buildToolsVersion so you don't have to ptach for those. The only thing this project needs to have auto-linking added is the automatic inclusion of

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

somehow.

[Matiyeu]

Yes I know @StefanDorresteijn but I had to do it manually to make it work. Same on ios..

[IntelliJAbhishek]

+1

[craig8two]

+27

[craig8two]

@Matiyeu , how did you manually get this to work?

[davincho]

At least for iOS this https://github.com/oblador/react-native-vector-icons/issues/1035#issuecomment-508645612 worked for me.

[barunprasad]

Is anyone looking into this? I am not able to upgrade my RN project to the latest 0.60.x due to just this dependency and I don't want to do it manually.

[devrdias]

+1

[whiskeyseven]

I think you also need to upgrade two variables for Android:

compileSdkVersion 28
buildToolsVersion "28.0.1"

For those who can't upgrade to RN 0.60 ATM, you can use npm patch package to patch the module

It'll automatically use the correct compileSdkVersion and buildToolsVersion so you don't have to ptach for those. The only thing this project needs to have auto-linking added is the automatic inclusion of

This doesn't seem to work correctly. Was getting build errors about missing v28 resources (/node_modules/react-native-vector-icons/android/build/intermediates/res/merged/release/values-v28/values-v28.xml:7: error: resource android:attr/dialogCornerRadius not found.)

My project build.gradle is:

compileSdkVersion 28
buildToolsVersion "28.0.3"

Manually edited this package's build.gradle to match: (node_modules/react-native-vector-icons/android/build.gradle)

compileSdkVersion safeExtGet('compileSdkVersion', 28)
buildToolsVersion "28.0.3"

and it started building correctly. Will probably explore npm patch package mentioned above in the meantime...

[vinurs]

look forward to autolink

[doponalopes]

+1

[piashcse]

autolinking doesn't work in case of RN 60.4 ,Please add support for autolinking

[tux2nicolae]

+1

[stanka-n]

+1

[leandrolimasi]

+1. I'm trying to use RN >= 0.60 using pods instead but not work, I am facing this issue: ExceptionsManager.js:86 $RefreshReg$ is not defined

[Ravi448]

You need to follow below steps in order to work with RN>=0.60 I have tested it in RN 0.60.4 and it will work smoothly.

yarn add react-native-vector-icons

Now navigate to ios folder and run

pod install

Now back to root folder and create a file named react-native.config.js in root of your project and add below code in this file,

module.exports = {
    assets: ['react-native-vector-icons']
};

And finally run;

yarn react-native link

Now you are ready to use react-native-vector-icon

Happy coding 😺

[doponalopes]

For me it worked that way but I had to auto link yet. thank you @Ravi448

[piashcse]

hello guys follow this one for ios : https://medium.com/@vimniky/how-to-use-vector-icons-in-your-react-native-project-8212ac6a8f06 For android I just solved the issue using: apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" this line paste into android/app/build.gradle(app). then re-run android.

[leandrolimasi]

fixed, thanks everyone

[durdevic]

After running react-native link react-native-vector-icons, I needed to remove all the fonts from Copy Bundle Resources from your XCode project to run on iOS, Build Phases should look like this

[vinurs]

is there any plan that when to support autolink?

[joaodematejr]

+1

[RatebSeirawan]

+1

[nickfla1]

+1

[MrHazimAli]

+1

[alexfoxy]

+1

[laurenzfg]

+1

[a-c-sreedhar-reddy]

Is anyone working on autolinking feature?

[aniciom]

Auto linking worked for me, i'm using rn 0.60.5

[a-c-sreedhar-reddy]

For me it showed box with X mark

[marcg438]

For me, Auto linking didn't work and an X mark was shown. For it to work, I had to manually link it to the project, now the icon shows up but I have a message stating that i should use auto-linking.

[yasir-netlinks]

Hi guys, I tried all the solutions but Im still not able to run the icons (Android), the app builds and runs fine, but the icons appear in some kind of chinese characters.

[adescode]

Hi guys, I tried all the solutions but Im still not able to run the icons (Android), the app builds and runs fine, but the icons appear in some kind of chinese characters.

set it this way: apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" //vector icon should come after

Dont do this didn't work when i tried it apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" //dont paste the vector icon before the native module

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

Thanks.

[yasir-netlinks]

@adescode I moved this line

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

At the top of android/app/build.gradle and it started working

is this really necessary apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) ??

[radiosilence]

Is there a way to not auto-bundle any of the TTF fonts? We don't use any of the existing packs, just our own font.

Does the fonts being linked into the Xcode project mean they will be included in the IPA?

[ASchwad]

So is this project supporting auto-linking? I am confused, if i still have to follow the installation manual in the readme or if its just fine by auto linking

[cimitan]

I had to manually link with react-native 0.60.5 and android because it was not adding the fonts... I did add the apply line in the correct file, but the *.ttf fonts were just not pulled in the android assets folder

[radiosilence]

Yeah it auto-links, unfortunately there seems to be no way to choose what it links.

[davidmarinangeli]

I had to add the package in the MainApplication.java file to manually link the library. The @Ravi448 was helpful for the rest.

[lropero]

+1 please!

[UncleYee]

+10086 please

[almeidacavalcante]

You need to follow below steps in order to work with RN>=0.60 I have tested it in RN 0.60.4 and it will work smoothly.

yarn add react-native-vector-icons

Now navigate to ios folder and run

pod install

Now back to root folder and create a file named react-native.config.js in root of your project and add below code in this file,

module.exports = {
    assets: ['react-native-vector-icons']
};

And finally run;

yarn react-native link

Now you are ready to use react-native-vector-icon

Happy coding

Works perfectly! Great job!

[clytras]

For those on RN >= 0.60 who want to add only selected fonts with assets autolinking, open node_modules/react-native-vector-icons/react-native.config.js and delete the 'Fonts' item from the assets array:

module.exports = {
  dependency: {
    assets: [],
  },
};

Then use npx patch-package react-native-vector-icons to create a patch to run on each install. You need to clean the project before creating the patch to not include the build files.

Then you can use your own project react-native.config.js to add your own assets fonts directory and copy there just the fonst you want to autolink.

module.exports = {
  project: {
    ios: {},
    android: {}
  },
  assets: [
    './assets/fonts'
  ]
}

[mayconmesquita]

+1 pls

[rafael-camara]

You need to follow below steps in order to work with RN>=0.60 I have tested it in RN 0.60.4 and it will work smoothly.

yarn add react-native-vector-icons

Now navigate to ios folder and run

pod install

Now back to root folder and create a file named react-native.config.js in root of your project and add below code in this file,

module.exports = {
    assets: ['react-native-vector-icons']
};

And finally run;

yarn react-native link

Now you are ready to use react-native-vector-icon

Happy coding

For me it worked . thank you @Ravi448

[azhararmar]

After running react-native link react-native-vector-icons, I needed to remove all the fonts from Copy Bundle Resources from your XCode project to run on iOS, Build Phases should look like this

For me, I had to delete all fonts from "Copy Pods Resources"

[thedeepanshuj]

You need to follow below steps in order to work with RN>=0.60 I have tested it in RN 0.60.4 and it will work smoothly.

yarn add react-native-vector-icons

Now navigate to ios folder and run

pod install

Now back to root folder and create a file named react-native.config.js in root of your project and add below code in this file,

module.exports = {
    assets: ['react-native-vector-icons']
};

And finally run;

yarn react-native link

Now you are ready to use react-native-vector-icon

Happy coding 😺

Thanks @rafael-camara This solution should be added to the official README as well.

[scousino]

Any update on when this package is going to support auto linking?

[mben1981]

Im using RN >=7 and none of the suggested solutions work, I want to install custom fonts and I cannot get it to work