A React Native module that allows you to load fonts dynamically at runtime via base64 encoded TTF or OTF, like so:

• Install
• Usage
• Options
• Response object

yarn add @npt/react-native-app-fonts

If you've created your project either with react-native init or create-react-native-app you can link DynamicFonts automatically:

react native link

pod 'DynamicFonts', :path => 'node_modules/react-native-dynamic-fonts'

1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
2. Go to node_modules ➜ react-native-dynamic-fonts ➜ ios ➜ select RCTDynamicFonts.xcodeproj
3. Add libRCTDynamicFonts.a to Build Phases -> Link Binary With Libraries
4. Compile and have fun

1. Add the following lines to android/settings.gradle:

   include ':react-native-dynamic-fonts'
   project(':react-native-dynamic-fonts').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dynamic-fonts/android')

2. Add the compile line to the dependencies in android/app/build.gradle:

   dependencies {
       compile project(':react-native-dynamic-fonts')
   }

3. Add the import and link the package in MainApplication.java:

   import org.th317erd.react.DynamicFontsPackage; // <-- add this import
   
   public class MainApplication extends Application implements ReactApplication {
       @Override
       protected List<ReactPackage> getPackages() {
           return Arrays.<ReactPackage>asList(
               new MainReactPackage(),
               new DynamicFontsPackage() // <-- add this line
           );
       }
   }

To load a font dynamically, you must first have a base64 string of your font file (TTF or OTF):

import { loadFont, loadFonts } from '@npt/react-native-app-fonts';

...
/* Load a single font */
loadFont('nameOfFont', base64FontString, 'ttf').then(function(name) {
	console.log('Loaded font successfully. Font name is: ', name);
});

/* Load a list of fonts */
loadFonts([{name: 'nameOfFont', data: base64FontString, type: 'ttf'}]).then(function(names) {
	console.log('Loaded all fonts successfully. Font names are: ', names);
});

...

You can download font file to file system and then load it to app without sending base64 to bridge.

import {loadFontFromFile} from '@npt/react-native-app-fonts';
import RNFetchBlob from 'rn-fetch-blob'

const fontFilePath = RNFetchBlob.fs.dirs.DocumentDir + "fonts/roboto.ttf";

loadFontFromFile("Roboto",  fontFilePath)
   .then(function(name) {
   	    console.log('Loaded font successfully. Font name is: ', name);
   });

On iOS, it isn't possible to specify the font name. For this reason BOTH Android and iOS return the ACTUAL registered font name. For Android this is whatever you pass in, for iOS it is whatever is embedded in the font. I suggest you always use the full name embedded in the font to avoid issues.

The ACTUAL name the font was registered with. Use this for your fontFamily.