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

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 component:

   Wow Such Title