react-native-webgpu 0.16.1 → 0.19.0

package/lib/typescript/src/importDevice.d.ts

@@ -9,8 +9,9 @@
  * ```
  *
  * This is only sound when the exporting library links the same single Dawn
- * copy as react-native-webgpu and shares its wgpu::Instance (react-native-skia
- * does both).
+ * copy as react-native-webgpu (react-native-skia does). The device stays on
+ * its owner's Dawn instance and its async operations are pumped there, so the
+ * two libraries do not have to share an instance.
  */
 export declare const importDevice: (pointer: bigint) => GPUDevice;
 /**

package/lib/typescript/src/importDevice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"importDevice.d.ts","sourceRoot":"","sources":["../../../src/importDevice.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,KAAG,SAO9C,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,KAAG,UAO9C,CAAC"}
+{"version":3,"file":"importDevice.d.ts","sourceRoot":"","sources":["../../../src/importDevice.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,KAAG,SAO9C,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,KAAG,UAO9C,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -12,8 +12,10 @@ declare global {
     var RNWebGPU: {
         gpu: GPU;
         fabric: boolean;
+        allocateContextId: () => number;
         getNativeSurface: (contextId: number) => NativeCanvas;
         MakeWebGPUCanvasContext: (contextId: number, width: number, height: number) => RNCanvasContext;
+        MakeWebGPUCanvasContextFromNativeWindow: (window: bigint, width: number, height: number) => RNCanvasContext;
         destroyContext: (contextId: number) => void;
         DecodeToUTF8: (buffer: NodeJS.ArrayBufferView | ArrayBuffer) => string;
         createImageBitmap: typeof createImageBitmap;

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EACV,8BAA8B,EAC9B,wCAAwC,EACxC,sBAAsB,EACtB,gCAAgC,EAChC,8BAA8B,EAC9B,yBAAyB,EACzB,cAAc,EACd,wBAAwB,EACxB,wBAAwB,EACxB,kCAAkC,EAClC,sBAAsB,EACtB,gCAAgC,EAChC,oCAAoC,EACpC,YAAY,EACZ,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,SAAS,CAAC;AAEjB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,gCAAgC,EAChC,oCAAoC,EACpC,sBAAsB,EACtB,wBAAwB,EACxB,oCAAoC,EACpC,wBAAwB,EACxB,kCAAkC,EAClC,0BAA0B,EAC1B,WAAW,EACX,wCAAwC,EACxC,gCAAgC,EAChC,sBAAsB,EACtB,sBAAsB,EACtB,8BAA8B,EAC9B,8BAA8B,EAC9B,yBAAyB,EACzB,6BAA6B,GAC9B,MAAM,SAAS,CAAC;AAEjB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,SAAS;QACjB,GAAG,EAAE,GAAG,CAAC;KACV;IAED,IAAI,SAAS,EAAE,SAAS,CAAC;IAEzB,IAAI,QAAQ,EAAE;QACZ,GAAG,EAAE,GAAG,CAAC;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,gBAAgB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,YAAY,CAAC;QACtD,uBAAuB,EAAE,CACvB,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,KACX,eAAe,CAAC;QAGrB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;QAC5C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,eAAe,GAAG,WAAW,KAAK,MAAM,CAAC;QACvE,iBAAiB,EAAE,OAAO,iBAAiB,CAAC;QAC5C,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,gBAAgB,CAAC;QAKnD,oBAAoB,EAAE,CACpB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,WAAW,CAAC,EAAE,sBAAsB,KACjC,gBAAgB,CAAC;QAItB,gCAAgC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,gBAAgB,CAAC;QAIxE,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,SAAS,CAAC;QAI7C,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,UAAU,CAAC;QAE9C,iBAAiB,EAAE,CACjB,MAAM,EAAE,MAAM,EACd,WAAW,CAAC,EAAE,sBAAsB,KACjC,WAAW,CAAC;QACjB,kBAAkB,EAAE,MAAM,MAAM,CAAC;KAClC,CAAC;IAEF,UAAU,UAAU;QAIlB,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;KAChC;IAED,UAAU,SAAS;QAMjB,qBAAqB,CACnB,UAAU,EAAE,kCAAkC,GAC7C,kBAAkB,CAAC;QACtB,yBAAyB,CACvB,UAAU,EAAE,gCAAgC,GAC3C,sBAAsB,CAAC;QAC1B,iBAAiB,CAAC,UAAU,EAAE,wBAAwB,GAAG,cAAc,CAAC;QAMxE,yBAAyB,CACvB,MAAM,EAAE,gBAAgB,EACxB,UAAU,CAAC,EAAE,gCAAgC,GAC5C,sBAAsB,CAAC;QAC1B,iCAAiC,CAC/B,MAAM,EAAE,gBAAgB,EACxB,UAAU,CAAC,EAAE,wCAAwC,GACpD,8BAA8B,CAAC;KACnC;IAmBD,UAAU,QAAQ;QAChB,yBAAyB,CACvB,MAAM,EAAE,yBAAyB,EACjC,WAAW,EAAE,8BAA8B,GAC1C,OAAO,CAAC,IAAI,CAAC,CAAC;QAQjB,0BAA0B,CACxB,MAAM,EAAE,oCAAoC,EAC5C,WAAW,EAAE,4BAA4B,EACzC,QAAQ,EAAE,iBAAiB,GAC1B,SAAS,CAAC;KACd;IAID,UAAU,mBAAmB;QAC3B,WAAW,CAAC,EAAE,wBAAwB,CAAC;QAOvC,6BAA6B,CAAC,EAAE,OAAO,CAAC;KACzC;IAMD,UAAU,4BAA4B;QACpC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;QAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB;IASD,UAAU,kBAAkB;QAC1B,OAAO,IAAI,IAAI,CAAC;KACjB;IAGD,SAAS,iBAAiB,CACxB,KAAK,EAAE,WAAW,GAAG,eAAe,EACpC,OAAO,CAAC,EAAE,kBAAkB,GAC3B,OAAO,CAAC,WAAW,CAAC,CAAC;CACzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/mock.d.ts

@@ -8,8 +8,8 @@ export declare const GPUTextureUsage: GPUTextureUsage;
 export declare const GPUShaderStage: GPUShaderStage;
 export declare const GPUColorWrite: GPUColorWrite;
 export declare const GPUMapMode: GPUMapMode;
-export type { AndroidCanvasProps, AndroidSurfaceType, CanvasProps, CanvasRef, NativeCanvas, RNCanvasContext, } from "./Canvas";
-export declare const Canvas: ({ opaque: _opaque, android: _android, ref, ...props }: CanvasProps) => React.CElement<import("react-native").ViewProps, View>;
+export type { AndroidBackingView, AndroidCanvasProps, AndroidHardwareBufferViewProps, AndroidSurfaceViewProps, AndroidTextureViewProps, CanvasProps, CanvasRef, NativeCanvas, RNCanvasContext, } from "./Canvas";
+export declare const Canvas: ({ android: _android, ref, ...props }: CanvasProps) => React.CElement<import("react-native").ViewProps, View>;
 export declare const useCanvasRef: () => React.MutableRefObject<null>;
 export declare const useSurface: () => {
     ref: React.MutableRefObject<null>;

package/lib/typescript/src/mock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../src/mock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,KAAK,EAAE,WAAW,EAAiC,MAAM,UAAU,CAAC;AAa3E,cAAc,WAAW,CAAC;AAM1B,eAAO,MAAM,cAAc,EAAE,cAW5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,eAO7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,cAI5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,aAM3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,UAGxB,CAAC;AAoBF,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,SAAS,EACT,YAAY,EACZ,eAAe,GAChB,MAAM,UAAU,CAAC;AAGlB,eAAO,MAAM,MAAM,GAAI,uDAKpB,WAAW,2DASb,CAAC;AAEF,eAAO,MAAM,YAAY,oCAA2B,CAAC;AACrD,eAAO,MAAM,UAAU;;;CAAqD,CAAC;AAC7E,eAAO,MAAM,4BAA4B,iBAAkB,CAAC;AAE5D,eAAO,MAAM,SAAS;;;CAA0C,CAAC;AAEjE,eAAO,MAAM,iBAAiB,GAAI,cAAc;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,sIACtD,CAAC;AAEnB,eAAO,MAAM,aAAa,QAAO,KAEhC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,UAAU,MAAM,KAAG,SAE/C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,UAAU,MAAM,KAAG,UAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,iBAAkB,CAAC;AAE7C,eAAO,MAAM,YAAY;;CAA2B,CAAC"}
+{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../src/mock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,KAAK,EAAE,WAAW,EAAiC,MAAM,UAAU,CAAC;AAa3E,cAAc,WAAW,CAAC;AAM1B,eAAO,MAAM,cAAc,EAAE,cAW5B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,eAO7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,cAI5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,aAM3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,UAGxB,CAAC;AAoBF,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,WAAW,EACX,SAAS,EACT,YAAY,EACZ,eAAe,GAChB,MAAM,UAAU,CAAC;AAGlB,eAAO,MAAM,MAAM,GAAI,sCAAsC,WAAW,2DASvE,CAAC;AAEF,eAAO,MAAM,YAAY,oCAA2B,CAAC;AACrD,eAAO,MAAM,UAAU;;;CAAqD,CAAC;AAC7E,eAAO,MAAM,4BAA4B,iBAAkB,CAAC;AAE5D,eAAO,MAAM,SAAS;;;CAA0C,CAAC;AAEjE,eAAO,MAAM,iBAAiB,GAAI,cAAc;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,sIACtD,CAAC;AAEnB,eAAO,MAAM,aAAa,QAAO,KAEhC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,UAAU,MAAM,KAAG,SAE/C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,UAAU,MAAM,KAAG,UAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,iBAAkB,CAAC;AAE7C,eAAO,MAAM,YAAY;;CAA2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-webgpu",
-  "version": "0.16.1",
+  "version": "0.19.0",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -24,7 +24,7 @@
     "app.plugin.js",
     "plugin/build/**"
   ],
-  "dawn": "chrome-m154a",
+  "dawn": "chrome-m157",
   "androidMinSdkVersion": 26,
   "scripts": {
     "test": "NODE_OPTIONS='--experimental-require-module' jest -i",
@@ -111,7 +111,7 @@
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "react-native-webgpu-dawn": "154.3.0"
+    "react-native-webgpu-dawn": "157.0.0"
   },
   "peerDependencies": {
     "react": "*",

package/src/Canvas.tsx

@@ -7,116 +7,198 @@ import WebGPUNativeView from "./WebGPUViewNativeComponent";
 
 export type { CanvasRef, NativeCanvas, RNCanvasContext } from "./types";
 
-let CONTEXT_COUNTER = 1;
-function generateContextId() {
-  return CONTEXT_COUNTER++;
-}
+// Native hands out the id: it must be unique for the life of the process,
+// not of the JS runtime, as the native surface registry outlives a reload.
+const generateContextId = () => RNWebGPU.allocateContextId();
 
-export type AndroidSurfaceType =
-  "SurfaceView" | "TextureView" | "HardwareBufferView";
+/** The Android view a canvas draws into, see {@link AndroidCanvasProps}. */
+export type AndroidBackingView =
+  "TextureView" | "SurfaceView" | "HardwareBufferView";
 
-/**
- * Android-only rendering options. They select the backing view, which is
- * chosen when the canvas mounts and kept: a later change is ignored, with a
- * warning in development. Remount the canvas, with a `key`, to change it.
- */
-export interface AndroidCanvasProps {
+/** The options of a canvas backed by a `TextureView`, the default. */
+export interface AndroidTextureViewProps {
   /**
-   * Backing view. Defaults to `SurfaceView` when the canvas mounts opaque and
-   * to `TextureView` otherwise; both composite correctly in React Native
-   * stacking order without further flags. `HardwareBufferView` (Android 10+,
-   * a plain View that draws each frame's AHardwareBuffer inline with no extra
-   * copy) is opt-in and experimental; on older devices it uses `TextureView`.
-   * Read once, at mount.
+   * A `TextureView`: a regular view, composited like any other (parent
+   * transforms, clipping, alpha and z-order apply), at the price of an extra
+   * texture copy and typically a frame of latency. The default.
    */
-  surfaceType?: AndroidSurfaceType;
+  backingView?: "TextureView";
   /**
-   * SurfaceView only: composite above every React Native view in the window,
-   * ignoring `zIndex`. Ignored for TextureView. Defaults to false. Applied in
-   * place on Android 11 and later; read once, at mount, before that.
+   * Declares that the canvas covers every pixel of its bounds, so the UI
+   * toolkit skips blending the view. Defaults to false. Applied in place.
    */
-  zOrderOnTop?: boolean;
+  opaque?: boolean;
 }
 
-export interface CanvasProps extends ViewProps {
+/** The options of a canvas backed by a `SurfaceView`. */
+export interface AndroidSurfaceViewProps {
+  /**
+   * A `SurfaceView`: each frame goes to the system compositor as its own
+   * layer, the fastest path, with no extra copy. It is not view content:
+   * parent transforms, clipping, rounded corners and z-order with sibling
+   * views do not apply to it.
+   */
+  backingView: "SurfaceView";
   /**
-   * Defaults to true. Set to false to alpha-composite the canvas over the
-   * views behind it (pair it with `alphaMode: "premultiplied"` and an alpha-0
-   * clear color). Android and web only; on iOS `alphaMode` alone controls it.
-   * On Android the backing view is chosen from it when the canvas mounts; a
-   * later change updates that view in place.
+   * Declares that the canvas covers every pixel of its bounds, so the
+   * compositor skips blending the layer and can show it through a hardware
+   * overlay. Defaults to true: a translucent `SurfaceView` blends against
+   * what is below the window, usually black, rather than the React Native
+   * views beneath it (pair it with `zOrderOnTop`). Applied in place.
    */
   opaque?: boolean;
   /**
-   * Android-only rendering options. They select the backing view, which is
-   * chosen when the canvas mounts and kept: a later change is ignored, with a
-   * warning in development. Remount the canvas, with a `key`, to change it.
-   * Ignored on iOS and web.
+   * Composite above every React Native view in the window, ignoring
+   * `zIndex`. Defaults to false. Applied in place on Android 11 and later;
+   * read once, at mount, before that.
+   */
+  zOrderOnTop?: boolean;
+  /**
+   * Composite above the other `SurfaceView`s below the window (video players,
+   * other canvases), while staying below the window itself. Defaults to
+   * false; `zOrderOnTop` takes precedence. Applied in place on Android 11 and
+   * later; read once, at mount, before that.
+   */
+  zOrderMediaOverlay?: boolean;
+}
+
+/** The options of a canvas backed by a `HardwareBufferView`. */
+export interface AndroidHardwareBufferViewProps {
+  /**
+   * A plain view drawing each frame's `AHardwareBuffer` inline: composited
+   * like a `TextureView`, without its extra copy. Opt-in and experimental,
+   * on Android 10 and later; below that the canvas uses a `TextureView`,
+   * with a warning in development. Always composites with alpha.
+   */
+  backingView: "HardwareBufferView";
+}
+
+/**
+ * Android-only rendering options: the native view behind the canvas and its
+ * options. The view is created when the canvas mounts and kept: a change of
+ * `backingView` is ignored, with a warning in development; remount the canvas
+ * (with a `key`) to change it. `opaque` applies in place, and so do the
+ * z-order options on Android 11 and later. Ignored on iOS and web.
+ */
+export type AndroidCanvasProps =
+  | AndroidTextureViewProps
+  | AndroidSurfaceViewProps
+  | AndroidHardwareBufferViewProps;
+
+export interface CanvasProps extends ViewProps {
+  /**
+   * Android-only rendering options: the native view behind the canvas and its
+   * options, see {@link AndroidCanvasProps}. Ignored on iOS and web.
    */
   android?: AndroidCanvasProps;
   ref?: React.Ref<CanvasRef>;
 }
 
+// The union read as one bag of options; which of them apply to the view is
+// decided below, as it is on the native side.
+type AndroidOptions = Partial<{
+  backingView: AndroidBackingView;
+  opaque: boolean;
+  zOrderOnTop: boolean;
+  zOrderMediaOverlay: boolean;
+}>;
+
+const options = (android?: AndroidCanvasProps): AndroidOptions =>
+  (android ?? {}) as AndroidOptions;
+
 // Anything else reaching the native component would hit the generated
 // string-enum parser, which aborts on unknown values.
-const resolveSurfaceType = (
-  surfaceType: AndroidSurfaceType | undefined,
-): "auto" | AndroidSurfaceType =>
-  surfaceType === "SurfaceView" ||
-  surfaceType === "TextureView" ||
-  surfaceType === "HardwareBufferView"
-    ? surfaceType
-    : "auto";
-
-// The props the Android backing view is chosen from when the canvas mounts.
-interface BackingViewProps {
-  opaque: boolean;
-  android?: AndroidCanvasProps;
-}
+const resolveBackingView = (
+  android?: AndroidCanvasProps,
+): AndroidBackingView => {
+  const { backingView } = options(android);
+  return backingView === "SurfaceView" || backingView === "HardwareBufferView"
+    ? backingView
+    : "TextureView";
+};
 
-// The backing view the props select, see WebGPUView.resolveKind().
-const resolveKind = ({ opaque, android }: BackingViewProps) => {
-  const surfaceType = resolveSurfaceType(android?.surfaceType);
-  if (surfaceType !== "auto") {
-    return surfaceType;
+// Whether the canvas composites as opaque, see BackingViewKind.resolveOpaque():
+// a SurfaceView is opaque unless asked otherwise, a TextureView is translucent
+// unless asked otherwise, and a HardwareBufferView always composites with
+// alpha.
+const resolveOpaque = (android?: AndroidCanvasProps): boolean => {
+  const { opaque } = options(android);
+  switch (resolveBackingView(android)) {
+    case "SurfaceView":
+      return opaque !== false;
+    case "TextureView":
+      return opaque === true;
+    case "HardwareBufferView":
+      return false;
   }
-  return opaque ? "SurfaceView" : "TextureView";
 };
 
-const warnIgnored = (prop: string) =>
+// The native props the `android` prop resolves to.
+const androidNativeProps = (android?: AndroidCanvasProps) => {
+  const backingView = resolveBackingView(android);
+  const { zOrderOnTop, zOrderMediaOverlay } = options(android);
+  const surfaceView = backingView === "SurfaceView";
+  return {
+    androidBackingView: backingView,
+    androidOpaque: resolveOpaque(android),
+    androidZOrderOnTop: surfaceView && !!zOrderOnTop,
+    androidZOrderMediaOverlay: surfaceView && !!zOrderMediaOverlay,
+  };
+};
+
+const warnIgnoredChange = (prop: string) =>
   console.warn(
     `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.",
   );
 
