Merge pull request #20 from blazejkustra/fix/rn-webgpu-worklets-high-bugs

fix(ShaderView): Android transparency + correct worklet WebGPU setup (bump rn-webgpu 0.5.15)

Author: blazejkustra

example/package.json

@@ -24,7 +24,7 @@
     "react-native-reanimated": "4.3.1",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "4.25.2",
-    "react-native-webgpu": "0.5.14",
+    "react-native-webgpu": "0.5.15",
     "react-native-worklets": "0.8.3"
   },
   "devDependencies": {

package.json

@@ -89,7 +89,7 @@
     "react-native-builder-bob": "^0.41.0",
     "react-native-gesture-handler": "2.31.1",
     "react-native-reanimated": "4.3.1",
-    "react-native-webgpu": "0.5.14",
+    "react-native-webgpu": "0.5.15",
     "react-native-worklets": "0.8.3",
     "release-it": "^20.2.0",
     "turbo": "^2.9.16",

src/components/ShaderView/index.tsx

@@ -1,5 +1,5 @@
 import { PixelRatio, StyleSheet } from 'react-native';
-import { Canvas } from 'react-native-webgpu';
+import { Canvas, installWebGPU } from 'react-native-webgpu';
 import { useEffect, useRef } from 'react';
 import { createSynchronizable, scheduleOnRuntime } from 'react-native-worklets';
 import { colorToVec4 } from '../../utils/colors';
@@ -99,6 +99,12 @@ export default function ShaderView({
     scheduleOnRuntime(runtime, () => {
       'worklet';
 
+      // Worklet runtimes start without the WebGPU flag constants
+      // (GPUBufferUsage, GPUTextureUsage, ...). installWebGPU() captures them
+      // into this runtime so they're available below. Idempotent / safe no-op
+      // if already installed.
+      installWebGPU();
+
       // Create pipeline once
       const pipeline = device.createRenderPipeline({
         layout: 'auto',
@@ -251,7 +257,12 @@ export default function ShaderView({
   ]);
 
   return (
-    <Canvas ref={canvasRef} style={[styles.canvas, style]} {...viewProps} />
+    <Canvas
+      ref={canvasRef}
+      transparent={transparent}
+      style={[styles.canvas, style]}
+      {...viewProps}
+    />
   );
 }
 

src/hooks/useWGPUSetup.tsx

@@ -6,7 +6,6 @@ import {
 } from 'react-native-webgpu';
 import { useEffect, useState } from 'react';
 import type { WorkletRuntime } from 'react-native-worklets';
-import { initWebGPU } from '../utils/initWebGPU';
 import { BackgroundRuntime } from '../utils/backgroundRuntime';
 
 type GPUResources = {
@@ -56,8 +55,6 @@ export function useWGPUSetup(): WGPUSetupResult {
         alphaMode: 'premultiplied',
       });
 
-      initWebGPU(runtime);
-
       if (!cancelled) {
         setResources({ device, context, presentationFormat });
       }

src/utils/initWebGPU.ts

@@ -10743,7 +10743,7 @@ __metadata:
     react-native-reanimated: "npm:4.3.1"
     react-native-safe-area-context: "npm:~5.7.0"
     react-native-screens: "npm:4.25.2"
-    react-native-webgpu: "npm:0.5.14"
+    react-native-webgpu: "npm:0.5.15"
     react-native-worklets: "npm:0.8.3"
     typescript: "npm:6.0.3"
   languageName: unknown
@@ -10777,7 +10777,7 @@ __metadata:
     react-native-builder-bob: "npm:^0.41.0"
     react-native-gesture-handler: "npm:2.31.1"
     react-native-reanimated: "npm:4.3.1"
-    react-native-webgpu: "npm:0.5.14"
+    react-native-webgpu: "npm:0.5.15"
     react-native-worklets: "npm:0.8.3"
     release-it: "npm:^20.2.0"
     turbo: "npm:^2.9.16"
@@ -10878,9 +10878,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-webgpu@npm:0.5.14":
-  version: 0.5.14
-  resolution: "react-native-webgpu@npm:0.5.14"
+"react-native-webgpu@npm:0.5.15":
+  version: 0.5.15
+  resolution: "react-native-webgpu@npm:0.5.15"
   peerDependencies:
     react: "*"
     react-native: ">=0.81.0"
@@ -10891,7 +10891,7 @@ __metadata:
       optional: true
     react-native-worklets:
       optional: true
-  checksum: 10c0/305f81f31273275a0f13616af3b50c5418ee06d1e098a5a613446ec5ed88730a65e6e8f206628a9e080cc579684bbee7a8ef3a3d46dae748ad793e4fb22e2030
+  checksum: 10c0/91430eb36a5ff5f7e43519a79b384bc9648776c2b4788900e8f9154a706cc8c60c101decc3ef32631cef300f2f636e9aeb038ccf90b15dd8cbb7f8381f39fa4b
   languageName: node
   linkType: hard