How to add custom font in react native android

Question

I am learning react-native, trying to create some demo apps just for learning. I want to set fontFamily to roboto thin of my toolbar title.

<

Answer 1

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'

Answer 2

Set in Project.json:

rnpm {
assets:assets/fonts 
}

And then perform react-native link.

Answer 3

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

Answer 4

Adding Custom Font with EXPO

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. Move your font to asset/fonts folder
2. From the target component (for example: App.js) load Expo's Font module:

import { Font } from 'expo'

3. Set a state

this.state = {
   fontLoaded: false
}

4. Load the custom font using componentDidMount:

async componentDidMount() {
   await Font.loadAsync({
       'ComicSansBold': require('../assets/fonts/ComicSansMSBold.ttf'),
   })

   this.setState({fontLoaded: true})
}

5. Finally, use the style attribute to apply the desired font on a component:

{
  this.state.fontLoaded
  ? <Text style={{
    fontSize: 48,
    fontFamily: 'ComicSansBold'
    }}>Glad to Meet You!</Text>
  : null
}

Enjoy Coding....

My Output:

Answer 5

For ios:

Add your fonts in given folder structure :

/assets/fonts

and place your fonts in it .

In the root folder . Add a file named

react-native.config.js

copy the code and paste

module.exports = {
assets: [‘./assets/fonts’]

}

Answer 6

Add in project.json file

rnpm {
assets:assets/fonts 
}

Then perform react-native link