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
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”]
1 Comment