From 3068f6d4e79b3ca7a9c2964039cb0fd927b45d27 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 18 Mar 2026 12:22:39 +0100
Subject: [PATCH 1/2] =?UTF-8?q?chore(=F0=9F=90=99):=20refactor=20WebGPUVie?=
 =?UTF-8?q?wNativeComponent=20for=20React=20usage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated imports and modified the canvas element handling to use React.createElement instead of unstable_createElement. Enhanced style handling for the canvas element.
---
 .../src/WebGPUViewNativeComponent.web.ts      | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/webgpu/src/WebGPUViewNativeComponent.web.ts b/packages/webgpu/src/WebGPUViewNativeComponent.web.ts
index cee607706..22c83f4fb 100644
--- a/packages/webgpu/src/WebGPUViewNativeComponent.web.ts
+++ b/packages/webgpu/src/WebGPUViewNativeComponent.web.ts
@@ -1,6 +1,5 @@
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { StyleSheet } from "react-native";
-import { unstable_createElement as unstableCreateElement } from "react-native-web";
 import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
 import type { ViewProps } from "react-native";
 
@@ -15,7 +14,7 @@ export interface NativeProps extends ViewProps {
 function debounce<T extends (...args: any[]) => void>(
   func: T,
   wait: number,
-  immediate = false,
+  immediate = false
 ) {
   let timeout: ReturnType<typeof setTimeout> | undefined;
   return function debounced(
@@ -55,7 +54,7 @@ function resizeCanvas(canvas?: HTMLCanvasElement) {
 export default function WebGPUViewNativeComponent(props: NativeProps) {
   const { contextId, style, transparent, ...rest } = props;
 
-  const canvasElm = useRef<HTMLCanvasElement>();
+  const canvasElm = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
     const onResize = debounce(() => resizeCanvas(canvasElm.current), 100);
@@ -65,15 +64,15 @@ export default function WebGPUViewNativeComponent(props: NativeProps) {
     };
   }, []);
 
-  return unstableCreateElement("canvas", {
+  return React.createElement("canvas", {
     ...rest,
-    style: [
-      styles.view,
-      styles.flex1,
-      transparent === false && { backgroundColor: "white" }, // Canvas elements are transparent by default on the web
-      style,
-    ],
     id: contextIdToId(contextId),
+    style: {
+      ...styles.view,
+      ...styles.flex1,
+      ...(transparent === false ? { backgroundColor: "white" } : {}),
+      ...(typeof style === "object" ? style : {}),
+    },
     ref: (ref: HTMLCanvasElement) => {
       canvasElm.current = ref;
       if (ref) {
@@ -90,7 +89,6 @@ const styles = StyleSheet.create({
   view: {
     alignItems: "stretch",
     backgroundColor: "transparent",
-    // @ts-expect-error - not a valid RN style, but it's valid for web
     border: "0 solid black",
     boxSizing: "border-box",
     display: "flex",

From 7286cf2282e0367a6a9c0113be35c51a654f752f Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Wed, 18 Mar 2026 12:23:25 +0100
Subject: [PATCH 2/2] Update resizeCanvas function parameter type

---
 packages/webgpu/src/WebGPUViewNativeComponent.web.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webgpu/src/WebGPUViewNativeComponent.web.ts b/packages/webgpu/src/WebGPUViewNativeComponent.web.ts
index 22c83f4fb..19a11454d 100644
--- a/packages/webgpu/src/WebGPUViewNativeComponent.web.ts
+++ b/packages/webgpu/src/WebGPUViewNativeComponent.web.ts
@@ -38,7 +38,7 @@ function debounce<T extends (...args: any[]) => void>(
   };
 }
 
-function resizeCanvas(canvas?: HTMLCanvasElement) {
+function resizeCanvas(canvas: HTMLCanvasElement | null) {
   if (!canvas) {
     return;
   }