React Native: Vector Icons – FontAwesome and others

You want some nice icons in your app, don’t you? In my laziness I tried using emojis instead, but it turned out to be sub-par.

So I conceded and installed an icon package called

React Native Vector Icons

npm install react-native-vector-icons --save to install

How this works

This package provides fonts and some wrappers. Since SVG is still not working 100% on RN, introducing vector icons via font seems like a reasonable approach. In mobile apps you want to bundle the font with the app itself.

IOS

Theoretically, you should be able to rnpm link. Unfortunately, that didn’t work for me, so I had to install font manually:

• Drag “Fonts” folder from node_modules/react-native-vector-icons to your project
• You have to add fonts in info.plist This is how I added FontAwesome only:

UIAppFonts : Fonts/FontAwesome.ttf

ANDROID

In android/app/build.gradle

project.ext.vectoricons = [
    iconFontNames: [ 'FontAwesome.ttf' ] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

In android/settings.gradle :

include ':react-native-vector-icons'

project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Using

Now you want to plaster icons all over your application, don’t you? I do too!

If you are using Font Awesome like me, you would go to http://fontawesome.io/icons/ and pick your icon. You need the name without “fa-” at the beginning, and then you drop icon in your project like so:

import Icon from 'react-native-vector-icons/FontAwesome';

WEB

Because my project is isomorphic, this caused some problems in the web version. react-native-web is not yet compatible with react-native-vector-icons. To make the project even compile on the web, I made 3 files that abstracted the icon enough:

icon.web.js

import React from 'react';
import { Text } from 'react-native';
export default Text;

index.android.js and index.ios.js

import Icon from 'react-native-vector-icons/FontAwesome';
export default Icon;

Because isomorphism works in react native by picking specific files, my project now builds under all 3 environments. Granted, I would prefer it to build for web with working icons, which it does not do currently, but thats a battle for another day.

React Native Isomorphic app over the weekend

This article is part of my “React Native Isomorphic app over the weekend” series. It shares the problems I encountered during development of TeamParrot and Headstart Journal.

[display-posts tag=”React-Native-Weekend” wrapper=”ul”]

	Headstart Journal – daily journalling designed to help you notice what’s important in life. Inspired by people you admire.
	TeamParrot – App that reads your Slack scrollback out loud, so you can focus on awesome stuff.