react-native-wgpu 0.1.16 → 0.1.18

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

@@ -0,0 +1,79 @@
+package com.webgpu;
+
+import android.annotation.SuppressLint;
+import android.content.Context;
+import android.graphics.PixelFormat;
+import android.os.Build;
+import android.view.Surface;
+import android.view.SurfaceControl;
+import android.view.SurfaceHolder;
+import android.view.SurfaceView;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.RequiresApi;
+
+
+@SuppressLint("ViewConstructor")
+@RequiresApi(api = Build.VERSION_CODES.Q)
+public class SurfaceView2 extends SurfaceView implements SurfaceHolder.Callback {
+
+  WebGPUAPI mApi;
+  SurfaceControl mSurfaceControl;
+  Surface mSurface;
+
+  public SurfaceView2(Context context, WebGPUAPI api) {
+    super(context);
+    mApi = api;
+    getHolder().addCallback(this);
+  }
+
+  @Override
+  protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
+    super.onLayout(changed, left, top, right, bottom);
+
+  }
+
+  @Override
+  protected void onDetachedFromWindow() {
+    super.onDetachedFromWindow();
+  }
+
+  @Override
+  public void surfaceCreated(@NonNull SurfaceHolder holder) {
+    if (mSurfaceControl != null) {
+      SurfaceControl.Transaction tr = new SurfaceControl.Transaction();
+      tr.setVisibility(mSurfaceControl, true);
+      tr.reparent(mSurfaceControl, getSurfaceControl());
+      tr.apply();
+    } else {
+      SurfaceControl.Builder scb = new SurfaceControl.Builder();
+      scb.setName("WebGPUView");
+      scb.setOpaque(false);
+      scb.setBufferSize(getWidth(), getHeight());
+      scb.setParent(getSurfaceControl());
+      scb.setFormat(PixelFormat.RGBA_8888);
+      mSurfaceControl = scb.build();
+      mSurface = new Surface(mSurfaceControl);
+      mApi.surfaceCreated(mSurface);
+    }
+    SurfaceControl.Transaction tr = new SurfaceControl.Transaction();
+    tr.setVisibility(mSurfaceControl, true);
+    tr.apply();
+  }
+
+  @Override
+  public void surfaceChanged(@NonNull SurfaceHolder holder, int format, int width, int height) {
+    mApi.surfaceChanged(mSurface);
+    SurfaceControl.Transaction tr = new SurfaceControl.Transaction();
+    tr.setVisibility(mSurfaceControl, true);
+    tr.setBufferSize(mSurfaceControl, getWidth(), getHeight());
+    tr.apply();
+  }
+
+  @Override
+  public void surfaceDestroyed(@NonNull SurfaceHolder holder) {
+    SurfaceControl.Transaction tr = new SurfaceControl.Transaction();
+    tr.reparent(mSurfaceControl, null);
+    tr.apply();
+  }
+}

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

@@ -17,6 +17,7 @@ public class WebGPUTextureView extends TextureView implements TextureView.Surfac
   public WebGPUTextureView(Context context, WebGPUAPI api) {
     super(context);
     mApi = api;
+    setOpaque(false);
     setSurfaceTextureListener(this);
   }
 

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

