Integrating React Native Vector Icons
This is gonna be a really fun guide if you like to implement cool visualizations and images into your applications. React Native has a great set of tools and libraries for integrating some really good-looking icons.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this guide, we are going to add in first the library that's going to allow us to use the icons and then we're gonna see how we can import and call those icons from our BottomTabBar.

So right here, I have what is called the react-native-vector-icons directory. This is a great resource for you, I will include a link to it in the Show Notes and then you can go and reference it. And in fact, what I'd like for you to do is to go through it yourself, start exploring it, and pick out your own icons that you want. You already know the names of the links that we're using because we typed those in earlier.

So I definitely recommend for you to go through this full search engine and explore which icons you personally would prefer. You do not have to use the ones that I'm using. But I'm gonna show you how to import all of that, and I'm also gonna show you how you can use multiple libraries at the same time. So let's get started.

So right here, we have all of these great libraries, and they are wrapped inside of the provider that's creating them. So the very first one is called AntDesign. Then if you scroll down, you can see all the ones they provide. And we have one called Entypo.

large

You can scroll down more. Definitely explore these EvilIcons. They have all kinds of great ones.

Now, the way that you can search, so say that we want to do a newsfeed one. I am going to type in news, and as I'm typing, it's breaking it down, and it's giving us some better options, so it filters it down by what we might want.

large

And then from there, you can go and pick out the ones that you want. Now, the one I picked out already here is actually from a provider called MaterialCommunityIcons. I use them quite a bit. They have a really nice selection of these types of images that you'd wanna use. So I'm gonna use this newspaper icon and then we're gonna have a few more.

large

We're gonna have a search icon, we're gonna have a little plus icon, and then a settings one. I'm not gonna search for each one of them here 'cause I want you to be able to do that and to explore it. You'll see me typing it in. So now, that is the search engine, let's see how we can actually install this.

So if you open up Visual Studio Code and open up the Terminal, you wanna type in yarn add react-native-vector-icons. And while that's running, I'm gonna show you where you'd know exactly what to type in if you were doing this yourself. So let's go into npm and then we're gonna look for these React Native icons. So I'll say react-native, that's actually -vector-icons, and you can see we have one that's exactly the one that we wanna use. And you can click for their homepage here, and this is gonna give you a really nice set of examples. It's gonna give you the full list of props, and it's gonna show you how to install this.

So if you go to this screen, and I'm going to also include this link inside of the Show Notes as well, this is going to give you all of the different documentation.

Now, one thing I want you to notice, many times when you're using the documentation for, and specifically, for React applications, you're gonna see lines like these quite a bit where it says npm install save react-native-vector-icons.

large

If you're using npm, that is the command you'd run. If you went through my previous React course, npm is what we used. However, when we're building expo apps, we're using yarn.

So anytime you see code like this where it gives a set of instructions, you can replace npm install --save by yarn add, and then whatever the name of the library is. That's just something to know because you're gonna see it a lot, and I don't want you to get confused on that side. If you're using yarn, you're gonna say yarn add. If you're using npm, you're gonna see this npm install command.

So now that we have all of those resources down, let's actually start building it. So I'm gonna go to Simulator, and let's also open up Visual Studio Code. It looks like everything here installed properly. And now let's go into our BottomTabBar. In the BottomTabBar, let's import the libraries that we wanna work with. And I'm gonna show you specifically how you can import multiple of them and work with them at the same time, if that's a little bit fuzzy, do not worry, I'm gonna show you what I mean by it.

I'm gonna say import MaterialCommunityIcons, and that's gonna be from, and then it's the name of the library. So it's react-native- vector-icons, you can see it's one of the recommended ones, slash, and then we're gonna go with the MaterialCommunityIcons, and that's not gonna be finished for us, so we just have to type that in. Once again, that's gonna be in the documentation that describes exactly how to use it.

BottomTabBar.tsx

import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

And so you may notice that we picked out a specific name here. So if we go back here to the actual set of all of these search results, you'll see that if you scroll down, I'm using the full name here.

large

So that is the library name. So if I wanted to use Foundation, I would say /Foundation, and that's what I would import. So if you wanna use multiple, like we're about to, then you have to have multiple import statements, so let's do that now.