-// Warns, in development on Android, about a change of these props that the
-// native view ignores: the backing view is chosen from them when the canvas
-// mounts (see WebGPUView.java, whose setters these rules mirror). The native
-// side only says so in logcat, which is not where a JS developer looks.
-const useBackingViewWarning = (props: BackingViewProps) => {
-  const mount = useRef(props);
-  const prev = useRef(props);
+// Warns, in development on Android, about an option a mounting canvas asks
+// for that the native view cannot honour, and about a change of these props
+// that the native view ignores: the backing view is created from them when
+// the canvas mounts (see WebGPUView.java, whose setters these rules mirror).
+// The native side only says so in logcat, which is not where a JS developer
+// looks.
+const useBackingViewWarning = (android?: AndroidCanvasProps) => {
+  const mount = useRef(android);
+  const prev = useRef(android);
+  useEffect(() => {
+    if (
+      __DEV__ &&
+      Platform.OS === "android" &&
+      resolveBackingView(mount.current) === "HardwareBufferView" &&
+      Number(Platform.Version) < 29
+    ) {
+      console.warn(
+        "android.backingView: HardwareBufferView needs Android 10, the " +
+          "canvas uses a TextureView.",
+      );
+    }
+  }, []);
   useEffect(() => {
     if (__DEV__ && Platform.OS === "android") {
       const { current: before } = prev;
-      if (
-        resolveSurfaceType(before.android?.surfaceType) !==
-        resolveSurfaceType(props.android?.surfaceType)
-      ) {
-        warnIgnored("android.surfaceType");
+      if (resolveBackingView(before) !== resolveBackingView(android)) {
+        warnIgnoredChange("android.backingView");
       }
       // Only a SurfaceView has a z-order of its own, which Android 11 and
       // later changes in place.
+      const zOrderAtMount =
+        resolveBackingView(mount.current) === "SurfaceView" &&
+        Number(Platform.Version) < 30;
+      const was = options(before);
+      const is = options(android);
+      if (zOrderAtMount && !!was.zOrderOnTop !== !!is.zOrderOnTop) {
+        warnIgnoredChange("android.zOrderOnTop");
+      }
       if (
-        !!before.android?.zOrderOnTop !== !!props.android?.zOrderOnTop &&
-        resolveKind(mount.current) === "SurfaceView" &&
-        Number(Platform.Version) < 30
+        zOrderAtMount &&
+        !!was.zOrderMediaOverlay !== !!is.zOrderMediaOverlay
       ) {
-        warnIgnored("android.zOrderOnTop");
+        warnIgnoredChange("android.zOrderMediaOverlay");
       }
     }
-    prev.current = props;
+    prev.current = android;
   });
 };
 
@@ -138,15 +220,10 @@ const measureLayout = (view: View) => {
   return size;
 };
 
-export const Canvas = ({
-  opaque = true,
-  android,
-  ref,
-  ...props
-}: CanvasProps) => {
+export const Canvas = ({ android, ref, ...props }: CanvasProps) => {
   const viewRef = useRef<View>(null);
   const [contextId, _] = useState(() => generateContextId());
-  useBackingViewWarning({ opaque, android });
+  useBackingViewWarning(android);
   // Retire the native registry entry for this contextId on unmount. When a
   // native surface is still attached, this is a no-op and the native view's
   // own teardown retires the entry instead — which keeps StrictMode's
@@ -190,9 +267,7 @@ export const Canvas = ({
       <WebGPUNativeView
         style={{ flex: 1 }}
         contextId={contextId}
-        opaque={opaque}
-        androidSurfaceType={resolveSurfaceType(android?.surfaceType)}
-        androidZOrderOnTop={!!android?.zOrderOnTop}
+        {...androidNativeProps(android)}
       />
     </View>
   );

package/src/WebGPUViewNativeComponent.ts

@@ -7,12 +7,14 @@ import type { ViewProps } from "react-native";
 
 export interface NativeProps extends ViewProps {
   contextId: Int32;
-  opaque?: WithDefault<boolean, true>;
-  androidSurfaceType?: WithDefault<
-    "auto" | "SurfaceView" | "TextureView" | "HardwareBufferView",
-    "auto"
+  // The `android` prop, resolved (see Canvas.tsx)
+  androidBackingView?: WithDefault<
+    "TextureView" | "SurfaceView" | "HardwareBufferView",
+    "TextureView"
   >;
+  androidOpaque?: WithDefault<boolean, false>;
   androidZOrderOnTop?: WithDefault<boolean, false>;
+  androidZOrderMediaOverlay?: WithDefault<boolean, false>;
 }
 
 // eslint-disable-next-line import/no-default-export

package/src/WebGPUViewNativeComponent.web.ts

@@ -7,9 +7,11 @@ import { contextIdToId } from "./utils";
 
 export interface NativeProps extends ViewProps {
   contextId: Int32;
-  opaque?: boolean;
-  androidSurfaceType?: "auto" | "SurfaceView" | "TextureView";
+  // The `android` prop, resolved: Android-only, never reaches the DOM
+  androidBackingView?: "TextureView" | "SurfaceView" | "HardwareBufferView";
+  androidOpaque?: boolean;
   androidZOrderOnTop?: boolean;
+  androidZOrderMediaOverlay?: boolean;
 }
 
 // eslint-disable-next-line import/no-default-export
@@ -19,9 +21,10 @@ export default function WebGPUViewNativeComponent(
   const {
     contextId,
     style,
-    opaque = true,
-    androidSurfaceType: _androidSurfaceType,
+    androidBackingView: _androidBackingView,
+    androidOpaque: _androidOpaque,
     androidZOrderOnTop: _androidZOrderOnTop,
+    androidZOrderMediaOverlay: _androidZOrderMediaOverlay,
     ...rest
   } = props;
 
@@ -34,7 +37,6 @@ export default function WebGPUViewNativeComponent(
     style: {
       ...styles.view,
       ...styles.flex1,
-      ...(opaque ? { backgroundColor: "white" } : {}),
       ...(typeof style === "object" ? style : {}),
     },
   });

package/src/WebPolyfillGPUModule.ts

@@ -58,8 +58,11 @@ function makeWebGPUCanvasContext(
   return Object.assign(context, { present: () => {} });
 }
 
+let nextContextId = 1;
+
 // @ts-expect-error - polyfill for RNWebGPU native module
 window.RNWebGPU = {
+  allocateContextId: () => nextContextId++,
   getNativeSurface,
   // Unlike native, this can return null; Canvas.getContext() is typed
   // `RNCanvasContext | null` and passes it through.

package/src/importDevice.ts

@@ -9,8 +9,9 @@
  * ```
  *
  * This is only sound when the exporting library links the same single Dawn
- * copy as react-native-webgpu and shares its wgpu::Instance (react-native-skia
- * does both).
+ * copy as react-native-webgpu (react-native-skia does). The device stays on
+ * its owner's Dawn instance and its async operations are pumped there, so the
+ * two libraries do not have to share an instance.
  */
 export const importDevice = (pointer: bigint): GPUDevice => {
   if (typeof RNWebGPU === "undefined") {

package/src/index.tsx

@@ -70,12 +70,23 @@ declare global {
   var RNWebGPU: {
     gpu: GPU;
     fabric: boolean;
+    // The id a Canvas about to mount registers under, unique for the life of
+    // the process (the native surface registry outlives a reload).
+    allocateContextId: () => number;
     getNativeSurface: (contextId: number) => NativeCanvas;
     MakeWebGPUCanvasContext: (
       contextId: number,
       width: number,
       height: number,
     ) => RNCanvasContext;
+    // A canvas context presenting to a native window that is not a WebGPU
+    // view, e.g. a MediaCodec encoder's input Surface: an ANativeWindow*
+    // (Android) or a CAMetalLayer* (Apple).
+    MakeWebGPUCanvasContextFromNativeWindow: (
+      window: bigint,
+      width: number,
+      height: number,
+    ) => RNCanvasContext;
     // Retires a canvas context; called by Canvas on unmount (the Canvas owns
     // the native registry entry for its contextId).
     destroyContext: (contextId: number) => void;
@@ -97,7 +108,7 @@ declare global {
     createVideoFrameFromNativeBuffer: (pointer: bigint) => NativeVideoFrame;
     // Wrap an externally created WGPUDevice pointer (e.g. Skia's Graphite
     // device from Skia.getNativeDevice()) into a GPUDevice. Requires the
-    // exporter to share this process's single Dawn instance.
+    // exporter to link this process's single Dawn copy.
     importDevice: (pointer: bigint) => GPUDevice;
     // Wrap an externally created WGPUTexture pointer into a GPUTexture,
     // taking ownership of one reference (pair with producers that return a
@@ -159,9 +170,9 @@ declare global {
   // What is captured is what the platform renders for the view hierarchy
   // (iOS: UIView.drawViewHierarchyInRect; Android API 29+: HardwareRenderer
   // over the views' display lists, older: View.draw into a software canvas).
-  // On Android, SurfaceView content (a WebGPU Canvas with the default
-  // "SurfaceView" surfaceType, video players) is not part of the hierarchy and
-  // comes out blank; use `android={{ surfaceType: "TextureView" }}` for a
+  // On Android, SurfaceView content (a WebGPU Canvas with
+  // `android={{ backingView: "SurfaceView" }}`, video players) is not part of
+  // the hierarchy and comes out blank; keep the default TextureView for a
   // canvas that must be captured.
   interface GPUQueue {
     drawElementImageToTexture(

package/src/mock.ts

@@ -82,8 +82,11 @@ const NOT_AVAILABLE_UNDER_JEST =
   "is not available under Jest - react-native-webgpu has no native implementation in tests (see react-native-webgpu/jestSetup.js)";
 
 export type {
+  AndroidBackingView,
   AndroidCanvasProps,
-  AndroidSurfaceType,
+  AndroidHardwareBufferViewProps,
+  AndroidSurfaceViewProps,
+  AndroidTextureViewProps,
   CanvasProps,
   CanvasRef,
   NativeCanvas,
@@ -91,12 +94,7 @@ export type {
 } from "./Canvas";
 
 // Strip the same props the real Canvas keeps off its outer View.
-export const Canvas = ({
-  opaque: _opaque,
-  android: _android,
-  ref,
-  ...props
-}: CanvasProps) => {
+export const Canvas = ({ android: _android, ref, ...props }: CanvasProps) => {
   React.useImperativeHandle(ref, () => ({
     getContextId: () => -1,
     getContext: (_contextName: "webgpu"): RNCanvasContext | null => null,