react-native-webgpu 0.16.1 → 0.17.0

package/lib/typescript/lib/module/Canvas.d.ts

@@ -1,6 +1,5 @@
-export function Canvas({ opaque, android, ref, ...props }: {
+export function Canvas({ android, ref, ...props }: {
     [x: string]: any;
-    opaque?: boolean | undefined;
     android: any;
     ref: any;
 }): React.CElement<import("react-native").ViewProps, View>;

package/lib/typescript/lib/module/Canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../module/Canvas.js"],"names":[],"mappings":"AAwFO;;;;;2DAqDN;qBA3I8B,cAAc;kBAD2B,OAAO"}
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../module/Canvas.js"],"names":[],"mappings":"AA6IO;;;;2DA8CN;qBAzL8B,cAAc;kBAD2B,OAAO"}

package/lib/typescript/lib/module/WebGPUViewNativeComponent.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../module/WebGPUViewNativeComponent.web.js"],"names":[],"mappings":"AAIA,gHAyBC;kBA7BiB,OAAO"}
+{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../module/WebGPUViewNativeComponent.web.js"],"names":[],"mappings":"AAIA,gHAuBC;kBA3BiB,OAAO"}

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

@@ -38,9 +38,8 @@ export namespace GPUMapMode {
     let READ: number;
     let WRITE: number;
 }
-export function Canvas({ opaque: _opaque, android: _android, ref, ...props }: {
+export function Canvas({ android: _android, ref, ...props }: {
     [x: string]: any;
-    opaque: any;
     android: any;
     ref: any;
 }): React.CElement<import("react-native").ViewProps, View>;

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

@@ -1 +1 @@
-{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../module/mock.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEO;;;;;2DAcN;AACM,6DAA6C;AAC7C;;;EAGL;AACK,0DAAoD;AACpD;;;EAGL;AACK;;QAEe;AACf,uCAEN;AACM,mDAEN;AACM,mDAEN;AACM,2CAAqC;;IAEjC,4BAAW;;qBA7GD,cAAc;kBADjB,OAAO"}
+{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../module/mock.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEO;;;;2DAaN;AACM,6DAA6C;AAC7C;;;EAGL;AACK,0DAAoD;AACpD;;;EAGL;AACK;;QAEe;AACf,uCAEN;AACM,mDAEN;AACM,mDAEN;AACM,2CAAqC;;IAEjC,4BAAW;;qBA5GD,cAAc;kBADjB,OAAO"}

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

@@ -2,46 +2,78 @@ import React from "react";
 import type { ViewProps } from "react-native";
 import type { CanvasRef } from "./types";
 export type { CanvasRef, NativeCanvas, RNCanvasContext } from "./types";
-export type AndroidSurfaceType = "SurfaceView" | "TextureView" | "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 Android view a canvas draws into, see {@link AndroidCanvasProps}. */
+export type AndroidBackingView = "TextureView" | "SurfaceView" | "HardwareBufferView";
+/** 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 {
     /**
-     * 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.
+     * 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";
+    /**
+     * 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>;
 }
-export declare const Canvas: ({ opaque, android, ref, ...props }: CanvasProps) => React.JSX.Element;
+export declare const Canvas: ({ android, ref, ...props }: CanvasProps) => React.JSX.Element;
 //# sourceMappingURL=Canvas.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../src/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,SAAS,EAAmB,MAAM,SAAS,CAAC;AAG1D,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAOxE,MAAM,MAAM,kBAAkB,GAC5B,aAAa,GAAG,aAAa,GAAG,oBAAoB,CAAC;AAEvD;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;CAC5B;AAmFD,eAAO,MAAM,MAAM,GAAI,oCAKpB,WAAW,sBAqDb,CAAC"}
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../src/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,SAAS,EAAmB,MAAM,SAAS,CAAC;AAG1D,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAOxE,4EAA4E;AAC5E,MAAM,MAAM,kBAAkB,GAC5B,aAAa,GAAG,aAAa,GAAG,oBAAoB,CAAC;AAEvD,sEAAsE;AACtE,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,yDAAyD;AACzD,MAAM,WAAW,uBAAuB;IACtC;;;;;OAKG;IACH,WAAW,EAAE,aAAa,CAAC;IAC3B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,gEAAgE;AAChE,MAAM,WAAW,8BAA8B;IAC7C;;;;;OAKG;IACH,WAAW,EAAE,oBAAoB,CAAC;CACnC;AAED;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAC1B,uBAAuB,GACvB,uBAAuB,GACvB,8BAA8B,CAAC;AAEnC,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;CAC5B;AAgID,eAAO,MAAM,MAAM,GAAI,4BAA4B,WAAW,sBAmD7D,CAAC"}

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

@@ -2,9 +2,10 @@ import type { Int32, WithDefault } from "react-native/Libraries/Types/CodegenTyp
 import type { ViewProps } from "react-native";
 export interface NativeProps extends ViewProps {
     contextId: Int32;
-    opaque?: WithDefault<boolean, true>;
-    androidSurfaceType?: WithDefault<"auto" | "SurfaceView" | "TextureView" | "HardwareBufferView", "auto">;
+    androidBackingView?: WithDefault<"TextureView" | "SurfaceView" | "HardwareBufferView", "TextureView">;
+    androidOpaque?: WithDefault<boolean, false>;
     androidZOrderOnTop?: WithDefault<boolean, false>;
+    androidZOrderMediaOverlay?: WithDefault<boolean, false>;
 }
 declare const _default: import("react-native").HostComponent<NativeProps>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"WebGPUViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/WebGPUViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,KAAK,EACL,WAAW,EACZ,MAAM,2CAA2C,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACpC,kBAAkB,CAAC,EAAE,WAAW,CAC9B,MAAM,GAAG,aAAa,GAAG,aAAa,GAAG,oBAAoB,EAC7D,MAAM,CACP,CAAC;IACF,kBAAkB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;CAClD;;AAGD,wBAAiE"}
+{"version":3,"file":"WebGPUViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/WebGPUViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,KAAK,EACL,WAAW,EACZ,MAAM,2CAA2C,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,EAAE,KAAK,CAAC;IAEjB,kBAAkB,CAAC,EAAE,WAAW,CAC9B,aAAa,GAAG,aAAa,GAAG,oBAAoB,EACpD,aAAa,CACd,CAAC;IACF,aAAa,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC5C,kBAAkB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACjD,yBAAyB,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;CACzD;;AAGD,wBAAiE"}

package/lib/typescript/src/WebGPUViewNativeComponent.web.d.ts

@@ -3,9 +3,10 @@ import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
 import type { ViewProps } from "react-native";
 export interface NativeProps extends ViewProps {
     contextId: Int32;
-    opaque?: boolean;
-    androidSurfaceType?: "auto" | "SurfaceView" | "TextureView";
+    androidBackingView?: "TextureView" | "SurfaceView" | "HardwareBufferView";
+    androidOpaque?: boolean;
     androidZOrderOnTop?: boolean;
+    androidZOrderMediaOverlay?: boolean;
 }
 export default function WebGPUViewNativeComponent(props: NativeProps): React.JSX.Element;
 //# sourceMappingURL=WebGPUViewNativeComponent.web.d.ts.map

package/lib/typescript/src/WebGPUViewNativeComponent.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../src/WebGPUViewNativeComponent.web.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,EAAE,KAAK,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kBAAkB,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,aAAa,CAAC;IAC5D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAGD,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAC/C,KAAK,EAAE,WAAW,GACjB,KAAK,CAAC,GAAG,CAAC,OAAO,CAuBnB"}
+{"version":3,"file":"WebGPUViewNativeComponent.web.d.ts","sourceRoot":"","sources":["../../../src/WebGPUViewNativeComponent.web.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,EAAE,KAAK,CAAC;IAEjB,kBAAkB,CAAC,EAAE,aAAa,GAAG,aAAa,GAAG,oBAAoB,CAAC;IAC1E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAGD,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAC/C,KAAK,EAAE,WAAW,GACjB,KAAK,CAAC,GAAG,CAAC,OAAO,CAuBnB"}

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.17.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

@@ -12,111 +12,194 @@ function generateContextId() {
   return CONTEXT_COUNTER++;
 }
 
-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 {
   /**
-   * 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.
+   * 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";
+  /**
+   * 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 +221,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 +268,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/index.tsx

@@ -159,9 +159,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,