Font Loading

/**
 * Load fonts from static or remote resources which can then be used with native text elements
 * @param fontFamilyOrFontMap - String or map of font families to font sources
 * @param source - The font asset (only when first param is string)
 * @returns Promise that resolves when fonts are loaded
 */
function loadAsync(
  fontFamilyOrFontMap: string | Record<string, FontSource>,
  source?: FontSource
): Promise<void>;

import { loadAsync } from "expo-font";

// Single font loading
await loadAsync('MyCustomFont', require('./assets/fonts/MyFont.ttf'));

// Multiple fonts loading
await loadAsync({
  'Inter-Regular': require('./assets/fonts/Inter-Regular.otf'),
  'Inter-Bold': require('./assets/fonts/Inter-Bold.otf'),
  'Roboto': 'https://fonts.googleapis.com/css2?family=Roboto',
});

// With FontResource options (web-specific display control)
await loadAsync({
  'MyFont': {
    uri: require('./assets/fonts/MyFont.woff2'),
    display: FontDisplay.SWAP
  }
});

/**
 * Synchronously detect if the font has finished loading
 * @param fontFamily - The name used to load the FontResource
 * @returns True if the font has fully loaded
 */
function isLoaded(fontFamily: string): boolean;

/**
 * Synchronously detect if the font is still being loaded
 * @param fontFamily - The name used to load the FontResource
 * @returns True if the font is still loading
 */
function isLoading(fontFamily: string): boolean;

import { loadAsync, isLoaded, isLoading } from "expo-font";

// Check if font is loaded before using
if (isLoaded('MyCustomFont')) {
  // Safe to use font
  return <Text style={{ fontFamily: 'MyCustomFont' }}>Hello</Text>;
}

// Check if font is currently loading
if (isLoading('MyCustomFont')) {
  return <LoadingSpinner />;
}

// Load and check status
loadAsync('MyCustomFont', require('./MyFont.ttf'))
  .then(() => {
    console.log('Font loaded:', isLoaded('MyCustomFont')); // true
  });

/**
 * Get all fonts that have been loaded (bundled + runtime loaded)
 * @returns Array of font family names that can be used in fontFamily style prop
 */
function getLoadedFonts(): string[];

import { getLoadedFonts, loadAsync } from "expo-font";

// Get all available fonts
const availableFonts = getLoadedFonts();
console.log('Available fonts:', availableFonts);

// Load fonts and check what's available
await loadAsync({
  'CustomFont1': require('./Font1.ttf'),
  'CustomFont2': require('./Font2.ttf'),
});

const updatedFonts = getLoadedFonts();
// Will include 'CustomFont1', 'CustomFont2', and system fonts

/**
 * Unload all custom fonts (for testing)
 * @returns Promise that resolves when all fonts are unloaded
 */
function unloadAllAsync(): Promise<void>;

/**
 * Unload specific custom fonts matching fontFamily and display values
 * @param fontFamilyOrFontMap - Font family name or map of fonts to unload
 * @param options - Unload options (when first param is string)
 * @returns Promise that resolves when fonts are unloaded
 */
function unloadAsync(
  fontFamilyOrFontMap: string | Record<string, UnloadFontOptions>,
  options?: UnloadFontOptions
): Promise<void>;

import { unloadAsync, unloadAllAsync } from "expo-font";

// Unload specific font
await unloadAsync('MyCustomFont');

// Unload multiple fonts
await unloadAsync({
  'Font1': { display: FontDisplay.SWAP },
  'Font2': { display: FontDisplay.AUTO }
});

// Unload all custom fonts (useful for testing)
await unloadAllAsync();

type FontSource = string | number | Asset | FontResource;

interface FontResource {
  /** Font URI or asset module ID */
  uri?: string | number;
  /** Font display strategy for web (CSS font-display property) */
  display?: FontDisplay;
  /** Default font fallback */
  default?: string;
}

enum FontDisplay {
  /** Browser/platform default behavior */
  AUTO = 'auto',
  /** Show fallback text immediately, swap when loaded */
  SWAP = 'swap',
  /** Hide text until font loads */
  BLOCK = 'block',
  /** Brief invisible period, then fallback */
  FALLBACK = 'fallback',
  /** Browser decides based on connection speed */
  OPTIONAL = 'optional'
}

type UnloadFontOptions = Pick<FontResource, 'display'>;

import { loadAsync } from "expo-font";

try {
  await loadAsync('MyFont', null); // Will throw ERR_FONT_SOURCE
} catch (error) {
  if (error.code === 'ERR_FONT_SOURCE') {
    console.error('Invalid font source provided');
  } else if (error.code === 'ERR_FONT_API') {
    console.error('Incorrect API usage');
  }
}

// Common error scenarios:
// - ERR_FONT_SOURCE: Null/undefined font source
// - ERR_FONT_API: Invalid parameter combinations
// - ERR_UNLOAD: Attempting to unload while fonts are loading