@shopify/react-native-skia 2.9.0 → 2.9.1

package/android/cpp/jni/JniWebGPUView.cpp

@@ -2,9 +2,35 @@
 #include <jni.h>
 
 #ifdef SK_GRAPHITE
+#include <memory>
+#include <utility>
+
+#include <ReactCommon/CallInvoker.h>
+
 #include "rnskia/RNDawnContext.h"
 #include "rnwgpu/SurfaceRegistry.h"
+#include "rnwgpu/async/RuntimeContext.h"
 #include "webgpu/webgpu_cpp.h"
+
+namespace {
+// Applies a surface attach latched by the platform UI thread (see
+// SurfaceInfo::applyPendingAttach) from the JS thread. Surface attaches are
+// normally adopted at the next frame boundary by whichever thread renders;
+// this flush covers contexts that are not actively rendering (static
+// content), so the last offscreen frame still makes it on screen. Mirrors
+// react-native-webgpu's RNWebGPUManager::flushPendingSurfaceTransition.
+void flushPendingSurfaceTransition(std::shared_ptr<rnwgpu::SurfaceInfo> info) {
+  if (info == nullptr) {
+    return;
+  }
+  auto invoker = rnwgpu::async::RuntimeContext::mainCallInvoker();
+  if (invoker == nullptr) {
+    return;
+  }
+  invoker->invokeAsync(
+      [info = std::move(info)] { info->applyPendingAttach(); });
+}
+} // namespace
 #endif
 
 extern "C" JNIEXPORT void JNICALL
