How to Add React Native Vector Icons and Custom Fonts

[00:00 - 00:15] In this lesson, we will be adding vector icons and custom fonts to our application. So far, we have gotten along by using all the basic components from React Native, but React Native itself doesn't come with any icon pack.

[00:16 - 00:29] Now the reason we're doing this in the Mac section of the course is because it 's not quite as straightforward. The platform or the support from the library that we're going to use is not the same as on iOS.

[00:30 - 00:43] So there are some details that we need to take care just because we're on the Mac. So there is one easy way to add the icons, which is just linking the fonts folder from the package right into your application.

[00:44 - 00:58] However, that comes with the downside, which means we won't be able to add any custom fonts afterwards. So we're going to take a different route and we're going to manually add the fonts into our application.

[00:59 - 01:10] So we're going to start by adding the package that we're going to use. It's called React Native Vector icons.

[01:11 - 01:23] And we are also going to take this opportunity and add the types for it. Great.

[01:24 - 01:43] So now that we have that, this is going to be the first time that we're going to open Xcode on our own and manually modify the structure of the project. So I'm just going to open Xcode.

[01:44 - 01:52] And from Xcode, I am just going to open a project or a file. I'm going to go to my developer folder.

[01:53 - 02:02] I'm going to go into the project, macOS, and the XC workspace is the file that I'm looking for. I'm just going to open that.

[02:03 - 02:14] Xcode is going to load. And now we need to create some folders first.

[02:15 - 02:23] So I'm going to go going to open my terminal. I'm going to go into the macOS folder.

[02:24 - 02:32] Now here you can see I have a bunch of folders. And I'm going to go inside the macOS one.

[02:33 - 02:48] Once in there, I'm going to create a folder and I'm going to call it fonts. Now we need to take care or we need to grab the font files from the vector icons package and put it into this folder.

[02:49 - 03:02] So I'm just going to do it via command line, but you can do it whatever way you want. So if I'm already in this folder, I can just use the following command.

[03:03 - 03:07] And let me just check. Yes.

[03:08 - 03:14] Okay. So I can just go no modules.

[03:15 - 03:28] And react. This is probably not working the way I expected to be.

[03:29 - 03:33] Okay, it doesn't matter. I'm just going to navigate to the folder myself.

[03:34 - 03:43] And I'm going to go into the fonts folder and I'm just going to open that. And here you can see are all the icon fonts.

[03:44 - 03:55] So I'm just going to select all of them, then going to go back into the macOS folder. Going to find the folder that we created and I'm just going to make a copy of them in there.

[03:56 - 04:03] Great. Now with the fonts in place, I'm going to go back into Xcode and I'm going to take a look at the explorer.

[04:04 - 04:19] So you will see here that even though we created the folder itself, it's not appearing on our explorer. Because Xcode doesn't directly read the directory, you actually need to register each file within the project structure.

[04:20 - 04:29] So in order to do this, I'm just going to right click on the macOS folder and I 'm going to say add files to building apps. And I'm going to find my font folder.

[04:30 - 04:36] I'm going to make sure that create folder references is selected. I'm going to add it.

[04:37 - 04:46] And here you can see now it has picked up all of our fonts. We still need to take care of one more value, which is on the info playlist.

[04:47 - 04:59] This is just a file that contains some configuration specific for the native platform. And instead of here, I'm going to go for application fonts resource path.

[05:00 - 05:15] And I'm going to pass the name fonts. So basically what this is going to do is going to add all of the files within the fonts directory into the app itself into the bundle app.

[05:16 - 05:22] And in order to test this, I'm not going to run it from the console. I'm just going to run it from the scode just for you to check out how this works.

[05:23 - 05:37] You have to select the macOS app and you have to select it on the my Mac. And we can hit run and you will see that our application has started.

[05:38 - 05:49] So with my application in here, I'm going to go back into my books container. And I'm going to import the icons, right?

[05:50 - 06:12] So I imported from my package and this package in particular because it has many different fonts from different sources, you have to specify the sub package where you want to import the icon component. So now that I have the icon component in there, I am going to change the small change within my view container for my book title.

[06:13 - 06:16] I'm going to change the direction. You have flex.

[06:17 - 06:23] And I'm going to insert an icon in there. So if I save it, perfect.

[06:24 - 06:35] Right? So if you want to use any other icons, you can go into, well, you kind of have to search for each package, right?

[06:36 - 06:44] Because there is many of them, but you can look at the names, right? And you can use a lot of them within your app.

[06:45 - 06:48] Great. So let's get out of the way.

[06:49 - 06:57] And right. So the final step is adding custom fonts.

[06:58 - 07:09] But basically it's going to be the same process that we already did, right? We already have our fonts folder within our app.

[07:10 - 07:19] Here, we already have our fonts folder. So you're just going to take whatever font you want to add, put it in here.

[07:20 - 07:22] You don't have to do anything else on Xcode. It's going to be linked.

[07:23 - 07:29] And afterwards, you can just use it as a font family property whenever you pass a style into your application.