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!
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:
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.