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?

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

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

Put all your fonts in you React-Native project directory

./assets/fonts/

Add the following line in your package.json

"rnpm": {
  "assets": ["./assets/fonts"]
}

finally run in the terminal from your project directory

$ react-native link

to use it declare this way in your styles

fontFamily: 'your-font-name without extension'

If your font is Raleway-Bold.ttf then,

fontFamily: 'Raleway-Bold'

Update:

From the cli docs, "rnpm" is deprecated and support for it will be removed in next major version of the CLI.

Instead, create a react-native.config.js in your project folder

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

Put your fonts in ./assets/fonts. Reference your fonts (e.g. McLaren-Regular.ttf) in the styles prop, {fontFamily: 'McLaren-Regular'}. If you're using styled components, then font-family: McLaren-Regular

No linking or legacy build settings needed for either platforms. If that didn't work (sometimes it doesn't for me), run npx react-native link, even if you're using autolinking.

If you're using React Native chances are that you are using Expo as well. If that's the case, then you can load custom fonts using Expo's Font.loadAsync method.

Steps:

1. Put the downloaded font in the ./assets/fonts directory (if the directory doesn't exist, create it)

2. From the target component (for example: App.js) load Expo's Font module:

   import { Font } from 'expo'
   

3. Load the custom font using componentDidMount:

   componentDidMount() {
     Font.loadAsync({
       'Roboto': require('../assets/fonts/Roboto-Regular.ttf'),
     })  
   }
   

4. Finally, use the style attribute to apply the desired font on a <Text> component:

   <Text style={{fontFamily: 'Roboto', fontSize: 38}}>Wow Such Title</Text>