Add Icons to a React Native App with React Native Vector Icons
There are many high quality icon libraries, so we’ll use an npm vector icon library to display svg icons in our application. This also requires a link step, which changes the underlying iOS and Android projects by linking the library to the native code.
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.
Question on: const stars = [...Array(Math.ceil(rating))]
Is this mainly to generate an array with the rating ceiling value of undefined, as placeholders so that we know how many Icons to display? This is super clever, I really like it, it took me a few minutes to realize the logic.
Is there another way to do this?
Thanks, and great tutorial.
Best, Will
Will: Yep! exactly. I wanted an array of length N (one for each star or half star). I could have also done that with a regular for loop, or a couple of other ways; but using the array constructor is a one liner that does it, so I went with that.
There are so many problems now with linking and coco pods, that it's far easier to use Expo., Ill skip the Icons section, as the documentation appears incorrect, and causes several errors
At least on Android, if you add the react-native-vector-icons package, you then need to 1) stop the bundler, 2) wipe android/app/build, 3) restart the bundler, and 4) completely re-deploy the application onto the target device. Without doing these, the Android app shows crossed-out boxes instead of the star icons. See also https://github.com/oblador/react-native-vector-icons/issues/483