@@ -12,7 +38,12 @@ Java_com_shopify_reactnative_skia_WebGPUView_onSurfaceCreate(
     JNIEnv *env, jobject thiz, jobject jSurface, jint contextId, jfloat width,
     jfloat height) {
 #ifdef SK_GRAPHITE
+  // ANativeWindow_fromSurface acquires a reference; SurfaceInfo releases it
+  // (via the releaser below) once it is done with the window.
   auto window = ANativeWindow_fromSurface(env, jSurface);
+  if (window == nullptr) {
+    return;
+  }
   auto &registry = rnwgpu::SurfaceRegistry::getInstance();
   auto &dawnContext = RNSkia::DawnContext::getInstance();
   auto gpu = dawnContext.getWGPUInstance();
@@ -24,10 +55,17 @@ Java_com_shopify_reactnative_skia_WebGPUView_onSurfaceCreate(
   surfaceDescriptor.nextInChain = &androidSurfaceDesc;
   auto surface = gpu.CreateSurface(&surfaceDescriptor);
 
-  registry
-      .getSurfaceInfoOrCreate(contextId, gpu, static_cast<int>(width),
-                              static_cast<int>(height))
-      ->switchToOnscreen(window, surface);
+  // Find-or-create + attach runs atomically under the registry lock so a
+  // concurrent destroyContext cannot orphan this surface.
+  auto info = registry.attachSurface(
+      contextId, gpu, static_cast<int>(width), static_cast<int>(height), window,
+      surface, [](void *nativeSurface) {
+        ANativeWindow_release(static_cast<ANativeWindow *>(nativeSurface));
+      });
+  // The attach is adopted at the next frame boundary by the rendering thread;
+  // schedule a flush so contexts that are not currently rendering still pick
+  // it up (and present their last offscreen frame).
+  flushPendingSurfaceTransition(info);
 #endif
 }
 
@@ -57,11 +95,18 @@ Java_com_shopify_reactnative_skia_WebGPUView_switchToOffscreenSurface(
 }
 
 extern "C" JNIEXPORT void JNICALL
-Java_com_shopify_reactnative_skia_WebGPUView_onSurfaceDestroy(JNIEnv *env,
-                                                              jobject thiz,
-                                                              jint contextId) {
+Java_com_shopify_reactnative_skia_WebGPUView_onViewDestroyed(JNIEnv *env,
+                                                             jobject thiz,
+                                                             jint contextId) {
 #ifdef SK_GRAPHITE
+  // The view dies with its Canvas (contextIds are never reused), so view
+  // teardown retires the registry entry. The JS-side cleanup
+  // (RNWebGPU.destroyContext) only handles entries that never had a native
+  // surface; see RNWebGPU::destroyContext for the ownership split.
   auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  if (auto info = registry.getSurfaceInfo(contextId)) {
+    info->detachSurface();
+  }
   registry.removeSurfaceInfo(contextId);
 #endif
 }

package/android/src/main/java/com/shopify/reactnative/skia/WebGPUSurfaceView.java

@@ -21,7 +21,9 @@ public class WebGPUSurfaceView extends SurfaceView implements SurfaceHolder.Call
   @Override
   protected void onDetachedFromWindow() {
     super.onDetachedFromWindow();
-    mApi.surfaceDestroyed();
+    // surfaceDestroyed() normally fires during detach as well; going offscreen
+    // is idempotent, so this is just a safety net for paths where it does not.
+    mApi.surfaceOffscreen();
   }
 
   @Override

package/android/src/main/java/com/shopify/reactnative/skia/WebGPUTextureView.java

@@ -11,6 +11,7 @@ import androidx.annotation.NonNull;
 public class WebGPUTextureView extends TextureView implements TextureView.SurfaceTextureListener {
 
   WebGPUViewAPI mApi;
+  private Surface mSurface;
 
   public WebGPUTextureView(Context context, WebGPUViewAPI api) {
     super(context);
@@ -21,19 +22,24 @@ public class WebGPUTextureView extends TextureView implements TextureView.Surfac
 
   @Override
   public void onSurfaceTextureAvailable(@NonNull SurfaceTexture surfaceTexture, int width, int height) {
-    Surface surface = new Surface(surfaceTexture);
-    mApi.surfaceCreated(surface);
+    mSurface = new Surface(surfaceTexture);
+    mApi.surfaceCreated(mSurface);
   }
 
   @Override
   public void onSurfaceTextureSizeChanged(@NonNull SurfaceTexture surfaceTexture, int width, int height) {
-    Surface surface = new Surface(surfaceTexture);
-    mApi.surfaceChanged(surface);
+    mApi.surfaceChanged(mSurface);
   }
 
   @Override
   public boolean onSurfaceTextureDestroyed(@NonNull SurfaceTexture surfaceTexture) {
-    mApi.surfaceDestroyed();
+    // Detach first (synchronous through JNI) so the native side has dropped
+    // its window reference before we release ours.
+    mApi.surfaceOffscreen();
+    if (mSurface != null) {
+      mSurface.release();
+      mSurface = null;
+    }
     return true;
   }
 

package/android/src/main/java/com/shopify/reactnative/skia/WebGPUView.java

@@ -61,16 +61,19 @@ public class WebGPUView extends ReactViewGroup implements WebGPUViewAPI {
     onSurfaceChanged(surface, mContextId, width, height);
   }
 
-  @Override
-  public void surfaceDestroyed() {
-    onSurfaceDestroy(mContextId);
-  }
-
   @Override
   public void surfaceOffscreen() {
     switchToOffscreenSurface(mContextId);
   }
 
+  /**
+   * Called from WebGPUViewManager.onDropViewInstance when React removes this
+   * view: the view dies with its Canvas, so it retires the registry entry.
+   */
+  public void destroy() {
+    onViewDestroyed(mContextId);
+  }
+
   @DoNotStrip
   private native void onSurfaceCreate(
     Surface surface,
@@ -88,8 +91,8 @@ public class WebGPUView extends ReactViewGroup implements WebGPUViewAPI {
   );
 
   @DoNotStrip
-  private native void onSurfaceDestroy(int contextId);
+  private native void switchToOffscreenSurface(int contextId);
 
   @DoNotStrip
-  private native void switchToOffscreenSurface(int contextId);
+  private native void onViewDestroyed(int contextId);
 }

package/android/src/main/java/com/shopify/reactnative/skia/WebGPUViewAPI.java

@@ -2,13 +2,18 @@ package com.shopify.reactnative.skia;
 
 import android.view.Surface;
 
+/**
+ * Surface lifecycle events a WebGPU child view reports. The registry entry
+ * itself is owned by the JS Canvas component (created lazily, removed via
+ * RNWebGPU.destroyContext on unmount); views only attach and detach surfaces.
+ * A detached context keeps rendering into an offscreen texture whose content
+ * is blitted onto the next attached surface.
+ */
 public interface WebGPUViewAPI {
 
   void surfaceCreated(Surface surface);
 
   void surfaceChanged(Surface surface);
 
-  void surfaceDestroyed();
-
   void surfaceOffscreen();
 }

package/android/src/main/java/com/shopify/reactnative/skia/WebGPUViewManager.java

@@ -53,6 +53,6 @@ public class WebGPUViewManager extends ReactViewManager implements SkiaWebGPUVie
   @Override
   public void onDropViewInstance(@NonNull ReactViewGroup view) {
     super.onDropViewInstance(view);
-    ((WebGPUView) view).surfaceDestroyed();
+    ((WebGPUView) view).destroy();
   }
 }

package/apple/WebGPUMetalView.mm

@@ -5,8 +5,30 @@
 #import "webgpu/webgpu_cpp.h"
 #import <QuartzCore/CAMetalLayer.h>
 
+#import <ReactCommon/CallInvoker.h>
+
 #import "rnskia/RNDawnContext.h"
 #import "rnwgpu/SurfaceRegistry.h"
+#import "rnwgpu/async/RuntimeContext.h"
+
+namespace {
+// Applies a surface attach latched by the platform UI thread (see
+// SurfaceInfo::applyPendingAttach) from the JS thread. Surface attaches are
+// normally adopted at the next frame boundary by whichever thread renders;
+// this flush covers contexts that are not actively rendering (static
+// content), so the last offscreen frame still makes it on screen. Mirrors
+// react-native-webgpu's RNWebGPUManager::flushPendingSurfaceTransition.
+void flushPendingSurfaceTransition(std::shared_ptr<rnwgpu::SurfaceInfo> info) {
+  if (info == nullptr) {
+    return;
+  }
+  auto invoker = rnwgpu::async::RuntimeContext::mainCallInvoker();
+  if (invoker == nullptr) {
+    return;
+  }
+  invoker->invokeAsync([info = std::move(info)] { info->applyPendingAttach(); });
+}
+} // namespace
 
 @implementation WebGPUMetalView {
   BOOL _isConfigured;
@@ -29,7 +51,11 @@
 
 - (void)configure {
   auto size = self.frame.size;
-  void *nativeSurface = (__bridge void *)self.layer;
+  // Retain the layer for as long as SurfaceInfo holds the pointer: the
+  // latched attach (and the flush lambda that adopts it) can outlive this
+  // view, e.g. across a dev reload where the registry is cleared before
+  // dealloc runs. Balanced by the releaser below.
+  void *nativeSurface = (void *)CFBridgingRetain(self.layer);
   auto &registry = rnwgpu::SurfaceRegistry::getInstance();
   auto &dawnContext = RNSkia::DawnContext::getInstance();
   auto gpu = dawnContext.getWGPUInstance();
@@ -41,10 +67,21 @@
   surfaceDescriptor.nextInChain = &metalSurfaceDesc;
   auto surface = gpu.CreateSurface(&surfaceDescriptor);
 
-  registry
-      .getSurfaceInfoOrCreate([_contextId intValue], gpu, size.width,
-                              size.height)
-      ->switchToOnscreen(nativeSurface, surface);
+  // Find-or-create + attach runs atomically under the registry lock so a
+  // concurrent destroyContext cannot orphan this surface.
+  auto info = registry.attachSurface(
+      [_contextId intValue], gpu, size.width, size.height, nativeSurface,
+      surface, [](void *layer) {
+        // The releaser can run on the rendering thread; CALayer teardown
+        // belongs on the main thread.
+        dispatch_async(dispatch_get_main_queue(), ^{
+          CFBridgingRelease(layer);
+        });
+      });
+  // The attach is adopted at the next frame boundary by the rendering thread;
+  // schedule a flush so contexts that are not currently rendering still pick
+  // it up (and present their last offscreen frame).
+  flushPendingSurfaceTransition(info);
 }
 
 - (void)update {
@@ -57,8 +94,14 @@
 }
 
 - (void)dealloc {
+  // The view dies with its Canvas (contextIds are never reused), so view
+  // teardown retires the registry entry. The JS-side cleanup
+  // (RNWebGPU.destroyContext) only handles entries that never had a native
+  // surface; see RNWebGPU::destroyContext for the ownership split.
   auto &registry = rnwgpu::SurfaceRegistry::getInstance();
-  // Remove the surface info from the registry
+  if (auto info = registry.getSurfaceInfo([_contextId intValue])) {
+    info->detachSurface();
+  }
   registry.removeSurfaceInfo([_contextId intValue]);
 }
 

package/cpp/api/JsiSkParagraphStyle.h

@@ -42,6 +42,16 @@ public:
    textHeightBehavior?: SkTextHeightBehavior;
    textStyle?: SkTextStyle;
    */
+  // A property set to undefined or null is treated as absent, like on web.
+  static bool hasValue(jsi::Runtime &runtime, const jsi::Object &object,
+                       const char *name) {
+    if (!object.hasProperty(runtime, name)) {
+      return false;
+    }
+    auto propValue = object.getProperty(runtime, name);
+    return !propValue.isUndefined() && !propValue.isNull();
+  }
+
   static para::ParagraphStyle fromValue(jsi::Runtime &runtime,
                                         const jsi::Value &value) {
     para::ParagraphStyle retVal;
@@ -59,52 +69,52 @@ public:
 
     auto object = value.asObject(runtime);
 
-    if (object.hasProperty(runtime, "disableHinting")) {
+    if (hasValue(runtime, object, "disableHinting")) {
       auto propValue = object.getProperty(runtime, "disableHinting");
       if (asBool(runtime, propValue)) {
         retVal.turnHintingOff();
       }
     }
-    if (object.hasProperty(runtime, "ellipsis")) {
+    if (hasValue(runtime, object, "ellipsis")) {
       auto propValue = object.getProperty(runtime, "ellipsis");
       auto inStr = propValue.asString(runtime).utf8(runtime);
       std::u16string uStr;
       fromUTF8(inStr, uStr);
       retVal.setEllipsis(uStr);
     }
-    if (object.hasProperty(runtime, "heightMultiplier")) {
+    if (hasValue(runtime, object, "heightMultiplier")) {
       auto propValue = object.getProperty(runtime, "heightMultiplier");
       retVal.setHeight(propValue.asNumber());
     }
-    if (object.hasProperty(runtime, "maxLines")) {
+    if (hasValue(runtime, object, "maxLines")) {
       auto propValue = object.getProperty(runtime, "maxLines");
       if (propValue.asNumber() != 0) {
         retVal.setMaxLines(propValue.asNumber());
       }
     }
-    if (object.hasProperty(runtime, "replaceTabCharacters")) {
+    if (hasValue(runtime, object, "replaceTabCharacters")) {
       auto propValue = object.getProperty(runtime, "replaceTabCharacters");
       retVal.setReplaceTabCharacters(asBool(runtime, propValue));
     }
-    if (object.hasProperty(runtime, "textAlign")) {
+    if (hasValue(runtime, object, "textAlign")) {
       auto propValue = object.getProperty(runtime, "textAlign");
       retVal.setTextAlign(static_cast<para::TextAlign>(propValue.asNumber()));
     }
-    if (object.hasProperty(runtime, "textDirection")) {
+    if (hasValue(runtime, object, "textDirection")) {
       auto propValue = object.getProperty(runtime, "textDirection");
       retVal.setTextDirection(
           static_cast<para::TextDirection>(propValue.asNumber()));
     }
-    if (object.hasProperty(runtime, "textHeightBehavior")) {
+    if (hasValue(runtime, object, "textHeightBehavior")) {
       auto propValue = object.getProperty(runtime, "textHeightBehavior");
       retVal.setTextHeightBehavior(
           static_cast<para::TextHeightBehavior>(propValue.asNumber()));
     }
-    if (object.hasProperty(runtime, "strutStyle")) {
+    if (hasValue(runtime, object, "strutStyle")) {
       auto propValue = object.getProperty(runtime, "strutStyle");
       retVal.setStrutStyle(JsiSkStrutStyle::fromValue(runtime, propValue));
     }
-    if (object.hasProperty(runtime, "textStyle")) {
+    if (hasValue(runtime, object, "textStyle")) {
       auto propValue = object.getProperty(runtime, "textStyle");
       retVal.setTextStyle(JsiSkTextStyle::fromValue(runtime, propValue));
     }

package/cpp/api/JsiSkStrutStyle.h

@@ -32,6 +32,16 @@ bool asBool(jsi::Runtime &runtime, const jsi::Value &value) {
  */
 class JsiSkStrutStyle {
 public:
+  // A property set to undefined or null is treated as absent, like on web.
+  static bool hasValue(jsi::Runtime &runtime, const jsi::Object &object,
+                       const char *name) {
+    if (!object.hasProperty(runtime, name)) {
+      return false;
+    }
+    auto propValue = object.getProperty(runtime, name);
+    return !propValue.isUndefined() && !propValue.isNull();
+  }
+
   static para::StrutStyle fromValue(jsi::Runtime &runtime,
                                     const jsi::Value &value) {
     // Read values from the argument - expected to be a TextStyle shaped object
@@ -52,11 +62,11 @@ public:
 
     para::StrutStyle retVal;
 
-    if (object.hasProperty(runtime, "strutEnabled")) {
+    if (hasValue(runtime, object, "strutEnabled")) {
       auto propValue = object.getProperty(runtime, "strutEnabled");
       retVal.setStrutEnabled(asBool(runtime, propValue));
     }
-    if (object.hasProperty(runtime, "fontFamilies")) {
+    if (hasValue(runtime, object, "fontFamilies")) {
       auto propValue = object.getProperty(runtime, "fontFamilies")
                            .asObject(runtime)
                            .asArray(runtime);
@@ -70,28 +80,28 @@ public:
       }
     }
 
-    if (object.hasProperty(runtime, "fontStyle")) {
+    if (hasValue(runtime, object, "fontStyle")) {
       auto propValue = object.getProperty(runtime, "fontStyle");
       retVal.setFontStyle(*JsiSkFontStyle::fromValue(runtime, propValue).get());
     }
-    if (object.hasProperty(runtime, "fontSize")) {
+    if (hasValue(runtime, object, "fontSize")) {
       auto propValue = object.getProperty(runtime, "fontSize");
       retVal.setFontSize(propValue.asNumber());
     }
-    if (object.hasProperty(runtime, "heightMultiplier")) {
+    if (hasValue(runtime, object, "heightMultiplier")) {
       auto propValue = object.getProperty(runtime, "heightMultiplier");
       retVal.setHeight(propValue.asNumber());
       retVal.setHeightOverride(true);
     }
-    if (object.hasProperty(runtime, "halfLeading")) {
+    if (hasValue(runtime, object, "halfLeading")) {
       auto propValue = object.getProperty(runtime, "halfLeading");
       retVal.setHalfLeading(asBool(runtime, propValue));
     }
-    if (object.hasProperty(runtime, "leading")) {
+    if (hasValue(runtime, object, "leading")) {
       auto propValue = object.getProperty(runtime, "leading");
       retVal.setLeading(propValue.asNumber());
     }
-    if (object.hasProperty(runtime, "forceStrutHeight")) {
+    if (hasValue(runtime, object, "forceStrutHeight")) {
       auto propValue = object.getProperty(runtime, "forceStrutHeight");
       retVal.setForceStrutHeight(asBool(runtime, propValue));
     }

package/cpp/api/JsiSkTextStyle.h

@@ -26,6 +26,16 @@ namespace para = skia::textlayout;
  */
 class JsiSkTextStyle {
 public:
+  // A property set to undefined or null is treated as absent, like on web.
+  static bool hasValue(jsi::Runtime &runtime, const jsi::Object &object,
+                       const char *name) {
+    if (!object.hasProperty(runtime, name)) {
+      return false;
+    }
+    auto propValue = object.getProperty(runtime, name);
+    return !propValue.isUndefined() && !propValue.isNull();
+  }
+
   static para::TextStyle fromValue(jsi::Runtime &runtime,
                                    const jsi::Value &value) {
 
@@ -43,35 +53,35 @@ public:
 
     auto object = value.asObject(runtime);
 
-    if (object.hasProperty(runtime, "backgroundColor")) {
+    if (hasValue(runtime, object, "backgroundColor")) {
       auto propValue = object.getProperty(runtime, "backgroundColor");
       SkPaint p;
       p.setColor(JsiSkColor::fromValue(runtime, propValue));
       retVal.setBackgroundPaint(p);
     }
-    if (object.hasProperty(runtime, "color")) {
+    if (hasValue(runtime, object, "color")) {
       auto propValue = object.getProperty(runtime, "color");
       retVal.setColor(JsiSkColor::fromValue(runtime, propValue));
     }
-    if (object.hasProperty(runtime, "decoration")) {
+    if (hasValue(runtime, object, "decoration")) {
       auto propValue = object.getProperty(runtime, "decoration");
       retVal.setDecoration(
           static_cast<para::TextDecoration>(propValue.asNumber()));
     }
-    if (object.hasProperty(runtime, "decorationColor")) {
+    if (hasValue(runtime, object, "decorationColor")) {
       auto propValue = object.getProperty(runtime, "decorationColor");
       retVal.setDecorationColor(JsiSkColor::fromValue(runtime, propValue));
     }
-    if (object.hasProperty(runtime, "decorationThickness")) {
+    if (hasValue(runtime, object, "decorationThickness")) {
       auto propValue = object.getProperty(runtime, "decorationThickness");
       retVal.setDecorationThicknessMultiplier(propValue.asNumber());
     }
-    if (object.hasProperty(runtime, "decorationStyle")) {
+    if (hasValue(runtime, object, "decorationStyle")) {
       auto propValue = object.getProperty(runtime, "decorationStyle");
       retVal.setDecorationStyle(
           static_cast<para::TextDecorationStyle>(propValue.asNumber()));
     }
-    if (object.hasProperty(runtime, "fontFamilies")) {
+    if (hasValue(runtime, object, "fontFamilies")) {
       auto propValue = object.getProperty(runtime, "fontFamilies")
                            .asObject(runtime)
                            .asArray(runtime);
@@ -85,7 +95,7 @@ public:
       }
       retVal.setFontFamilies(families);
     }
-    if (object.hasProperty(runtime, "fontFeatures")) {
+    if (hasValue(runtime, object, "fontFeatures")) {
       auto propValue = object.getProperty(runtime, "fontFeatures")
                            .asObject(runtime)
                            .asArray(runtime);
@@ -100,58 +110,58 @@ public:
         retVal.addFontFeature(SkString(name), value);
       }
     }
-    if (object.hasProperty(runtime, "fontSize")) {
+    if (hasValue(runtime, object, "fontSize")) {
       auto propValue = object.getProperty(runtime, "fontSize");
       retVal.setFontSize(propValue.asNumber());
     }
-    if (object.hasProperty(runtime, "fontStyle")) {
+    if (hasValue(runtime, object, "fontStyle")) {
       auto propValue =
           object.getProperty(runtime, "fontStyle").asObject(runtime);
       auto weight = static_cast<SkFontStyle::Weight>(
-          propValue.hasProperty(runtime, "weight")
+          hasValue(runtime, propValue, "weight")
               ? propValue.getProperty(runtime, "weight").asNumber()
               : static_cast<double>(SkFontStyle::Weight::kNormal_Weight));
 
       auto width = static_cast<SkFontStyle::Width>(
-          propValue.hasProperty(runtime, "width")
+          hasValue(runtime, propValue, "width")
               ? propValue.getProperty(runtime, "width").asNumber()
               : static_cast<double>(SkFontStyle::Width::kNormal_Width));
 
       auto slant = static_cast<SkFontStyle::Slant>(
-          propValue.hasProperty(runtime, "slant")
+          hasValue(runtime, propValue, "slant")
               ? propValue.getProperty(runtime, "slant").asNumber()
               : static_cast<double>(SkFontStyle::Slant::kUpright_Slant));
 
       retVal.setFontStyle(SkFontStyle(weight, width, slant));
     }
-    if (object.hasProperty(runtime, "foregroundColor")) {
+    if (hasValue(runtime, object, "foregroundColor")) {
       auto propValue = object.getProperty(runtime, "foregroundColor");
       SkPaint p;
       p.setColor(JsiSkColor::fromValue(runtime, propValue));
       retVal.setForegroundColor(p);
     }
-    if (object.hasProperty(runtime, "heightMultiplier")) {
+    if (hasValue(runtime, object, "heightMultiplier")) {
       auto propValue = object.getProperty(runtime, "heightMultiplier");
       retVal.setHeight(propValue.asNumber());
       retVal.setHeightOverride(true);
     }
-    if (object.hasProperty(runtime, "halfLeading")) {
+    if (hasValue(runtime, object, "halfLeading")) {
       auto propValue = object.getProperty(runtime, "halfLeading");
       retVal.setHalfLeading(propValue.getBool());
     }
-    if (object.hasProperty(runtime, "letterSpacing")) {
+    if (hasValue(runtime, object, "letterSpacing")) {
       auto propValue = object.getProperty(runtime, "letterSpacing");
       retVal.setLetterSpacing(propValue.asNumber());
     }
-    if (object.hasProperty(runtime, "wordSpacing")) {
+    if (hasValue(runtime, object, "wordSpacing")) {
       auto propValue = object.getProperty(runtime, "wordSpacing");
       retVal.setWordSpacing(propValue.asNumber());
     }
-    if (object.hasProperty(runtime, "locale")) {
+    if (hasValue(runtime, object, "locale")) {
       auto propValue = object.getProperty(runtime, "locale");
       retVal.setLocale(SkString(propValue.asString(runtime).utf8(runtime)));
     }
-    if (object.hasProperty(runtime, "shadows")) {
+    if (hasValue(runtime, object, "shadows")) {
       auto propValue = object.getProperty(runtime, "shadows")
                            .asObject(runtime)
                            .asArray(runtime);
@@ -159,24 +169,24 @@ public:
       retVal.resetShadows();
       for (size_t i = 0; i < size; ++i) {
         auto element = propValue.getValueAtIndex(runtime, i).asObject(runtime);
-        auto color = element.hasProperty(runtime, "color")
+        auto color = hasValue(runtime, element, "color")
                          ? JsiSkColor::fromValue(
                                runtime, element.getProperty(runtime, "color"))
                          : SK_ColorBLACK;
         SkPoint offset =
-            element.hasProperty(runtime, "offset")
+            hasValue(runtime, element, "offset")
                 ? *JsiSkPoint::fromValue(runtime,
                                          element.getProperty(runtime, "offset"))
                        .get()
                 : SkPoint::Make(0, 0);
         auto blurSigma =
-            element.hasProperty(runtime, "blurRadius")
+            hasValue(runtime, element, "blurRadius")
                 ? element.getProperty(runtime, "blurRadius").asNumber()
                 : 0;
         retVal.addShadow(para::TextShadow(color, offset, blurSigma));
       }
     }
-    if (object.hasProperty(runtime, "textBaseline")) {
+    if (hasValue(runtime, object, "textBaseline")) {
       auto propValue = object.getProperty(runtime, "textBaseline");
       retVal.setTextBaseline(
           static_cast<para::TextBaseline>(propValue.asNumber()));

package/cpp/rnskia/RNSkManager.cpp

@@ -51,6 +51,12 @@ RNSkManager::RNSkManager(
 }
 
 RNSkManager::~RNSkManager() {
+#ifdef SK_GRAPHITE
+  // Drop all canvas registry entries: after a reload the JS side restarts its
+  // contextId counter, and stale entries would alias new canvases onto dead
+  // surfaces.
+  rnwgpu::SurfaceRegistry::getInstance().clear();
+#endif
   // Free up any references
   _viewApi = nullptr;
   _jsRuntime = nullptr;