rn-remote-fonts

A React Native library for loading remote fonts dynamically.

Installation

npm install rn-remote-fonts
# or
yarn add rn-remote-fonts

iOS Setup

Add the following to your ios/Podfile:

pod 'rn-remote-fonts', :path => '../node_modules/rn-remote-fonts'

Then run:

cd ios && pod install

Android Setup

The module should be automatically linked. If you're using React Native 0.60+, no additional setup is required.

For manual linking, add the following to your android/settings.gradle:

include ':rn-remote-fonts'
project(':rn-remote-fonts').projectDir = new File(rootProject.projectDir, '../node_modules/rn-remote-fonts/android')

And to your android/app/build.gradle:

dependencies {
    implementation project(':rn-remote-fonts')
}

Manual Registration (if auto-linking fails)

Android

In your MainApplication.java, add the package to the list:

@Override
protected List<ReactPackage> getPackages() {
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Add the RNRemoteFonts package
  packages.add(new RNRemoteFontsPackage());
  return packages;
}

iOS

Make sure the module is imported in your AppDelegate.mm:

#import <RNRemoteFonts/RNRemoteFonts.h>

Usage

import { loadFont } from 'rn-remote-fonts';

// Load a font from base64 data
const fontData = 'data:font/ttf;base64,AAEAAAALAIAAAwAwR1NVQiCLJXoAAAE4AAAAVE9TLzL4Xy...';

try {
  const fontName = await loadFont('MyCustomFont', fontData, 'ttf');
  console.log('Font loaded:', fontName);
} catch (error) {
  console.error('Failed to load font:', error);
}

Troubleshooting

If you see the linking error, make sure:

1. You have run pod install (iOS)
2. You have rebuilt your app after installing the package
3. You are not using Expo Go (this library requires native code)
4. The native module is properly registered in your project

Debug Information

The library now provides debug information in the console:

• Available native modules will be logged
• Module registration status will be shown
• Method availability will be checked

Check the console output for detailed information about what's happening.

API

loadFont(name: string, data: string, type: string): Promise<string>

Loads a font from base64 data and returns the font name.

• name: The name you want to give to the font
• data: Base64 encoded font data (can include data URL format)
• type: Font type ('ttf', 'otf', etc.)

Returns a Promise that resolves to the actual font name.