tessl/npm-expo-font

Load fonts at runtime and use them in React Native components.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Expo Font

Name: tessl/npm-expo-font
Author: tessl

Expo Font provides comprehensive font loading and management capabilities for React Native and Expo applications. It enables dynamic loading of custom fonts at runtime with cross-platform support for iOS, Android, and web, offering both programmatic APIs and React hooks for seamless integration.

Package Information

Package Name: expo-font
Package Type: npm
Language: TypeScript
Installation: npm install expo-font
Platform Support: iOS, Android, Web

Core Imports

import { loadAsync, isLoaded, useFonts, FontDisplay, type RenderToImageOptions, type RenderToImageResult } from "expo-font";
import { Asset } from "expo-asset";

For CommonJS:

const { loadAsync, isLoaded, useFonts, FontDisplay } = require("expo-font");
const { Asset } = require("expo-asset");

Basic Usage

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

// Method 1: Using loadAsync directly
await loadAsync({
  'Inter-Regular': require('./assets/fonts/Inter-Regular.otf'),
  'Inter-Bold': require('./assets/fonts/Inter-Bold.otf'),
});

// Method 2: Using React hook
function MyComponent() {
  const [fontsLoaded, error] = useFonts({
    'Inter-Regular': require('./assets/fonts/Inter-Regular.otf'),
    'Inter-Bold': require('./assets/fonts/Inter-Bold.otf'),
  });

  if (error) throw error;
  if (!fontsLoaded) return <LoadingScreen />;

  return (
    <Text style={{ fontFamily: 'Inter-Regular' }}>
      Hello with custom font!
    </Text>
  );
}

Architecture

Expo Font is built around several key components:

Font Loading Engine: Core loading mechanism with platform-specific implementations
Cache Management: In-memory font tracking and state management
React Integration: Hooks-based API for component-level font loading
Type Safety: Full TypeScript support with comprehensive type definitions
Cross-Platform: Unified API with platform-specific optimizations
Server-Side Rendering: Static font registration for SSR scenarios

Capabilities

Font Loading

Core font loading functionality for loading fonts from various sources including local assets, remote URLs, and embedded resources.

function loadAsync(
  fontFamilyOrFontMap: string | Record<string, FontSource>,
  source?: FontSource
): Promise<void>;

function isLoaded(fontFamily: string): boolean;
function isLoading(fontFamily: string): boolean;
function getLoadedFonts(): string[];

Font Loading

React Hooks

React hooks for integrating font loading into component lifecycles with automatic state management and error handling.

function useFonts(
  map: string | Record<string, FontSource>
): [boolean, Error | null];

React Hooks

Font Utilities

Utility functions for advanced font operations including text rendering to images.

function renderToImageAsync(
  glyphs: string,
  options?: RenderToImageOptions
): Promise<RenderToImageResult>;

Font Utilities

Server-Side Support

Server-side rendering support with static font registration and resource management.

function getServerResources(): string[];
function resetServerContext(): void;
function registerStaticFont(fontFamily: string, source?: FontSource | null): void;

Server-Side Support

Types

type FontSource = string | number | Asset | FontResource;

interface FontResource {
  uri?: string | number;
  display?: FontDisplay;
  default?: string;
}

enum FontDisplay {
  AUTO = 'auto',
  SWAP = 'swap',
  BLOCK = 'block',
  FALLBACK = 'fallback',
  OPTIONAL = 'optional'
}

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

interface RenderToImageOptions {
  fontFamily?: string;
  size?: number;
  color?: string;
}

interface RenderToImageResult {
  uri: string;
  width: number;
  height: number;
}

// From expo-asset dependency
interface Asset {
  name: string;
  type: string;
  hash?: string;
  uri: string;
  localUri?: string;
}