@penabt/pixi-expo 0.3.0 → 0.4.0

package/README.md

@@ -160,11 +160,28 @@ 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 { Assets, Sprite } from '@penabt/pixi-expo';
 
-// Multiple assets
-const [a, b] = await Assets.load([require('./assets/a.png'), 'https://example.com/b.png']);
+// 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);
 ```
 
+> **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:

package/dist/index.d.mts

@@ -368,11 +368,9 @@ declare const ExpoAdapter: {
     /**
      * Get the Canvas 2D rendering context constructor.
      *
-     * @returns null - Canvas 2D is not supported in expo-gl
-     *
-     * @remarks
-     * expo-gl only provides WebGL contexts. For 2D canvas operations,
-     * consider using @shopify/react-native-skia as an alternative.
+     * Returns a mock constructor whose instances provide the mock Canvas2D
+     * context. PixiJS accesses `CanvasRenderingContext2D.prototype` for
+     * feature detection, so returning `null` causes a crash.
      */
     getCanvasRenderingContext2D: () => any;
     /**

package/dist/index.d.ts

@@ -368,11 +368,9 @@ declare const ExpoAdapter: {
     /**
      * Get the Canvas 2D rendering context constructor.
      *
-     * @returns null - Canvas 2D is not supported in expo-gl
-     *
-     * @remarks
-     * expo-gl only provides WebGL contexts. For 2D canvas operations,
-     * consider using @shopify/react-native-skia as an alternative.
+     * Returns a mock constructor whose instances provide the mock Canvas2D
+     * context. PixiJS accesses `CanvasRenderingContext2D.prototype` for
+     * feature detection, so returning `null` causes a crash.
      */
     getCanvasRenderingContext2D: () => any;
     /**

package/dist/index.js

@@ -86,6 +86,160 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/adapter/canvas2d.ts
+function parseFontSize(font) {
+  const match = font.match(/(\d+(?:\.\d+)?)\s*px/);
+  return match ? parseFloat(match[1]) : 10;
+}
+function createMockGradient() {
+  return { addColorStop: () => {
+  } };
+}
+function createMockCanvas2DContext(canvas) {
+  let _font = "10px sans-serif";
+  const ctx = {
+    // -- Back-reference to owning canvas --
+    canvas,
+    // -- Font / text properties (critical for CanvasTextMetrics) --
+    get font() {
+      return _font;
+    },
+    set font(value) {
+      _font = value;
+    },
+    fillStyle: "#000",
+    strokeStyle: "#000",
+    lineWidth: 1,
+    lineCap: "butt",
+    lineJoin: "miter",
+    miterLimit: 10,
+    textAlign: "start",
+    textBaseline: "alphabetic",
+    direction: "ltr",
+    globalAlpha: 1,
+    globalCompositeOperation: "source-over",
+    imageSmoothingEnabled: true,
+    shadowBlur: 0,
+    shadowColor: "rgba(0, 0, 0, 0)",
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    letterSpacing: "0px",
+    wordSpacing: "0px",
+    fontKerning: "auto",
+    textRendering: "auto",
+    // -- Text measurement (primary reason this mock exists) --
+    measureText(text) {
+      const fontSize = parseFontSize(_font);
+      const width = text.length * fontSize * 0.6;
+      const ascent = fontSize * 0.8;
+      const descent = fontSize * 0.2;
+      return {
+        width,
+        actualBoundingBoxAscent: ascent,
+        actualBoundingBoxDescent: descent,
+        fontBoundingBoxAscent: ascent,
+        fontBoundingBoxDescent: descent,
+        actualBoundingBoxLeft: 0,
+        actualBoundingBoxRight: width,
+        alphabeticBaseline: 0,
+        emHeightAscent: ascent,
+        emHeightDescent: descent,
+        hangingBaseline: ascent * 0.8,
+        ideographicBaseline: -descent
+      };
+    },
+    // -- Text drawing (no-op) --
+    fillText: () => {
+    },
+    strokeText: () => {
+    },
+    // -- State stack --
+    save: () => {
+    },
+    restore: () => {
+    },
+    // -- Rect operations (no-op) --
+    clearRect: () => {
+    },
+    fillRect: () => {
+    },
+    strokeRect: () => {
+    },
+    // -- Path operations (no-op) --
+    beginPath: () => {
+    },
+    closePath: () => {
+    },
+    moveTo: () => {
+    },
+    lineTo: () => {
+    },
+    bezierCurveTo: () => {
+    },
+    quadraticCurveTo: () => {
+    },
+    arc: () => {
+    },
+    arcTo: () => {
+    },
+    ellipse: () => {
+    },
+    rect: () => {
+    },
+    roundRect: () => {
+    },
+    fill: () => {
+    },
+    stroke: () => {
+    },
+    clip: () => {
+    },
+    isPointInPath: () => false,
+    isPointInStroke: () => false,
+    // -- Transform (no-op) --
+    scale: () => {
+    },
+    rotate: () => {
+    },
+    translate: () => {
+    },
+    transform: () => {
+    },
+    setTransform: () => {
+    },
+    getTransform: () => ({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }),
+    resetTransform: () => {
+    },
+    // -- Drawing images (no-op) --
+    drawImage: () => {
+    },
+    // -- Pixel manipulation --
+    createImageData: (w, h) => ({
+      width: w,
+      height: h,
+      data: new Uint8ClampedArray(w * h * 4)
+    }),
+    getImageData: (_x, _y, w, h) => ({
+      width: w,
+      height: h,
+      data: new Uint8ClampedArray(w * h * 4)
+    }),
+    putImageData: () => {
+    },
+    // -- Gradients / Patterns --
+    createLinearGradient: () => createMockGradient(),
+    createRadialGradient: () => createMockGradient(),
+    createConicGradient: () => createMockGradient(),
+    createPattern: () => null,
+    // -- Line dash --
+    setLineDash: () => {
+    },
+    getLineDash: () => [],
+    lineDashOffset: 0
+  };
+  return ctx;
+}
+
 // src/adapter/polyfills.ts
 if (typeof globalThis.requestAnimationFrame === "undefined") {
   globalThis.requestAnimationFrame = function requestAnimationFrame(callback) {
@@ -122,7 +276,7 @@ if (typeof globalThis.dispatchEvent === "undefined") {
         try {
           listener(event);
         } catch (e) {
-          console.error("Error in event listener:", e);
+          if (__DEV__) console.error("Error in event listener:", e);
         }
       });
     }
@@ -157,8 +311,10 @@ var createMockElement = (tagName) => {
   const element = {
     tagName: tagName.toUpperCase(),
     style: createMockStyle(),
-    getContext: () => null,
-    // Canvas 2D not supported - use WebGL via expo-gl
+    getContext: (type) => {
+      if (type === "2d") return createMockCanvas2DContext(element);
+      return null;
+    },
     width: 0,
     height: 0,
     addEventListener: () => {
@@ -316,7 +472,7 @@ function dispatchWindowEvent(event) {
         listener.handleEvent(event);
       }
     } catch (error) {
-      console.error("[Window] Error in event listener:", error);
+      if (__DEV__) console.error("[Window] Error in event listener:", error);
     }
   });
   return true;
@@ -387,7 +543,8 @@ if (typeof globalThis.HTMLCanvasElement === "undefined") {
       this.height = 0;
       this.style = createMockStyle();
     }
-    getContext() {
+    getContext(type) {
+      if (type === "2d") return createMockCanvas2DContext(this);
       return null;
     }
   };
@@ -506,7 +663,7 @@ if (!("ontouchmove" in globalThis)) {
 if (!("ontouchend" in globalThis)) {
   globalThis.ontouchend = null;
 }
-console.log("PixiJS Expo Adapter: Polyfills loaded");
+if (__DEV__) console.log("PixiJS Expo Adapter: Polyfills loaded");
 
 // src/adapter/ExpoCanvasElement.ts
 var MockCanvasStyle = class {
@@ -707,22 +864,21 @@ var ExpoCanvasElement = class {
       case "webgl":
       case "experimental-webgl":
         if (!this._gl) {
-          console.warn(
-            "ExpoCanvasElement: WebGL context not available. Make sure GLView.onContextCreate has been called first."
-          );
+          if (__DEV__)
+            console.warn(
+              "ExpoCanvasElement: WebGL context not available. Make sure GLView.onContextCreate has been called first."
+            );
           return null;
         }
         return this._gl;
       case "2d":
-        console.warn(
-          "ExpoCanvasElement: 2D context is not supported in expo-gl. Consider using @shopify/react-native-skia for 2D rendering."
-        );
-        return null;
+        return createMockCanvas2DContext(this);
       case "webgl2":
       case "experimental-webgl2":
-        console.warn(
-          "ExpoCanvasElement: WebGL2 is not fully supported in expo-gl. Falling back to WebGL1."
-        );
+        if (__DEV__)
+          console.warn(
+            "ExpoCanvasElement: WebGL2 is not fully supported in expo-gl. Falling back to WebGL1."
+          );
         return this._gl;
       default:
         return null;
@@ -745,14 +901,15 @@ var ExpoCanvasElement = class {
    */
   toDataURL(_type, _quality) {
     if (!this._gl) {
-      console.warn("ExpoCanvasElement: Cannot create data URL without GL context");
+      if (__DEV__) console.warn("ExpoCanvasElement: Cannot create data URL without GL context");
       return "";
     }
     const width = this._width;
     const height = this._height;
     const pixels = new Uint8Array(width * height * 4);
     this._gl.readPixels(0, 0, width, height, this._gl.RGBA, this._gl.UNSIGNED_BYTE, pixels);
-    console.warn("ExpoCanvasElement: toDataURL requires additional implementation for encoding");
+    if (__DEV__)
+      console.warn("ExpoCanvasElement: toDataURL requires additional implementation for encoding");
     return "";
   }
   /**
@@ -764,7 +921,7 @@ var ExpoCanvasElement = class {
    * @param _quality - Image quality (ignored)
    */
   toBlob(callback, _type, _quality) {
-    console.warn("ExpoCanvasElement: toBlob is not implemented");
+    if (__DEV__) console.warn("ExpoCanvasElement: toBlob is not implemented");
     callback(null);
   }
   // ===========================================================================
@@ -833,7 +990,7 @@ var ExpoCanvasElement = class {
           listener.handleEvent(event);
         }
       } catch (error) {
-        console.error("[ExpoCanvasElement] Error in event listener:", error);
+        if (__DEV__) console.error("[ExpoCanvasElement] Error in event listener:", error);
       }
     });
     return true;
@@ -940,15 +1097,16 @@ var ExpoAdapter = {
   /**
    * Get the Canvas 2D rendering context constructor.
    *
-   * @returns null - Canvas 2D is not supported in expo-gl
-   *
-   * @remarks
-   * expo-gl only provides WebGL contexts. For 2D canvas operations,
-   * consider using @shopify/react-native-skia as an alternative.
+   * Returns a mock constructor whose instances provide the mock Canvas2D
+   * context. PixiJS accesses `CanvasRenderingContext2D.prototype` for
+   * feature detection, so returning `null` causes a crash.
    */
   getCanvasRenderingContext2D: () => {
-    console.warn("ExpoAdapter: 2D context is not supported in expo-gl");
-    return null;
+    return class MockCanvasRenderingContext2D {
+      constructor() {
+        return createMockCanvas2DContext({ width: 0, height: 0 });
+      }
+    };
   },
   /**
    * Get the WebGL rendering context constructor.
@@ -1026,11 +1184,11 @@ var ExpoAdapter = {
       return fetch(requestUrl, options);
     }
     if (requestUrl.startsWith("file://")) {
-      console.warn("ExpoAdapter: Local file loading requires expo-file-system");
+      if (__DEV__) console.warn("ExpoAdapter: Local file loading requires expo-file-system");
       return fetch(requestUrl, options);
     }
     if (requestUrl.startsWith("asset://") || typeof url === "number") {
-      console.warn("ExpoAdapter: Asset loading requires expo-asset");
+      if (__DEV__) console.warn("ExpoAdapter: Asset loading requires expo-asset");
       throw new Error("Asset loading not implemented");
     }
     return fetch(requestUrl, options);
@@ -1212,7 +1370,7 @@ var loadExpoAsset = {
       });
       return new import_pixi.Texture({ source });
     } catch (error) {
-      console.error(`[loadExpoAsset] Failed to load: ${url}`, error);
+      if (__DEV__) console.error(`[loadExpoAsset] Failed to load: ${url}`, error);
       throw error;
     }
   },
@@ -1282,10 +1440,10 @@ var loadExpoFont = {
       await Font.loadAsync({
         [familyName]: fontSource
       });
-      console.log(`Font loaded: ${familyName}`);
+      if (__DEV__) console.log(`Font loaded: ${familyName}`);
       return familyName;
     } catch (error) {
-      console.error(`Failed to load font: ${url}`, error);
+      if (__DEV__) console.error(`Failed to load font: ${url}`, error);
       throw error;
     }
   },
@@ -1294,7 +1452,7 @@ var loadExpoFont = {
    * Note: expo-font doesn't have an unload API
    */
   unload(fontFamily) {
-    console.warn(`Font unloading is not supported in expo-font: ${fontFamily}`);
+    if (__DEV__) console.warn(`Font unloading is not supported in expo-font: ${fontFamily}`);
   }
 };
 
@@ -1637,7 +1795,7 @@ var PixiView = (0, import_react.forwardRef)((props, ref) => {
         });
         onApplicationCreate?.(app);
       } catch (error) {
-        console.error("PixiJS initialization error:", error);
+        if (__DEV__) console.error("PixiJS initialization error:", error);
         onError?.(error);
       }
     },
@@ -1653,7 +1811,7 @@ var PixiView = (0, import_react.forwardRef)((props, ref) => {
         try {
           appRef.current.destroy(true, { children: true });
         } catch (error) {
-          console.warn("Error destroying PixiJS application:", error);
+          if (__DEV__) console.warn("Error destroying PixiJS application:", error);
         }
         appRef.current = null;
       }
@@ -1707,7 +1865,9 @@ import_pixi4.Assets.load = function patchedLoad(urls, onProgress) {
   }
   if (Array.isArray(urls)) {
     const resolved = urls.map((u) => typeof u === "number" ? registerModuleId(u) : u);
-    return _originalLoad(resolved, onProgress);
+    return _originalLoad(resolved, onProgress).then((record) => {
+      return resolved.map((key) => record[key]);
+    });
   }
   return _originalLoad(urls, onProgress);
 };

package/dist/index.mjs

@@ -1,3 +1,157 @@
+// src/adapter/canvas2d.ts
+function parseFontSize(font) {
+  const match = font.match(/(\d+(?:\.\d+)?)\s*px/);
+  return match ? parseFloat(match[1]) : 10;
+}
+function createMockGradient() {
+  return { addColorStop: () => {
+  } };
+}
+function createMockCanvas2DContext(canvas) {
+  let _font = "10px sans-serif";
+  const ctx = {
+    // -- Back-reference to owning canvas --
+    canvas,
+    // -- Font / text properties (critical for CanvasTextMetrics) --
+    get font() {
+      return _font;
+    },
+    set font(value) {
+      _font = value;
+    },
+    fillStyle: "#000",
+    strokeStyle: "#000",
+    lineWidth: 1,
+    lineCap: "butt",
+    lineJoin: "miter",
+    miterLimit: 10,
+    textAlign: "start",
+    textBaseline: "alphabetic",
+    direction: "ltr",
+    globalAlpha: 1,
+    globalCompositeOperation: "source-over",
+    imageSmoothingEnabled: true,
+    shadowBlur: 0,
+    shadowColor: "rgba(0, 0, 0, 0)",
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    letterSpacing: "0px",
+    wordSpacing: "0px",
+    fontKerning: "auto",
+    textRendering: "auto",
+    // -- Text measurement (primary reason this mock exists) --
+    measureText(text) {
+      const fontSize = parseFontSize(_font);
+      const width = text.length * fontSize * 0.6;
+      const ascent = fontSize * 0.8;
+      const descent = fontSize * 0.2;
+      return {
+        width,
+        actualBoundingBoxAscent: ascent,
+        actualBoundingBoxDescent: descent,
+        fontBoundingBoxAscent: ascent,
+        fontBoundingBoxDescent: descent,
+        actualBoundingBoxLeft: 0,
+        actualBoundingBoxRight: width,
+        alphabeticBaseline: 0,
+        emHeightAscent: ascent,
+        emHeightDescent: descent,
+        hangingBaseline: ascent * 0.8,
+        ideographicBaseline: -descent
+      };
+    },
+    // -- Text drawing (no-op) --
+    fillText: () => {
+    },
+    strokeText: () => {
+    },
+    // -- State stack --
+    save: () => {
+    },
+    restore: () => {
+    },
+    // -- Rect operations (no-op) --
+    clearRect: () => {
+    },
+    fillRect: () => {
+    },
+    strokeRect: () => {
+    },
+    // -- Path operations (no-op) --
+    beginPath: () => {
+    },
+    closePath: () => {
+    },
+    moveTo: () => {
+    },
+    lineTo: () => {
+    },
+    bezierCurveTo: () => {
+    },
+    quadraticCurveTo: () => {
+    },
+    arc: () => {
+    },
+    arcTo: () => {
+    },
+    ellipse: () => {
+    },
+    rect: () => {
+    },
+    roundRect: () => {
+    },
+    fill: () => {
+    },
+    stroke: () => {
+    },
+    clip: () => {
+    },
+    isPointInPath: () => false,
+    isPointInStroke: () => false,
+    // -- Transform (no-op) --
+    scale: () => {
+    },
+    rotate: () => {
+    },
+    translate: () => {
+    },
+    transform: () => {
+    },
+    setTransform: () => {
+    },
+    getTransform: () => ({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }),
+    resetTransform: () => {
+    },
+    // -- Drawing images (no-op) --
+    drawImage: () => {
+    },
+    // -- Pixel manipulation --
+    createImageData: (w, h) => ({
+      width: w,
+      height: h,
+      data: new Uint8ClampedArray(w * h * 4)
+    }),
+    getImageData: (_x, _y, w, h) => ({
+      width: w,
+      height: h,
+      data: new Uint8ClampedArray(w * h * 4)
+    }),
+    putImageData: () => {
+    },
+    // -- Gradients / Patterns --
+    createLinearGradient: () => createMockGradient(),
+    createRadialGradient: () => createMockGradient(),
+    createConicGradient: () => createMockGradient(),
+    createPattern: () => null,
+    // -- Line dash --
+    setLineDash: () => {
+    },
+    getLineDash: () => [],
+    lineDashOffset: 0
+  };
+  return ctx;
+}
+
 // src/adapter/polyfills.ts
 if (typeof globalThis.requestAnimationFrame === "undefined") {
   globalThis.requestAnimationFrame = function requestAnimationFrame(callback) {
@@ -34,7 +188,7 @@ if (typeof globalThis.dispatchEvent === "undefined") {
         try {
           listener(event);
         } catch (e) {
-          console.error("Error in event listener:", e);
+          if (__DEV__) console.error("Error in event listener:", e);
         }
       });
     }
@@ -69,8 +223,10 @@ var createMockElement = (tagName) => {
   const element = {
     tagName: tagName.toUpperCase(),
     style: createMockStyle(),
-    getContext: () => null,
-    // Canvas 2D not supported - use WebGL via expo-gl
+    getContext: (type) => {
+      if (type === "2d") return createMockCanvas2DContext(element);
+      return null;
+    },
     width: 0,
     height: 0,
     addEventListener: () => {
@@ -228,7 +384,7 @@ function dispatchWindowEvent(event) {
         listener.handleEvent(event);
       }
     } catch (error) {
-      console.error("[Window] Error in event listener:", error);
+      if (__DEV__) console.error("[Window] Error in event listener:", error);
     }
   });
   return true;
@@ -299,7 +455,8 @@ if (typeof globalThis.HTMLCanvasElement === "undefined") {
       this.height = 0;
       this.style = createMockStyle();
     }
-    getContext() {
+    getContext(type) {
+      if (type === "2d") return createMockCanvas2DContext(this);
       return null;
     }
   };
@@ -418,7 +575,7 @@ if (!("ontouchmove" in globalThis)) {
 if (!("ontouchend" in globalThis)) {
   globalThis.ontouchend = null;
 }
-console.log("PixiJS Expo Adapter: Polyfills loaded");
+if (__DEV__) console.log("PixiJS Expo Adapter: Polyfills loaded");
 
 // src/adapter/ExpoCanvasElement.ts
 var MockCanvasStyle = class {
@@ -619,22 +776,21 @@ var ExpoCanvasElement = class {
       case "webgl":
       case "experimental-webgl":
         if (!this._gl) {
-          console.warn(
-            "ExpoCanvasElement: WebGL context not available. Make sure GLView.onContextCreate has been called first."
-          );
+          if (__DEV__)
+            console.warn(
+              "ExpoCanvasElement: WebGL context not available. Make sure GLView.onContextCreate has been called first."
+            );
           return null;
         }
         return this._gl;
       case "2d":
-        console.warn(
-          "ExpoCanvasElement: 2D context is not supported in expo-gl. Consider using @shopify/react-native-skia for 2D rendering."
-        );
-        return null;
+        return createMockCanvas2DContext(this);
       case "webgl2":
       case "experimental-webgl2":
-        console.warn(
-          "ExpoCanvasElement: WebGL2 is not fully supported in expo-gl. Falling back to WebGL1."
-        );
+        if (__DEV__)
+          console.warn(
+            "ExpoCanvasElement: WebGL2 is not fully supported in expo-gl. Falling back to WebGL1."
+          );
         return this._gl;
       default:
         return null;
@@ -657,14 +813,15 @@ var ExpoCanvasElement = class {
    */
   toDataURL(_type, _quality) {
     if (!this._gl) {
-      console.warn("ExpoCanvasElement: Cannot create data URL without GL context");
+      if (__DEV__) console.warn("ExpoCanvasElement: Cannot create data URL without GL context");
       return "";
     }
     const width = this._width;
     const height = this._height;
     const pixels = new Uint8Array(width * height * 4);
     this._gl.readPixels(0, 0, width, height, this._gl.RGBA, this._gl.UNSIGNED_BYTE, pixels);
-    console.warn("ExpoCanvasElement: toDataURL requires additional implementation for encoding");
+    if (__DEV__)
+      console.warn("ExpoCanvasElement: toDataURL requires additional implementation for encoding");
     return "";
   }
   /**
@@ -676,7 +833,7 @@ var ExpoCanvasElement = class {
    * @param _quality - Image quality (ignored)
    */
   toBlob(callback, _type, _quality) {
-    console.warn("ExpoCanvasElement: toBlob is not implemented");
+    if (__DEV__) console.warn("ExpoCanvasElement: toBlob is not implemented");
     callback(null);
   }
   // ===========================================================================
@@ -745,7 +902,7 @@ var ExpoCanvasElement = class {
           listener.handleEvent(event);
         }
       } catch (error) {
-        console.error("[ExpoCanvasElement] Error in event listener:", error);
+        if (__DEV__) console.error("[ExpoCanvasElement] Error in event listener:", error);
       }
     });
     return true;
@@ -852,15 +1009,16 @@ var ExpoAdapter = {
   /**
    * Get the Canvas 2D rendering context constructor.
    *
-   * @returns null - Canvas 2D is not supported in expo-gl
-   *
-   * @remarks
-   * expo-gl only provides WebGL contexts. For 2D canvas operations,
-   * consider using @shopify/react-native-skia as an alternative.
+   * Returns a mock constructor whose instances provide the mock Canvas2D
+   * context. PixiJS accesses `CanvasRenderingContext2D.prototype` for
+   * feature detection, so returning `null` causes a crash.
    */
   getCanvasRenderingContext2D: () => {
-    console.warn("ExpoAdapter: 2D context is not supported in expo-gl");
-    return null;
+    return class MockCanvasRenderingContext2D {
+      constructor() {
+        return createMockCanvas2DContext({ width: 0, height: 0 });
+      }
+    };
   },
   /**
    * Get the WebGL rendering context constructor.
@@ -938,11 +1096,11 @@ var ExpoAdapter = {
       return fetch(requestUrl, options);
     }
     if (requestUrl.startsWith("file://")) {
-      console.warn("ExpoAdapter: Local file loading requires expo-file-system");
+      if (__DEV__) console.warn("ExpoAdapter: Local file loading requires expo-file-system");
       return fetch(requestUrl, options);
     }
     if (requestUrl.startsWith("asset://") || typeof url === "number") {
-      console.warn("ExpoAdapter: Asset loading requires expo-asset");
+      if (__DEV__) console.warn("ExpoAdapter: Asset loading requires expo-asset");
       throw new Error("Asset loading not implemented");
     }
     return fetch(requestUrl, options);
@@ -1124,7 +1282,7 @@ var loadExpoAsset = {
       });
       return new Texture({ source });
     } catch (error) {
-      console.error(`[loadExpoAsset] Failed to load: ${url}`, error);
+      if (__DEV__) console.error(`[loadExpoAsset] Failed to load: ${url}`, error);
       throw error;
     }
   },
@@ -1194,10 +1352,10 @@ var loadExpoFont = {
       await Font.loadAsync({
         [familyName]: fontSource
       });
-      console.log(`Font loaded: ${familyName}`);
+      if (__DEV__) console.log(`Font loaded: ${familyName}`);
       return familyName;
     } catch (error) {
-      console.error(`Failed to load font: ${url}`, error);
+      if (__DEV__) console.error(`Failed to load font: ${url}`, error);
       throw error;
     }
   },
@@ -1206,7 +1364,7 @@ var loadExpoFont = {
    * Note: expo-font doesn't have an unload API
    */
   unload(fontFamily) {
-    console.warn(`Font unloading is not supported in expo-font: ${fontFamily}`);
+    if (__DEV__) console.warn(`Font unloading is not supported in expo-font: ${fontFamily}`);
   }
 };
 
@@ -1553,7 +1711,7 @@ var PixiView = forwardRef((props, ref) => {
         });
         onApplicationCreate?.(app);
       } catch (error) {
-        console.error("PixiJS initialization error:", error);
+        if (__DEV__) console.error("PixiJS initialization error:", error);
         onError?.(error);
       }
     },
@@ -1569,7 +1727,7 @@ var PixiView = forwardRef((props, ref) => {
         try {
           appRef.current.destroy(true, { children: true });
         } catch (error) {
-          console.warn("Error destroying PixiJS application:", error);
+          if (__DEV__) console.warn("Error destroying PixiJS application:", error);
         }
         appRef.current = null;
       }
@@ -1661,7 +1819,9 @@ Assets.load = function patchedLoad(urls, onProgress) {
   }
   if (Array.isArray(urls)) {
     const resolved = urls.map((u) => typeof u === "number" ? registerModuleId(u) : u);
-    return _originalLoad(resolved, onProgress);
+    return _originalLoad(resolved, onProgress).then((record) => {
+      return resolved.map((key) => record[key]);
+    });
   }
   return _originalLoad(urls, onProgress);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penabt/pixi-expo",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "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",

package/src/adapter/ExpoAdapter.ts

@@ -33,6 +33,7 @@
 
 import type { ExpoWebGLRenderingContext } from 'expo-gl';
 import { ExpoCanvasElement } from './ExpoCanvasElement';
+import { createMockCanvas2DContext } from './canvas2d';
 import { DOMParser } from '@xmldom/xmldom';
 
 // =============================================================================
@@ -206,15 +207,16 @@ export const ExpoAdapter = {
   /**
    * Get the Canvas 2D rendering context constructor.
    *
-   * @returns null - Canvas 2D is not supported in expo-gl
-   *
-   * @remarks
-   * expo-gl only provides WebGL contexts. For 2D canvas operations,
-   * consider using @shopify/react-native-skia as an alternative.
+   * Returns a mock constructor whose instances provide the mock Canvas2D
+   * context. PixiJS accesses `CanvasRenderingContext2D.prototype` for
+   * feature detection, so returning `null` causes a crash.
    */
   getCanvasRenderingContext2D: (): any => {
-    console.warn('ExpoAdapter: 2D context is not supported in expo-gl');
-    return null;
+    return class MockCanvasRenderingContext2D {
+      constructor() {
+        return createMockCanvas2DContext({ width: 0, height: 0 });
+      }
+    };
   },
 
   /**
@@ -303,13 +305,13 @@ export const ExpoAdapter = {
 
     // Local file URL
     if (requestUrl.startsWith('file://')) {
-      console.warn('ExpoAdapter: Local file loading requires expo-file-system');
+      if (__DEV__) console.warn('ExpoAdapter: Local file loading requires expo-file-system');
       return fetch(requestUrl, options);
     }
 
     // Asset URL or require() number
     if (requestUrl.startsWith('asset://') || typeof url === 'number') {
-      console.warn('ExpoAdapter: Asset loading requires expo-asset');
+      if (__DEV__) console.warn('ExpoAdapter: Asset loading requires expo-asset');
       throw new Error('Asset loading not implemented');
     }
 

package/src/adapter/ExpoCanvasElement.ts

@@ -33,8 +33,7 @@
  */
 
 import type { ExpoWebGLRenderingContext } from 'expo-gl';
-
-// ...
+import { createMockCanvas2DContext } from './canvas2d';
 
 // =============================================================================
 // TYPE DEFINITIONS
@@ -332,27 +331,25 @@ export class ExpoCanvasElement {
       case 'webgl':
       case 'experimental-webgl':
         if (!this._gl) {
-          console.warn(
-            'ExpoCanvasElement: WebGL context not available. ' +
-              'Make sure GLView.onContextCreate has been called first.',
-          );
+          if (__DEV__)
+            console.warn(
+              'ExpoCanvasElement: WebGL context not available. ' +
+                'Make sure GLView.onContextCreate has been called first.',
+            );
           return null;
         }
         return this._gl as unknown as WebGLRenderingContext;
 
       case '2d':
-        console.warn(
-          'ExpoCanvasElement: 2D context is not supported in expo-gl. ' +
-            'Consider using @shopify/react-native-skia for 2D rendering.',
-        );
-        return null;
+        return createMockCanvas2DContext(this) as any;
 
       case 'webgl2':
       case 'experimental-webgl2':
-        console.warn(
-          'ExpoCanvasElement: WebGL2 is not fully supported in expo-gl. ' +
-            'Falling back to WebGL1.',
-        );
+        if (__DEV__)
+          console.warn(
+            'ExpoCanvasElement: WebGL2 is not fully supported in expo-gl. ' +
+              'Falling back to WebGL1.',
+          );
         return this._gl as unknown as WebGLRenderingContext;
 
       default:
@@ -378,7 +375,7 @@ export class ExpoCanvasElement {
    */
   toDataURL(_type?: string, _quality?: number): string {
     if (!this._gl) {
-      console.warn('ExpoCanvasElement: Cannot create data URL without GL context');
+      if (__DEV__) console.warn('ExpoCanvasElement: Cannot create data URL without GL context');
       return '';
     }
 
@@ -390,7 +387,8 @@ export class ExpoCanvasElement {
     this._gl.readPixels(0, 0, width, height, this._gl.RGBA, this._gl.UNSIGNED_BYTE, pixels);
 
     // Note: Full implementation would require encoding to PNG/JPEG
-    console.warn('ExpoCanvasElement: toDataURL requires additional implementation for encoding');
+    if (__DEV__)
+      console.warn('ExpoCanvasElement: toDataURL requires additional implementation for encoding');
 
     return '';
   }
@@ -404,7 +402,7 @@ export class ExpoCanvasElement {
    * @param _quality - Image quality (ignored)
    */
   toBlob(callback: (blob: Blob | null) => void, _type?: string, _quality?: number): void {
-    console.warn('ExpoCanvasElement: toBlob is not implemented');
+    if (__DEV__) console.warn('ExpoCanvasElement: toBlob is not implemented');
     callback(null);
   }
 
@@ -494,7 +492,7 @@ export class ExpoCanvasElement {
           listener.handleEvent(event);
         }
       } catch (error) {
-        console.error('[ExpoCanvasElement] Error in event listener:', error);
+        if (__DEV__) console.error('[ExpoCanvasElement] Error in event listener:', error);
       }
     });
 

package/src/adapter/canvas2d.ts

@@ -0,0 +1,159 @@
+/**
+ * @fileoverview Mock Canvas 2D rendering context for React Native.
+ *
+ * Provides a minimal CanvasRenderingContext2D implementation that satisfies
+ * PixiJS's text measurement pipeline (CanvasTextMetrics, BitmapFont.from,
+ * @pixi/ui text components). expo-gl only supports WebGL, so actual pixel
+ * drawing is not possible — but PixiJS needs the context to exist so it can
+ * set `context.font` and call `measureText()`.
+ *
+ * @module @penabt/pixi-expo/canvas2d
+ * @internal
+ */
+
+/** Parse font size from a CSS font string (e.g. "bold 24px Arial" → 24). */
+function parseFontSize(font: string): number {
+  const match = font.match(/(\d+(?:\.\d+)?)\s*px/);
+  return match ? parseFloat(match[1]) : 10;
+}
+
+/** No-op gradient with addColorStop. */
+function createMockGradient() {
+  return { addColorStop: () => {} };
+}
+
+/**
+ * Create a mock CanvasRenderingContext2D.
+ *
+ * The `measureText` implementation approximates character widths using
+ * `fontSize * 0.6` per character, which is close enough for layout purposes.
+ *
+ * @param canvas - The owning canvas element (or any object with width/height).
+ */
+export function createMockCanvas2DContext(canvas: any) {
+  let _font = '10px sans-serif';
+
+  const ctx: any = {
+    // -- Back-reference to owning canvas --
+    canvas,
+
+    // -- Font / text properties (critical for CanvasTextMetrics) --
+    get font() {
+      return _font;
+    },
+    set font(value: string) {
+      _font = value;
+    },
+    fillStyle: '#000',
+    strokeStyle: '#000',
+    lineWidth: 1,
+    lineCap: 'butt',
+    lineJoin: 'miter',
+    miterLimit: 10,
+    textAlign: 'start' as CanvasTextAlign,
+    textBaseline: 'alphabetic' as CanvasTextBaseline,
+    direction: 'ltr',
+    globalAlpha: 1,
+    globalCompositeOperation: 'source-over',
+    imageSmoothingEnabled: true,
+    shadowBlur: 0,
+    shadowColor: 'rgba(0, 0, 0, 0)',
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    letterSpacing: '0px',
+    wordSpacing: '0px',
+    fontKerning: 'auto',
+    textRendering: 'auto',
+
+    // -- Text measurement (primary reason this mock exists) --
+    measureText(text: string) {
+      const fontSize = parseFontSize(_font);
+      const width = text.length * fontSize * 0.6;
+      const ascent = fontSize * 0.8;
+      const descent = fontSize * 0.2;
+      return {
+        width,
+        actualBoundingBoxAscent: ascent,
+        actualBoundingBoxDescent: descent,
+        fontBoundingBoxAscent: ascent,
+        fontBoundingBoxDescent: descent,
+        actualBoundingBoxLeft: 0,
+        actualBoundingBoxRight: width,
+        alphabeticBaseline: 0,
+        emHeightAscent: ascent,
+        emHeightDescent: descent,
+        hangingBaseline: ascent * 0.8,
+        ideographicBaseline: -descent,
+      };
+    },
+
+    // -- Text drawing (no-op) --
+    fillText: () => {},
+    strokeText: () => {},
+
+    // -- State stack --
+    save: () => {},
+    restore: () => {},
+
+    // -- Rect operations (no-op) --
+    clearRect: () => {},
+    fillRect: () => {},
+    strokeRect: () => {},
+
+    // -- Path operations (no-op) --
+    beginPath: () => {},
+    closePath: () => {},
+    moveTo: () => {},
+    lineTo: () => {},
+    bezierCurveTo: () => {},
+    quadraticCurveTo: () => {},
+    arc: () => {},
+    arcTo: () => {},
+    ellipse: () => {},
+    rect: () => {},
+    roundRect: () => {},
+    fill: () => {},
+    stroke: () => {},
+    clip: () => {},
+    isPointInPath: () => false,
+    isPointInStroke: () => false,
+
+    // -- Transform (no-op) --
+    scale: () => {},
+    rotate: () => {},
+    translate: () => {},
+    transform: () => {},
+    setTransform: () => {},
+    getTransform: () => ({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }),
+    resetTransform: () => {},
+
+    // -- Drawing images (no-op) --
+    drawImage: () => {},
+
+    // -- Pixel manipulation --
+    createImageData: (w: number, h: number) => ({
+      width: w,
+      height: h,
+      data: new Uint8ClampedArray(w * h * 4),
+    }),
+    getImageData: (_x: number, _y: number, w: number, h: number) => ({
+      width: w,
+      height: h,
+      data: new Uint8ClampedArray(w * h * 4),
+    }),
+    putImageData: () => {},
+
+    // -- Gradients / Patterns --
+    createLinearGradient: () => createMockGradient(),
+    createRadialGradient: () => createMockGradient(),
+    createConicGradient: () => createMockGradient(),
+    createPattern: () => null,
+
+    // -- Line dash --
+    setLineDash: () => {},
+    getLineDash: () => [],
+    lineDashOffset: 0,
+  };
+
+  return ctx;
+}

package/src/adapter/loadExpoAsset.ts

@@ -260,7 +260,7 @@ export const loadExpoAsset = {
 
       return new Texture({ source });
     } catch (error) {
-      console.error(`[loadExpoAsset] Failed to load: ${url}`, error);
+      if (__DEV__) console.error(`[loadExpoAsset] Failed to load: ${url}`, error);
       throw error;
     }
   },

package/src/adapter/loadExpoFont.ts

@@ -118,12 +118,12 @@ export const loadExpoFont = {
         [familyName]: fontSource,
       });
 
-      console.log(`Font loaded: ${familyName}`);
+      if (__DEV__) console.log(`Font loaded: ${familyName}`);
 
       // Return the font family name
       return familyName;
     } catch (error) {
-      console.error(`Failed to load font: ${url}`, error);
+      if (__DEV__) console.error(`Failed to load font: ${url}`, error);
       throw error;
     }
   },
@@ -133,7 +133,7 @@ export const loadExpoFont = {
    * Note: expo-font doesn't have an unload API
    */
   unload(fontFamily: string): void {
-    console.warn(`Font unloading is not supported in expo-font: ${fontFamily}`);
+    if (__DEV__) console.warn(`Font unloading is not supported in expo-font: ${fontFamily}`);
   },
 } as LoaderParser<string>;
 

package/src/adapter/polyfills.ts

@@ -18,7 +18,8 @@
  * @remarks
  * These polyfills are intentionally minimal. They provide just enough
  * functionality for PixiJS to initialize and run, but not full browser
- * compatibility. Features like Canvas 2D context are not supported.
+ * compatibility. A mock Canvas 2D context is provided for text measurement
+ * (CanvasTextMetrics, BitmapFont, @pixi/ui) but does not perform actual drawing.
  */
 
 // =============================================================================
@@ -74,7 +75,7 @@ if (typeof (globalThis as any).dispatchEvent === 'undefined') {
         try {
           listener(event);
         } catch (e) {
-          console.error('Error in event listener:', e);
+          if (__DEV__) console.error('Error in event listener:', e);
         }
       });
     }
@@ -115,6 +116,12 @@ const createMockStyle = () => ({
   getPropertyValue: () => '',
 });
 
+// =============================================================================
+// MOCK CANVAS 2D CONTEXT (imported from shared module)
+// =============================================================================
+
+import { createMockCanvas2DContext } from './canvas2d';
+
 // =============================================================================
 // MOCK ELEMENT FACTORY
 // Creates HTMLElement-like objects for document.createElement compatibility.
@@ -131,7 +138,10 @@ const createMockElement = (tagName: string) => {
   const element: any = {
     tagName: tagName.toUpperCase(),
     style: createMockStyle(),
-    getContext: () => null, // Canvas 2D not supported - use WebGL via expo-gl
+    getContext: (type: string) => {
+      if (type === '2d') return createMockCanvas2DContext(element);
+      return null; // WebGL contexts are provided by expo-gl via ExpoCanvasElement
+    },
     width: 0,
     height: 0,
     addEventListener: () => {},
@@ -306,7 +316,7 @@ export function dispatchWindowEvent(event: { type: string; [key: string]: any })
         listener.handleEvent(event);
       }
     } catch (error) {
-      console.error('[Window] Error in event listener:', error);
+      if (__DEV__) console.error('[Window] Error in event listener:', error);
     }
   });
 
@@ -399,8 +409,9 @@ if (typeof (globalThis as any).HTMLCanvasElement === 'undefined') {
     width = 0;
     height = 0;
     style = createMockStyle();
-    getContext() {
-      return null;
+    getContext(type: string) {
+      if (type === '2d') return createMockCanvas2DContext(this);
+      return null; // WebGL contexts are provided by expo-gl via ExpoCanvasElement
     }
   };
 }
@@ -572,4 +583,4 @@ if (!('ontouchend' in globalThis)) {
 // Confirm polyfills are loaded (useful for debugging).
 // =============================================================================
 
-console.log('PixiJS Expo Adapter: Polyfills loaded');
+if (__DEV__) console.log('PixiJS Expo Adapter: Polyfills loaded');

package/src/components/PixiView.tsx

@@ -490,7 +490,7 @@ export const PixiView = forwardRef<PixiViewHandle, PixiViewProps>((props, ref) =
         // Notify application creation
         onApplicationCreate?.(app);
       } catch (error) {
-        console.error('PixiJS initialization error:', error);
+        if (__DEV__) console.error('PixiJS initialization error:', error);
         onError?.(error as Error);
       }
     },
@@ -515,7 +515,7 @@ export const PixiView = forwardRef<PixiViewHandle, PixiViewProps>((props, ref) =
         try {
           appRef.current.destroy(true, { children: true });
         } catch (error) {
-          console.warn('Error destroying PixiJS application:', error);
+          if (__DEV__) console.warn('Error destroying PixiJS application:', error);
         }
         appRef.current = null;
       }

package/src/index.ts

@@ -108,7 +108,11 @@ const _originalLoad = Assets.load.bind(Assets);
   }
   if (Array.isArray(urls)) {
     const resolved = urls.map((u: any) => (typeof u === 'number' ? registerModuleId(u) : u));
-    return _originalLoad(resolved, onProgress);
+    // 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);
 };