Using custom fonts in React Native (Android & IOS)
Hello there, it’s your man Charles and I’m back once again to give you a guide on how to use custom fonts in React Native, without much talk let’s get into it. NB: this article isn’t for those using expo.
Lets begin
For a beginner in react native one of the most frustrating things is getting to use custom fonts in your project especially on IOS. So we’d be handling Android first before moving to IOS.
Android (custom fonts)
Step 1:
Let’s imagine you have created your react native app using npx react-native init projectName, in your newly created app you’d have the IOS and android folder respectively. Go ahead to create a new folder in the root directory of your project called app which will house everything you build through your project. Inside the app folder create a folder assets and inside assets create a folder called fonts and copy the fonts you wish to use for both your android and IOS into the fonts folder, your finished work should look like this.
Step 2:
Once you are done with that create a file in your root directory called react-native-config.js as seen in the image above and add the following code to the file.
Also note that the part can vary depending on how you arrange your files.
Step 3:
Open your project in a terminal and link your assets using “npx react-native link” once this is done find your way to this dir android/app/src/main/assets/fonts you should see your font present in the fonts folder in the android dir
NB: If the required fonts aren’t present in the fonts folder as directed above then manually drag & drop them in the folder.
and now you can use your font in your android development and it should look something like this:
IOS (custom fonts)
So for IOS steps 1 — 3 for android is the same for IOS but in the case of IOS after running “npx react-native link” you will have to run some checks on your IOS workspace. First you will have to go into your IOS folder and double click on a file which ends with .xcworkspace to open it up on xcode.
Check 1:
When the file opens up on xcode open the first file with your project name and look for a Resources folder this folder was created when you ran “npx react-native link” and should hold the fonts which you added to you project. In some cases it might not hold all the fonts so in that case all you need to do is drag and drop the required fonts in the Resources folder.
Check 2:
Open up your project name folder in my case that will be the shoppingApp folder and click on the info.plist which should open and you will see something like this:
Now in the Fonts provided by application all the fonts you have added should be present in the array if it isn’t then you can add it by hovering on the Fonts provided by application and an add button will appear click on it and add the font needed and remember what ever is in this list should be in your Resources folder.
Check 3:
Click on the topmost file which you open first to see all the folders when it opens navigate to Build Phase and toggle the Copy Bundle Resources there you will see the fonts which are present in the Resources folder and the info.plist file, if the font isn’t present in the Copy Bundle Resources click on the add button below to add the required font you need from the Resources folder. Your final work should look something like this:
Once these 3 checks are done you should be able to use your custom font in React Native IOS development.
Conclusion
So that’s it nothing more than this to use custom fonts in your React Native app. So please if you have any questions at all kindly hit me up on Twitter or drop a comment I will reply to it as soon as possible until then have a nice day.
