Skip to content

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

Merged
blazejkustra merged 1 commit into
mainfrom
fix/rn-webgpu-worklets-high-bugs
Jun 28, 2026
Merged

fix(ShaderView): Android transparency + correct worklet WebGPU setup (bump rn-webgpu 0.5.15)#20
blazejkustra merged 1 commit into
mainfrom
fix/rn-webgpu-worklets-high-bugs

Conversation

@blazejkustra

Copy link
Copy Markdown
Owner

What

Fixes the two high-severity issues found while auditing this library's react-native-webgpu × worklets usage, and bumps react-native-webgpu to the latest (0.5.15).

Changes

1. Android transparency was broken

ShaderView used the transparent prop only for the clear color and never forwarded it to <Canvas>. Per the rn-webgpu docs, Android ignores alphaMode — the native transparent prop is what enables a transparent surface there. Transparent effects (e.g. dissolves) therefore rendered on an opaque background on Android.

<Canvas ref={canvasRef} transparent={transparent} ... />

2. Incorrect worklet globals setup (setImmediate override + fragile injection)

The hand-rolled initWebGPU helper injected WebGPU globals into the worklet runtime and, as part of that, did:

globalThis.setImmediate = globalThis.requestAnimationFrame as typeof setImmediate;

The worklet run loop (react-native-worklets ≥ 0.8, enableEventLoop default) already installs a correct setImmediate; overwriting it with requestAnimationFrame changes its semantics (deferred to the next animation-frame flush, passes a timestamp arg). The manual injection also relied on fragile FIFO ordering between two separately-scheduled worklets.

react-native-webgpu@0.5.15 adds the official installWebGPU() entry point — call it once at the top of a worklet to capture the WebGPU flag constants into that runtime. This PR adopts it and removes src/utils/initWebGPU.ts entirely:

scheduleOnRuntime(runtime, () => {
  'worklet';
  installWebGPU(); // idempotent; provides GPUBufferUsage etc. on this runtime
  // ...render
});

This removes the setImmediate override, drops the unused navigator.gpu/self injection, and makes the WebGPU setup run inline in the render worklet (no cross-worklet ordering dependency).

3. Bump

react-native-webgpu 0.5.140.5.15 (root + example), which is what brings installWebGPU().

Verification

  • yarn typecheck
  • yarn lint (changed files) ✅
  • pre-commit hooks (lint/types/commitlint) ✅

Runtime verification on device/simulator still recommended, especially Android transparency.

…bump rn-webgpu 0.5.15

- Forward the transparent prop to <Canvas> so transparency works on Android
  (Android ignores alphaMode; the native transparent prop controls it).
- Replace the hand-rolled worklet global injection (which also overwrote the
  run-loop's setImmediate with requestAnimationFrame) with the official
  installWebGPU() called inside the render worklet. Removes the fragile
  cross-worklet ordering and the incorrect setImmediate override.
- Bump react-native-webgpu 0.5.14 -> 0.5.15 (adds installWebGPU).
@blazejkustra
blazejkustra merged commit b095052 into main Jun 28, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant