@penabt/pixi-expo 0.2.0 → 0.3.1

package/README.md

@@ -143,21 +143,109 @@ import {
 
 ## Loading Assets
 
-### Bundled Assets (require)
+All asset loading goes through the Expo-compatible loader. PixiJS's browser-dependent `loadTextures` parser is replaced automatically — you don't need to do anything special.
+
+Supported formats: `.png`, `.jpg`, `.jpeg`, `.webp`, `.avif`, `.gif`, `data:image/*`
+
+### Direct Loading — `Assets.load()`
+
+Works with both `require()` (local bundled) and string URLs (remote):
+
+```tsx
+import { Assets, Sprite } from '@penabt/pixi-expo';
+
+// Local asset via require()
+const bunny = await Assets.load(require('./assets/bunny.png'));
+const sprite = new Sprite(bunny);
+
+// Remote asset via URL
+const remote = await Assets.load('https://example.com/sprite.png');
+```
+
+### Array Loading — `Assets.load([])`
+
+Load multiple assets at once with array destructuring:
 
 ```tsx
-import { loadTexture, Sprite } from '@penabt/pixi-expo';
+import { Assets, Sprite } from '@penabt/pixi-expo';
 
-// Load a bundled image
-const texture = await loadTexture(require('./assets/bunny.png'));
-const sprite = new Sprite(texture);
+// Mix require() and remote URLs in a single call
+const [frame1, frame2, enemy] = await Assets.load([
+  require('./assets/frame-1.png'),
+  require('./assets/frame-2.png'),
+  'https://example.com/enemy.png',
+]);
+
+const sprite1 = new Sprite(frame1);
+const sprite2 = new Sprite(frame2);
 ```
 
-### Remote Assets (URL)
+> **Note:** Unlike standard PixiJS (which returns a `Record<string, Texture>` for arrays), `@penabt/pixi-expo` returns an array in the same order as the input — enabling convenient destructuring.
+
+### Manifest & Bundles — `createExpoManifest()`
+
+For larger projects, group assets into bundles and load them on demand:
 
 ```tsx
-// Load from URL
-const texture = await Assets.load('https://example.com/sprite.png');
+import { Assets, createExpoManifest } from '@penabt/pixi-expo';
+
+const manifest = createExpoManifest({
+  bundles: [
+    {
+      name: 'load-screen',
+      assets: [{ alias: 'logo', src: require('./assets/logo.png') }],
+    },
+    {
+      name: 'game',
+      assets: [
+        { alias: 'hero', src: require('./assets/hero.png') },
+        { alias: 'enemy', src: 'https://cdn.example.com/enemy.png' },
+      ],
+    },
+  ],
+});
+
+// Initialize once
+await Assets.init({ manifest });
+
+// Load bundles on demand
+const loadAssets = await Assets.loadBundle('load-screen');
+const gameAssets = await Assets.loadBundle('game');
+const heroSprite = new Sprite(gameAssets.hero);
+```
+
+### Dynamic Bundles — `createExpoBundle()`
+
+Register bundles at runtime:
+
+```tsx
+import { Assets, createExpoBundle } from '@penabt/pixi-expo';
+
+Assets.addBundle(
+  'powerups',
+  createExpoBundle([
+    { alias: 'shield', src: require('./assets/shield.png') },
+    { alias: 'speed', src: 'https://cdn.example.com/speed.png' },
+  ]),
+);
+
+const powerups = await Assets.loadBundle('powerups');
+```
+
+### BitmapFont
+
+Load `.fnt` or `.xml` bitmap fonts — the atlas texture is loaded automatically:
+
+```tsx
+import { Assets, BitmapText } from '@penabt/pixi-expo';
+
+await Assets.load('https://example.com/fonts/myfont.xml');
+
+const score = new BitmapText({
+  text: 'Score: 0',
+  style: { fontFamily: 'MyFont', fontSize: 32 },
+});
+app.stage.addChild(score);
 ```
 
 ## Performance Tips
@@ -174,9 +262,9 @@ const texture = await Assets.load('https://example.com/sprite.png');
 
 ## Limitations
 
-- **No Canvas 2D** - expo-gl only supports WebGL, not Canvas 2D context
-- **No HTMLText** - HTML-based text rendering is not available
-- **Font Loading** - Use expo-font for loading custom fonts
+- **No Canvas 2D** — expo-gl only supports WebGL, not Canvas 2D context
+- **No Text** — `Text` (canvas-based) and `HTMLText` are not available. Use `BitmapText` instead
+- **Font Loading** — Use `BitmapFont` (`.fnt`/`.xml` + atlas) for in-game text, or `expo-font` for system fonts
 
 ## Compatibility
 

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { ExpoWebGLRenderingContext } from 'expo-gl';
-import { LoaderParser, Texture, Application, Container } from 'pixi.js';
-export { AnimatedSprite, Application, ApplicationOptions, Assets, Batcher, BitmapText, BlurFilter, Circle, Color, ColorMatrixFilter, Container, DOMAdapter, DisplacementFilter, Ellipse, EventBoundary, ExtensionType, FederatedPointerEvent, Filter, FilterOptions, Graphics, Matrix, Mesh, NineSliceSprite, NoiseFilter, ObservablePoint, Point, Polygon, Rectangle, RenderTexture, Renderer, RoundedRectangle, Sprite, Spritesheet, SpritesheetData, Text, TextStyle, Texture, TextureSource, TextureSourceOptions, Ticker, TilingSprite, extensions } from 'pixi.js';
+import { LoaderParser, Texture, ArrayOr, AssetsBundle, AssetsManifest, UnresolvedAsset, Application, Container } from 'pixi.js';
+export { AnimatedSprite, Application, ApplicationOptions, Assets, AssetsBundle, AssetsManifest, Batcher, BitmapText, BlurFilter, Circle, Color, ColorMatrixFilter, Container, DOMAdapter, DisplacementFilter, Ellipse, EventBoundary, ExtensionType, FederatedPointerEvent, Filter, FilterOptions, Graphics, Matrix, Mesh, NineSliceSprite, NoiseFilter, ObservablePoint, Point, Polygon, Rectangle, RenderTexture, Renderer, RoundedRectangle, Sprite, Spritesheet, SpritesheetData, Text, TextStyle, Texture, TextureSource, TextureSourceOptions, Ticker, TilingSprite, UnresolvedAsset, extensions } from 'pixi.js';
 import * as react from 'react';
 import { ViewStyle, NativeTouchEvent, GestureResponderEvent } from 'react-native';
 
@@ -499,6 +499,78 @@ declare const loadExpoAsset: LoaderParser<Texture>;
  */
 declare const loadExpoFont: LoaderParser<string>;
 
+/**
+ * PixiJS Manifest & Bundle utilities for Expo.
+ *
+ * Transforms Expo-flavored manifests (where `src` can be a require() numeric ID)
+ * into standard PixiJS manifests (where `src` is always a string).
+ */
+
+/** An asset source that accepts Expo require() numeric IDs alongside strings. */
+type ExpoAssetSrc = number | string;
+/**
+ * An unresolved asset that accepts require() IDs in src.
+ * Mirrors PixiJS UnresolvedAsset but src can include numeric module IDs.
+ */
+interface ExpoUnresolvedAsset<T = any> {
+    alias?: ArrayOr<string>;
+    src?: ExpoAssetSrc | ExpoAssetSrc[];
+    data?: T;
+    format?: string;
+    parser?: string;
+    [key: string]: any;
+}
+/** A bundle that accepts Expo require() IDs. */
+interface ExpoAssetsBundle {
+    name: string;
+    assets: ExpoUnresolvedAsset[] | Record<string, ExpoAssetSrc | ExpoAssetSrc[] | ExpoUnresolvedAsset>;
+}
+/** A manifest that accepts Expo require() IDs. */
+interface ExpoAssetsManifest {
+    bundles: ExpoAssetsBundle[];
+}
+/**
+ * Transform a single Expo asset entry into a standard PixiJS UnresolvedAsset.
+ * Numeric require() IDs are registered and converted to string keys.
+ */
+declare function resolveExpoAsset<T = any>(asset: ExpoUnresolvedAsset<T>): UnresolvedAsset<T>;
+/**
+ * Transform bundle assets for use with `Assets.addBundle()`.
+ * Handles both array and Record formats.
+ *
+ * @example
+ * ```ts
+ * Assets.addBundle('animals', createExpoBundle([
+ *   { alias: 'bunny', src: require('./assets/bunny.png') },
+ *   { alias: 'chicken', src: 'https://example.com/chicken.png' },
+ * ]));
+ * ```
+ */
+declare function createExpoBundle(assets: ExpoAssetsBundle['assets']): AssetsBundle['assets'];
+/**
+ * Transform an Expo-flavored manifest into a standard PixiJS AssetsManifest.
+ * Numeric require() IDs in `src` fields are registered and converted to string keys.
+ *
+ * @example
+ * ```ts
+ * const manifest = createExpoManifest({
+ *   bundles: [
+ *     {
+ *       name: 'game-screen',
+ *       assets: [
+ *         { alias: 'character', src: require('./assets/robot.png') },
+ *         { alias: 'enemy', src: 'https://example.com/bad-guy.png' },
+ *       ],
+ *     },
+ *   ],
+ * });
+ *
+ * await Assets.init({ manifest });
+ * const assets = await Assets.loadBundle('game-screen');
+ * ```
+ */
+declare function createExpoManifest(manifest: ExpoAssetsManifest): AssetsManifest;
+
 /**
  * Props for the PixiView component.
  */
@@ -744,4 +816,4 @@ declare function clearTouchTracking(): void;
  */
 declare function getActiveTouchCount(): number;
 
-export { ExpoAdapter, ExpoCanvasElement, type NativePointerEvent, PixiView, type PixiViewHandle, type PixiViewProps, type TouchEventBridgeOptions, clearActiveContext, clearTouchTracking, convertTouchToPointerEvents, getActiveCanvas, getActiveGL, getActiveTouchCount, loadExpoAsset, loadExpoFont, loadTexture, setActiveGLContext };
+export { ExpoAdapter, type ExpoAssetSrc, type ExpoAssetsBundle, type ExpoAssetsManifest, ExpoCanvasElement, type ExpoUnresolvedAsset, type NativePointerEvent, PixiView, type PixiViewHandle, type PixiViewProps, type TouchEventBridgeOptions, clearActiveContext, clearTouchTracking, convertTouchToPointerEvents, createExpoBundle, createExpoManifest, getActiveCanvas, getActiveGL, getActiveTouchCount, loadExpoAsset, loadExpoFont, loadTexture, resolveExpoAsset, setActiveGLContext };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ExpoWebGLRenderingContext } from 'expo-gl';
-import { LoaderParser, Texture, Application, Container } from 'pixi.js';
-export { AnimatedSprite, Application, ApplicationOptions, Assets, Batcher, BitmapText, BlurFilter, Circle, Color, ColorMatrixFilter, Container, DOMAdapter, DisplacementFilter, Ellipse, EventBoundary, ExtensionType, FederatedPointerEvent, Filter, FilterOptions, Graphics, Matrix, Mesh, NineSliceSprite, NoiseFilter, ObservablePoint, Point, Polygon, Rectangle, RenderTexture, Renderer, RoundedRectangle, Sprite, Spritesheet, SpritesheetData, Text, TextStyle, Texture, TextureSource, TextureSourceOptions, Ticker, TilingSprite, extensions } from 'pixi.js';
+import { LoaderParser, Texture, ArrayOr, AssetsBundle, AssetsManifest, UnresolvedAsset, Application, Container } from 'pixi.js';
+export { AnimatedSprite, Application, ApplicationOptions, Assets, AssetsBundle, AssetsManifest, Batcher, BitmapText, BlurFilter, Circle, Color, ColorMatrixFilter, Container, DOMAdapter, DisplacementFilter, Ellipse, EventBoundary, ExtensionType, FederatedPointerEvent, Filter, FilterOptions, Graphics, Matrix, Mesh, NineSliceSprite, NoiseFilter, ObservablePoint, Point, Polygon, Rectangle, RenderTexture, Renderer, RoundedRectangle, Sprite, Spritesheet, SpritesheetData, Text, TextStyle, Texture, TextureSource, TextureSourceOptions, Ticker, TilingSprite, UnresolvedAsset, extensions } from 'pixi.js';
 import * as react from 'react';
 import { ViewStyle, NativeTouchEvent, GestureResponderEvent } from 'react-native';
 
@@ -499,6 +499,78 @@ declare const loadExpoAsset: LoaderParser<Texture>;
  */
 declare const loadExpoFont: LoaderParser<string>;
 
+/**
+ * PixiJS Manifest & Bundle utilities for Expo.
+ *
+ * Transforms Expo-flavored manifests (where `src` can be a require() numeric ID)
+ * into standard PixiJS manifests (where `src` is always a string).
+ */
+
+/** An asset source that accepts Expo require() numeric IDs alongside strings. */
+type ExpoAssetSrc = number | string;
+/**
+ * An unresolved asset that accepts require() IDs in src.
+ * Mirrors PixiJS UnresolvedAsset but src can include numeric module IDs.
+ */
+interface ExpoUnresolvedAsset<T = any> {
+    alias?: ArrayOr<string>;
+    src?: ExpoAssetSrc | ExpoAssetSrc[];
+    data?: T;
+    format?: string;
+    parser?: string;
+    [key: string]: any;
+}
+/** A bundle that accepts Expo require() IDs. */
+interface ExpoAssetsBundle {
+    name: string;
+    assets: ExpoUnresolvedAsset[] | Record<string, ExpoAssetSrc | ExpoAssetSrc[] | ExpoUnresolvedAsset>;
+}
+/** A manifest that accepts Expo require() IDs. */
+interface ExpoAssetsManifest {
+    bundles: ExpoAssetsBundle[];
+}
+/**
+ * Transform a single Expo asset entry into a standard PixiJS UnresolvedAsset.
+ * Numeric require() IDs are registered and converted to string keys.
+ */
+declare function resolveExpoAsset<T = any>(asset: ExpoUnresolvedAsset<T>): UnresolvedAsset<T>;
+/**
+ * Transform bundle assets for use with `Assets.addBundle()`.
+ * Handles both array and Record formats.
+ *
+ * @example
+ * ```ts
+ * Assets.addBundle('animals', createExpoBundle([
+ *   { alias: 'bunny', src: require('./assets/bunny.png') },
+ *   { alias: 'chicken', src: 'https://example.com/chicken.png' },
+ * ]));
+ * ```
+ */
+declare function createExpoBundle(assets: ExpoAssetsBundle['assets']): AssetsBundle['assets'];
+/**
+ * Transform an Expo-flavored manifest into a standard PixiJS AssetsManifest.
+ * Numeric require() IDs in `src` fields are registered and converted to string keys.
+ *
+ * @example
+ * ```ts
+ * const manifest = createExpoManifest({
+ *   bundles: [
+ *     {
+ *       name: 'game-screen',
+ *       assets: [
+ *         { alias: 'character', src: require('./assets/robot.png') },
+ *         { alias: 'enemy', src: 'https://example.com/bad-guy.png' },
+ *       ],
+ *     },
+ *   ],
+ * });
+ *
+ * await Assets.init({ manifest });
+ * const assets = await Assets.loadBundle('game-screen');
+ * ```
+ */
+declare function createExpoManifest(manifest: ExpoAssetsManifest): AssetsManifest;
+
 /**
  * Props for the PixiView component.
  */
