Add Icons to a React Native App with React Native Vector Icons

Instructor: [00:00] Install React Native vector icons, which will give us access to some great free icon sets. The next step is just like normal, but then there is an additional step unique to React Native. We now have to run React Native link, which will link that project to the underlying native iOS and Android apps.

[00:19] If I do a getStatus now you can see both the iOS and Android projects have changed due to that link. Not all React Native modules need to be linked, and a project's installation page will tell you what additional steps, if any, are required.

[00:35] When you do a link, you will also want to rerun react-native run-ios or react-native run-android, because the underlying iOS and Android projects have changed. We want to make sure they're recompiled if necessary.

[00:49] With that running again, we can import Icon from react-native-vector-icons. We'll be using the bundled Font Awesome icon set. We're going to use these icons to give each restaurant a star rating.

[01:03] Let's start with just a full star, which I know is called star by looking at Font Awesome's icon page. That looks good, but I want to change the color. I can do that by setting a color prop on the icon component.

[01:17] We can duplicate that and add an additional half-star. Then we can change the edge styles a bit to flex in the row direction, and we have a pretty convincing star rating system for the restaurants.

[01:37] We can read from the actual rating value coming from the back end. Let's make a quick mini functional component called stars.js and import React, a view, and the Font Awesome icons.

[01:53] That will take the rating from the server and make an array of star icons. If the rating is a half-value, then the last icon should be a half-star. Then we can import that star's component in restaurant row and use that instead of the hard-coded stars.

[02:20] Now we're seeing the star ratings that are coming from the server.