fix(🌎): reconciller bug on React Native Web (#3050)

Author: wcandillon

external-apps/expo-router-app/components/AnimatedSquareCanvas.tsx

@@ -1,5 +1,6 @@
 import { Canvas, Rect } from "@shopify/react-native-skia/src";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { Pressable } from "react-native";
 import {
 	useSharedValue,
 	withRepeat,
@@ -8,6 +9,7 @@ import {
 } from "react-native-reanimated";
 
 const AnimatedSquareCanvas = () => {
+	const [rects, setRects] = useState(2);
 	const x = useSharedValue(0);
 	useEffect(() => {
 		x.value = withRepeat(
@@ -18,11 +20,22 @@ const AnimatedSquareCanvas = () => {
 			-1,
 		);
 	}, [x]);
-
+	console.log(rects);
 	return (
-		<Canvas style={{ width: "100%", height: "100%" }}>
-			<Rect x={x} y={0} width={100} height={100} color="blue" />
-		</Canvas>
+		<Pressable onPress={() => setRects(i => i + 1)}>
+			<Canvas style={{ width: "100%", height: "100%" }}>
+				{Array.from({ length: rects }).map((_, i) => (
+					<Rect
+						key={i}
+						x={x}
+						y={i * 100}
+						width={100}
+						height={100}
+						color="blue"
+					/>
+				))}
+			</Canvas>
+		</Pressable>
 	);
 };
 export default AnimatedSquareCanvas;

external-apps/expo-router-app/yarn.lock

@@ -2549,7 +2549,7 @@ __metadata:
 
 "@shopify/react-native-skia@file:../../packages/skia::locator=expo-router-app%40workspace%3A.":
   version: 0.0.0
-  resolution: "@shopify/react-native-skia@file:../../packages/skia#../../packages/skia::hash=510f32&locator=expo-router-app%40workspace%3A."
+  resolution: "@shopify/react-native-skia@file:../../packages/skia#../../packages/skia::hash=931ba0&locator=expo-router-app%40workspace%3A."
   dependencies:
     canvaskit-wasm: 0.39.1
     react-reconciler: 0.27.0
@@ -2563,8 +2563,8 @@ __metadata:
     react-native-reanimated:
       optional: true
   bin:
-    setup-skia-web: ./scripts/setup-canvaskit.js
-  checksum: 79fae4837b5ee11fd1e0cd5eb0d480260a29308ef3396c1b7b0b057f79171ce0a055099b67a6a14ef925f806e1d63e8e047076cfe3a2f358ec3234377865f7fb
+    setup-skia-web: scripts/setup-canvaskit.js
+  checksum: 356c3002f9ef43820dea05a2976aec42e3aa916ebec7963d2522311714d500a0eb6a2c22727eb13fa1e1a892902ee1c6d4c370ab5027b3bf60bdb0e263148559
   languageName: node
   linkType: hard
 

packages/skia/src/sksg/Recorder/Core.ts

@@ -1,5 +1,3 @@
-import type { SharedValue } from "react-native-reanimated";
-
 import type {
   BlurMaskFilterProps,
   CircleProps,
@@ -115,16 +113,16 @@ export type Command<T extends CommandType = CommandType> = {
   [key: string]: unknown;
 };
 
-export const materializeProps = (command: {
-  props: Record<string, unknown>;
-  animatedProps?: Record<string, SharedValue<unknown>>;
-}) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const materializeCommand = (command: any) => {
   "worklet";
+  const newProps = { ...command.props };
   if (command.animatedProps) {
     for (const key in command.animatedProps) {
-      command.props[key] = command.animatedProps[key].value;
+      newProps[key] = command.animatedProps[key].value;
     }
   }
+  return { ...command, props: newProps };
 };
 
 export const isCommand = <T extends CommandType>(

packages/skia/src/sksg/Recorder/Player.ts

@@ -44,19 +44,18 @@ import {
   isCommand,
   isDrawCommand,
   isGroup,
-  materializeProps,
+  materializeCommand,
   type Command,
 } from "./Core";
 import type { DrawingContext } from "./DrawingContext";
 
-function play(ctx: DrawingContext, command: Command) {
+function play(ctx: DrawingContext, _command: Command) {
   "worklet";
-  if (isGroup(command)) {
-    command.children.forEach((child) => play(ctx, child));
+  if (isGroup(_command)) {
+    _command.children.forEach((child) => play(ctx, child));
     return;
   }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  materializeProps(command as any);
+  const command = materializeCommand(_command);
   if (isCommand(command, CommandType.SaveBackdropFilter)) {
     ctx.saveBackdropFilter();
   } else if (isCommand(command, CommandType.SaveLayer)) {

packages/skia/src/sksg/Recorder/commands/Box.ts

@@ -2,7 +2,7 @@ import { deflate, inflate, processColor } from "../../../dom/nodes";
 import type { BoxProps, BoxShadowProps } from "../../../dom/types";
 import { BlurStyle, ClipOp, isRRect } from "../../../skia/types";
 import type { Command } from "../Core";
-import { CommandType, materializeProps } from "../Core";
+import { CommandType, materializeCommand } from "../Core";
 import type { DrawingContext } from "../DrawingContext";
 
 interface BoxCommand extends Command<CommandType.DrawBox> {
@@ -17,11 +17,9 @@ export const isBoxCommand = (command: Command): command is BoxCommand => {
 
 export const drawBox = (ctx: DrawingContext, command: BoxCommand) => {
   "worklet";
-  command.shadows.forEach((shadow) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    materializeProps(shadow as any);
+  const shadows = command.shadows.map((shadow) => {
+    return materializeCommand(shadow).props;
   });
-  const shadows = command.shadows.map((shadow) => shadow.props);
   const { paint, Skia, canvas } = ctx;
   const { box: defaultBox } = command.props;
   const opacity = paint.getAlphaf();