@@ -744,4 +816,4 @@ declare function clearTouchTracking(): void;
  */
 declare function getActiveTouchCount(): number;
 
-export { ExpoAdapter, ExpoCanvasElement, type NativePointerEvent, PixiView, type PixiViewHandle, type PixiViewProps, type TouchEventBridgeOptions, clearActiveContext, clearTouchTracking, convertTouchToPointerEvents, getActiveCanvas, getActiveGL, getActiveTouchCount, loadExpoAsset, loadExpoFont, loadTexture, setActiveGLContext };
+export { ExpoAdapter, type ExpoAssetSrc, type ExpoAssetsBundle, type ExpoAssetsManifest, ExpoCanvasElement, type ExpoUnresolvedAsset, type NativePointerEvent, PixiView, type PixiViewHandle, type PixiViewProps, type TouchEventBridgeOptions, clearActiveContext, clearTouchTracking, convertTouchToPointerEvents, createExpoBundle, createExpoManifest, getActiveCanvas, getActiveGL, getActiveTouchCount, loadExpoAsset, loadExpoFont, loadTexture, resolveExpoAsset, setActiveGLContext };

package/dist/index.js

@@ -72,6 +72,8 @@ __export(index_exports, {
   clearActiveContext: () => clearActiveContext,
   clearTouchTracking: () => clearTouchTracking,
   convertTouchToPointerEvents: () => convertTouchToPointerEvents,
+  createExpoBundle: () => createExpoBundle,
+  createExpoManifest: () => createExpoManifest,
   extensions: () => import_pixi5.extensions,
   getActiveCanvas: () => getActiveCanvas,
   getActiveGL: () => getActiveGL,
@@ -79,6 +81,7 @@ __export(index_exports, {
   loadExpoAsset: () => loadExpoAsset,
   loadExpoFont: () => loadExpoFont,
   loadTexture: () => loadTexture,
+  resolveExpoAsset: () => resolveExpoAsset,
   setActiveGLContext: () => setActiveGLContext
 });
 module.exports = __toCommonJS(index_exports);
@@ -300,7 +303,6 @@ function windowRemoveEventListener(type, listener, _options) {
 function dispatchWindowEvent(event) {
   const listeners = windowListeners.get(event.type);
   if (__DEV__) {
-    console.log(`[Window] dispatchEvent: ${event.type}, listeners: ${listeners?.size ?? 0}`);
   }
   if (!listeners || listeners.size === 0) {
     return false;
@@ -1064,9 +1066,30 @@ var import_pixi4 = require("pixi.js");
 var import_expo_asset = require("expo-asset");
 var import_react_native = require("react-native");
 var import_pixi = require("pixi.js");
-var validImageExtensions = [".png", ".jpg", ".jpeg", ".webp", ".gif"];
+var validImageExtensions = [".png", ".jpg", ".jpeg", ".webp", ".avif", ".gif"];
+var validImageMIMEs = [
+  "image/png",
+  "image/jpg",
+  "image/jpeg",
+  "image/webp",
+  "image/avif",
+  "image/gif"
+];
 var MODULE_PREFIX = "__expo_module_";
+var URL_PREFIX = "__expo_url_";
 var moduleIdRegistry = /* @__PURE__ */ new Map();
+var urlRegistry = /* @__PURE__ */ new Map();
+var urlCounter = 0;
+function registerModuleId(moduleId) {
+  const key = `${MODULE_PREFIX}${moduleId}`;
+  moduleIdRegistry.set(key, moduleId);
+  return key;
+}
+function registerAssetUrl(url) {
+  const key = `${URL_PREFIX}${urlCounter++}`;
+  urlRegistry.set(key, url);
+  return key;
+}
 function getExtension(url) {
   const cleanUrl = url.split("?")[0].split("#")[0];
   const lastDot = cleanUrl.lastIndexOf(".");
@@ -1082,13 +1105,12 @@ function getImageSize(uri) {
   });
 }
 async function loadTexture(source) {
-  const { Assets: Assets2 } = await import("pixi.js");
+  const { Assets: Assets3 } = await import("pixi.js");
   if (typeof source === "number") {
-    const key = `${MODULE_PREFIX}${source}`;
-    moduleIdRegistry.set(key, source);
-    return Assets2.load(key);
+    const key = registerModuleId(source);
+    return Assets3.load(key);
   }
-  return Assets2.load(source);
+  return Assets3.load(source);
 }
 var loadExpoAsset = {
   extension: {
@@ -1102,43 +1124,77 @@ var loadExpoAsset = {
    */
   test(url) {
     if (url.startsWith(MODULE_PREFIX)) {
+      if (__DEV__) console.log(`[loadExpoAsset] test("${url}") \u2192 true (module)`);
+      return true;
+    }
+    if (url.startsWith(URL_PREFIX)) {
+      if (__DEV__) console.log(`[loadExpoAsset] test("${url}") \u2192 true (registered url)`);
       return true;
     }
     if (url.startsWith("file://")) {
+      if (__DEV__) console.log(`[loadExpoAsset] test("${url}") \u2192 true (file)`);
       return true;
     }
+    if (url.startsWith("data:")) {
+      const result2 = validImageMIMEs.some((mime) => url.startsWith(`data:${mime}`));
+      if (__DEV__)
+        console.log(`[loadExpoAsset] test("${url.slice(0, 40)}...") \u2192 ${result2} (data url)`);
+      return result2;
+    }
     const ext = getExtension(url);
-    return validImageExtensions.includes(ext);
+    const result = validImageExtensions.includes(ext);
+    if (__DEV__) console.log(`[loadExpoAsset] test("${url}") ext="${ext}" \u2192 ${result}`);
+    return result;
   },
   /**
    * Load an asset and create a PixiJS Texture
    */
   async load(url, _asset) {
-    let expoAsset;
     try {
-      if (url.startsWith(MODULE_PREFIX)) {
-        const moduleId = moduleIdRegistry.get(url);
+      if (__DEV__) {
+        console.log(`[loadExpoAsset] Loading: ${url}`);
+      }
+      let localUri;
+      let width;
+      let height;
+      const resolvedUrl = url.startsWith(URL_PREFIX) ? urlRegistry.get(url) ?? url : url;
+      if (url.startsWith(URL_PREFIX) && !urlRegistry.has(url)) {
+        throw new Error(`URL not found in registry for key: ${url}`);
+      }
+      if (resolvedUrl.startsWith(MODULE_PREFIX)) {
+        const moduleId = moduleIdRegistry.get(resolvedUrl);
         if (moduleId === void 0) {
-          throw new Error(`Module ID not found in registry for key: ${url}`);
+          throw new Error(`Module ID not found in registry for key: ${resolvedUrl}`);
         }
-        expoAsset = import_expo_asset.Asset.fromModule(moduleId);
-      } else if (isRemoteUrl(url)) {
-        expoAsset = import_expo_asset.Asset.fromURI(url);
+        const expoAsset = import_expo_asset.Asset.fromModule(moduleId);
+        await expoAsset.downloadAsync();
+        localUri = expoAsset.localUri || expoAsset.uri;
+        width = expoAsset.width ?? void 0;
+        height = expoAsset.height ?? void 0;
+      } else if (isRemoteUrl(resolvedUrl)) {
+        const expoAsset = import_expo_asset.Asset.fromURI(resolvedUrl);
+        await expoAsset.downloadAsync();
+        localUri = expoAsset.localUri || expoAsset.uri;
+        width = expoAsset.width ?? void 0;
+        height = expoAsset.height ?? void 0;
       } else {
-        expoAsset = import_expo_asset.Asset.fromURI(url);
+        const expoAsset = import_expo_asset.Asset.fromURI(resolvedUrl);
+        await expoAsset.downloadAsync();
+        localUri = expoAsset.localUri || expoAsset.uri;
+        width = expoAsset.width ?? void 0;
+        height = expoAsset.height ?? void 0;
       }
-      await expoAsset.downloadAsync();
-      const localUri = expoAsset.localUri || expoAsset.uri;
       if (!localUri) {
         throw new Error(`Failed to get local URI for asset: ${url}`);
       }
-      let width = expoAsset.width;
-      let height = expoAsset.height;
       if (!width || !height) {
         const size = await getImageSize(localUri);
         width = size.width;
         height = size.height;
       }
+      if (__DEV__) {
+        console.log(`[loadExpoAsset] Resolved: ${localUri} (${width}x${height})`);
+      }
       const MockImage = globalThis.HTMLImageElement;
       const img = new MockImage();
       img.width = width;
@@ -1156,7 +1212,7 @@ var loadExpoAsset = {
       });
       return new import_pixi.Texture({ source });
     } catch (error) {
-      console.error(`Failed to load asset: ${url}`, error);
+      console.error(`[loadExpoAsset] Failed to load: ${url}`, error);
       throw error;
     }
   },
@@ -1242,6 +1298,54 @@ var loadExpoFont = {
   }
 };
 
+// src/adapter/expoManifest.ts
+function resolveExpoSrc(src) {
+  if (typeof src === "number") {
+    return registerModuleId(src);
+  }
+  return registerAssetUrl(src);
+}
+function resolveExpoSrcArray(src) {
+  if (Array.isArray(src)) {
+    return src.map(resolveExpoSrc);
+  }
+  return resolveExpoSrc(src);
+}
+function resolveExpoAsset(asset) {
+  const { src, ...rest } = asset;
+  if (src === void 0) {
+    return rest;
+  }
+  return {
+    ...rest,
+    src: resolveExpoSrcArray(src)
+  };
+}
+function createExpoBundle(assets) {
+  if (Array.isArray(assets)) {
+    return assets.map(resolveExpoAsset);
+  }
+  const result = {};
+  for (const [key, value] of Object.entries(assets)) {
+    if (typeof value === "number" || typeof value === "string") {
+      result[key] = resolveExpoSrc(value);
+    } else if (Array.isArray(value)) {
+      result[key] = value.map(resolveExpoSrc);
+    } else {
+      result[key] = resolveExpoAsset(value);
+    }
+  }
+  return result;
+}
+function createExpoManifest(manifest) {
+  return {
+    bundles: manifest.bundles.map((bundle) => ({
+      name: bundle.name,
+      assets: createExpoBundle(bundle.assets)
+    }))
+  };
+}
+
 // src/components/PixiView.tsx
 var import_react = require("react");
 var import_react_native3 = require("react-native");
@@ -1593,8 +1697,22 @@ var styles = import_react_native3.StyleSheet.create({
 // src/index.ts
 var import_pixi5 = require("pixi.js");
 import_pixi4.DOMAdapter.set(ExpoAdapter);
+import_pixi4.extensions.remove(import_pixi4.loadTextures);
 import_pixi4.extensions.add(loadExpoAsset);
 import_pixi4.extensions.add(loadExpoFont);
+var _originalLoad = import_pixi4.Assets.load.bind(import_pixi4.Assets);
+import_pixi4.Assets.load = function patchedLoad(urls, onProgress) {
+  if (typeof urls === "number") {
+    return _originalLoad(registerModuleId(urls), onProgress);
+  }
+  if (Array.isArray(urls)) {
+    const resolved = urls.map((u) => typeof u === "number" ? registerModuleId(u) : u);
+    return _originalLoad(resolved, onProgress).then((record) => {
+      return resolved.map((key) => record[key]);
+    });
+  }
+  return _originalLoad(urls, onProgress);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimatedSprite,
@@ -1639,6 +1757,8 @@ import_pixi4.extensions.add(loadExpoFont);
   clearActiveContext,
   clearTouchTracking,
   convertTouchToPointerEvents,
+  createExpoBundle,
+  createExpoManifest,
   extensions,
   getActiveCanvas,
   getActiveGL,
@@ -1646,6 +1766,7 @@ import_pixi4.extensions.add(loadExpoFont);
   loadExpoAsset,
   loadExpoFont,
   loadTexture,
+  resolveExpoAsset,
   setActiveGLContext
 });
 /**

package/dist/index.mjs

@@ -215,7 +215,6 @@ function windowRemoveEventListener(type, listener, _options) {
 function dispatchWindowEvent(event) {
   const listeners = windowListeners.get(event.type);
   if (__DEV__) {
-    console.log(`[Window] dispatchEvent: ${event.type}, listeners: ${listeners?.size ?? 0}`);
   }
   if (!listeners || listeners.size === 0) {
     return false;
@@ -973,15 +972,36 @@ var ExpoAdapter = {
 };
 
 // src/index.ts
-import { DOMAdapter, extensions } from "pixi.js";
+import { DOMAdapter, extensions, loadTextures, Assets } from "pixi.js";
 
 // src/adapter/loadExpoAsset.ts
 import { Asset } from "expo-asset";
 import { Image } from "react-native";
 import { ExtensionType, Texture, ImageSource, LoaderParserPriority } from "pixi.js";
-var validImageExtensions = [".png", ".jpg", ".jpeg", ".webp", ".gif"];
+var validImageExtensions = [".png", ".jpg", ".jpeg", ".webp", ".avif", ".gif"];
+var validImageMIMEs = [
+  "image/png",
+  "image/jpg",
+  "image/jpeg",
+  "image/webp",
+  "image/avif",
+  "image/gif"
+];
 var MODULE_PREFIX = "__expo_module_";
+var URL_PREFIX = "__expo_url_";
 var moduleIdRegistry = /* @__PURE__ */ new Map();
+var urlRegistry = /* @__PURE__ */ new Map();
+var urlCounter = 0;
+function registerModuleId(moduleId) {
+  const key = `${MODULE_PREFIX}${moduleId}`;
+  moduleIdRegistry.set(key, moduleId);
+  return key;
+}
+function registerAssetUrl(url) {
+  const key = `${URL_PREFIX}${urlCounter++}`;
+  urlRegistry.set(key, url);
+  return key;
+}
 function getExtension(url) {
   const cleanUrl = url.split("?")[0].split("#")[0];
   const lastDot = cleanUrl.lastIndexOf(".");
@@ -997,13 +1017,12 @@ function getImageSize(uri) {
   });
 }
 async function loadTexture(source) {
-  const { Assets: Assets2 } = await import("pixi.js");
+  const { Assets: Assets3 } = await import("pixi.js");
   if (typeof source === "number") {
-    const key = `${MODULE_PREFIX}${source}`;
-    moduleIdRegistry.set(key, source);
-    return Assets2.load(key);
+    const key = registerModuleId(source);
+    return Assets3.load(key);
   }
-  return Assets2.load(source);
+  return Assets3.load(source);
 }
 var loadExpoAsset = {
   extension: {
@@ -1017,43 +1036,77 @@ var loadExpoAsset = {
    */
   test(url) {
     if (url.startsWith(MODULE_PREFIX)) {
+      if (__DEV__) console.log(`[loadExpoAsset] test("${url}") \u2192 true (module)`);
+      return true;
+    }
+    if (url.startsWith(URL_PREFIX)) {
+      if (__DEV__) console.log(`[loadExpoAsset] test("${url}") \u2192 true (registered url)`);
       return true;
     }
     if (url.startsWith("file://")) {
+      if (__DEV__) console.log(`[loadExpoAsset] test("${url}") \u2192 true (file)`);
       return true;
     }
+    if (url.startsWith("data:")) {
+      const result2 = validImageMIMEs.some((mime) => url.startsWith(`data:${mime}`));
+      if (__DEV__)
+        console.log(`[loadExpoAsset] test("${url.slice(0, 40)}...") \u2192 ${result2} (data url)`);
+      return result2;
+    }
     const ext = getExtension(url);
-    return validImageExtensions.includes(ext);
+    const result = validImageExtensions.includes(ext);
+    if (__DEV__) console.log(`[loadExpoAsset] test("${url}") ext="${ext}" \u2192 ${result}`);
+    return result;
   },
   /**
    * Load an asset and create a PixiJS Texture
    */
   async load(url, _asset) {
-    let expoAsset;
     try {
-      if (url.startsWith(MODULE_PREFIX)) {
-        const moduleId = moduleIdRegistry.get(url);
+      if (__DEV__) {
+        console.log(`[loadExpoAsset] Loading: ${url}`);
+      }
+      let localUri;
+      let width;
+      let height;
+      const resolvedUrl = url.startsWith(URL_PREFIX) ? urlRegistry.get(url) ?? url : url;
+      if (url.startsWith(URL_PREFIX) && !urlRegistry.has(url)) {
+        throw new Error(`URL not found in registry for key: ${url}`);
+      }
+      if (resolvedUrl.startsWith(MODULE_PREFIX)) {
+        const moduleId = moduleIdRegistry.get(resolvedUrl);
         if (moduleId === void 0) {
-          throw new Error(`Module ID not found in registry for key: ${url}`);
+          throw new Error(`Module ID not found in registry for key: ${resolvedUrl}`);
         }
-        expoAsset = Asset.fromModule(moduleId);
-      } else if (isRemoteUrl(url)) {
-        expoAsset = Asset.fromURI(url);
+        const expoAsset = Asset.fromModule(moduleId);
+        await expoAsset.downloadAsync();
+        localUri = expoAsset.localUri || expoAsset.uri;
+        width = expoAsset.width ?? void 0;
+        height = expoAsset.height ?? void 0;
+      } else if (isRemoteUrl(resolvedUrl)) {
+        const expoAsset = Asset.fromURI(resolvedUrl);
+        await expoAsset.downloadAsync();
+        localUri = expoAsset.localUri || expoAsset.uri;
+        width = expoAsset.width ?? void 0;
+        height = expoAsset.height ?? void 0;
       } else {
-        expoAsset = Asset.fromURI(url);
+        const expoAsset = Asset.fromURI(resolvedUrl);
+        await expoAsset.downloadAsync();
+        localUri = expoAsset.localUri || expoAsset.uri;
+        width = expoAsset.width ?? void 0;
+        height = expoAsset.height ?? void 0;
       }
-      await expoAsset.downloadAsync();
-      const localUri = expoAsset.localUri || expoAsset.uri;
       if (!localUri) {
         throw new Error(`Failed to get local URI for asset: ${url}`);
       }
-      let width = expoAsset.width;
-      let height = expoAsset.height;
       if (!width || !height) {
         const size = await getImageSize(localUri);
         width = size.width;
         height = size.height;
       }
+      if (__DEV__) {
+        console.log(`[loadExpoAsset] Resolved: ${localUri} (${width}x${height})`);
+      }
       const MockImage = globalThis.HTMLImageElement;
       const img = new MockImage();
       img.width = width;
@@ -1071,7 +1124,7 @@ var loadExpoAsset = {
       });
       return new Texture({ source });
     } catch (error) {
-      console.error(`Failed to load asset: ${url}`, error);
+      console.error(`[loadExpoAsset] Failed to load: ${url}`, error);
       throw error;
     }
   },
@@ -1157,6 +1210,54 @@ var loadExpoFont = {
   }
 };
 
+// src/adapter/expoManifest.ts
+function resolveExpoSrc(src) {
+  if (typeof src === "number") {
+    return registerModuleId(src);
+  }
+  return registerAssetUrl(src);
+}
+function resolveExpoSrcArray(src) {
+  if (Array.isArray(src)) {
+    return src.map(resolveExpoSrc);
+  }
+  return resolveExpoSrc(src);
+}
+function resolveExpoAsset(asset) {
+  const { src, ...rest } = asset;
+  if (src === void 0) {
+    return rest;
+  }
+  return {
+    ...rest,
+    src: resolveExpoSrcArray(src)
+  };
+}
+function createExpoBundle(assets) {
+  if (Array.isArray(assets)) {
+    return assets.map(resolveExpoAsset);
+  }
+  const result = {};
+  for (const [key, value] of Object.entries(assets)) {
+    if (typeof value === "number" || typeof value === "string") {
+      result[key] = resolveExpoSrc(value);
+    } else if (Array.isArray(value)) {
+      result[key] = value.map(resolveExpoSrc);
+    } else {
+      result[key] = resolveExpoAsset(value);
+    }
+  }
+  return result;
+}
+function createExpoManifest(manifest) {
+  return {
+    bundles: manifest.bundles.map((bundle) => ({
+      name: bundle.name,
+      assets: createExpoBundle(bundle.assets)
+    }))
+  };
+}
+
 // src/components/PixiView.tsx
 import { useCallback, useRef, useEffect, useImperativeHandle, forwardRef } from "react";
 import {
@@ -1524,7 +1625,7 @@ import {
   TextureSource,
   Spritesheet,
   RenderTexture,
-  Assets,
+  Assets as Assets2,
   Matrix,
   Point,
   ObservablePoint,
@@ -1550,12 +1651,26 @@ import {
   DOMAdapter as DOMAdapter2
 } from "pixi.js";
 DOMAdapter.set(ExpoAdapter);
+extensions.remove(loadTextures);
 extensions.add(loadExpoAsset);
 extensions.add(loadExpoFont);
+var _originalLoad = Assets.load.bind(Assets);
+Assets.load = function patchedLoad(urls, onProgress) {
+  if (typeof urls === "number") {
+    return _originalLoad(registerModuleId(urls), onProgress);
+  }
+  if (Array.isArray(urls)) {
+    const resolved = urls.map((u) => typeof u === "number" ? registerModuleId(u) : u);
+    return _originalLoad(resolved, onProgress).then((record) => {
+      return resolved.map((key) => record[key]);
+    });
+  }
+  return _originalLoad(urls, onProgress);
+};
 export {
   AnimatedSprite,
   Application2 as Application,
-  Assets,
+  Assets2 as Assets,
   Batcher,
   BitmapText,
   BlurFilter,
@@ -1595,6 +1710,8 @@ export {
   clearActiveContext,
   clearTouchTracking,
   convertTouchToPointerEvents,
+  createExpoBundle,
+  createExpoManifest,
   extensions2 as extensions,
   getActiveCanvas,
   getActiveGL,
@@ -1602,6 +1719,7 @@ export {
   loadExpoAsset,
   loadExpoFont,
   loadTexture,
+  resolveExpoAsset,
   setActiveGLContext
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penabt/pixi-expo",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "PixiJS v8 adapter for React Native Expo. Enables hardware-accelerated 2D graphics using expo-gl WebGL context.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -31,7 +31,7 @@
     "build": "tsup src/index.ts --format cjs,esm --dts --clean",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
     "prepublishOnly": "npm run build",
-    "clean": "rm -rf lib",
+    "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
     "format": "prettier --write ."

package/src/adapter/expoManifest.ts

@@ -0,0 +1,143 @@
+/**
+ * PixiJS Manifest & Bundle utilities for Expo.
+ *
+ * Transforms Expo-flavored manifests (where `src` can be a require() numeric ID)
+ * into standard PixiJS manifests (where `src` is always a string).
+ */
+
+import type { UnresolvedAsset, AssetsBundle, AssetsManifest, ArrayOr } from 'pixi.js';
+import { registerModuleId, registerAssetUrl } from './loadExpoAsset';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+/** An asset source that accepts Expo require() numeric IDs alongside strings. */
+export type ExpoAssetSrc = number | string;
+
+/**
+ * An unresolved asset that accepts require() IDs in src.
+ * Mirrors PixiJS UnresolvedAsset but src can include numeric module IDs.
+ */
+export interface ExpoUnresolvedAsset<T = any> {
+  alias?: ArrayOr<string>;
+  src?: ExpoAssetSrc | ExpoAssetSrc[];
+  data?: T;
+  format?: string;
+  parser?: string;
+  [key: string]: any;
+}
+
+/** A bundle that accepts Expo require() IDs. */
+export interface ExpoAssetsBundle {
+  name: string;
+  assets:
+    | ExpoUnresolvedAsset[]
+    | Record<string, ExpoAssetSrc | ExpoAssetSrc[] | ExpoUnresolvedAsset>;
+}
+
+/** A manifest that accepts Expo require() IDs. */
+export interface ExpoAssetsManifest {
+  bundles: ExpoAssetsBundle[];
+}
+
+// =============================================================================
+// INTERNAL HELPERS
+// =============================================================================
+
+function resolveExpoSrc(src: ExpoAssetSrc): string {
+  if (typeof src === 'number') {
+    return registerModuleId(src);
+  }
+  // Wrap string URLs with a registry key to prevent PixiJS's resolver
+  // from routing them to built-in browser-dependent parsers
+  return registerAssetUrl(src);
+}
+
+function resolveExpoSrcArray(src: ExpoAssetSrc | ExpoAssetSrc[]): string | string[] {
+  if (Array.isArray(src)) {
+    return src.map(resolveExpoSrc);
+  }
+  return resolveExpoSrc(src);
+}
+
+// =============================================================================
+// PUBLIC API
+// =============================================================================
+
+/**
+ * Transform a single Expo asset entry into a standard PixiJS UnresolvedAsset.
+ * Numeric require() IDs are registered and converted to string keys.
+ */
+export function resolveExpoAsset<T = any>(asset: ExpoUnresolvedAsset<T>): UnresolvedAsset<T> {
+  const { src, ...rest } = asset;
+  if (src === undefined) {
+    return rest as UnresolvedAsset<T>;
+  }
+  return {
+    ...rest,
+    src: resolveExpoSrcArray(src),
+  } as UnresolvedAsset<T>;
+}
+
+/**
+ * Transform bundle assets for use with `Assets.addBundle()`.
+ * Handles both array and Record formats.
+ *
+ * @example
+ * ```ts
+ * Assets.addBundle('animals', createExpoBundle([
+ *   { alias: 'bunny', src: require('./assets/bunny.png') },
+ *   { alias: 'chicken', src: 'https://example.com/chicken.png' },
+ * ]));
+ * ```
+ */
+export function createExpoBundle(assets: ExpoAssetsBundle['assets']): AssetsBundle['assets'] {
+  if (Array.isArray(assets)) {
+    return assets.map(resolveExpoAsset);
+  }
+
+  // Record format: Record<string, ExpoAssetSrc | ExpoAssetSrc[] | ExpoUnresolvedAsset>
+  const result: Record<string, ArrayOr<string> | UnresolvedAsset> = {};
+  for (const [key, value] of Object.entries(assets)) {
+    if (typeof value === 'number' || typeof value === 'string') {
+      result[key] = resolveExpoSrc(value);
+    } else if (Array.isArray(value)) {
+      result[key] = value.map(resolveExpoSrc);
+    } else {
+      result[key] = resolveExpoAsset(value);
+    }
+  }
+  return result;
+}
+
+/**
+ * Transform an Expo-flavored manifest into a standard PixiJS AssetsManifest.
+ * Numeric require() IDs in `src` fields are registered and converted to string keys.
+ *
+ * @example
+ * ```ts
+ * const manifest = createExpoManifest({
+ *   bundles: [
+ *     {
+ *       name: 'game-screen',
+ *       assets: [
+ *         { alias: 'character', src: require('./assets/robot.png') },
+ *         { alias: 'enemy', src: 'https://example.com/bad-guy.png' },
+ *       ],
+ *     },
+ *   ],
+ * });
+ *
+ * await Assets.init({ manifest });
+ * const assets = await Assets.loadBundle('game-screen');
+ * ```
+ */
+export function createExpoManifest(manifest: ExpoAssetsManifest): AssetsManifest {
+  return {
+    bundles: manifest.bundles.map((bundle) => ({
+      name: bundle.name,
+      assets: createExpoBundle(bundle.assets),
+    })),
+  };
+}

package/src/adapter/loadExpoAsset.ts

@@ -14,9 +14,18 @@ import { ExtensionType, Texture, ImageSource, LoaderParserPriority } from 'pixi.
 
 import type { LoaderParser, ResolvedAsset } from 'pixi.js';
 
-const validImageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif'];
+const validImageExtensions = ['.png', '.jpg', '.jpeg', '.webp', '.avif', '.gif'];
+const validImageMIMEs = [
+  'image/png',
+  'image/jpg',
+  'image/jpeg',
+  'image/webp',
+  'image/avif',
+  'image/gif',
+];
 
 const MODULE_PREFIX = '__expo_module_';
+const URL_PREFIX = '__expo_url_';
 
 /**
  * Registry mapping stringified keys to original require() module IDs.
@@ -25,6 +34,37 @@ const MODULE_PREFIX = '__expo_module_';
  */
 const moduleIdRegistry = new Map<string, number>();
 
+/**
+ * Registry mapping stringified keys to original string URLs.
+ * PixiJS's Resolver auto-assigns built-in parsers for known extensions (e.g. .png → loadTextures),
+ * bypassing our custom loader's test(). Wrapping URLs with a prefix ensures they always
+ * route through loadExpoAsset.
+ */
+const urlRegistry = new Map<string, string>();
+let urlCounter = 0;
+
+/**
+ * Register a require() module ID in the registry and return the string key.
+ * This key can be used as a `src` in PixiJS Assets system and will be
+ * intercepted by the loadExpoAsset loader.
+ */
+export function registerModuleId(moduleId: number): string {
+  const key = `${MODULE_PREFIX}${moduleId}`;
+  moduleIdRegistry.set(key, moduleId);
+  return key;
+}
+
+/**
+ * Register a string URL in the registry and return a prefixed key.
+ * This prevents PixiJS's resolver from routing the URL to built-in
+ * browser-dependent parsers that don't work in React Native.
+ */
+export function registerAssetUrl(url: string): string {
+  const key = `${URL_PREFIX}${urlCounter++}`;
+  urlRegistry.set(key, url);
+  return key;
+}
+
 /**
  * Get file extension from a URL or path
  */
@@ -69,8 +109,7 @@ export async function loadTexture(source: number | string): Promise<Texture> {
   const { Assets } = await import('pixi.js');
 
   if (typeof source === 'number') {
-    const key = `${MODULE_PREFIX}${source}`;
-    moduleIdRegistry.set(key, source);
+    const key = registerModuleId(source);
     return Assets.load(key);
   }
 
@@ -100,61 +139,105 @@ export const loadExpoAsset = {
   test(url: string): boolean {
     // Handle registered module IDs (from loadTexture helper)
     if (url.startsWith(MODULE_PREFIX)) {
+      if (__DEV__) console.log(`[loadExpoAsset] test("${url}") → true (module)`);
+      return true;
+    }
+
+    // Handle registered URL keys (from createExpoManifest / registerAssetUrl)
+    if (url.startsWith(URL_PREFIX)) {
+      if (__DEV__) console.log(`[loadExpoAsset] test("${url}") → true (registered url)`);
       return true;
     }
 
     // Handle local file URIs
     if (url.startsWith('file://')) {
+      if (__DEV__) console.log(`[loadExpoAsset] test("${url}") → true (file)`);
       return true;
     }
 
+    // Handle data URLs with valid image MIME types
+    if (url.startsWith('data:')) {
+      const result = validImageMIMEs.some((mime) => url.startsWith(`data:${mime}`));
+      if (__DEV__)
+        console.log(`[loadExpoAsset] test("${url.slice(0, 40)}...") → ${result} (data url)`);
+      return result;
+    }
+
     // Handle URLs with valid image extensions
     const ext = getExtension(url);
+    const result = validImageExtensions.includes(ext);
 
-    return validImageExtensions.includes(ext);
+    if (__DEV__) console.log(`[loadExpoAsset] test("${url}") ext="${ext}" → ${result}`);
+    return result;
   },
 
   /**
    * Load an asset and create a PixiJS Texture
    */
   async load(url: string, _asset?: ResolvedAsset): Promise<Texture> {
-    let expoAsset: Asset;
-
     try {
-      if (url.startsWith(MODULE_PREFIX)) {
+      if (__DEV__) {
+        console.log(`[loadExpoAsset] Loading: ${url}`);
+      }
+
+      let localUri: string;
+      let width: number | undefined;
+      let height: number | undefined;
+
+      // Resolve registered URL keys back to original URLs
+      const resolvedUrl = url.startsWith(URL_PREFIX) ? (urlRegistry.get(url) ?? url) : url;
+
+      if (url.startsWith(URL_PREFIX) && !urlRegistry.has(url)) {
+        throw new Error(`URL not found in registry for key: ${url}`);
+      }
+
+      if (resolvedUrl.startsWith(MODULE_PREFIX)) {
         // Recover the original require() module ID from registry
-        const moduleId = moduleIdRegistry.get(url);
+        const moduleId = moduleIdRegistry.get(resolvedUrl);
 
         if (moduleId === undefined) {
-          throw new Error(`Module ID not found in registry for key: ${url}`);
+          throw new Error(`Module ID not found in registry for key: ${resolvedUrl}`);
         }
 
-        expoAsset = Asset.fromModule(moduleId);
-      } else if (isRemoteUrl(url)) {
-        expoAsset = Asset.fromURI(url);
-      } else {
-        expoAsset = Asset.fromURI(url);
-      }
+        const expoAsset = Asset.fromModule(moduleId);
+        await expoAsset.downloadAsync();
+
+        localUri = expoAsset.localUri || expoAsset.uri;
+        width = expoAsset.width ?? undefined;
+        height = expoAsset.height ?? undefined;
+      } else if (isRemoteUrl(resolvedUrl)) {
+        // Download remote image to local cache via expo-asset
+        const expoAsset = Asset.fromURI(resolvedUrl);
+        await expoAsset.downloadAsync();
 
-      // Download the asset to local storage
-      await expoAsset.downloadAsync();
+        localUri = expoAsset.localUri || expoAsset.uri;
+        width = expoAsset.width ?? undefined;
+        height = expoAsset.height ?? undefined;
+      } else {
+        // Local file URI
+        const expoAsset = Asset.fromURI(resolvedUrl);
+        await expoAsset.downloadAsync();
 
-      const localUri = expoAsset.localUri || expoAsset.uri;
+        localUri = expoAsset.localUri || expoAsset.uri;
+        width = expoAsset.width ?? undefined;
+        height = expoAsset.height ?? undefined;
+      }
 
       if (!localUri) {
         throw new Error(`Failed to get local URI for asset: ${url}`);
       }
 
-      // Get dimensions from the asset metadata or via Image.getSize
-      let width = expoAsset.width;
-      let height = expoAsset.height;
-
+      // Get dimensions via Image.getSize if not already known
       if (!width || !height) {
         const size = await getImageSize(localUri);
         width = size.width;
         height = size.height;
       }
 
+      if (__DEV__) {
+        console.log(`[loadExpoAsset] Resolved: ${localUri} (${width}x${height})`);
+      }
+
       // Create an HTMLImageElement instance that:
       // 1. Passes ImageSource.test() (instanceof HTMLImageElement)
       // 2. Has `localUri` so expo-gl's patched texImage2D loads the image natively
@@ -177,7 +260,7 @@ export const loadExpoAsset = {
 
       return new Texture({ source });
     } catch (error) {
-      console.error(`Failed to load asset: ${url}`, error);
+      console.error(`[loadExpoAsset] Failed to load: ${url}`, error);
       throw error;
     }
   },

package/src/adapter/polyfills.ts

@@ -290,7 +290,7 @@ export function dispatchWindowEvent(event: { type: string; [key: string]: any })
   const listeners = windowListeners.get(event.type);
 
   if (__DEV__) {
-    console.log(`[Window] dispatchEvent: ${event.type}, listeners: ${listeners?.size ?? 0}`);
+    //console.log(`[Window] dispatchEvent: ${event.type}, listeners: ${listeners?.size ?? 0}`);
   }
 
   if (!listeners || listeners.size === 0) {

package/src/index.ts

@@ -76,23 +76,47 @@ import { ExpoCanvasElement } from './adapter';
 // and configure it to use our custom adapter.
 // =============================================================================
 
-import { DOMAdapter, extensions } from 'pixi.js';
+import { DOMAdapter, extensions, loadTextures, Assets } from 'pixi.js';
 
 // Set the custom adapter before any PixiJS rendering occurs
 DOMAdapter.set(ExpoAdapter as any);
 
 // =============================================================================
 // PHASE 4: ASSET LOADERS
-// Register custom loaders that use Expo's asset system.
+// Remove PixiJS's built-in texture loader (uses createImageBitmap which doesn't
+// exist in React Native) and register our Expo-compatible loaders.
 // These must be registered after DOMAdapter is configured.
 // =============================================================================
 
-import { loadExpoAsset, loadTexture } from './adapter/loadExpoAsset';
+import { loadExpoAsset, loadTexture, registerModuleId } from './adapter/loadExpoAsset';
 import { loadExpoFont } from './adapter/loadExpoFont';
 
+extensions.remove(loadTextures);
 extensions.add(loadExpoAsset);
 extensions.add(loadExpoFont);
 
+// =============================================================================
+// PHASE 5: PATCH Assets.load TO ACCEPT require() IDs
+// PixiJS's Assets.load() only accepts strings. This patch allows passing
+// numeric require() module IDs directly: Assets.load(require('./img.png'))
+// =============================================================================
+
+const _originalLoad = Assets.load.bind(Assets);
+(Assets as any).load = function patchedLoad(urls: any, onProgress?: any): Promise<any> {
+  if (typeof urls === 'number') {
+    return _originalLoad(registerModuleId(urls), onProgress);
+  }
+  if (Array.isArray(urls)) {
+    const resolved = urls.map((u: any) => (typeof u === 'number' ? registerModuleId(u) : u));
+    // Assets.load returns Record<string, T> for arrays. Convert to array so
+    // callers can destructure: const [a, b] = await Assets.load([url1, url2])
+    return _originalLoad(resolved, onProgress).then((record: any) => {
+      return resolved.map((key: string) => record[key]);
+    });
+  }
+  return _originalLoad(urls, onProgress);
+};
+
 // =============================================================================
 // EXPORTS: ADAPTER UTILITIES
 // Low-level adapter components for advanced use cases.
@@ -127,6 +151,19 @@ export {
   loadExpoFont,
 };
 
+// =============================================================================
+// EXPORTS: MANIFEST & BUNDLE UTILITIES
+// Transform Expo-flavored manifests (with require() IDs) for PixiJS Assets.
+// =============================================================================
+
+export { createExpoManifest, createExpoBundle, resolveExpoAsset } from './adapter/expoManifest';
+export type {
+  ExpoAssetSrc,
+  ExpoUnresolvedAsset,
+  ExpoAssetsBundle,
+  ExpoAssetsManifest,
+} from './adapter/expoManifest';
+
 // =============================================================================
 // EXPORTS: REACT COMPONENTS
 // High-level React Native components for easy integration.
@@ -301,4 +338,10 @@ export type {
   FilterOptions,
   /** Renderer type */
   Renderer,
+  /** Manifest format for Assets.init() */
+  AssetsManifest,
+  /** Bundle format within a manifest */
+  AssetsBundle,
+  /** Unresolved asset entry */
+  UnresolvedAsset,
 } from 'pixi.js';