React Native Vector Icons Using Expo

In this article we will be covering how include some handy icons in your react native app using expo. I always use expo when creating my react native applications, one of the features included in expo by default is a library of icons you can use as components within your app. Lets get started!

examples of similar icons available from a different library. You can view the expo icon library here.

Step One: Installing Expo

To install expo globally, within terminal simply enter:

npm install -global expo-cli

Then in order to initialize a new project with it, navigate to the folder you wish to place your project within terminal and enter:

expo init my-project

Of course you will be replacing ‘my-project’ with whatever the name of your project will be. Once you select the default method and expo sets up your project, navigate into its folder and boot up your text editor (I use VS Code).

Step Two: Implementing Expo/vector-icons

I have already gone over basic file structure in a previous article. I will be using a similar file structure for this example. This is only relevant if you notice in the following examples I am utilizing a colors object that I like to use and you might wonder where that comes form. Within the screen you would like to place your icon you need to import it up at the top. This will look something like:

Then within your default export you would add an Entypo component with the name of whatever icon you are trying to use. The following highlighted example will render a small cog that when pressed with navigate to the options screen:

This will render the text Go To Options in the center of the screen. A small cog will be rendered under this that when pressed will navigate the user to the options screen. navigation is covered in a previous article.

Conclusion

Icons remain a mainstay of mobile development. Using the default library provided by expo gives you access to many useful ones that can be styled and sized differently through props. They can even be implemented to help navigate between screens. By utilizing this feature you create a more friendly and familiar mobile user experience.