From da86e60ffcb6a5c3b6a9045be560509d34249626 Mon Sep 17 00:00:00 2001
From: woosanggyu <woosanggyu@users.noreply.github.com>
Date: Tue, 25 Aug 2026 20:14:46 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix(=F0=9F=90=9B):=20don't=20crash=20when?=
 =?UTF-8?q?=20snapshotting=20a=20canvas=20that=20is=20not=20laid=20out?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

makeImageSnapshot passed the canvas size (-1 before layoutSubviews) into
makeOffscreenSurface, aborting in Metal texture validation, and
makeImageSnapshotAsync dereferenced a null view. Return nullptr in both
cases so they fall through to the existing snapshot rejection.

Adds an example screen (API → Snapshot Before Layout) reproducing #4029.
---
 apps/example/src/Examples/API/List.tsx        |   4 +
 apps/example/src/Examples/API/Routes.ts       |   1 +
 .../src/Examples/API/SnapshotBeforeLayout.tsx | 141 ++++++++++++++++++
 apps/example/src/Examples/API/index.tsx       |   8 +
 apps/example/src/Examples/API/linking.ts      |   1 +
 packages/skia/cpp/rnskia/RNSkJsiViewApi.h     |   9 +-
 packages/skia/cpp/rnskia/RNSkView.h           |  14 +-
 7 files changed, 174 insertions(+), 4 deletions(-)
 create mode 100644 apps/example/src/Examples/API/SnapshotBeforeLayout.tsx

diff --git a/apps/example/src/Examples/API/List.tsx b/apps/example/src/Examples/API/List.tsx
index 305fa8f203..bd442714ad 100644
--- a/apps/example/src/Examples/API/List.tsx
+++ b/apps/example/src/Examples/API/List.tsx
@@ -54,6 +54,10 @@ export const examples = [
     screen: "Snapshot",
     title: "📺 View Snapshot",
   },
