🔧

apps/example/ios/Podfile.lock

@@ -937,7 +937,7 @@ PODS:
     - React-debug
   - react-native-safe-area-context (4.11.0):
     - React-Core
-  - react-native-wgpu (0.1.18):
+  - react-native-wgpu (0.1.19):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1528,7 +1528,7 @@ SPEC CHECKSUMS:
   React-logger: 29fa3e048f5f67fe396bc08af7606426d9bd7b5d
   React-Mapbuffer: bf56147c9775491e53122a94c423ac201417e326
   react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
-  react-native-wgpu: 0f842ae9566fdf3b6ff05034bf9cbe99e90c2b5e
+  react-native-wgpu: 5fd8cb5fd7bd00c88831d29438697d897fb680e8
   React-nativeconfig: 9f223cd321823afdecf59ed00861ab2d69ee0fc1
   React-NativeModulesApple: ff7efaff7098639db5631236cfd91d60abff04c0
   React-perflogger: 32ed45d9cee02cf6639acae34251590dccd30994

apps/example/src/Cube/Cube.tsx

@@ -176,12 +176,7 @@ export function Cube() {
 
   return (
     <View style={style.container}>
-      <Canvas
-        ref={ref}
-        style={style.webgpu}
-        androidTransparency
-        androidExperimental
-      />
+      <Canvas ref={ref} style={style.webgpu} transparent />
     </View>
   );
 }

apps/example/src/GradientTiles/GradientTiles.tsx

@@ -110,7 +110,7 @@ export function GradientTiles() {
 
   return (
     <View style={style.container}>
-      <Canvas ref={ref} style={style.webgpu} androidTransparency />
+      <Canvas ref={ref} style={style.webgpu} transparent />
       <View style={style.controls}>
         <View style={style.buttonRow}>
           <Text style={style.spanText}>span x: </Text>

apps/example/src/Resize/Resize.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect } from "react";
 import { Dimensions, PixelRatio, View } from "react-native";
 import { Canvas } from "react-native-wgpu";
 import Animated, {
@@ -96,12 +96,13 @@ export const Resize = () => {
       }
       if (renderTargetView) {
         const commandEncoder = device.createCommandEncoder();
+        const a = 0.7;
         const renderPassDescriptor: GPURenderPassDescriptor = {
           colorAttachments: [
             {
               view: renderTargetView,
               resolveTarget: context.getCurrentTexture().createView(),
-              clearValue: [0.5, 0.5, 0.5, 0.5],
+              clearValue: [a, a, a, a],
               loadOp: "clear",
               storeOp: "store",
             },
@@ -124,12 +125,7 @@ export const Resize = () => {
   return (
     <View style={{ flex: 1, alignItems: "center" }}>
       <Animated.View style={style}>
-        <Canvas
-          ref={ref}
-          style={{ flex: 0.5 }}
-          androidExperimental
-          androidTransparency
-        />
+        <Canvas ref={ref} style={{ flex: 0.5 }} transparent />
       </Animated.View>
     </View>
   );

apps/example/src/Triangle/HelloTriangle.tsx

@@ -80,11 +80,7 @@ export function HelloTriangle() {
   return (
     <View style={style.container}>
       <View style={{ flex: 1, backgroundColor: "#3498db" }} />
-      <Canvas
-        ref={ref}
-        style={StyleSheet.absoluteFill}
-        androidTransparency={true}
-      />
+      <Canvas ref={ref} style={StyleSheet.absoluteFill} transparent />
     </View>
   );
 }

apps/example/src/Triangle/HelloTriangleMSAA.tsx

@@ -91,7 +91,7 @@ export function HelloTriangleMSAA() {
 
   return (
     <View style={style.container}>
-      <Canvas ref={ref} style={style.webgpu} />
+      <Canvas ref={ref} style={style.webgpu} transparent />
     </View>
   );
 }

packages/webgpu/android/src/main/java/com/webgpu/SurfaceView2.java → packages/webgpu/android/src/main/java/com/webgpu/WebGPUSurfaceViewWithSC.java

@@ -15,13 +15,13 @@
 
 @SuppressLint("ViewConstructor")
 @RequiresApi(api = Build.VERSION_CODES.Q)
-public class SurfaceView2 extends SurfaceView implements SurfaceHolder.Callback {
+public class WebGPUSurfaceViewWithSC extends SurfaceView implements SurfaceHolder.Callback {
 
   WebGPUAPI mApi;
   SurfaceControl mSurfaceControl;
   Surface mSurface;
 
-  public SurfaceView2(Context context, WebGPUAPI api) {
+  public WebGPUSurfaceViewWithSC(Context context, WebGPUAPI api) {
     super(context);
     mApi = api;
     getHolder().addCallback(this);
@@ -48,7 +48,7 @@ public void surfaceCreated(@NonNull SurfaceHolder holder) {
     } else {
       SurfaceControl.Builder scb = new SurfaceControl.Builder();
       scb.setName("WebGPUView");
-      scb.setOpaque(false);
+      scb.setOpaque(true);
       scb.setBufferSize(getWidth(), getHeight());
       scb.setParent(getSurfaceControl());
       scb.setFormat(PixelFormat.RGBA_8888);

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

@@ -5,36 +5,17 @@
 import android.view.Surface;
 import android.view.View;
 
-import androidx.annotation.NonNull;
-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 @ViewType String mName = null;
+  private boolean mTransparent = false;
   private WebGPUModule mModule;
-  private View mView;
+  private View mView = null;
 
   WebGPUView(Context context) {
     super(context);
@@ -50,28 +31,21 @@ public void setContextId(int contextId) {
     mContextId = contextId;
   }
 
-  public void setView(@NonNull @ViewType String name) {
+  public void setTransparent(boolean value) {
     Context ctx = getContext();
-    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");
-          }
+    if (value != mTransparent || mView == null) {
+      if (mView != null) {
+        removeView(mView);
+      }
+      mTransparent = value;
+      if (mTransparent) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+          mView = new WebGPUAHBView(ctx, this);
+        } else {
+          mView = new WebGPUTextureView(ctx, this);
         }
-        default -> mView = new WebGPUSurfaceView(ctx, this);
+      } else {
+        mView = new WebGPUSurfaceView(ctx, this);
       }
       addView(mView);
     }

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

@@ -25,9 +25,9 @@ public WebGPUView createViewInstance(@NonNull ThemedReactContext context) {
   }
 
   @Override
-  @ReactProp(name = "androidView")
-  public void setAndroidView(WebGPUView view, @Nullable String value) {
-    view.setView(value == null ? WebGPUView.SURFACE_VIEW : value);
+  @ReactProp(name = "transparent")
+  public void setTransparent(WebGPUView view, boolean value) {
+    view.setTransparent(value);
   }
 
   @Override

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

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

packages/webgpu/package.json

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