or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

asset-management.mdindex.mdreact-hooks.mdstatic-loading.md
tile.json

index.mddocs/

Expo Asset

Expo Asset is a comprehensive asset management system for Expo and React Native applications that enables developers to efficiently download, cache, and manage various types of assets including images, fonts, and other media files. It offers both synchronous and asynchronous APIs for asset loading with automatic platform detection and optimization.

Package Information

  • Package Name: expo-asset
  • Package Type: npm
  • Language: TypeScript
  • Installation: npx expo install expo-asset

Core Imports

import { Asset, useAssets, type AssetMetadata } from "expo-asset";

For CommonJS:

const { Asset, useAssets } = require("expo-asset");

Basic Usage

import { Asset, useAssets } from "expo-asset";

// Load assets using the static method
const [{ localUri }] = await Asset.loadAsync([
  require('./assets/image.png'),
  require('./assets/font.ttf')
]);

// Use React hook for asset loading
function MyComponent() {
  const [assets, error] = useAssets([
    require('./assets/icon.png'),
    require('./assets/background.jpg')
  ]);

  if (error) {
    console.error('Asset loading failed:', error);
    return null;
  }

  return assets ? <Image source={assets[0]} /> : <ActivityIndicator />;
}

// Create Asset from module or URI
const asset = Asset.fromModule(require('./assets/logo.png'));
await asset.downloadAsync();
console.log('Downloaded to:', asset.localUri);

Architecture

Expo Asset is built around several key components:

  • Asset Class: Core class representing individual assets with metadata and download capabilities
  • Static Loading API: Convenience methods for batch asset loading (Asset.loadAsync)
  • React Integration: Hook-based API (useAssets) for declarative asset loading in components
  • Platform Abstraction: Unified API across iOS, Android, and web with platform-specific optimizations
  • Caching System: Intelligent local caching with hash-based validation and automatic cleanup
  • Asset Resolution: Automatic scale selection and URI resolution based on device capabilities

Capabilities

Asset Management

Core asset representation and management functionality. The Asset class provides complete metadata about assets and handles downloading to local cache.

class Asset {
  // Instance properties
  name: string;
  readonly type: string;
  readonly hash: string | null;
  readonly uri: string;
  localUri: string | null;
  width: number | null;
  height: number | null;
  downloaded: boolean;

  // Constructor
  constructor(descriptor: AssetDescriptor);

  // Instance methods
  downloadAsync(): Promise<this>;
}

interface AssetDescriptor {
  name: string;
  type: string;
  hash?: string | null;
  uri: string;
  width?: number | null;
  height?: number | null;
}

Asset Management

Static Loading API

Convenient static methods for loading assets from modules, URIs, or metadata. Provides batch loading capabilities with Promise-based API.

class Asset {
  /**
   * Load and download assets, returning array when complete
   * @param moduleId - Asset modules, URIs, or mixed array
   */
  static loadAsync(moduleId: number | number[] | string | string[]): Promise<Asset[]>;

  /**
   * Create Asset instance from module, URI, or object
   * @param virtualAssetModule - Module ID, URI string, or asset object
   */
  static fromModule(
    virtualAssetModule: number | string | { uri: string; width: number; height: number }
  ): Asset;

  /**
   * Create Asset instance from URI string
   * @param uri - Asset URI
   */
  static fromURI(uri: string): Asset;
}

Static Loading API

React Hooks

React hook for declarative asset loading with automatic state management and error handling.

/**
 * Downloads and stores assets locally, returning loaded assets or error
 * @param moduleIds - Single module ID or array of module IDs
 * @returns Tuple with assets array and error
 */
function useAssets(moduleIds: number | number[]): [Asset[] | undefined, Error | undefined];

React Hooks

Types

interface AssetDescriptor {
  name: string;
  type: string;
  hash?: string | null;
  uri: string;
  width?: number | null;
  height?: number | null;
}

interface AssetMetadata {
  httpServerLocation: string;
  name: string;
  hash: string;
  type: string;
  scales: number[];
  width?: number;
  height?: number;
  uri?: string;
  fileHashes?: string[];
  fileUris?: string[];
}