![]() "native-base": "2.13.8" PodFile and adding pod RNVectorIcons not necessary because auto-linking will work fine after adding react-native-vector-iconsĪdding to PodFile will cause a warning after the next run with react-native run-ios: Warning: following modules are linked manually: - react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons" Works fine in my project with: "react": "16.9.0", Instead add this in your Podfile: pod 'RNVectorIcons', :path => './node_modules/react-native-vector-icons'įurthermore add this in your ist: UIAppFonts If you found this article useful please like, drop your comments and share with your friends.For RN 0.60+ don't use react-native link. Import Entypo from 'react-native-vector-icons/Entypo' Īnd that's how you can add Vector icons in your ios and android React native projects. Test your icons just like on the android import AntDesign from 'react-native-vector-icons/AntDesign' Or cd into the ios directory of your project cd iosįinally rebuild your project with yarn ios ttf in the names.Īfter you've added the fonts, go to your project's root directory and pod install like so npx pod-install AntDesign.ttfįollow the same process and add all of them. ![]() Once done, click on the plus icon(+) on " Fonts provided by application" to add another icon until you have added all the icons.Īs of "react-native-vector-icons": "^9.2.0", here are the list of available icon families. To add another font, click on the plus icon(+) on " Fonts provided by application" and it'll generate another " item 0" key value pair for you, go ahead and add the name of the second icon. On item 0, I'll add AntDesign.ttf like so To this,Ĭlick on the right hand side of Item 0 on the dropdown you just clicked on xcode Then start copying the names of the icons and adding them. To get a list of the icons, goto yourApp /node_modules /react -native -vector -icons /Fonts Now we are going to add all our icons here one after the other. Click on the drop down icon and you should see a key value pair input created initially as " item 0" like this When you click enter, it'll be created and you'll see a dropdown icon on it. An input will come up, type in " Fonts provided by application", it should auto-complete as you type. it'll open a window on the right hand side, look for this " Information property List", hover on it or click on it until you see a plus icon (+) like thisĬlick on the plus icon. Still on xcode, at the same directory level as the Fonts group you just created, you'll see a file called " ist" or " info"" (if abbreviated by xcode), click it. You should now see all the fonts in the Fonts Group you created. Now keep your xcode and Fonts folder side by side and drag the selected fonts from there to the "Fonts" group you created in your project's xcode.Ī screen will pop up like this, Ensure that "Copy items if needed" and " Create folder references" is ticked. ![]() You'll see some fonts there ending with ".ttf". On xcode, right click on the name of your project and click on "New Group" to create a groupĪfter this, go to your project's " node modules folder" from Mac Finder, look for and open " react-native-vector-icons", then open the " Fonts" folder there. I usually do that from the root of my project using The next thing is to open your project in xcode. After installing react-native-vector-icons.While android is a bit straight forward, the same is not for ios which is a bit tricky. P.S : You can only do this set up on an apple Mac book PC. Let's add another one from another icon family called "Entypo" import Entypo from 'react-native-vector-icons/Entypo' Finally we use a font from AntDesign like so.Let's import AntDesign import AntDesign from 'react-native-vector-icons/AntDesign' First import your desired icon family (You can find all the icons directory here ).To test our icons, go to any page of your app and do the following Then rebuild your android project with yarn android Or if you prefer yarn □ yarn add react -native -vector -iconsĪfter installation, go to android /app /adleĪnd add this line of code apply from: "././node_modules/react-native-vector-icons/adle" Next we install a package called react-native-vector-iconsĪt the root of your project in terminal, type this npm install -save react -native -vector -icons In this article, I will walk you through a step by step guide on how to set up vector icons on your android and ios React Native projects.įirst we set up a React Native project called todoApp. Whether on the web or on mobile platforms, icons play a necessary role in passing information to users.
0 Comments
Leave a Reply. |