Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    Chris AchardChris Achard
    react-nativeReact Native
    javascriptJavaScript
    androidAndroid
    iosiOS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

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

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    Now we're seeing the star ratings that are coming from the server.