fix(🌎): new __destroyWebGLContextAfterRender property to support more than 16 Skia canvases on Web

.github/workflows/ci.yml

@@ -375,10 +375,25 @@ jobs:
         working-directory: packages/skia
         run: yarn build && yarn pack
 
+      - name: Log package.json before change
+        working-directory: externals/skia-web-app
+        run: |
+          echo "=== package.json BEFORE change ==="
+          grep -n "@shopify/react-native-skia" package.json || echo "Pattern not found"
+          echo "=================================="
+
       - name: Update package.json to use local Skia package
         working-directory: externals/skia-web-app
         run: |
-          sed -i '' 's/"@shopify\/react-native-skia": "[^"]*"/"@shopify\/react-native-skia": "file:..\/..\/packages\/skia\/package.tgz"/' package.json
+          # More robust regex that handles different whitespace
+          sed -i '' 's/"@shopify\/react-native-skia"[[:space:]]*:[[:space:]]*"[^"]*"/"@shopify\/react-native-skia": "file:..\/..\/packages\/skia\/package.tgz"/' package.json
+
+      - name: Log package.json after change
+        working-directory: externals/skia-web-app
+        run: |
+          echo "=== package.json AFTER change ==="
+          grep -n "@shopify/react-native-skia" package.json || echo "Pattern not found"
+          echo "================================="
 
       - name: Install dependencies for skia-web-app
         working-directory: externals/skia-web-app

apps/docs/docs/getting-started/web.mdx

@@ -156,6 +156,37 @@ LoadSkiaWeb({
 });
 ```
 
+## WebGL Contextes
+
+Web browsers limit the number of WebGL contexts to 16 per webpage.
+Usually developers will see this error when they exceed this limit:
+
+```
+WARNING: Too many active WebGL contexts. Oldest context will be lost.
+```
+If you canvas is static and doesn't contain animation values, you can use the `__destroyWebGLContextAfterRender={true}` prop on your Canvas components to destroy the WebGL context after rendering.
+This even works with animated canvases but it will come with a performance cost as the context will be recreated on each render.
+
+```tsx twoslash
+import { View } from 'react-native';
+import { Canvas, Fill } from "@shopify/react-native-skia";
+
+export default function App() {
+  return (
+    <View style={{ flex: 1 }}>
+      {
+        // 20 Skia Canvases with __destroyWebGLContextAfterRender={true}
+        new Array(20).fill(0).map((_, i) => (
+          <Canvas key={i} style={{ width: 100, height: 100 }} __destroyWebGLContextAfterRender={true}>
+            <Fill color="lightblue" />
+          </Canvas>
+        ))
+      }
+    </View>
+  );
+}
+```
+
 ## Unsupported Features
 
 The following React Native Skia APIs are currently unsupported on React Native Web.

apps/example/src/Tests/Tests.tsx

@@ -32,7 +32,7 @@ export const Tests = ({ assets }: TestsProps) => {
   const [client, hostname] = useClient();
   const [drawing, setDrawing] = useState<any>(null);
   const [screen, setScreen] = useState<any>(null);
-  
+
   useEffect(() => {
     if (client !== null) {
       // Define the message handler as a separate function
@@ -66,16 +66,16 @@ export const Tests = ({ assets }: TestsProps) => {
       };
 
       // Use addEventListener instead of onmessage
-      client.addEventListener('message', handleMessage);
+      client.addEventListener("message", handleMessage);
 
       // Clean up: remove the specific event listener
       return () => {
-        client.removeEventListener('message', handleMessage);
+        client.removeEventListener("message", handleMessage);
       };
     }
     return;
   }, [assets, client]);
-  
+
   useEffect(() => {
     if (drawing && client) {
       const it = setTimeout(() => {
@@ -104,7 +104,7 @@ export const Tests = ({ assets }: TestsProps) => {
     }
     return;
   }, [client, drawing, ref]);
-  
+
   useEffect(() => {
     if (screen && client) {
       const it = setTimeout(async () => {
@@ -120,7 +120,7 @@ export const Tests = ({ assets }: TestsProps) => {
     }
     return;
   }, [client, screen]);
-  
+
   return (
     <View style={{ flex: 1, backgroundColor: "white" }}>
       <Text style={{ color: "black" }}>

packages/skia/src/renderer/Canvas.tsx

@@ -56,6 +56,7 @@ export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
   onSize?: SharedValue<SkSize>;
   colorSpace?: "p3" | "srgb";
   ref?: React.Ref<CanvasRef>;
+  __destroyWebGLContextAfterRender?: boolean;
 }
 
 export const Canvas = ({