From 361b162a425f9cfb5029dc869f2c1e392b992203 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Mon, 2 Nov 2026 15:39:40 +0100 Subject: [PATCH 1/2] =?UTF-8?q?chore(=E2=AC=86=EF=B8=8F):=20move=20the=20e?= =?UTF-8?q?xample=20and=20the=20docs=20app=20to=20react-native-skia=203.9.?= =?UTF-8?q?0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit react-native-skia 3.9.0 depends on react-native-webgpu-dawn 157.1.0, the version this package pins since #580, so the workspace no longer needs to resolve the package for both: the example resolves one Dawn on its own. The compatibility table gets the 0.20.0 / 3.9.0 row. Verified on the iPhone 17 simulator: pod install reports one Dawn (157.1.0) without the resolution, check-dawn and the Swift manifest pass, the example builds and the full e2e suite passes (45 suites, 231 tests). --- .../docs/integrations/react-native-skia.mdx | 3 +- apps/docs/package.json | 2 +- apps/example/package.json | 2 +- package.json | 1 - yarn.lock | 69 +++++++++++-------- 5 files changed, 44 insertions(+), 33 deletions(-) diff --git a/apps/docs/content/docs/integrations/react-native-skia.mdx b/apps/docs/content/docs/integrations/react-native-skia.mdx index 6dbe5ba2f..8d1a30aa4 100644 --- a/apps/docs/content/docs/integrations/react-native-skia.mdx +++ b/apps/docs/content/docs/integrations/react-native-skia.mdx @@ -18,7 +18,8 @@ Because the two packages share Dawn, react-native-skia v3 and react-native-webgp | react-native-webgpu | react-native-skia | | --- | --- | -| 0.17.0 and later | 3.7.0 and later | +| 0.20.0 and later | 3.9.0 and later | +| 0.17.0 to 0.19.2 | 3.7.0 to 3.8.1 | | 0.13.1 to 0.16.1 | 3.4.0 to 3.6.3, or 3.0.8 | | 0.13.0 | 3.1.0 to 3.3.0, or 3.0.8 | | 0.12.1 | 3.0.6 to 3.0.8, or 3.1.0 and later | diff --git a/apps/docs/package.json b/apps/docs/package.json index 04ac0a15d..d78bdaea1 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -40,7 +40,7 @@ "eslint": "9.35.0", "fumadocs-twoslash": "^3.2.0", "fumadocs-typescript": "^4.0.4", - "react-native-skia": "3.7.0", + "react-native-skia": "3.9.0", "react-native-vision-camera": "5.0.10", "tailwindcss": "^4.1.8", "twoslash": "^0.3.9", diff --git a/apps/example/package.json b/apps/example/package.json index fa635a8f0..78d1f60bc 100644 --- a/apps/example/package.json +++ b/apps/example/package.json @@ -37,7 +37,7 @@ "react-native-nitro-modules": "0.35.7", "react-native-reanimated": "4.6.0", "react-native-safe-area-context": "^5.4.0", - "react-native-skia": "3.7.0", + "react-native-skia": "3.9.0", "react-native-vision-camera": "5.0.10", "react-native-vision-camera-worklets": "5.0.10", "react-native-web": "^0.21.2", diff --git a/package.json b/package.json index 883e5ea05..e973c4835 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,6 @@ "resolutions": { "@types/react": "^18.2.44", "@webgpu/types": "^0.1.42", - "react-native-webgpu-dawn": "157.1.0", "@react-three/fiber@^9.4.0": "patch:@react-three/fiber@npm%3A9.4.0#./.yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch" }, "packageManager": "yarn@3.6.1", diff --git a/yarn.lock b/yarn.lock index 1da273877..54e03f629 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7926,7 +7926,7 @@ __metadata: react-native-nitro-modules: 0.35.7 react-native-reanimated: 4.6.0 react-native-safe-area-context: ^5.4.0 - react-native-skia: 3.7.0 + react-native-skia: 3.9.0 react-native-test-app: 5.4.13 react-native-vision-camera: 5.0.10 react-native-vision-camera-worklets: 5.0.10 @@ -11025,7 +11025,7 @@ __metadata: next: ^16.2.7 react: 19.2.3 react-dom: 19.2.3 - react-native-skia: 3.7.0 + react-native-skia: 3.9.0 react-native-vision-camera: 5.0.10 react-native-web: ^0.21.2 react-native-webgpu: "workspace:*" @@ -20743,45 +20743,45 @@ __metadata: languageName: node linkType: hard -"react-native-skia-graphite-android@npm:157.0.0": - version: 157.0.0 - resolution: "react-native-skia-graphite-android@npm:157.0.0" - checksum: 3c776d672fa4868344f03e2e4a9ae5099e68780ea2dc0cdf8bd1f000848df2609589efb95e681bd89d27d458020317fcb94c7a166b6fd2395d007f12243f8975 +"react-native-skia-graphite-android@npm:157.1.0": + version: 157.1.0 + resolution: "react-native-skia-graphite-android@npm:157.1.0" + checksum: e6d1048ac54e1512d05a75023e8e2e71362eec816e68efc7cc9e543724e09b0c54d5470eb10cf6b6228f4e7b40d8bb62229520c6d2209bcb1d10d3ea11d78d0e languageName: node linkType: hard -"react-native-skia-graphite-apple-ios@npm:157.0.0": - version: 157.0.0 - resolution: "react-native-skia-graphite-apple-ios@npm:157.0.0" - checksum: b80f2c85b6aedd49bbf77c87681806f17448b308bb61d11d76201ed5c69cb5ced0a1efd0d88034d06639aae17409a47870ce8270c08e1243df4f3a148a277524 +"react-native-skia-graphite-apple-ios@npm:157.1.0": + version: 157.1.0 + resolution: "react-native-skia-graphite-apple-ios@npm:157.1.0" + checksum: ae08656060887b0902b74e9cc31b22c6a61246050224e5aeb3bb9a90c7cf97be6fd49eaddd9efe79a4fc68ad8687837a0424de021d26999272b7a42b618cb25c languageName: node linkType: hard -"react-native-skia-graphite-apple-macos@npm:157.0.0": - version: 157.0.0 - resolution: "react-native-skia-graphite-apple-macos@npm:157.0.0" - checksum: 4604dad35c8fe33e729f7740a9494895d905847ca8db5d6d49fee7b366002626a1a2d6fb9885fd600f19db91d76b479a8a71ecc1b7f12968c7f03a3b06397746 +"react-native-skia-graphite-apple-macos@npm:157.1.0": + version: 157.1.0 + resolution: "react-native-skia-graphite-apple-macos@npm:157.1.0" + checksum: fa55f2534083c846912eee78a8a5a7a2e9979548cfaf43e42a466d8daed58254c43c58ee4d47297027415e042578a48050d2e7ae071f4386e2ca458110fd0ef9 languageName: node linkType: hard -"react-native-skia-graphite-apple-tvos@npm:157.0.0": - version: 157.0.0 - resolution: "react-native-skia-graphite-apple-tvos@npm:157.0.0" - checksum: 2c98013f843d6c969039a176f5ab83067ba5cce1a3dd9a0207465fdae6626a0b4b868250e1dd8bdf20a6623018b03a3240453fac4794407d6b6165b91b59b9a6 +"react-native-skia-graphite-apple-tvos@npm:157.1.0": + version: 157.1.0 + resolution: "react-native-skia-graphite-apple-tvos@npm:157.1.0" + checksum: 9de24bce00205d127c6a948bd68e02a7c9c8280255df93b050d536e7e57ad01da4da0edad5c3aa190e5d159dc21a88779aab3730af0f56a6ea8e1b72b214c17a languageName: node linkType: hard -"react-native-skia@npm:3.7.0": - version: 3.7.0 - resolution: "react-native-skia@npm:3.7.0" +"react-native-skia@npm:3.9.0": + version: 3.9.0 + resolution: "react-native-skia@npm:3.9.0" dependencies: canvaskit-wasm: 0.41.1 - react-native-skia-graphite-android: 157.0.0 - react-native-skia-graphite-apple-ios: 157.0.0 - react-native-skia-graphite-apple-macos: 157.0.0 - react-native-skia-graphite-apple-tvos: 157.0.0 - react-native-webgpu-dawn: 157.0.0 - react-reconciler: 0.31.0 + react-native-skia-graphite-android: 157.1.0 + react-native-skia-graphite-apple-ios: 157.1.0 + react-native-skia-graphite-apple-macos: 157.1.0 + react-native-skia-graphite-apple-tvos: 157.1.0 + react-native-webgpu-dawn: 157.1.0 + react-reconciler: 0.33.0 peerDependencies: react: ">=19.0" react-native: ">=0.79" @@ -20796,7 +20796,7 @@ __metadata: optional: true bin: setup-skia-web: scripts/setup-canvaskit.js - checksum: b8743a0c8074a494c8f7e14fd236b1088da6798c0ea565d8910b2a10dcba91fa3bb9aa4aa6affad939f82d98f393cf40d510076400f004a0409000c221ceacbb + checksum: ba43eb8f0dbc71171946c08da568240eb7ba1ea229de52fceddabb49d65f1cbd502d3765d4f0e0f35715feca6dd97fb2d993da4e9c3396b470f6fe6133a8c673 languageName: node linkType: hard @@ -21174,7 +21174,18 @@ __metadata: languageName: node linkType: hard -"react-reconciler@npm:0.31.0, react-reconciler@npm:^0.31.0": +"react-reconciler@npm:0.33.0": + version: 0.33.0 + resolution: "react-reconciler@npm:0.33.0" + dependencies: + scheduler: ^0.27.0 + peerDependencies: + react: ^19.2.0 + checksum: 88181988a66e092c393ed5b9b8d1bdc96bfebbd973c39f0d44ed51e011869d9e344122c89d0971f175c4b533bb614b1eddae9eaea8d4d37bd69e609923888015 + languageName: node + linkType: hard + +"react-reconciler@npm:^0.31.0": version: 0.31.0 resolution: "react-reconciler@npm:0.31.0" dependencies: From 9fa6de52e08bec1324ac8a4591e6fc0835d6e02f Mon Sep 17 00:00:00 2001 From: William Candillon Date: Mon, 2 Nov 2026 16:10:34 +0100 Subject: [PATCH 2/2] =?UTF-8?q?fix(=F0=9F=A7=A0):=20await=20the=20MNIST=20?= =?UTF-8?q?demo's=20pixel=20readback?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit react-native-skia 3.9 reads pixels asynchronously: readPixels() returns a promise, which settles on the runtime that asked, the UI runtime here. The inference is scheduled from its callback, as it was from the value. --- .../src/MNISTInference/MNISTInference.tsx | 32 ++++++++++++------- 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/apps/example/src/MNISTInference/MNISTInference.tsx b/apps/example/src/MNISTInference/MNISTInference.tsx index cb6603a6d..af49140e7 100644 --- a/apps/example/src/MNISTInference/MNISTInference.tsx +++ b/apps/example/src/MNISTInference/MNISTInference.tsx @@ -88,18 +88,26 @@ export function MNISTInference() { const canvas = surface.value.getCanvas(); canvas.drawPath(path.value.build(), paint); image.value = surface.value!.makeImageSnapshot(); - const pixels = image.value.readPixels(0, 0, { - width: SIZE, - height: SIZE, - alphaType: AlphaType.Opaque, - colorType: ColorType.Alpha_8, - }); - scheduleOnRN( - runInference, - centerData(pixels as Uint8Array).map( - (x) => (x / 255) * 3.24 - 0.42, - ), - ); + // The readback is asynchronous since react-native-skia 3.9 and + // settles on this runtime. + image.value + .readPixels(0, 0, { + width: SIZE, + height: SIZE, + alphaType: AlphaType.Opaque, + colorType: ColorType.Alpha_8, + }) + .then((pixels) => { + if (pixels === null) { + return; + } + scheduleOnRN( + runInference, + centerData(pixels as Uint8Array).map( + (x) => (x / 255) * 3.24 - 0.42, + ), + ); + }); } }); }, [path, runInference, surface, image]);