How to use Arabic Fonts in React Native

I’m finally back after taking some distance from writing or contributing in any tech related activities, I’ve been discovering some new technologies lately, and React Native was one of them.

The Framework is pretty easy to use, its Component Based Design makes it easy to understand and to build scalable apps.

But every time I want to use a new feature, or a new module, I google it over and over again, to find the few steps to setup the thing and use it properly. (It’s pretty commun between developers nowadays, but it’s time consuming)

In this post, you will be able to include and use Arabic or Custom fonts in any app you’re building.

First of all, you need to create a specific folder for your fonts, in my case : ./assets/fonts

( Here is a 🔗 link for some cool Arabic fonts)

In this folder you should put all of your font files.

The next step will be telling React Native that this folder is your assets folder. Therefore you should go to your package.json and add:

“rnpm”: {
“assets”: [“./assets/fonts”]
}

To finish this step, go to terminal and tap:

react-native link

This command links automatically all the native dependencies to your iOS/Android project.

and That’s it 😃 🎉 🎉 🎉, now you should be able to use the font by specifying the font file name, for example :

fontFamily: “JannaLT-Regular”
If it’s not working, make sure you are not using font-weight attribute, if you do, you should have the specific weight included in your font.

See you in the next React Native article.

Show your support

Clapping shows how much you appreciated Amine Benkeroum’s story.