tessl/npm-expo-font
Load fonts at runtime and use them in React Native components.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Expo Font
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[];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];Font Utilities
Utility functions for advanced font operations including text rendering to images.
function renderToImageAsync(
glyphs: string,
options?: RenderToImageOptions
): Promise<RenderToImageResult>;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;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;
}- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
- Publish Source
- CLI
- Badge
