Add Custom Fonts in React Native 0.63 >= for android and iOS

Adding Custom Fonts to React Native App is quite easy and only needs a few steps. I am writing down the steps I did to add custom fonts to my app.

Download Google Font
First, you need to download your desired fonts from Google Fonts.

Add fonts to app folder
Then create a fonts folder in your root App/assets folder and paste downloaded fonts files in it.

Export fonts
Now create a file named react-native.config.js at the root of your app and add the path of fonts folder like this

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./App/assets/fonts'],
};

Link assets to project
After adding this, Now run “react-native link”. This will copy the font to the app. For android it will be copied to “android > app > src > main > assets > fonts” folder. For iOS the font name will be added to info.plist file in ios > your_app_name > Info.plist

npx react-native link

Add resources to target
Now at this point, your custom fonts will start working for the android app but you need to do one last step to make it work for iOS.

Go to the desired target of your app in Xcode, select the Build Phases tab, and add font files in the "Copy Bundle Resources" tab as shown below.

Xcode step is done for us at the linking step. Just have to remember to rebuild the app after.

Hope you were able to add custom fonts to your app.