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

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
  ? Glad to Meet You!
  : null
}

Enjoy Coding....

My Output: