- Properly detect ArrayBuffer vs TypedArray

 - Add unit tests for ArrayBuffer and TypedArray

Author: bhamiltoncx

packages/webgpu/cpp/rnwgpu/api/RNWebGPU.h

@@ -5,7 +5,6 @@
 
 #include "NativeObject.h"
 
-#include "ArrayBuffer.h"
 #include "Canvas.h"
 #include "GPU.h"
 #include "GPUCanvasContext.h"
@@ -88,17 +87,39 @@ class RNWebGPU : public NativeObject<RNWebGPU> {
     auto platformContext = _platformContext;
     auto callInvoker = _callInvoker;
 
-    // Check if the argument is an ArrayBuffer or TypedArray
+    // Check if the argument is an ArrayBuffer or ArrayBufferView
+    // (TypedArray / DataView)
     if (args[0].isObject()) {
       auto obj = args[0].getObject(runtime);
-      if (obj.isArrayBuffer(runtime) || obj.hasProperty(runtime, "buffer")) {
-        auto arrayBuffer =
-            JSIConverter<std::shared_ptr<ArrayBuffer>>::fromJSI(
-                runtime, args[0], false);
+
+      const uint8_t *dataPtr = nullptr;
+      size_t dataSize = 0;
+
+      if (obj.isArrayBuffer(runtime)) {
+        // Plain ArrayBuffer — use the full buffer
+        auto &ab = obj.getArrayBuffer(runtime);
+        dataPtr = ab.data(runtime);
+        dataSize = ab.size(runtime);
+      } else if (obj.hasProperty(runtime, "buffer")) {
+        // TypedArray or DataView — respect byteOffset/byteLength
+        auto bufferVal = obj.getProperty(runtime, "buffer");
+        if (bufferVal.isObject() &&
+            bufferVal.getObject(runtime).isArrayBuffer(runtime)) {
+          auto &ab =
+              bufferVal.getObject(runtime).getArrayBuffer(runtime);
+          auto byteOffset = static_cast<size_t>(
+              obj.getProperty(runtime, "byteOffset").asNumber());
+          auto byteLength = static_cast<size_t>(
+              obj.getProperty(runtime, "byteLength").asNumber());
+          dataPtr = ab.data(runtime) + byteOffset;
+          dataSize = byteLength;
+        }
+      }
+
+      if (dataPtr != nullptr) {
         // Copy bytes on the JS thread — the ArrayBuffer pointer is into
         // JS-owned memory that can be GC'd
-        std::vector<uint8_t> dataCopy(arrayBuffer->data(),
-                                      arrayBuffer->data() + arrayBuffer->size());
+        std::vector<uint8_t> dataCopy(dataPtr, dataPtr + dataSize);
 
         return Promise::createPromise(
             runtime,

packages/webgpu/src/__tests__/ImageData.spec.ts

@@ -1,3 +1,4 @@
+import fs from "fs";
 import path from "path";
 
 import { checkImage, client, encodeImage, decodeImage } from "./setup";
@@ -23,4 +24,76 @@ describe("Image Bitmap", () => {
     const image = encodeImage(result);
     checkImage(image, "snapshots/ref.png");
   });
+  // The following tests exercise the React Native ArrayBuffer/TypedArray
+  // overload of createImageBitmap, which is not part of the standard web API.
+  it("createImageBitmap from ArrayBuffer", async () => {
+    if (client.OS === "web") {
+      return;
+    }
+    const pngBytes = Array.from(
+      fs.readFileSync(path.join(__dirname, "./assets/Di-3d.png")),
+    );
+    const expected = decodeImage(path.join(__dirname, "./assets/Di-3d.png"));
+    const result = await client.eval(
+      async ({ pngData }) => {
+        const bytes = new Uint8Array(pngData);
+        const bmp = await createImageBitmap(bytes.buffer);
+        return { width: bmp.width, height: bmp.height };
+      },
+      { pngData: pngBytes },
+    );
+    expect(result.width).toBe(expected.width);
+    expect(result.height).toBe(expected.height);
+  });
+  it("createImageBitmap from Uint8Array", async () => {
+    if (client.OS === "web") {
+      return;
+    }
+    const pngBytes = Array.from(
+      fs.readFileSync(path.join(__dirname, "./assets/Di-3d.png")),
+    );
+    const expected = decodeImage(path.join(__dirname, "./assets/Di-3d.png"));
+    const result = await client.eval(
+      async ({ pngData }) => {
+        const bytes = new Uint8Array(pngData);
+        const bmp = await createImageBitmap(bytes);
+        return { width: bmp.width, height: bmp.height };
+      },
+      { pngData: pngBytes },
+    );
+    expect(result.width).toBe(expected.width);
+    expect(result.height).toBe(expected.height);
+  });
+  it("createImageBitmap from Uint8Array subarray (byteOffset/byteLength)", async () => {
+    if (client.OS === "web") {
+      return;
+    }
+    const pngBytes = Array.from(
+      fs.readFileSync(path.join(__dirname, "./assets/Di-3d.png")),
+    );
+    const expected = decodeImage(path.join(__dirname, "./assets/Di-3d.png"));
+    const result = await client.eval(
+      async ({ pngData }) => {
+        // Embed PNG bytes at an offset within a larger buffer
+        const padding = 128;
+        const totalLength = padding + pngData.length + padding;
+        const largeBuffer = new ArrayBuffer(totalLength);
+        const fullView = new Uint8Array(largeBuffer);
+        // Fill with garbage bytes
+        fullView.fill(0xff);
+        // Copy PNG bytes into the middle
+        const pngView = new Uint8Array(largeBuffer, padding, pngData.length);
+        for (let i = 0; i < pngData.length; i++) {
+          pngView[i] = pngData[i];
+        }
+        // createImageBitmap must respect byteOffset/byteLength of the view,
+        // not use the full underlying ArrayBuffer (which has garbage padding)
+        const bmp = await createImageBitmap(pngView);
+        return { width: bmp.width, height: bmp.height };
+      },
+      { pngData: pngBytes },
+    );
+    expect(result.width).toBe(expected.width);
+    expect(result.height).toBe(expected.height);
+  });
 });