Add Glyph Icons To Your React Native Mobile App

Out of the box mobile platforms, and even React Native for that matter, don’t ship with a very large selection of icons. If we’ve chosen to use React Native as our development framework then we’re lucky that there is a great component that can be added to give us thousands of icons for use in our application.

Previously I wrote about how to use Font Awesome in an Ionic Framework and native Android applications. This time we’re going to see the same using React Native and the react-native-icons component by Cory Smith.

At the time of writing this, the react-native-icons component only works with iOS, but per a ticket on the developers GitHub page, Android support will be added very soon if it hasn’t been added already.

With React Native already installed, from the Terminal, execute the following:

react-native init ReactProject
cd ReactProject

The React Native project is now created, but we still need to install the icon component. Execute the following from the Terminal on your Mac:

npm install react-native-icons --save

The component is now downloaded, but it still needs to be included in the Xcode project. In your project’s directory, open the ReactProject.xcodeproj file with Xcode. Three things are going to need to happen at this point:

1. In Xcode, expand the project tree, right click on Libraries and choose Add Files to “ReactProject”…. Navigate to node_modules/react-native-icons/ios and add ReactNativeIcons.xcodeproj.
2. In Xcode, choose Build Phases then Link Binary with Libraries and add libReactNativeIcons.a to your project.
3. In Xcode, from the Build Phases tab, choose Copy Bundle Resources and click Add Other…. It is now up to you to find what icon files you wish to add to your project. For example, you might add only node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/FontAwesome.otf or maybe you want to add all of them.

You can now run your project, even though we haven’t technically added anything to our front-end.

A lot of what comes next is taken directly from the component’s official documentation and it is very style heavy for what we’re going to accomplish. Open your project’s index.ios.js file and add the following line to access the component API:

var { Icon, } = require('react-native-icons');

Find the render function and add the following code:

<TouchableHighlight onPress={this._onPressButton} underlayColor="white">
    <View
        style={styles.signInWithFacebookButton}>
        <Icon
            name='fontawesome|facebook'
            size={28}
            color='#ffffff'
            style={styles.signInWithFacebookIcon} />
        <Text style={styles.signInText}>
            {'Sign in with Facebook'}
        </Text>
    </View>
</TouchableHighlight>

Let’s see what is happening in the above snippet. The outer TouchableHighlight allows for button presses. Inside it we have a View that will glue the bits and pieces of our button together. The bits and pieces being a Facebook icon and text saying to sign in using Facebook.

There is an onPress function in the TouchableHighlight that we’ll look at in a moment. First let’s finish the styling for this button. Find the styles object and add the following styles:

signInWithFacebookButton: {
    backgroundColor: "#3b5998",
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    width: 210,
    padding: 5,
    borderRadius: 3,
    marginTop: 10
},
signInText: {
    color: 'white',
    marginLeft: 5,
    fontFamily: 'HelveticaNeue-Medium',
    fontSize: 15
},
signInWithFacebookIcon: {
    width: 28,
    height: 28,
    marginLeft: 5
}

Nothing special going on in the above snippet. Just basic styling that was taken from the documentation. Time to revisit that onPress method called _onPressButton. I’m not actually going to show how to sign into Facebook. Instead we’re just going to print a message to the console:

_onPressButton: function() {
    console.log("Welcome to Facebook");
},

To get a better idea of what this project looks like, you can see the full index.ios.js file below:

'use strict';

var React = require('react-native');
var { Icon, } = require('react-native-icons');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
} = React;

var ReactProject = React.createClass({

    _onPressButton: function() {
        console.log("JUST PRESSED BUTTON");
    },

    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
                    <View
                    style={styles.signInWithFacebookButton}>
                    <Icon
                        name='fontawesome|facebook'
                        size={28}
                        color='#ffffff'
                        style={styles.signInWithFacebookIcon}/>
                        <Text style={styles.signInText}>
                            {'Sign in with Facebook'}
                        </Text>
                    </View>
                </TouchableHighlight>
            </View>
        );
    }

});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    signInWithFacebookButton: {
        backgroundColor: "#3b5998",
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        width: 210,
        padding: 5,
        borderRadius: 3,
        marginTop: 10
    },
    signInText: {
        color: 'white',
        marginLeft: 5,
        fontFamily: 'HelveticaNeue-Medium',
        fontSize: 15
    },
    signInWithFacebookIcon: {
        width: 28,
        height: 28,
        marginLeft: 5
    }
});

AppRegistry.registerComponent('ReactProject', () => ReactProject);

Not so bad was it?

Conclusion

Just like with native Android and Ionic Framework, we can easily use Font Awesome and other glyph icons in our React Native application.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.