How to add custom fonts in React Native

How to add custom fonts in React Native

Adding / Linking fonts for IOS and Android at once

1. First step

Collect all fonts you want to use for IOS and Android and place it in the directory inside your project. For example in ./assets/fonts/

2. Second step

Add the following line in your package.json:

"rnpm": {
"assets": ["./path to your fonts"]
}
in our example path is - ./assets/fonts

3. Third step

And finally, run in terminal:

$ react-native link

After running link command you should see something like this in your terminal output:

That’s all! 💥💥💥💥💥 We are done. All your fonts are linked and can be used for both IOS and Android.

Here is a bit of explanation of what’s going on:

rnpm — is react native package manager which now is part of React Native core. For earlier usage, we would need to rewrite the third step to rnpm link, but now react-native recognize `link` command by itself.

So on third step packager links fonts in Info.plst for IOS and creates fonts directory (android/app/src/main/assets/fonts) for Android, where copies your fonts


For Full Details : https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4

Leave a Reply

Your email address will not be published. Required fields are marked *