Because the next one that I wanna pull in, it's very similar, so we can just copy this link here, but instead of MaterialCommunityIcons, I wanna go with ionicons, and that's all lowercase. And you can also just copy and paste from here. When I'm building these applications out, normally, that's exactly what I do. So definitely feel free to do that. And now let's open up Visual Studio Code again. Make sure that you change what you have after that slash and that's all we have to do for the import.

BottomTabBar.tsx

import React from "react";
import { View, TouchableOpacity, Text } from "react-native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import Ionicons from "react-native-vector-icons/Ionicons";

So now let's come down here, and let's replace all of these Text components. So for that first one, say we wanna do MaterialCommunityIcons, and there are several props we have to pass in. The first one is gonna be name, and for name, I'm going to say newspaper. So I'm not making this up or pulling it out of thin air, this is exactly what we had.

The name is what you have inside of the search results. That's why I said the search result page is gonna be one of your best friends. This is how you can find not just what the icons look like. This is where you can find the module name, and you can find the name for the actual icon that you're wanting to implement.

So let's pull in Simulator and Visual Studio Code again. So I have the name, and now we can also add a color. So we don't have to pass in a style prop. We can just actually call color itself to make it a little bit more streamline.

And here, I'm gonna say white. And then for the size, I'm gonna say equals, curly brackets because we want this to be converted into JavaScript, and I'll say 30. And then at the very end, close out that tag. And also, for newspaper here, I can get rid of these curly bracket tags because it's simply processing a string.

So let's take one more look at this. This is MaterialCommunityIcons, which is a component. We're passing in three props. One is the name of whatever icon we're wanting to work with, the next one is the color that we're wanting it to be rendered to, and the last one is the size.

So let's hit Save and see if this is working. There we go. Our icon is there, and I think that's looking pretty good.

BottomTabBar.tsx

<MaterialCommunityIcons name="newspaper" color="white" size={30} />

large

So next one is gonna be that ionicons one. That's what we're gonna use for search. So here, I'm gonna follow the same exact approach. So even though we're using a different library, the only thing that's gonna change is the name of the component we're calling and then obviously whatever the name is for the icon. But the props all stay the same, which is nice, 'cause we're working with the same library.

So I'm gonna call ionicons, and I'll set this name equal to, my favorite here was md-search. And here, for the color, I'm also going to say this one is gonna be white. And then for the size, size is gonna be the same, and it will be 30. Okay, let's close off that tag, hit Save, and there is our search button.

BottomTabBar.tsx

<Ionicons name="md-search" color="white" size={30} />

large

That's looking nice. For these next ones, I'm just gonna copy MaterialCommunityIcons 'cause we're gonna use the same for both of them. And for this, I'm not using newspaper. The one I picked out that I liked here was plus-circle. Same thing on the sizing. And then lastly, for Account, for this one, this one is settings, hit Save, and you can see our bottom tab bar is now coming along nicely. We have each one of these cool-looking icons that looks much more professional. I prefer this, having this, over text.

BottomTabBar.tsx

<View style={bottomTabStyles.container}>
  <TouchableOpacity onPress={() => props.navigate("Feed")}>
    <MaterialCommunityIcons name="newspaper" color="white" size={30} />
  </TouchableOpacity>
  <TouchableOpacity onPress={() => props.navigate("Search")}>
    <Ionicons name="md-search" color="white" size={30} />
  </TouchableOpacity>
  <TouchableOpacity onPress={() => props.navigate("PostForm")}>
    <MaterialCommunityIcons name="plus-circle" color="white" size={30} />
  </TouchableOpacity>
  <TouchableOpacity onPress={() => props.navigate("Account")}>
    <MaterialCommunityIcons name="settings" color="white" size={30} />
  </TouchableOpacity>
</View>

large

But one of the really cool things about building your own bottom tab bar is the flexibility that it gives you. So notice, we didn't use some BottomTabBar library. There are a few in React Native. You can definitely look at those and play with them. But I personally prefer using my own. Because say that I ever did want to use text, and I wanted a text underneath, I could just create and call some additional components and then customize my styles. And so it gives you a lot more control when you do it this way.

So this is coming along great. I'm really liking how all of this is looking. So with all of that in place, we're gonna continue in the next few guides in implementing our styles throughout the rest of the application.

Resources