Custom font not working in React Native
Many answers are here for 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.
4- run it using react-native run-android
or react-native run-ios
command
In case somebody is reading this because their setup is fine and custom fonts work on iOS and in some cases don't work on Android:
Additionally to the installation answers given above - make sure you are not setting font fontWeight
parameter (or other extra font transformation in styles). In my case it 'broke' custom font, so I had to add and use font ttf with variants (like Roboto-Thin, Roboto-Bold etc) in stead of setting bold in styles.
Also worth to notice: Manuel Hernandez found out in comment below that it is possible to use i.e. fontWeight:800
in stead of fontWeight:'bold'
.
Fonts in React Native are handled in the same way as in native applications, as assets to the native project.
In iOS, you have to add them as resources. You can have a good description here.
In Android you have to add them as assets. Here you can see how to.
Also note that the name of the font in iOS is the one contained in the metadata of the .ttf file, whereas in Android they are matched by the file name and several suffixes.