Vector Icons for Nav

[00:00:00]
>> Let's move on to vector icons. Now, remember all this kind of hassle that we have to go through to have really crisp local images for our users. We need to have three different files of different sizes and we need to package them with your app and then all the users have to download them it's a nightmare.

[00:00:18]
Well vector icons amazing on the web amazing on native. So I use vector icons a lot. If it's possible I'll make it into a vector icon. So vector icons are small. They use vectors, which means that they scale automatically. You don't need to have several versions of the same icon.

[00:00:36]
And also you can customize them so you can change the color of your path. Or you can use the color of the whole vector or part of it programmatically. They're super handy. I use them on pretty much all of my projects. So there are plenty of resources for finding icons.

[00:00:56]
One that I use quite frequently is called flat icon. And basically there's a bunch of free icons here. They require attribution though. So you can use them for personal commercial use but you have to give attribution if you don't have pro license. So just a caveat there. But if you're looking for just icons for your projects that's a good resource.

[00:01:18]
So I've chosen three icons from here already. And you guessed it. We have a library for this. So for rendering SVG we're going to use React Native SVG. So plain SVG is won't just work in React Native unfortunately we do need a library. So let's install it, so let's copy the install command open the terminal and paste it.

[00:01:43]
So this one does have native modules so we'll need to also run yarn install Rebuild iOS rebuild Android see the iOS uninstall. Game to stop. And restart Android. If you're a React Native developer, you get to be like the XKCD comic. Where your boss is like, what are you doing, and cuz your sword fighting, and you'll be like, I'm compiling, it's the same you're like, I'm installing native modules All right, so we'll see back into the root directory and run ios.

[00:02:30]
So let's have a look at the API for React Native SVG and how it works. So to add an SVG icon.SVG is generally looked like this. So you have an SVG it has some width and a height it has a view box and then basically the view box tells the SVG like how to render the path.

[00:02:48]
And you have various, like SPG elements you can have a path, the circle, a group, and cetera. Now on the web, like SVGs will look like this with the lowercase, the same, way we have div and paragraph and etc. For react native SVG, actually all we need to do to convert this SVG, to be rendered using react native.

[00:03:12]
Is use the SVG and path and search for elements from here. And they're super easy to find because it's basically on the web is SVG with a lowercase and then the export will be exactly the same but with a capital because it's a React component. So to convert this into a reconnaissance version, we'll basically replace these will give me the width and a height and, but also give it a fill color.

[00:03:43]
So let's see if this has finished. No, it's not, but I guess I can do this anyway. So, I'm going to copy this SVG file and go back to our project. And in components, so it's up to you whether you have one file per SVG, or whether you have all SVG in one file, it's completely your preference.

[00:04:07]
In this case, I'm going to do one file and put all of my SVGs in there. So, in components let's do a new file quotes icons.tsx and here let's import react from react. And let's do home icon react.FC. It's an arrow function and it will return. I'm going to paste the SVG that I've just copied in here.

[00:04:43]
Now this isn't valid yet. So I need to import SVG and path from React Native SVG. And then allow me to do is replace these with the uppercase versions and also export this the letter can be used. Now the last thing that I always do with my icons is I give them properties for the size and the color.

[00:05:18]
In this case I always want square icons which is what we want for our bottom tabs. Otherwise you could have width and height separate but because I know it was one a square I'm going to just use a size. So let's do type I call it props. So we want a size which is optional because we're going to give it a default.

[00:05:43]
And let's have it a number and color, which is also optional, and it will be a string. Here, let's say pass icon props interactive c, and let's destructure them. So this size. Let's default to 40 and color. Let's default to teal. I always end up with teal. Now, the size, so at the top level for the SVG, you have a width and a height.

[00:06:21]
So I'm going to use size for both of them, so width, size, and height size. And then lastly, I'm going to add the filled color. So fill equals color. I'm gonna render it on the homepage, just to see that something is working. So home Icon. Not rebuilt should be, there it is.

[00:07:01]
Right so go home icon here. And if I do size, let's do 100 it's massive and then I do color make it pink. It has a pink so basically you can now change this icon however you want, which is super handy. All right so we actually want to do is we want to use this icon for our home tab.

[00:07:25]
So the way we do that, we move it from here and let's open our bottom tabs navigator. So this tab navigator will have a Screen options prop which takes an arrow function. And then, this, Here we have tab, bar, icon. Okay, and then this will be a function.

[00:08:08]
And then I think here, let's return text. I don't usually type this out live. So, it's fun to find the exact API. Okay, cool awesome. So this actually works. So not that I'm surprised I shouldn't be surprised it works. Cool, so you can see that whatever I pass in here on the tab bar icon gets rendered on top.

[00:08:42]
So what we really want to do is you want to get access to what route we're in. And then based on that we want to render the correct tab. So, I guess a tab icon. So, I'm not looking at the API right now, I'm just looking at the target types, just to remind me what the actual properties are called.

[00:09:04]
So this tab icon, it knows whether it's currently focused, what color it should be and what size it should be. So we said that globally rather than within each icon, which is nice. And then, Screen Options. Okay cool, so this gives me route, and navigation. So, I should get access to the route here.

[00:09:25]
Cool, and then root name, okay, cool. So I'll do that's past the stew the root name here so we'll just print out this, or the text Route.name. So this is the name that we gave each of our routes. And then we can use our route name to friends in the correct icon.

[00:09:56]
So we'll do use a switch statement here, but I'm just going to keep it simple with an F. If route.name equals home then let's find the home icon. And then otherwise we'll just return the route.name.