Complete React Native Tutorial #10 - Tab Bar Icons

Key Takeaways

All right, then. So, in the last lesson, we put together this tabbed navigation, and it all works. I can navigate between the different pages by clicking on the tabs. And the colors work as well. We've applied different theme colors so that it works for light and dark. But at the minute, these icons look atrocious, the little triangles. So, instead, I would like to use a custom icon for each one. like maybe a little person for the profile, a book for the books, and I don't know a square with a pencil sticking out of it for the create tab. And we can do that really easily. So, the first thing we have to do is install a package for um this project, which is an icon package. Now, if you started the project using the default uh template for creating a React Native application, I think it comes bundled with this um icon package. However, if you didn't, you need to install it manually. Now to do that you can cancel out of the current process and you can say npx install and then it's at expo slve vector- icons. Now I've already done that before this lesson so I'm not going to press enter but if you press enter it's going to install it for you and then you can start up the server again. All right so once you've got that up and running we can now add the icons to these different tabs. Now before we do that, we need to import a component from the icon package. Now I'm going to be using a component called ion icons. I don't know how to fully pronounce that. Is it ion icons or ion icons? Either way, we're importing this component from at expo/vector icons which we just installed. And now we can use that down here to output a different icon. So if we come to the profile tab first and then to the options we can add another property right here called tab bar icon. Now the value of this is going to be a function which returns inside parentheses a template and that template is just going to be that component ion icon or ion icons rather and then this is self-closing but we do need to pass a few props to this. The first prop is going to be the size of the icon. So, I'm going to say that will be 24 pixels. You can play around with the size if you want. The next one is the name. Now, the name decides which um icon we want to use. Now, there's a big list of them here. I'm going to go for one called person. And then I'm going to save this. Now, when we save it, we should see now that icon appear over here. It's black at the moment. We are going to give it a color, but at least we see it. And it's filled in. All right. Now, what I'd like to do actually is use one called person outline, I think it is. If I save that, we should see something different after a second. Yeah, we see the outline of the person instead. So, I'd like to use that when it's not focused, the tab. But when it is focused, I'd like to use the person. So, how do we do that? Well, this value then has to be dynamic. And we need to evaluate whether it's focused or not, this particular tab. Now, as an argument to this function up here, we can dstructure the um focused property and this is going to be true or false. Now, if this tab is focused, it's going to be true. If it's not, it's false. So, we can use that then to dynamically output a different icon name. So, I could say focused question mark. And we're going to use a turnary to do this, by the way. And then if that's true, I want to use the person. And if it's not true, I want to use the person outline. All right. So if I save this now, you can see currently it's focused. But if I go away from it, then it becomes the outline. And then it becomes filled again when we focus it. All right. Cool. So now I want to do the color. And the color is going to come from the theme that we already have up here. Remember, it could be the light or dark theme, but we're going to use a theme color. And the theme color we're going to use are the same colors as down here. So if it's focused, we're going to use this one. If it's not focused, we're going to use this one. So let me just copy this in preparation for the focus state. And again, we'll use a turn array. So we can say focused. And then oops, spell it correctly. Focused. And then if it is focused, we will use this color, the icon color focused. If not, then it's going to be theme dot icon color. All right. So now if we save this, we can see it's white when it's focused. If I navigate away, it becomes kind of like a gray color. So that's nice, right? Okay. So all we need to do now is copy this thing and paste it down in each one of these. So first of all, we need the tab bar icon property which is a function where we dstructure the focused property. And then inside this function, we need to return that component again. So this time we don't want person. We want an icon called books. Is it books or book? I think it's just book. And then book outlined. Let's try it out. Oh yeah, we get the book. Awesome. All right. So finally, we need to do the same thing down here. We need the tab bar icon, which is a function. we destructure the focus property and then in here we can just return the template. All right. So let's paste it in again. And this time we want instead of person I think it's just called create. Let's have a look. Create and then create outline. Save that. Yep. All right. That looks good. So now we have all our icons in the tabs. Awesome.