Versions:
While this article is directed to Windows users who develop an Android application using ReactNative, here are the versions of some tools I used while writing this article:
- Node (v14.16.1) https://nodejs.org/en/
- React Native CLI (v2.0.1)
- React-native 0.64.0
- JDK (version: 11.0.10 ) https://www.techspot.com/downloads/5553-java-jdk.html
Step 1: Download the font collection
Download the ZIP bundle of the font collection of your choice. Here is a good source to use: https://www.fontsquirrel.com/fonts/
Step 2: Import fonts to the project
Unzip the fonts folder and add the fonts you will be using in your project.
I store my fonts under src/assets/fonts
For a recommended project structure, visit part2 of this series.
Personally, I will be only using two .ttf files out of the whole bundle (Regular and Medium).
Step 2.1: Renaming fonts
Ok, so this step is a little odd. My articles are targeted for Android dev only as I don't own a Mac to test my code on XCode. However, I have courted a common issue at work we can avoid.
The following list shows most of the default fonts for android and ios:https://gist.github.com/cdm/bce25582f796c96236c3625adbcba36f. Notice how android has only a couple of fonts that are built-in. IOS on the other hand, has a bunch. To avoid “double linking”, we will rename our fonts to have the same name as ios.
However, the font I chose to use for this article isn't available on ios either. I will rename the font files just to appear a little nicer regardless.
Step 3: Create a config file
Create a config file called react-native.config.js in the root of your project.
Reference the fonts.
Step 4: Almost there, linking
Let's link our assets.
npx react-native linkStep 5: Usage
Until the next article!
-LaraMo
