react-native-webgpu 0.16.0 → 0.17.0

package/android/build.gradle

@@ -75,6 +75,16 @@ def getExtOrIntegerDefault(name) {
   return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["Wgpu_" + name]).toInteger()
 }
 
+// androidMinSdkVersion in package.json is the lowest API level the native code
+// builds for: it calls the AHardwareBuffer API, from Android 8 (API 26). An
+// app's lower minSdkVersion does not lower it, so such an app gets the
+// manifest merger's error, with its suggested fix, instead of the compiler's.
+def resolveMinSdkVersion() {
+  def floor = new groovy.json.JsonSlurper().parse(file("../package.json")).androidMinSdkVersion as Integer
+  def app = rootProject.ext.has("minSdkVersion") ? rootProject.ext.get("minSdkVersion").toString().toInteger() : floor
+  return Math.max(app, floor)
+}
+
 def supportsNamespace() {
   def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
   def major = parsed[0].toInteger()
@@ -88,7 +98,7 @@ android {
   compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
 
   defaultConfig {
-    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    minSdkVersion resolveMinSdkVersion()
     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
     buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", "true"
     externalNativeBuild {

package/android/src/main/java/com/webgpu/BackingViewKind.java

@@ -0,0 +1,38 @@
+package com.webgpu;
+
+import androidx.annotation.Nullable;
+
+/**
+ * The Android view a WebGPUView draws into, see WebGPUView.updateView(), and
+ * the rules the props resolve by. The JS side (Canvas.tsx) mirrors them to
+ * warn in development.
+ */
+enum BackingViewKind {
+  SURFACE_VIEW,
+  TEXTURE_VIEW,
+  HARDWARE_BUFFER_VIEW;
+
+  /**
+   * The kind the androidBackingView prop names; a TextureView by default. A
+   * HardwareBufferView (a plain View drawing AHardwareBuffers inline) needs
+   * Android 10: below it, the request falls back to a TextureView, which
+   * composites the same way, and the JS side warns about it in development.
+   */
+  static BackingViewKind fromBackingView(@Nullable String backingView, boolean hardwareBufferSupported) {
+    if ("SurfaceView".equals(backingView)) {
+      return SURFACE_VIEW;
+    }
+    if ("HardwareBufferView".equals(backingView) && hardwareBufferSupported) {
+      return HARDWARE_BUFFER_VIEW;
+    }
+    return TEXTURE_VIEW;
+  }
+
+  /**
+   * Whether the canvas composites as opaque: what the prop asks for, except
+   * that a HardwareBufferView always composites with alpha.
+   */
+  static boolean resolveOpaque(BackingViewKind kind, boolean opaque) {
+    return opaque && kind != HARDWARE_BUFFER_VIEW;
+  }
+}

package/android/src/main/java/com/webgpu/WebGPUSurfaceView.java

@@ -13,10 +13,12 @@ public class WebGPUSurfaceView extends SurfaceView implements SurfaceHolder.Call
 
   WebGPUAPI mApi;
 
-  public WebGPUSurfaceView(Context context, WebGPUAPI api, boolean zOrderOnTop, boolean opaque) {
+  public WebGPUSurfaceView(Context context, WebGPUAPI api, boolean zOrderOnTop,
+      boolean zOrderMediaOverlay, boolean opaque) {
     super(context);
     mApi = api;
-    setZOrderOnTop(zOrderOnTop);
+    // Both are read when the surface is created.
+    setZOrder(zOrderOnTop, zOrderMediaOverlay);
     setOpaque(opaque);
     getHolder().addCallback(this);
   }
@@ -27,6 +29,21 @@ public class WebGPUSurfaceView extends SurfaceView implements SurfaceHolder.Call
     getHolder().setFormat(opaque ? PixelFormat.OPAQUE : PixelFormat.TRANSLUCENT);
   }
 
+  // The sublayer the surface is composited at, relative to the window: above
+  // it (on top), or below it, above the other SurfaceViews there (media
+  // overlay) or among them (the default). setZOrderOnTop(false) resets the
+  // request to the default, so it goes first. Before Android 11 the request
+  // is read when the surface is created; from Android 11 on, SurfaceView
+  // applies a changed request with the window's next frame (its pre-draw
+  // listener runs updateSurface()), which invalidate() schedules.
+  public void setZOrder(boolean onTop, boolean mediaOverlay) {
+    setZOrderOnTop(onTop);
+    if (!onTop) {
+      setZOrderMediaOverlay(mediaOverlay);
+    }
+    invalidate();
+  }
+
   @Override
   protected void onDetachedFromWindow() {
     super.onDetachedFromWindow();

package/android/src/main/java/com/webgpu/WebGPUView.java

@@ -2,28 +2,40 @@ package com.webgpu;
 
 import android.content.Context;
 import android.os.Build;
+import android.util.Log;
 import android.view.Surface;
 import android.view.View;
 
+import androidx.annotation.Nullable;
+
 import com.facebook.proguard.annotations.DoNotStrip;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.views.view.ReactViewGroup;
 
+/**
+ * The Android view behind <Canvas>. It is backed by a TextureView, a
+ * SurfaceView or a HardwareBufferView, named by the androidBackingView prop
+ * and created once, from the props of the first transaction, for the life of
+ * the view (see updateView()).
+ */
 public class WebGPUView extends ReactViewGroup implements WebGPUAPI {
-
-  // Backing view kinds, see updateView().
-  private static final int KIND_SURFACE_VIEW = 0;
-  private static final int KIND_TEXTURE_VIEW = 1;
-  private static final int KIND_HARDWARE_BUFFER_VIEW = 2;
+  private static final String TAG = "WebGPUView";
 
   private int mContextId;
-  private boolean mOpaque = true;
-  private String mSurfaceType = "auto";
+  // Props. opaque is applied in place, and so are the z-order props where
+  // Android allows it (see takesZOrder); backingView is read once, when the
+  // backing view is created (see updateView()).
+  private BackingViewKind mBackingView = BackingViewKind.TEXTURE_VIEW;
+  private boolean mOpaque = false;
   private boolean mZOrderOnTop = false;
-  private int mAppliedKind = -1;
-  private boolean mAppliedZOrderOnTop;
+  private boolean mZOrderMediaOverlay = false;
   private WebGPUModule mModule;
+  // The backing view, created by the first prop transaction and kept, with
+  // the kind it was created with. The kind is null until then: it is what
+  // tells a mounted canvas apart.
   private View mView = null;
+  @Nullable
+  private BackingViewKind mKind = null;
   // Only a SurfaceView votes: a TextureView or HardwareBufferView is
   // composited into the window, which votes for it.
   private final SurfaceFrameRateVote mFrameRateVote = new SurfaceFrameRateVote(
@@ -51,74 +63,114 @@ public class WebGPUView extends ReactViewGroup implements WebGPUAPI {
     mContextId = contextId;
   }
 
+  // The backing view is created from the props of the first transaction and
+  // kept (see updateView()). React calls a setter again only when its prop
+  // changed, so a call on a mounted canvas is a change: the setters below
+  // apply it in place where the view can take it, else they ignore it and
+  // say so (a canvas that needs another backing view is remounted, with a
+  // new key). The JS side warns about the same changes in development (see
+  // Canvas.tsx), mirroring these rules.
+
+  public void setBackingView(@Nullable String value) {
+    if (mKind != null) {
+      warnIgnoredOnceMounted("android.backingView");
+      return;
+    }
+    boolean hardwareBufferSupported = Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q;
+    mBackingView = BackingViewKind.fromBackingView(value, hardwareBufferSupported);
+  }
+
   public void setOpaque(boolean value) {
     mOpaque = value;
   }
 
-  public void setSurfaceType(String value) {
-    mSurfaceType = value;
+  public void setZOrderOnTop(boolean value) {
+    if (takesZOrder("android.zOrderOnTop")) {
+      mZOrderOnTop = value;
+      applyZOrder();
+    }
   }
 
-  public void setZOrderOnTop(boolean value) {
-    mZOrderOnTop = value;
-  }
-
-  // Resolve the backing view from the props. "auto" picks SurfaceView for an
-  // opaque canvas and TextureView for a non-opaque one. WebGPUHardwareBufferView
-  // (a plain View drawing AHardwareBuffers inline, API 29+) is opt-in via
-  // surfaceType until it gets a runtime fallback to TextureView when the
-  // AHardwareBuffer import fails on a device; below API 29 the request itself
-  // falls back to TextureView.
-  private int resolveKind() {
-    if ("SurfaceView".equals(mSurfaceType)) {
-      return KIND_SURFACE_VIEW;
+  public void setZOrderMediaOverlay(boolean value) {
+    if (takesZOrder("android.zOrderMediaOverlay")) {
+      mZOrderMediaOverlay = value;
+      applyZOrder();
+    }
+  }
+
+  // Whether a z-order prop is taken. Before the backing view exists it is
+  // read when the view is created. After that only a SurfaceView has a
+  // z-order of its own (elsewhere the prop never applied, and the change is
+  // moot), and SurfaceView moves a live surface since Android 11, for an app
+  // targeting it; before that, the surface reads it when it is created.
+  private boolean takesZOrder(String prop) {
+    if (mKind == null) {
+      return true;
+    }
+    if (mKind != BackingViewKind.SURFACE_VIEW) {
+      return false;
     }
-    if ("TextureView".equals(mSurfaceType)) {
-      return KIND_TEXTURE_VIEW;
+    boolean inPlace = Build.VERSION.SDK_INT >= Build.VERSION_CODES.R
+        && getContext().getApplicationInfo().targetSdkVersion >= Build.VERSION_CODES.R;
+    if (!inPlace) {
+      warnIgnoredOnceMounted(prop);
     }
-    if ("HardwareBufferView".equals(mSurfaceType)) {
-      boolean hardwareBufferSupported = Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q;
-      return hardwareBufferSupported ? KIND_HARDWARE_BUFFER_VIEW : KIND_TEXTURE_VIEW;
+    return inPlace;
+  }
+
+  private void applyZOrder() {
+    if (mKind == BackingViewKind.SURFACE_VIEW) {
+      ((WebGPUSurfaceView) mView).setZOrder(mZOrderOnTop, mZOrderMediaOverlay);
     }
-    return mOpaque ? KIND_SURFACE_VIEW : KIND_TEXTURE_VIEW;
+  }
+
+  private void warnIgnoredOnceMounted(String prop) {
+    Log.w(TAG, "Ignoring a change of " + prop + " on a mounted canvas: the backing view"
+        + " is chosen when the canvas mounts. Remount the canvas (give it a new key)"
+        + " to change it.");
   }
 
   // Apply the complete prop transaction once, after contextId and all rendering
-  // options have arrived. Only a change of backing view (or of zOrderOnTop,
-  // which a SurfaceView must know before it attaches) replaces the child;
-  // opacity is applied in place.
+  // options have arrived. The first one creates the backing view, which is
+  // then kept: a SurfaceView must know its z-order before it attaches (before
+  // Android 11), and keeping a canvas on screen while its backing view is
+  // replaced takes hold-and-retire logic specific to each Android release (see
+  // PR #563, and react-native-skia's #4189 and #4192), which this view does
+  // not carry. A canvas that needs another backing view is remounted instead,
+  // and is off screen for a frame or two until the new view draws its first
+  // frame. Later transactions apply the opacity in place (the setters decide
+  // what else is taken); WebGPUHardwareBufferView always composites with
+  // alpha, so there it is a no-op.
   public void updateView() {
-    int kind = resolveKind();
-    boolean zOrderOnTop = kind == KIND_SURFACE_VIEW && mZOrderOnTop;
-    if (mView == null || kind != mAppliedKind || zOrderOnTop != mAppliedZOrderOnTop) {
-      if (mView != null) {
-        removeView(mView);
-      }
-      mAppliedKind = kind;
-      mAppliedZOrderOnTop = zOrderOnTop;
-      Context ctx = getContext();
-      switch (kind) {
-        case KIND_HARDWARE_BUFFER_VIEW:
-          mView = new WebGPUHardwareBufferView(ctx, this);
-          break;
-        case KIND_TEXTURE_VIEW:
-          mView = new WebGPUTextureView(ctx, this, mOpaque);
-          break;
-        default:
-          mView = new WebGPUSurfaceView(ctx, this, zOrderOnTop, mOpaque);
-          break;
+    if (mKind != null) {
+      boolean opaque = BackingViewKind.resolveOpaque(mKind, mOpaque);
+      if (mKind == BackingViewKind.TEXTURE_VIEW) {
+        ((WebGPUTextureView) mView).setOpaque(opaque);
+      } else if (mKind == BackingViewKind.SURFACE_VIEW) {
+        ((WebGPUSurfaceView) mView).setOpaque(opaque);
       }
-      addView(mView);
-      // ReactViewGroup.requestLayout() is a deliberate no-op, so addView outside
-      // the layout pass never lays the child out; do it by hand or the new view
-      // stays 0x0 and never gets a surface.
-      layoutChild();
-    } else if (kind == KIND_TEXTURE_VIEW) {
-      ((WebGPUTextureView) mView).setOpaque(mOpaque);
-    } else if (kind == KIND_SURFACE_VIEW) {
-      ((WebGPUSurfaceView) mView).setOpaque(mOpaque);
+      return;
+    }
+    BackingViewKind kind = mBackingView;
+    mKind = kind;
+    boolean opaque = BackingViewKind.resolveOpaque(kind, mOpaque);
+    Context ctx = getContext();
+    switch (kind) {
+      case HARDWARE_BUFFER_VIEW:
+        mView = new WebGPUHardwareBufferView(ctx, this);
+        break;
+      case TEXTURE_VIEW:
+        mView = new WebGPUTextureView(ctx, this, opaque);
+        break;
+      default:
+        mView = new WebGPUSurfaceView(ctx, this, mZOrderOnTop, mZOrderMediaOverlay, opaque);
+        break;
     }
-    // WebGPUHardwareBufferView always composites with alpha; opacity is a no-op.
+    addView(mView);
+    // ReactViewGroup.requestLayout() is a deliberate no-op, so addView outside
+    // the layout pass never lays the child out; do it by hand or the new view
+    // stays 0x0 and never gets a surface.
+    layoutChild();
   }
 
   private void layoutChild() {
@@ -138,7 +190,7 @@ public class WebGPUView extends ReactViewGroup implements WebGPUAPI {
     float density = getResources().getDisplayMetrics().density;
     float width = getWidth() / density;
     float height = getHeight() / density;
-    boolean votesFrameRate = mAppliedKind == KIND_SURFACE_VIEW;
+    boolean votesFrameRate = mKind == BackingViewKind.SURFACE_VIEW;
     if (votesFrameRate) {
       mFrameRateVote.attach(surface);
     }

package/android/src/main/java/com/webgpu/WebGPUViewManager.java

@@ -1,6 +1,7 @@
 package com.webgpu;
 
 import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.uimanager.ThemedReactContext;
@@ -30,15 +31,15 @@ public class WebGPUViewManager extends WebGPUViewManagerSpec<WebGPUView> {
   }
 
   @Override
-  @ReactProp(name = "opaque", defaultBoolean = true)
-  public void setOpaque(WebGPUView view, boolean value) {
-    view.setOpaque(value);
+  @ReactProp(name = "androidBackingView")
+  public void setAndroidBackingView(WebGPUView view, @Nullable String value) {
+    view.setBackingView(value);
   }
 
   @Override
-  @ReactProp(name = "androidSurfaceType")
-  public void setAndroidSurfaceType(WebGPUView view, String value) {
-    view.setSurfaceType(value);
+  @ReactProp(name = "androidOpaque")
+  public void setAndroidOpaque(WebGPUView view, boolean value) {
+    view.setOpaque(value);
   }
 
   @Override
@@ -47,6 +48,12 @@ public class WebGPUViewManager extends WebGPUViewManagerSpec<WebGPUView> {
     view.setZOrderOnTop(value);
   }
 
+  @Override
+  @ReactProp(name = "androidZOrderMediaOverlay")
+  public void setAndroidZOrderMediaOverlay(WebGPUView view, boolean value) {
+    view.setZOrderMediaOverlay(value);
+  }
+
   @Override
   protected void onAfterUpdateTransaction(@NonNull WebGPUView view) {
     super.onAfterUpdateTransaction(view);

package/cpp/jsi/NativeObject.h

@@ -179,6 +179,14 @@ private:
  *   getters and Proxy traps of unrelated objects never run.
  * - box(value): wraps the object into a BoxedWebGPUObject, branded with its
  *   class name, for unbox() on the target runtime.
+ * - installConstructors(): installs the constructor of every WebGPU class on
+ *   the calling runtime, skipping the ones already there, so `instanceof`
+ *   works against any class on that runtime, including classes no object of
+ *   which was ever created there or crossed into it (unboxing installs only
+ *   the class of the object that crosses). installWebGPU() calls it. The
+ *   class list belongs to the API layer (RNWebGPUManager::installConstructors)
+ *   and is handed in at construction: every API class includes this header,
+ *   which therefore cannot include them back.
  *
  * One instance is installed on the main runtime as
  * globalThis.__webgpuWorkletHelpers and captured by the serializer's
@@ -189,8 +197,26 @@ private:
  */
 class WebGPUWorkletHelpers : public jsi::HostObject {
 public:
+  using InstallConstructors = void (*)(jsi::Runtime &);
+
+  explicit WebGPUWorkletHelpers(InstallConstructors installConstructors)
+      : _installConstructors(installConstructors) {}
+
   jsi::Value get(jsi::Runtime &runtime, const jsi::PropNameID &name) override {
     auto propName = name.utf8(runtime);
+    if (propName == "installConstructors") {
+      auto install = _installConstructors;
+      return jsi::Function::createFromHostFunction(
+          runtime, name, 0,
+          [install](jsi::Runtime &rt, const jsi::Value & /*thisVal*/,
+                    const jsi::Value * /*args*/,
+                    size_t /*count*/) -> jsi::Value {
+            if (install != nullptr) {
+              install(rt);
+            }
+            return jsi::Value::undefined();
+          });
+    }
     if (propName == "isNativeObject") {
       return jsi::Function::createFromHostFunction(
           runtime, name, 1,
@@ -230,11 +256,15 @@ public:
   std::vector<jsi::PropNameID>
   getPropertyNames(jsi::Runtime &runtime) override {
     std::vector<jsi::PropNameID> names;
-    names.reserve(2);
+    names.reserve(3);
     names.push_back(jsi::PropNameID::forUtf8(runtime, "isNativeObject"));
     names.push_back(jsi::PropNameID::forUtf8(runtime, "box"));
+    names.push_back(jsi::PropNameID::forUtf8(runtime, "installConstructors"));
     return names;
   }
+
+private:
+  InstallConstructors _installConstructors;
 };
 
 /**
@@ -298,6 +328,11 @@ public:
       return; // Already installed on this runtime
     }
 
+    // Every wrapper is made by create(), which installs the prototype first,
+    // so the class is registered before any of its objects can be boxed,
+    // whether or not its constructor is ever installed as a global.
+    registerReconstructor();
+
     // Create prototype object
     jsi::Object prototype(runtime);
 
@@ -378,43 +413,23 @@ public:
    * The constructor throws if called directly (these objects are only
    * created internally by the native code).
    *
-   * Also registers this class with NativeObjectRegistry so that
-   * BoxedWebGPUObject::unbox() can rebuild its objects on secondary runtimes.
+   * Idempotent per runtime: once the global exists there, later calls return
+   * without touching it, so the constructor object keeps its identity.
+   *
+   * Not needed for objects to cross runtimes: installPrototype() registers
+   * the class with NativeObjectRegistry.
    */
   static void installConstructor(jsi::Runtime &runtime) {
-    // Register the reconstructor used by BoxedWebGPUObject::unbox() to
-    // rebuild this object (prototype + native state) on another runtime.
-    static std::once_flag registryFlag;
-    std::call_once(registryFlag, []() {
-      NativeObjectRegistry::getInstance().registerClass(
-          Derived::CLASS_NAME,
-          [](jsi::Runtime &rt,
-             std::shared_ptr<jsi::NativeState> state) -> jsi::Value {
-            auto instance = std::dynamic_pointer_cast<Derived>(state);
-            if (instance == nullptr) {
-              throw jsi::JSError(rt, "Invalid boxed native object state");
-            }
-            // The constructor makes `instanceof` work on this runtime too.
-            if (!rt.global().hasProperty(rt, Derived::CLASS_NAME)) {
-              Derived::installConstructor(rt);
-            }
-            // Unboxing hands back the wrapper cached for the target runtime,
-            // creating it on first use. Keep the runtime the object was
-            // originally created on: async native code (GPUDevice error/lost
-            // events, GPUAdapter::requestDevice) delivers into the creation
-            // runtime, and rebinding it to a worklet runtime would invoke
-            // main-runtime jsi::Functions on the wrong runtime and thread.
-            auto *originalRuntime = instance->getCreationRuntime();
-            auto value = Derived::create(rt, instance);
-            if (originalRuntime != nullptr) {
-              instance->setCreationRuntime(originalRuntime);
-            }
-            return value;
-          });
-    });
-
     installPrototype(runtime);
 
+    // Once per runtime. installWebGPU() runs this at the top of every worklet
+    // invocation, and reinstalling would replace the global with a new
+    // function object each time (`const C = GPUBuffer; C === GPUBuffer`
+    // would be false).
+    if (runtime.global().hasProperty(runtime, Derived::CLASS_NAME)) {
+      return;
+    }
+
     auto *prototype = getCachedPrototype(runtime);
     if (prototype == nullptr) {
       return;
@@ -441,6 +456,41 @@ public:
     runtime.global().setProperty(runtime, Derived::CLASS_NAME, std::move(ctor));
   }
 
+  /**
+   * Registers the reconstructor BoxedWebGPUObject::unbox() uses to rebuild
+   * this class's objects (prototype + native state) on another runtime.
+   * Once per process: the registry outlives every runtime.
+   */
+  static void registerReconstructor() {
+    static std::once_flag registryFlag;
+    std::call_once(registryFlag, []() {
+      NativeObjectRegistry::getInstance().registerClass(
+          Derived::CLASS_NAME,
+          [](jsi::Runtime &rt,
+             std::shared_ptr<jsi::NativeState> state) -> jsi::Value {
+            auto instance = std::dynamic_pointer_cast<Derived>(state);
+            if (instance == nullptr) {
+              throw jsi::JSError(rt, "Invalid boxed native object state");
+            }
+            // The constructor makes `instanceof` work on this runtime too
+            // (a no-op once it is installed there).
+            Derived::installConstructor(rt);
+            // Unboxing hands back the wrapper cached for the target runtime,
+            // creating it on first use. Keep the runtime the object was
+            // originally created on: async native code (GPUDevice error/lost
+            // events, GPUAdapter::requestDevice) delivers into the creation
+            // runtime, and rebinding it to a worklet runtime would invoke
+            // main-runtime jsi::Functions on the wrong runtime and thread.
+            auto *originalRuntime = instance->getCreationRuntime();
+            auto value = Derived::create(rt, instance);
+            if (originalRuntime != nullptr) {
+              instance->setCreationRuntime(originalRuntime);
+            }
+            return value;
+          });
+    });
+  }
+
   /**
    * Returns the JS wrapper of `instance` on `runtime`, creating it on first
    * use.

package/cpp/rnwgpu/RNWebGPUManager.cpp

@@ -41,6 +41,7 @@
 #include "GPUTextureView.h"
 #include "GPUUncapturedErrorEvent.h"
 #include "GPUValidationError.h"
+#include "ImageBitmap.h"
 #include "VideoFrame.h"
 #include "VideoPlayer.h"
 
@@ -78,54 +79,11 @@ RNWebGPUManager::RNWebGPUManager(
       std::make_shared<RNWebGPU>(gpu, _platformContext, _jsCallInvoker);
   _gpu = gpu->get();
 
-  // RNWebGPU needs its brand registered in NativeObjectRegistry so the boxing
-  // path can install the prototype on worklet runtimes. installConstructor
-  // does that registration but also sets globalThis.RNWebGPU = ctor, so we
-  // call it FIRST and then overwrite the global with the actual instance.
-  RNWebGPU::installConstructor(*_jsRuntime);
   _jsRuntime->global().setProperty(*_jsRuntime, "RNWebGPU",
                                    RNWebGPU::create(*_jsRuntime, rnWebGPU));
 
   // Install constructors for instanceof support
-  GPU::installConstructor(*_jsRuntime);
-  GPUAdapter::installConstructor(*_jsRuntime);
-  GPUAdapterInfo::installConstructor(*_jsRuntime);
-  GPUBindGroup::installConstructor(*_jsRuntime);
-  GPUBindGroupLayout::installConstructor(*_jsRuntime);
-  GPUBuffer::installConstructor(*_jsRuntime);
-  GPUCanvasContext::installConstructor(*_jsRuntime);
-  GPUCommandBuffer::installConstructor(*_jsRuntime);
-  GPUCommandEncoder::installConstructor(*_jsRuntime);
-  GPUCompilationInfo::installConstructor(*_jsRuntime);
-  GPUCompilationMessage::installConstructor(*_jsRuntime);
-  GPUComputePassEncoder::installConstructor(*_jsRuntime);
-  GPUComputePipeline::installConstructor(*_jsRuntime);
-  GPUDevice::installConstructor(*_jsRuntime);
-  GPUDeviceLostInfo::installConstructor(*_jsRuntime);
-  GPUError::installConstructor(*_jsRuntime);
-  GPUExternalTexture::installConstructor(*_jsRuntime);
-  GPUNativeBufferExternalTexture::installConstructor(*_jsRuntime);
-  GPUNativeBufferTexture::installConstructor(*_jsRuntime);
-  GPUInternalError::installConstructor(*_jsRuntime);
-  GPUOutOfMemoryError::installConstructor(*_jsRuntime);
-  GPUValidationError::installConstructor(*_jsRuntime);
-  GPUUncapturedErrorEvent::installConstructor(*_jsRuntime);
-  GPUPipelineLayout::installConstructor(*_jsRuntime);
-  GPUQuerySet::installConstructor(*_jsRuntime);
-  GPUQueue::installConstructor(*_jsRuntime);
-  GPURenderBundle::installConstructor(*_jsRuntime);
-  GPURenderBundleEncoder::installConstructor(*_jsRuntime);
-  GPURenderPassEncoder::installConstructor(*_jsRuntime);
-  GPURenderPipeline::installConstructor(*_jsRuntime);
-  GPUSampler::installConstructor(*_jsRuntime);
-  GPUSharedFence::installConstructor(*_jsRuntime);
-  GPUSharedTextureMemory::installConstructor(*_jsRuntime);
-  GPUShaderModule::installConstructor(*_jsRuntime);
-  GPUSupportedLimits::installConstructor(*_jsRuntime);
-  GPUTexture::installConstructor(*_jsRuntime);
-  GPUTextureView::installConstructor(*_jsRuntime);
-  VideoFrame::installConstructor(*_jsRuntime);
-  VideoPlayer::installConstructor(*_jsRuntime);
+  installConstructors(*_jsRuntime);
 
   // Install constant objects as plain JS objects with own properties
   _jsRuntime->global().setProperty(*_jsRuntime, "GPUBufferUsage",
@@ -144,14 +102,59 @@ RNWebGPUManager::RNWebGPUManager(
   installWebGPUWorkletHelpers(*_jsRuntime);
 }
 
+void RNWebGPUManager::installConstructors(jsi::Runtime &runtime) {
+  GPU::installConstructor(runtime);
+  GPUAdapter::installConstructor(runtime);
+  GPUAdapterInfo::installConstructor(runtime);
+  GPUBindGroup::installConstructor(runtime);
+  GPUBindGroupLayout::installConstructor(runtime);
+  GPUBuffer::installConstructor(runtime);
+  GPUCanvasContext::installConstructor(runtime);
+  GPUCommandBuffer::installConstructor(runtime);
+  GPUCommandEncoder::installConstructor(runtime);
+  GPUCompilationInfo::installConstructor(runtime);
+  GPUCompilationMessage::installConstructor(runtime);
+  GPUComputePassEncoder::installConstructor(runtime);
+  GPUComputePipeline::installConstructor(runtime);
+  GPUDevice::installConstructor(runtime);
+  GPUDeviceLostInfo::installConstructor(runtime);
+  GPUError::installConstructor(runtime);
+  GPUExternalTexture::installConstructor(runtime);
+  GPUNativeBufferExternalTexture::installConstructor(runtime);
+  GPUNativeBufferTexture::installConstructor(runtime);
+  GPUInternalError::installConstructor(runtime);
+  GPUOutOfMemoryError::installConstructor(runtime);
+  GPUValidationError::installConstructor(runtime);
+  GPUUncapturedErrorEvent::installConstructor(runtime);
+  GPUPipelineLayout::installConstructor(runtime);
+  GPUQuerySet::installConstructor(runtime);
+  GPUQueue::installConstructor(runtime);
+  GPURenderBundle::installConstructor(runtime);
+  GPURenderBundleEncoder::installConstructor(runtime);
+  GPURenderPassEncoder::installConstructor(runtime);
+  GPURenderPipeline::installConstructor(runtime);
+  GPUSampler::installConstructor(runtime);
+  GPUSharedFence::installConstructor(runtime);
+  GPUSharedTextureMemory::installConstructor(runtime);
+  GPUShaderModule::installConstructor(runtime);
+  GPUSupportedLimits::installConstructor(runtime);
+  GPUTexture::installConstructor(runtime);
+  GPUTextureView::installConstructor(runtime);
+  ImageBitmap::installConstructor(runtime);
+  VideoFrame::installConstructor(runtime);
+  VideoPlayer::installConstructor(runtime);
+}
+
 void RNWebGPUManager::installWebGPUWorkletHelpers(jsi::Runtime &runtime) {
-  // The serializer worklets capture this object by closure; worklets passes a
-  // HostObject to every runtime by reference, so installing it here, on the
-  // main runtime, is enough (see WebGPUWorkletHelpers).
+  // The serializer worklets and installWebGPU() capture this object by
+  // closure; worklets passes a HostObject to every runtime by reference, so
+  // installing it here, on the main runtime, is enough (see
+  // WebGPUWorkletHelpers).
   runtime.global().setProperty(
       runtime, "__webgpuWorkletHelpers",
       jsi::Object::createFromHostObject(
-          runtime, std::make_shared<WebGPUWorkletHelpers>()));
+          runtime, std::make_shared<WebGPUWorkletHelpers>(
+                       &RNWebGPUManager::installConstructors)));
 }
 
 void RNWebGPUManager::flushPendingSurfaceTransition(