+  {
+    screen: "SnapshotBeforeLayout",
+    title: "🫥 Snapshot Before Layout",
+  },
   {
     screen: "PathEffect",
     title: "⭐️ Path Effect",
diff --git a/apps/example/src/Examples/API/Routes.ts b/apps/example/src/Examples/API/Routes.ts
index e69add788b..309e8511e1 100644
--- a/apps/example/src/Examples/API/Routes.ts
+++ b/apps/example/src/Examples/API/Routes.ts
@@ -24,6 +24,7 @@ export type Routes = {
   OnLayout: undefined;
   OnSize: undefined;
   Snapshot: undefined;
+  SnapshotBeforeLayout: undefined;
   IconsExample: undefined;
   Paragraphs: undefined;
   Paragraphs2: undefined;
diff --git a/apps/example/src/Examples/API/SnapshotBeforeLayout.tsx b/apps/example/src/Examples/API/SnapshotBeforeLayout.tsx
new file mode 100644
index 0000000000..301f6de66d
--- /dev/null
+++ b/apps/example/src/Examples/API/SnapshotBeforeLayout.tsx
@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from "react";
+import { Button, ScrollView, StyleSheet, Text, View } from "react-native";
+import { Canvas, Circle, useCanvasRef } from "@shopify/react-native-skia";
+
+/**
+ * Regression check for https://github.com/Shopify/react-native-skia/issues/4029
+ *
+ * Snapshots of a Canvas whose native view is not ready must reject with
+ * "Failed to make snapshot from view." instead of aborting the process.
+ *
+ *  A) view does not exist: `display: "none"` parent (never mounted natively),
+ *     or the snapshot is requested right after commit / after unmount.
+ *     Without the fix: null dereference in makeImageSnapshotAsync.
+ *  B) view mounted but not laid out yet: the view is registered in
+ *     willMoveToSuperview, but its Metal context is only created in
+ *     layoutSubviews, so the canvas size is -1 in between.
+ *     Without the fix: MTLTextureDescriptor has width (18446744073709551615).
+ *     The window is small, so this case is exercised in a remount loop.
+ *  C) zero-size canvas.
+ */
+
+// Set to true to start the case-B loop automatically after mount.
+const AUTO_START = false;
+
+type Log = (m: string) => void;
+
+const snapshot = (
+  tag: string,
+  ref: ReturnType<typeof useCanvasRef>,
+  log: Log
+) => {
+  ref.current
+    ?.makeImageSnapshotAsync()
+    .then((img) => log(`[${tag}] resolved ${img.width()}x${img.height()}`))
+    .catch((e) => log(`[${tag}] rejected: ${String(e)}`));
+};
+
+const FreshCanvas = ({ log }: { log: Log }) => {
+  const ref = useCanvasRef();
+  useEffect(() => {
+    // One tick after commit: the native view has been added to its superview
+    // (registered) but may not have gone through layoutSubviews yet.
+    const t = setTimeout(() => snapshot("fresh", ref, log), 0);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <Canvas ref={ref} style={styles.fresh}>
+      <Circle cx={100} cy={100} r={80} color="purple" />
+    </Canvas>
+  );
+};
+
+export const SnapshotBeforeLayout = () => {
+  const refHidden = useCanvasRef();
+  const refZero = useCanvasRef();
+  const refVisible = useCanvasRef();
+  const [logs, setLogs] = useState<string[]>([]);
+  const [counts, setCounts] = useState({ resolved: 0, rejected: 0 });
+  const [stress, setStress] = useState(AUTO_START);
+  const [mountKey, setMountKey] = useState(0);
+  const log: Log = (m) => {
+    console.log(m);
+    setLogs((prev) => [...prev.slice(-30), m]);
+    const key = m.includes("rejected") ? "rejected" : "resolved";
+    setCounts((prev) => ({ ...prev, [key]: prev[key] + 1 }));
+  };
+
+  useEffect(() => {
+    if (!stress) {
+      return;
+    }
+    const iv = setInterval(() => setMountKey((k) => k + 1), 40);
+    return () => clearInterval(iv);
+  }, [stress]);
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Text style={styles.title}>Snapshot of a canvas that is not ready</Text>
+      <Text>Every button must log a rejection, never crash.</Text>
+      <Text>
+        resolved: {counts.resolved} / rejected: {counts.rejected}
+      </Text>
+
+      {/* A) never mounted natively */}
+      <View style={styles.hidden}>
+        <Canvas ref={refHidden} style={styles.hiddenCanvas}>
+          <Circle cx={150} cy={150} r={100} color="magenta" />
+        </Canvas>
+      </View>
+
+      {/* C) zero size */}
+      <Canvas ref={refZero} style={styles.zero}>
+        <Circle cx={0} cy={0} r={10} color="orange" />
+      </Canvas>
+
+      {/* B) freshly mounted, snapshot before first layout */}
+      {stress && <FreshCanvas key={mountKey} log={log} />}
+
+      {/* control */}
+      <Canvas ref={refVisible} style={styles.visible}>
+        <Circle cx={60} cy={60} r={50} color="teal" />
+      </Canvas>
+
+      <Button
+        title={`B) remount + snapshot loop: ${
+          stress ? "ON" : "OFF"
+        } (${mountKey})`}
+        onPress={() => setStress((v) => !v)}
+      />
+      <Button
+        title="A) hidden canvas"
+        onPress={() => snapshot("hidden", refHidden, log)}
+      />
+      <Button
+        title="C) zero-size canvas"
+        onPress={() => snapshot("zero", refZero, log)}
+      />
+      <Button
+        title="visible canvas (resolves)"
+        onPress={() => snapshot("visible", refVisible, log)}
+      />
+      {logs.map((m, i) => (
+        <Text key={i} style={styles.log}>
+          {m}
+        </Text>
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { alignItems: "center", gap: 12, padding: 16 },
+  title: { fontWeight: "bold" },
+  hidden: { display: "none" },
+  hiddenCanvas: { width: 300, height: 300 },
+  zero: { width: 0, height: 0 },
+  fresh: { width: 200, height: 200 },
+  visible: { width: 120, height: 120 },
+  log: { fontSize: 11 },
+});
diff --git a/apps/example/src/Examples/API/index.tsx b/apps/example/src/Examples/API/index.tsx
index 6f10aa05f8..1ef979083a 100644
--- a/apps/example/src/Examples/API/index.tsx
+++ b/apps/example/src/Examples/API/index.tsx
@@ -25,6 +25,7 @@ import { PictureViewExample } from "./PictureView";
 import { OnLayoutDemo } from "./OnLayout";
 import { OnSize } from "./OnSize";
 import { Snapshot } from "./Snapshot";
+import { SnapshotBeforeLayout } from "./SnapshotBeforeLayout";
 import { IconsExample } from "./Icons";
 import { FontMgr } from "./FontMgr";
 import { AnimatedImages } from "./AnimatedImages";
@@ -130,6 +131,13 @@ export const API = () => {
           title: "📺 View Snapshot",
         }}
       />
+      <Stack.Screen
+        name="SnapshotBeforeLayout"
+        component={SnapshotBeforeLayout}
+        options={{
+          title: "🫥 Snapshot Before Layout",
+        }}
+      />
       <Stack.Screen
         name="IconsExample"
         component={IconsExample}
diff --git a/apps/example/src/Examples/API/linking.ts b/apps/example/src/Examples/API/linking.ts
index 7d541b4fdb..084e53012b 100644
--- a/apps/example/src/Examples/API/linking.ts
+++ b/apps/example/src/Examples/API/linking.ts
@@ -17,6 +17,7 @@ export const apiScreenPaths: Record<keyof Routes, string> = {
   Clipping: "clipping",
   Touch: "touch",
   Snapshot: "snapshot",
+  SnapshotBeforeLayout: "snapshot-before-layout",
   PathEffect: "path-effect",
   IconsExample: "icons",
   Transform: "transform",
diff --git a/packages/skia/cpp/rnskia/RNSkJsiViewApi.h b/packages/skia/cpp/rnskia/RNSkJsiViewApi.h
index 795bd16109..6a2db65bba 100644
--- a/packages/skia/cpp/rnskia/RNSkJsiViewApi.h
+++ b/packages/skia/cpp/rnskia/RNSkJsiViewApi.h
@@ -238,8 +238,13 @@ class RNSkJsiViewApi : public JsiSkNativeObject<RNSkJsiViewApi> {
           context->runOnMainThread([&runtime, view = std::move(view),
                                     promise = std::move(promise),
                                     context = std::move(context), bounds]() {
-            auto image = view->makeImageSnapshot(
-                bounds == nullptr ? nullptr : bounds.get());
+            // The view may not exist (yet, or anymore): the native view is
+            // only registered once it has a superview, and it is removed on
+            // unmount. Mirror the sync variant instead of dereferencing null.
+            auto image = view != nullptr
+                             ? view->makeImageSnapshot(
+                                   bounds == nullptr ? nullptr : bounds.get())
+                             : nullptr;
             context->runOnJavascriptThread(
                 [&runtime, context = std::move(context),
                  promise = std::move(promise), image = std::move(image)]() {
diff --git a/packages/skia/cpp/rnskia/RNSkView.h b/packages/skia/cpp/rnskia/RNSkView.h
index 1b96dced7b..a56b1cbf4c 100644
--- a/packages/skia/cpp/rnskia/RNSkView.h
+++ b/packages/skia/cpp/rnskia/RNSkView.h
@@ -203,10 +203,20 @@ class RNSkView : public std::enable_shared_from_this<RNSkView> {
    Renders the view into an SkImage instead of the screen.
    */
   sk_sp<SkImage> makeImageSnapshot(SkRect *bounds) {
+    // A view that has not been laid out yet (or whose window context was
+    // released) reports -1/0 as its size. Creating an offscreen surface with
+    // that size aborts in Metal texture validation (width = (uint64)-1).
+    // Returning nullptr degrades this to the existing
+    // "Failed to make snapshot from view." rejection.
+    auto width = _canvasProvider->getWidth();
+    auto height = _canvasProvider->getHeight();
+    if (width <= 0 || height <= 0) {
+      return nullptr;
+    }
 
     auto provider = std::make_shared<RNSkOffscreenCanvasProvider>(
-        getPlatformContext(), std::bind(&RNSkView::requestRedraw, this),
-        _canvasProvider->getWidth(), _canvasProvider->getHeight());
+        getPlatformContext(), std::bind(&RNSkView::requestRedraw, this), width,
+        height);
 
     _renderer->renderImmediate(provider);
     return provider->makeSnapshot(bounds);

From 2d10f33f8e13d9e2c48d0a84810548d08f970745 Mon Sep 17 00:00:00 2001
From: woosanggyu <woosanggyu@users.noreply.github.com>
Date: Mon, 31 Aug 2026 09:17:55 +0900
Subject: [PATCH 2/2] fix example web e2e: keep a visible canvas first in the
 DOM

The web smoke test asserts the first canvas on the page is visible;
the hidden and zero-size repro canvases were rendered before the
visible control canvas.
---
 .../src/Examples/API/SnapshotBeforeLayout.tsx | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/example/src/Examples/API/SnapshotBeforeLayout.tsx b/apps/example/src/Examples/API/SnapshotBeforeLayout.tsx
index 301f6de66d..5c6a03608d 100644
--- a/apps/example/src/Examples/API/SnapshotBeforeLayout.tsx
+++ b/apps/example/src/Examples/API/SnapshotBeforeLayout.tsx
@@ -82,12 +82,11 @@ export const SnapshotBeforeLayout = () => {
         resolved: {counts.resolved} / rejected: {counts.rejected}
       </Text>
 
-      {/* A) never mounted natively */}
-      <View style={styles.hidden}>
-        <Canvas ref={refHidden} style={styles.hiddenCanvas}>
-          <Circle cx={150} cy={150} r={100} color="magenta" />
-        </Canvas>
-      </View>
+      {/* control — kept first in the DOM: the web smoke test asserts the
+          first canvas on the page is visible */}
+      <Canvas ref={refVisible} style={styles.visible}>
+        <Circle cx={60} cy={60} r={50} color="teal" />
+      </Canvas>
 
       {/* C) zero size */}
       <Canvas ref={refZero} style={styles.zero}>
@@ -97,10 +96,12 @@ export const SnapshotBeforeLayout = () => {
       {/* B) freshly mounted, snapshot before first layout */}
       {stress && <FreshCanvas key={mountKey} log={log} />}
 
-      {/* control */}
-      <Canvas ref={refVisible} style={styles.visible}>
-        <Circle cx={60} cy={60} r={50} color="teal" />
-      </Canvas>
+      {/* A) never mounted natively */}
+      <View style={styles.hidden}>
+        <Canvas ref={refHidden} style={styles.hiddenCanvas}>
+          <Circle cx={150} cy={150} r={100} color="magenta" />
+        </Canvas>
+      </View>
 
       <Button
         title={`B) remount + snapshot loop: ${