After building an analytics dashboard for Lemonaid Health with React/Redux, I felt ready to dive into some native programming with React Native. As with any custom project, you’ll probably want to add some custom fonts to brand the app or give it some sex appeal. After some googling around, I found RNPM (React Native Package Manager) which makes the process a breeze.
Add your custom assets to the project
The first step is to add your custom assets to your project directory. I put all my custom code into a source
folder at the root of the project directory. Within source
, I have an assets
folder which will contain any static assets such as my fonts, images, etc.
react-native-app
│ README.md
│ index.ios.js
│ index.android.js
└── ios
└── android
└── source
│ │
│ └── components
│ │
│ └── assets
│ └── fonts
│ └── Custom fonts go here
Install RNPM
First, you will need to install RNPM globally
$ npm install -g rnpm
Once installed, we need to add some meta data to our package.json
file. This tells rnpm
where our asset directory lives.
{
"rnpm": {
"assets": [
"source/assets/fonts"
]
}
}
Link Assets
Now that rnpm
knows where our assets live, we can link our assets through the command line.
$ rnpm link assets
This will automagically add our assets to both our android and ios distributions.
Using the Fonts
Once we have our assets linked up, we can now use the fonts in our application. You must use the exact filename when referencing the font within your javascript.
In this example, lets assume we have a file in our font directory named ProximaNova-Bold.ttf
and have already linked the assets.
import React, { Component } from 'react'
import { Text, StyleSheet } from 'react-native'
const styles = StyleSheet.create({
text: {
fontFamily: 'ProximaNova-Bold'
}
})
class CustomFontTest extends Component {
render() {
return (
<Text style={styles.text} />
)
}
}
We should be able to see our custom font in our app now!