Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add custom font in react native android

I want to set fontFamily to roboto thin of my toolbar title.

I have added roboto thin ttf in assets/fonts folder of my android project, however it seems that it is creating issues while running app. I am getting this issue while running

react-native start

ERROR  EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\gener ated\source\r\debug\android\support\v7\appcompat' {"errno":-4048,"code":"EPERM","syscall":"lstat","path":"E:\\Myntra\\android\\app \\build\\generated\\source\\r\\debug\\android\\support\\v7\\appcompat"} Error: EPERM: operation not permitted, lstat 'E:\Myntra\android\app\build\genera ted\source\r\debug\android\support\v7\appcompat'     at Error (native) 

When I am removing the font then it is working fine. I am unable to fix this issue. What's the reason?

like image 934
N Sharma Avatar asked Jan 24 '17 10:01

N Sharma


People also ask

How do I add Google fonts to react native?

You can fetch your fonts from Google Fonts. In your React Native project src directory, you should create an assets directory. Here you'll have a directory for each kind of asset (SVG, Fonts, etc). Therefore, create a fonts directory and paste the fonts that you downloaded.

How do I use Montserrat font in react native?

Add Custom fonts to your React Native (Ios & Android) app !! Step 1: Download the font file that you need. For example am using “Montserrat-Regular. tff” file. Step 2: If you wish you can rename the file else keep it the same and make sure it does not have any spaces in the name.


2 Answers

  1. Add your fonts file in

    • Project folder/android/app/src/main/assets/fonts/font_name.ttf
  2. Restart the package manager using react-native run-android
  3. Then you can use your font in your style e.g
    • fontFamily: 'font_name'

Check here for further examples Custom Font Examples

like image 33
Sport Avatar answered Oct 04 '22 11:10

Sport


UPDATE

Many answers are here for adding custom font in react-native for version < 0.60.

For those who are using react-native version > 0.60 , 'rnpm' is deprecated and custom fonts will not work.

Now, in order to add custom font in react-native version > 0.60 you will have to :

1- Create a file named react-native.config.js in the root folder of your project.

2- add this in that new file

module.exports = { project: {     ios: {},     android: {}, }, assets: ['./assets/fonts'] }; 

3- run react-native link command in the root project path.

PS Make sure you have the right path for the fonts folder before running react-native link command

like image 176
HarshitMadhav Avatar answered Oct 04 '22 10:10

HarshitMadhav