@@ -5,13 +5,35 @@ import android.os.Build;
 import android.view.Surface;
 import android.view.View;
 
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.annotation.StringDef;
+
 import com.facebook.proguard.annotations.DoNotStrip;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.views.view.ReactViewGroup;
 
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+
 public class WebGPUView extends ReactViewGroup implements WebGPUAPI {
+
+  public static final String SURFACE_VIEW = "SurfaceView";
+  public static final String TEXTURE_VIEW = "TextureView";
+  public static final String HARDWARE_BUFFER = "HardwareBuffer";
+  public static final String SURFACE_VIEW2 = "SurfaceView2";
+
+  @Retention(RetentionPolicy.SOURCE)
+  @StringDef({
+    SURFACE_VIEW,
+    TEXTURE_VIEW,
+    HARDWARE_BUFFER,
+    SURFACE_VIEW2
+  })
+  public @interface ViewType {}
+
   private int mContextId;
-  private boolean mTransparent;
+  private @ViewType String mName = null;
   private WebGPUModule mModule;
   private View mView;
 
@@ -29,21 +51,31 @@ public class WebGPUView extends ReactViewGroup implements WebGPUAPI {
     mContextId = contextId;
   }
 
-  public void setTransparent(boolean transparent) {
+  public void setView(@NonNull @ViewType String name) {
     Context ctx = getContext();
-    if (mTransparent != transparent) {
-      removeAllViews();
-    }
-    mTransparent = transparent;
-//    if (mTransparent && Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-//      mView = new WebGPUAHBView(ctx, this);
-//    } else
-    if (transparent) {
-      mView = new WebGPUTextureView(ctx, this);
-    } else {
-      mView = new WebGPUSurfaceView(ctx, this);
+    if (mName == null || !mName.equals(name)) {
+      removeView(mView);
+      mName = name;
+      switch (name) {
+        case TEXTURE_VIEW -> mView = new WebGPUTextureView(ctx, this);
+        case HARDWARE_BUFFER -> {
+          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+            mView = new WebGPUAHBView(ctx, this);
+          } else {
+            throw new RuntimeException("HardwareBuffer Canvas implementation is only available on API Level 29 and above");
+          }
+        }
+        case SURFACE_VIEW2 -> {
+          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+            mView = new SurfaceView2(ctx, this);
+          } else {
+            throw new RuntimeException("HardwareBuffer Canvas implementation is only available on API Level 29 and above");
+          }
+        }
+        default -> mView = new WebGPUSurfaceView(ctx, this);
+      }
+      addView(mView);
     }
-    addView(mView);
   }
 
   @Override

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;
@@ -24,9 +25,9 @@ public class WebGPUViewManager extends WebGPUViewManagerSpec<WebGPUView> {
   }
 
   @Override
-  @ReactProp(name = "androidTransparency")
-  public void setAndroidTransparency(WebGPUView view, boolean value) {
-    view.setTransparent(value);
+  @ReactProp(name = "androidView")
+  public void setAndroidView(WebGPUView view, @Nullable String value) {
+    view.setView(value == null ? WebGPUView.SURFACE_VIEW : value);
   }
 
   @Override

package/android/src/oldarch/com/webgpu/WebGPUViewManagerSpec.java

@@ -8,5 +8,5 @@ import com.facebook.react.uimanager.SimpleViewManager;
 
 public abstract class WebGPUViewManagerSpec<T extends View> extends SimpleViewManager<T> {
   public abstract void setContextId(T view, int contextId);
-  public abstract void setAndroidTransparency(T view, boolean transparency);
+  public abstract void setAndroidView(T view, @Nullable String name);
 }

package/cpp/rnwgpu/SurfaceRegistry.h

@@ -22,7 +22,11 @@ struct Size {
 class SurfaceInfo {
 public:
   SurfaceInfo(wgpu::Instance gpu, int width, int height)
-      : gpu(gpu), width(width), height(height) {}
+      : gpu(std::move(gpu)), width(width), height(height) {}
+
+  ~SurfaceInfo() {
+    surface = nullptr;
+  }
 
   void reconfigure(int newWidth, int newHeight) {
     std::unique_lock<std::shared_mutex> lock(_mutex);

package/lib/commonjs/Canvas.js

@@ -56,6 +56,7 @@ const useSizePaper = _ref => {
 const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)(({
   onLayout: _onLayout,
   androidTransparency,
+  androidExperimental,
   ...props
 }, ref) => {
   const viewRef = (0, _react.useRef)(null);
@@ -106,7 +107,9 @@ const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)(({
       flex: 1
     },
     contextId: contextId,
-    androidTransparency: !!androidTransparency
+    androidView:
+    // eslint-disable-next-line no-nested-ternary
+    androidExperimental ? androidTransparency ? "HardwareBuffer" : "SurfaceView2" : androidTransparency ? "TextureView" : "SurfaceView"
   }));
 });
 //# sourceMappingURL=Canvas.js.map

package/lib/commonjs/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_react","_WebGPUViewNativeComponent","_interopRequireDefault","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","CONTEXT_COUNTER","generateContextId","useSizeFabric","ref","size","setSize","useState","useLayoutEffect","current","Error","measureInWindow","_x","_y","width","height","onLayout","undefined","useSizePaper","_ref","useCallback","nativeEvent","layout","Canvas","exports","forwardRef","_onLayout","androidTransparency","props","viewRef","useRef","FABRIC","RNWebGPU","fabric","useSize","contextId","_","cb","useEffect","useImperativeHandle","getContextId","getNativeSurface","whenReady","callback","getContext","contextName","MakeWebGPUCanvasContext","React","createElement","View","collapsable","style","flex"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_react","_WebGPUViewNativeComponent","_interopRequireDefault","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","CONTEXT_COUNTER","generateContextId","useSizeFabric","ref","size","setSize","useState","useLayoutEffect","current","Error","measureInWindow","_x","_y","width","height","onLayout","undefined","useSizePaper","_ref","useCallback","nativeEvent","layout","Canvas","exports","forwardRef","_onLayout","androidTransparency","androidExperimental","props","viewRef","useRef","FABRIC","RNWebGPU","fabric","useSize","contextId","_","cb","useEffect","useImperativeHandle","getContextId","getNativeSurface","whenReady","callback","getContext","contextName","MakeWebGPUCanvasContext","React","createElement","View","collapsable","style","flex","androidView"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Canvas.js

@@ -49,6 +49,7 @@ const useSizePaper = _ref => {
 export const Canvas = /*#__PURE__*/forwardRef(({
   onLayout: _onLayout,
   androidTransparency,
+  androidExperimental,
   ...props
 }, ref) => {
   const viewRef = useRef(null);
@@ -99,7 +100,9 @@ export const Canvas = /*#__PURE__*/forwardRef(({
       flex: 1
     },
     contextId: contextId,
-    androidTransparency: !!androidTransparency
+    androidView:
+    // eslint-disable-next-line no-nested-ternary
+    androidExperimental ? androidTransparency ? "HardwareBuffer" : "SurfaceView2" : androidTransparency ? "TextureView" : "SurfaceView"
   }));
 });
 //# sourceMappingURL=Canvas.js.map

package/lib/module/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","forwardRef","useEffect","useImperativeHandle","useRef","useState","useLayoutEffect","useCallback","WebGPUNativeView","CONTEXT_COUNTER","generateContextId","useSizeFabric","ref","size","setSize","current","Error","measureInWindow","_x","_y","width","height","onLayout","undefined","useSizePaper","_ref","nativeEvent","layout","Canvas","_onLayout","androidTransparency","props","viewRef","FABRIC","RNWebGPU","fabric","useSize","contextId","_","cb","getContextId","getNativeSurface","whenReady","callback","getContext","contextName","MakeWebGPUCanvasContext","React","createElement","_extends","collapsable","style","flex"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["View","forwardRef","useEffect","useImperativeHandle","useRef","useState","useLayoutEffect","useCallback","WebGPUNativeView","CONTEXT_COUNTER","generateContextId","useSizeFabric","ref","size","setSize","current","Error","measureInWindow","_x","_y","width","height","onLayout","undefined","useSizePaper","_ref","nativeEvent","layout","Canvas","_onLayout","androidTransparency","androidExperimental","props","viewRef","FABRIC","RNWebGPU","fabric","useSize","contextId","_","cb","getContextId","getNativeSurface","whenReady","callback","getContext","contextName","MakeWebGPUCanvasContext","React","createElement","_extends","collapsable","style","flex","androidView"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../module/Canvas.js"],"names":[],"mappings":"AAgDA,mGAuDG"}
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../module/Canvas.js"],"names":[],"mappings":"AAgDA,mGA0DG"}

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

@@ -28,6 +28,7 @@ export interface CanvasRef {
 }
 export declare const Canvas: import("react").ForwardRefExoticComponent<ViewProps & {
     androidTransparency?: boolean;
+    androidExperimental?: boolean;
 } & import("react").RefAttributes<CanvasRef>>;
 export {};
 //# 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,KAAK,EAAE,SAAS,EAAqB,MAAM,cAAc,CAAC;AAoBjE,OAAO,CAAC,MAAM,CAAC;IAEb,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;QACrB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,eAAe,GAAG,WAAW,KAAK,MAAM,CAAC;QACvE,iBAAiB,EAAE,OAAO,iBAAiB,CAAC;KAC7C,CAAC;CACH;AAED,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,UAAU,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC;IAC1D,gBAAgB,EAAE,MAAM,YAAY,CAAC;IACrC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC3C;AAqCD,eAAO,MAAM,MAAM;0BAEmB,OAAO;6CAmD3C,CAAC"}
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../src/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAqB,MAAM,cAAc,CAAC;AAoBjE,OAAO,CAAC,MAAM,CAAC;IAEb,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;QACrB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,eAAe,GAAG,WAAW,KAAK,MAAM,CAAC;QACvE,iBAAiB,EAAE,OAAO,iBAAiB,CAAC;KAC7C,CAAC;CACH;AAED,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,UAAU,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC;IAC1D,gBAAgB,EAAE,MAAM,YAAY,CAAC;IACrC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC3C;AAqCD,eAAO,MAAM,MAAM;0BAEmB,OAAO;0BAAwB,OAAO;6CAiE3E,CAAC"}

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

@@ -2,7 +2,7 @@ import type { ViewProps } from "react-native";
 import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
 interface NativeProps extends ViewProps {
     contextId?: Int32;
-    androidTransparency?: boolean;
+    androidView?: string;
 }
 declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<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,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAEvE,UAAU,WAAY,SAAQ,SAAS;IACrC,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;;AAGD,wBAAiE"}
+{"version":3,"file":"WebGPUViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/WebGPUViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAEvE,UAAU,WAAY,SAAQ,SAAS;IACrC,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;;AAGD,wBAAiE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Canvas.tsx

@@ -92,55 +92,69 @@ const useSizePaper = (_ref: RefObject<View>) => {
 
 export const Canvas = forwardRef<
   CanvasRef,
-  ViewProps & { androidTransparency?: boolean }
->(({ onLayout: _onLayout, androidTransparency, ...props }, ref) => {
-  const viewRef = useRef(null);
-  const FABRIC = RNWebGPU.fabric;
-  const useSize = FABRIC ? useSizeFabric : useSizePaper;
-  const [contextId, _] = useState(() => generateContextId());
-  const cb = useRef<() => void>();
-  const { size, onLayout } = useSize(viewRef);
-  useEffect(() => {
-    if (size && cb.current) {
-      cb.current();
-    }
-  }, [size]);
-  useImperativeHandle(ref, () => ({
-    getContextId: () => contextId,
-    getNativeSurface: () => {
-      if (size === null) {
-        throw new Error("[WebGPU] Canvas size is not available yet");
-      }
-      return RNWebGPU.getNativeSurface(contextId);
-    },
-    whenReady(callback: () => void) {
-      if (size === null) {
-        cb.current = callback;
-      } else {
-        callback();
-      }
-    },
-    getContext(contextName: "webgpu"): RNCanvasContext | null {
-      if (contextName !== "webgpu") {
-        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
+  ViewProps & { androidTransparency?: boolean; androidExperimental?: boolean }
+>(
+  (
+    { onLayout: _onLayout, androidTransparency, androidExperimental, ...props },
+    ref,
+  ) => {
+    const viewRef = useRef(null);
+    const FABRIC = RNWebGPU.fabric;
+    const useSize = FABRIC ? useSizeFabric : useSizePaper;
+    const [contextId, _] = useState(() => generateContextId());
+    const cb = useRef<() => void>();
+    const { size, onLayout } = useSize(viewRef);
+    useEffect(() => {
+      if (size && cb.current) {
+        cb.current();
       }
-      if (size === null) {
-        throw new Error("[WebGPU] Canvas size is not available yet");
-      }
-      return RNWebGPU.MakeWebGPUCanvasContext(
-        contextId,
-        size.width,
-        size.height,
-      );
-    },
-  }));
-  return (
-    <View collapsable={false} ref={viewRef} onLayout={onLayout} {...props}>
-      <WebGPUNativeView
-        style={{ flex: 1 }}
-        contextId={contextId}
-        androidTransparency={!!androidTransparency}
-      />
-    </View>
-  );
-});
+    }, [size]);
+    useImperativeHandle(ref, () => ({
+      getContextId: () => contextId,
+      getNativeSurface: () => {
+        if (size === null) {
+          throw new Error("[WebGPU] Canvas size is not available yet");
+        }
+        return RNWebGPU.getNativeSurface(contextId);
+      },
+      whenReady(callback: () => void) {
+        if (size === null) {
+          cb.current = callback;
+        } else {
+          callback();
+        }
+      },
+      getContext(contextName: "webgpu"): RNCanvasContext | null {
+        if (contextName !== "webgpu") {
+          throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
+        }
+        if (size === null) {
+          throw new Error("[WebGPU] Canvas size is not available yet");
+        }
+        return RNWebGPU.MakeWebGPUCanvasContext(
+          contextId,
+          size.width,
+          size.height,
+        );
+      },
+    }));
+    return (
+      <View collapsable={false} ref={viewRef} onLayout={onLayout} {...props}>
+        <WebGPUNativeView
+          style={{ flex: 1 }}
+          contextId={contextId}
+          androidView={
+            // eslint-disable-next-line no-nested-ternary
+            androidExperimental
+              ? androidTransparency
+                ? "HardwareBuffer"
+                : "SurfaceView2"
+              : androidTransparency
+                ? "TextureView"
+                : "SurfaceView"
+          }
+        />
+      </View>
+    );
+  },
+);

package/src/WebGPUViewNativeComponent.ts

@@ -4,7 +4,7 @@ import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
 
 interface NativeProps extends ViewProps {
   contextId?: Int32;
-  androidTransparency?: boolean;
+  androidView?: string;
 }
 
 // eslint-disable-next-line import/no-default-export