@shopify/react-native-skia 2.6.9 → 2.8.0

package/cpp/api/JsiSkParagraph.h

@@ -8,6 +8,7 @@
 #include <jsi/jsi.h>
 
 #include "JsiSkCanvas.h"
+#include "JsiSkFont.h"
 #include "JsiSkHostObjects.h"
 #include "JsiSkPath.h"
 #include "JsiSkRect.h"
@@ -141,6 +142,117 @@ public:
     return returnValue;
   }
 
+  JSI_HOST_FUNCTION(getPath) {
+    auto lineNumber =
+        static_cast<int>(getArgumentAsNumber(runtime, arguments, count, 0));
+    auto paragraph = getObject();
+    // Paragraph::getPath does not bounds-check the line number.
+    if (lineNumber < 0 ||
+        static_cast<size_t>(lineNumber) >= paragraph->lineNumber()) {
+      return jsi::Value::null();
+    }
+    // Paragraph::getPath resets its path builder after every visual run, so
+    // for lines shaped as multiple runs (e.g. through font fallback) it only
+    // returns the glyphs of the last run. Build the path from the per-glyph
+    // data exposed by extendedVisit instead.
+    SkPathBuilder builder;
+    paragraph->extendedVisit(
+        [lineNumber, &builder](
+            int visitedLine, const para::Paragraph::ExtendedVisitorInfo *info) {
+          if (visitedLine != lineNumber || info == nullptr) {
+            return;
+          }
+          struct Rec {
+            SkPathBuilder *builder;
+            SkPoint origin;
+            const SkPoint *pos;
+          } rec = {&builder, info->origin, info->positions};
+          info->font.getPaths(
+              {info->glyphs, static_cast<size_t>(info->count)},
+              [](const SkPath *src, const SkMatrix &mx, void *ctx) {
+                auto *rec = static_cast<Rec *>(ctx);
+                if (src != nullptr) {
+                  SkMatrix total = mx;
+                  total.postTranslate(rec->origin.fX + rec->pos->fX,
+                                      rec->origin.fY + rec->pos->fY);
+                  rec->builder->addPath(*src, total);
+                }
+                rec->pos += 1;
+              },
+              &rec);
+        });
+    SkPath path = builder.detach();
+    auto hostObjectInstance =
+        std::make_shared<JsiSkPath>(getContext(), std::move(path));
+    return JSI_CREATE_HOST_OBJECT_WITH_MEMORY_PRESSURE(
+        runtime, hostObjectInstance, getContext());
+  }
+
+  JSI_HOST_FUNCTION(extendedVisit) {
+    auto visitorObject = getArgumentAsFunction(runtime, arguments, count, 0);
+    auto visitor = visitorObject.asFunction(runtime);
+    auto context = getContext();
+    getObject()->extendedVisit(
+        [&runtime, &visitor, &context](
+            int lineNumber, const para::Paragraph::ExtendedVisitorInfo *info) {
+          if (info == nullptr) {
+            // Signals the end of the line
+            visitor.call(runtime, static_cast<double>(lineNumber),
+                         jsi::Value::null());
+            return;
+          }
+          auto value = jsi::Object(runtime);
+
+          auto fontInstance = std::make_shared<JsiSkFont>(context, info->font);
+          value.setProperty(runtime, "font",
+                            JSI_CREATE_HOST_OBJECT_WITH_MEMORY_PRESSURE(
+                                runtime, fontInstance, context));
+
+          auto origin = jsi::Object(runtime);
+          origin.setProperty(runtime, "x",
+                             static_cast<double>(info->origin.x()));
+          origin.setProperty(runtime, "y",
+                             static_cast<double>(info->origin.y()));
+          value.setProperty(runtime, "origin", origin);
+
+          auto advance = jsi::Object(runtime);
+          advance.setProperty(runtime, "width",
+                              static_cast<double>(info->advance.width()));
+          advance.setProperty(runtime, "height",
+                              static_cast<double>(info->advance.height()));
+          value.setProperty(runtime, "advance", advance);
+
+          auto size = info->count;
+          auto glyphs = jsi::Array(runtime, size);
+          auto positions = jsi::Array(runtime, size);
+          auto bounds = jsi::Array(runtime, size);
+          auto utf8Starts = jsi::Array(runtime, size);
+          for (int i = 0; i < size; ++i) {
+            glyphs.setValueAtIndex(runtime, i,
+                                   static_cast<double>(info->glyphs[i]));
+            auto position = jsi::Object(runtime);
+            position.setProperty(runtime, "x",
+                                 static_cast<double>(info->positions[i].x()));
+            position.setProperty(runtime, "y",
+                                 static_cast<double>(info->positions[i].y()));
+            positions.setValueAtIndex(runtime, i, position);
+            bounds.setValueAtIndex(
+                runtime, i,
+                JsiSkRect::toValue(runtime, context, info->bounds[i]));
+            utf8Starts.setValueAtIndex(
+                runtime, i, static_cast<double>(info->utf8Starts[i]));
+          }
+          value.setProperty(runtime, "glyphs", glyphs);
+          value.setProperty(runtime, "positions", positions);
+          value.setProperty(runtime, "bounds", bounds);
+          value.setProperty(runtime, "utf8Starts", utf8Starts);
+          value.setProperty(runtime, "flags", static_cast<double>(info->flags));
+
+          visitor.call(runtime, static_cast<double>(lineNumber), value);
+        });
+    return jsi::Value::undefined();
+  }
+
   JSI_HOST_FUNCTION(getRectsForPlaceholders) {
     std::vector<para::TextBox> placeholderInfos =
         getObject()->getRectsForPlaceholders();
@@ -169,6 +281,8 @@ public:
                                        getGlyphPositionAtCoordinate),
                        JSI_EXPORT_FUNC(JsiSkParagraph, getRectsForRange),
                        JSI_EXPORT_FUNC(JsiSkParagraph, getLineMetrics),
+                       JSI_EXPORT_FUNC(JsiSkParagraph, getPath),
+                       JSI_EXPORT_FUNC(JsiSkParagraph, extendedVisit),
                        JSI_EXPORT_FUNC(JsiSkParagraph, dispose))
 
   size_t getMemoryPressure() const override { return 1024 * 1024; }

package/cpp/api/JsiSkSurface.h

@@ -84,16 +84,22 @@ public:
 
   JSI_HOST_FUNCTION(flush) {
     auto surface = getObject();
+    // When `sync` is true, block until the GPU has finished executing the
+    // submitted work. Required before a native consumer on a different command
+    // queue reads this surface's texture via getNativeTextureUnstable(). #3916
+    bool sync = count > 0 && arguments[0].isBool() && arguments[0].getBool();
 #if defined(SK_GRAPHITE)
     // A raster surface (e.g. Skia.Surface.Make) has no Graphite recorder;
     // only Graphite-backed surfaces need to snap and submit a recording.
     if (auto *recorder = surface->recorder()) {
       auto recording = recorder->snap();
-      DawnContext::getInstance().submitRecording(recording.get());
+      DawnContext::getInstance().submitRecording(
+          recording.get(), sync ? skgpu::graphite::SyncToCpu::kYes
+                                : skgpu::graphite::SyncToCpu::kNo);
     }
 #else
     if (auto dContext = GrAsDirectContext(surface->recordingContext())) {
-      dContext->flushAndSubmit();
+      dContext->flushAndSubmit(sync ? GrSyncCpu::kYes : GrSyncCpu::kNo);
     }
 #endif
     return jsi::Value::undefined();

package/cpp/rnskia/RNDawnContext.h

@@ -325,8 +325,8 @@ public:
   }
 
   // Create onscreen surface with window
-  std::unique_ptr<WindowContext> MakeWindow(void *window, int width,
-                                            int height) {
+  std::unique_ptr<WindowContext> MakeWindow(void *window, int width, int height,
+                                            bool highBitDepth = false) {
     // 1. Create Surface
     wgpu::SurfaceDescriptor surfaceDescriptor;
 #ifdef __APPLE__
@@ -341,7 +341,8 @@ public:
     auto surface =
         wgpu::Instance(instance->Get()).CreateSurface(&surfaceDescriptor);
     return std::make_unique<DawnWindowContext>(
-        getRecorder(), backendContext.fDevice, surface, width, height);
+        getRecorder(), backendContext.fDevice, surface, window, width, height,
+        highBitDepth);
   }
 
   skgpu::graphite::Recorder *getRecorder() {

package/cpp/rnskia/RNDawnUtils.h

@@ -5,9 +5,9 @@
 #include "dawn/dawn_proc.h"
 #include "dawn/native/DawnNative.h"
 
-#include "utils/RNSkLog.h"
 #include "include/core/SkColorType.h"
 #include "include/gpu/graphite/dawn/DawnBackendContext.h"
+#include "utils/RNSkLog.h"
 
 namespace DawnUtils {
 
@@ -21,6 +21,24 @@ static const wgpu::TextureFormat PreferredTextureFormat =
     wgpu::TextureFormat::RGBA8Unorm;
 #endif
 
+// On-screen format used when the view requests high bit depth. The values
+// stay sRGB-encoded (SDR), only with more precision than 8 bits per channel;
+// this is about banding, not HDR.
+// - Apple: 16-bit float, displayed through the extended sRGB layer colorspace
+//   so colors match the 8-bit path exactly.
+// - Android: 10-bit unorm. SurfaceFlinger quantizes SDR float16 layers during
+//   composition, but RGBA_1010102 buffers keep their precision through
+//   composition, including direct scanout on 10-bit panels.
+#ifdef __APPLE__
+static const SkColorType HighBitDepthColorType = kRGBA_F16_SkColorType;
+static const wgpu::TextureFormat HighBitDepthTextureFormat =
+    wgpu::TextureFormat::RGBA16Float;
+#else
+static const SkColorType HighBitDepthColorType = kRGBA_1010102_SkColorType;
+static const wgpu::TextureFormat HighBitDepthTextureFormat =
+    wgpu::TextureFormat::RGB10A2Unorm;
+#endif
+
 // Find the best matching GPU adapter for the current platform.
 // Sorts by adapter type (DiscreteGPU > IntegratedGPU > CPU) and selects the
 // first adapter matching the platform backend (Metal on Apple, Vulkan on
@@ -207,11 +225,12 @@ createDawnBackendContext(dawn::native::Instance *instance) {
 #ifdef __APPLE__
       wgpu::FeatureName::SharedTextureMemoryIOSurface,
       // Required to call SharedTextureMemory::EndAccess on Metal (it exports a
-      // MTLSharedEvent fence). importExternalTexture / importSharedTextureMemory
-      // end the access window after submit; without this EndAccess errors with
-      // "Required feature (SharedFenceMTLSharedEvent) is missing". Safe here
-      // because we always queue.submit() before EndAccess (the secondary device
-      // omits it on purpose — its camera path doesn't commit first).
+      // MTLSharedEvent fence). importExternalTexture /
+      // importSharedTextureMemory end the access window after submit; without
+      // this EndAccess errors with "Required feature
+      // (SharedFenceMTLSharedEvent) is missing". Safe here because we always
+      // queue.submit() before EndAccess (the secondary device omits it on
+      // purpose; its camera path doesn't commit first).
       wgpu::FeatureName::SharedFenceMTLSharedEvent,
       wgpu::FeatureName::DawnMultiPlanarFormats,
       wgpu::FeatureName::MultiPlanarFormatP010,

package/cpp/rnskia/RNDawnWindowContext.h

@@ -1,6 +1,7 @@
 #pragma once
 
 #include "RNDawnUtils.h"
+#include "RNMetalLayerColorSpace.h"
 #include "RNWindowContext.h"
 
 #include "dawn/native/MetalBackend.h"
@@ -24,9 +25,22 @@ namespace RNSkia {
 class DawnWindowContext : public WindowContext {
 public:
   DawnWindowContext(skgpu::graphite::Recorder *recorder, wgpu::Device device,
-                    wgpu::Surface surface, int width, int height)
-      : _recorder(recorder), _device(device), _surface(surface), _width(width),
-        _height(height) {
+                    wgpu::Surface surface, void *nativeSurface, int width,
+                    int height, bool highBitDepth = false)
+      : _recorder(recorder), _device(device), _surface(surface),
+        _nativeSurface(nativeSurface), _width(width), _height(height) {
+    _format = DawnUtils::PreferredTextureFormat;
+    _colorType = DawnUtils::PreferedColorType;
+    if (highBitDepth) {
+      if (surfaceSupportsFormat(DawnUtils::HighBitDepthTextureFormat)) {
+        _format = DawnUtils::HighBitDepthTextureFormat;
+        _colorType = DawnUtils::HighBitDepthColorType;
+      } else {
+        RNSkLogger::logToConsole(
+            "High bit depth was requested but the surface does not support "
+            "it, falling back to the 8-bit format");
+      }
+    }
     configureSurface();
   }
 
@@ -38,15 +52,13 @@ public:
       return nullptr;
     }
     skgpu::graphite::DawnTextureInfo info(
-        skgpu::graphite::SampleCount::k1, skgpu::Mipmapped::kNo,
-        DawnUtils::PreferredTextureFormat, texture.GetUsage(),
-        wgpu::TextureAspect::All);
+        skgpu::graphite::SampleCount::k1, skgpu::Mipmapped::kNo, _format,
+        texture.GetUsage(), wgpu::TextureAspect::All);
     auto backendTex = skgpu::graphite::BackendTextures::MakeDawn(texture.Get());
     sk_sp<SkColorSpace> colorSpace = SkColorSpace::MakeSRGB();
     SkSurfaceProps surfaceProps;
-    auto surface = SkSurfaces::WrapBackendTexture(_recorder, backendTex,
-                                                  DawnUtils::PreferedColorType,
-                                                  colorSpace, &surfaceProps);
+    auto surface = SkSurfaces::WrapBackendTexture(
+        _recorder, backendTex, _colorType, colorSpace, &surfaceProps);
     return surface;
   }
 
@@ -66,7 +78,7 @@ private:
   void configureSurface() {
     wgpu::SurfaceConfiguration config;
     config.device = _device;
-    config.format = DawnUtils::PreferredTextureFormat;
+    config.format = _format;
     config.width = _width;
     config.height = _height;
     config.presentMode = wgpu::PresentMode::Fifo;
@@ -74,12 +86,34 @@ private:
     config.alphaMode = wgpu::CompositeAlphaMode::Premultiplied;
 #endif
     _surface.Configure(&config);
+#ifdef __APPLE__
+    // Float formats need the layer tagged as (gamma-encoded) extended sRGB so
+    // the sRGB-encoded values display identically to the 8-bit path.
+    applyCAMetalLayerColorSpace(_nativeSurface, _format);
+#endif
+  }
+
+  bool surfaceSupportsFormat(wgpu::TextureFormat format) {
+    wgpu::SurfaceCapabilities capabilities;
+    if (_surface.GetCapabilities(_device.GetAdapter(), &capabilities) !=
+        wgpu::Status::Success) {
+      return false;
+    }
+    for (size_t i = 0; i < capabilities.formatCount; i++) {
+      if (capabilities.formats[i] == format) {
+        return true;
+      }
+    }
+    return false;
   }
 
   skgpu::graphite::Recorder *_recorder;
   // TODO: keep device in DawnContext? Do we need it for resizing?
   wgpu::Device _device;
   wgpu::Surface _surface;
+  [[maybe_unused]] void *_nativeSurface;
+  wgpu::TextureFormat _format;
+  SkColorType _colorType;
   int _width;
   int _height;
 };

package/cpp/rnskia/RNMetalLayerColorSpace.h

@@ -0,0 +1,16 @@
+#pragma once
+
+#ifdef __APPLE__
+
+#include "webgpu/webgpu_cpp.h"
+
+namespace RNSkia {
+
+// Tags the CAMetalLayer with the colorspace matching the configured texture
+// format. Implemented in apple/MetalLayerColorSpace.mm.
+void applyCAMetalLayerColorSpace(void *nativeSurface,
+                                 wgpu::TextureFormat format);
+
+} // namespace RNSkia
+
+#endif // __APPLE__

package/cpp/rnskia/RNSkJsiViewApi.h

@@ -6,13 +6,14 @@
 #include <shared_mutex>
 #include <string>
 #include <unordered_map>
+#include <unordered_set>
 #include <utility>
 #include <vector>
 
-#include "jsi/JsiHostObject.h"
 #include "RNSkPictureView.h"
 #include "RNSkPlatformContext.h"
 #include "RNSkView.h"
+#include "jsi/JsiHostObject.h"
 #include "jsi/ViewProperty.h"
 #include <jsi/jsi.h>
 
@@ -39,33 +40,56 @@ public:
   void removeViewInfo(size_t id) {
     std::unique_lock<std::shared_mutex> lock(_mutex);
     _registry.erase(id);
+    // Remember that this id was explicitly unregistered. Property updates
+    // can arrive after unregistration (e.g. a Reanimated worklet setting the
+    // picture racing with unmount); without a tombstone they would recreate
+    // the entry and its props (an SkPicture retaining every image it draws)
+    // would stay in this global registry forever.
+    _unregistered.insert(id);
   }
 
-  // Execute a function while holding the registry lock
+  // Execute a function while holding the registry lock.
+  // When `revive` is true (registration paths), a previously unregistered id
+  // becomes valid again; otherwise calls for unregistered ids receive a
+  // transient info object that is not stored in the registry.
   template <typename F>
-  auto withViewInfo(size_t id, F &&func)
+  auto withViewInfo(size_t id, F &&func, bool revive = false)
       -> decltype(func(std::shared_ptr<RNSkViewInfo>())) {
     std::unique_lock<std::shared_mutex> lock(_mutex);
+    if (revive) {
+      _unregistered.erase(id);
+    }
     auto it = _registry.find(id);
     std::shared_ptr<RNSkViewInfo> info;
     if (it != _registry.end()) {
       info = it->second;
     } else {
       info = std::make_shared<RNSkViewInfo>();
-      _registry[id] = info;
+      if (_unregistered.find(id) == _unregistered.end()) {
+        _registry[id] = info;
+      }
     }
     return func(info);
   }
 
+  // Read-only lookup: never creates a registry entry.
+  std::shared_ptr<RNSkView> getView(size_t id) {
+    std::shared_lock<std::shared_mutex> lock(_mutex);
+    auto it = _registry.find(id);
+    return it != _registry.end() ? it->second->view : nullptr;
+  }
+
   void clear() {
     std::unique_lock<std::shared_mutex> lock(_mutex);
     _registry.clear();
+    _unregistered.clear();
   }
 
 private:
   ViewRegistry() = default;
   mutable std::shared_mutex _mutex;
   std::unordered_map<size_t, std::shared_ptr<RNSkViewInfo>> _registry;
+  std::unordered_set<size_t> _unregistered;
 };
 
 class RNSkJsiViewApi : public RNJsi::JsiHostObject,
@@ -137,13 +161,10 @@ public:
 
     // find Skia View
     int nativeId = arguments[0].asNumber();
-    ViewRegistry::getInstance().withViewInfo(
-        nativeId, [](std::shared_ptr<RNSkViewInfo> info) {
-          if (info->view != nullptr) {
-            info->view->requestRedraw();
-          }
-          return nullptr;
-        });
+    auto view = ViewRegistry::getInstance().getView(nativeId);
+    if (view != nullptr) {
+      view->requestRedraw();
+    }
     return jsi::Value::undefined();
   }
 
@@ -164,9 +185,8 @@ public:
     // find Skia view
     int nativeId = arguments[0].asNumber();
     sk_sp<SkImage> image;
-    std::shared_ptr<RNSkView> view = ViewRegistry::getInstance().withViewInfo(
-        nativeId,
-        [](std::shared_ptr<RNSkViewInfo> info) { return info->view; });
+    std::shared_ptr<RNSkView> view =
+        ViewRegistry::getInstance().getView(nativeId);
     if (view != nullptr) {
       if (count > 1 && !arguments[1].isUndefined() && !arguments[1].isNull()) {
         auto rect = JsiSkRect::fromValue(runtime, arguments[1]);
@@ -202,9 +222,8 @@ public:
 
     // find Skia view
     int nativeId = arguments[0].asNumber();
-    std::shared_ptr<RNSkView> view = ViewRegistry::getInstance().withViewInfo(
-        nativeId,
-        [](std::shared_ptr<RNSkViewInfo> info) { return info->view; });
+    std::shared_ptr<RNSkView> view =
+        ViewRegistry::getInstance().getView(nativeId);
     auto context = _platformContext;
     auto bounds =
         count > 1 && !arguments[1].isUndefined() && !arguments[1].isNull()
@@ -248,9 +267,8 @@ public:
 
     // find Skia View
     int nativeId = arguments[0].asNumber();
-    std::shared_ptr<RNSkView> view = ViewRegistry::getInstance().withViewInfo(
-        nativeId,
-        [](std::shared_ptr<RNSkViewInfo> info) { return info->view; });
+    std::shared_ptr<RNSkView> view =
+        ViewRegistry::getInstance().getView(nativeId);
     if (view != nullptr) {
       auto pixelDensity = _platformContext->getPixelDensity();
       auto sizeObj = jsi::Object(runtime);
@@ -293,7 +311,8 @@ public:
    */
   void registerSkiaView(size_t nativeId, std::shared_ptr<RNSkView> view) {
     ViewRegistry::getInstance().withViewInfo(
-        nativeId, [&](std::shared_ptr<RNSkViewInfo> info) {
+        nativeId,
+        [&](std::shared_ptr<RNSkViewInfo> info) {
           info->view = view;
           info->view->setNativeId(nativeId);
 
@@ -301,7 +320,8 @@ public:
           info->props.clear();
 
           return nullptr;
-        });
+        },
+        /* revive= */ true);
   }
 
   /**
@@ -320,7 +340,8 @@ public:
    */
   void setSkiaView(size_t nativeId, std::shared_ptr<RNSkView> view) {
     ViewRegistry::getInstance().withViewInfo(
-        nativeId, [&](std::shared_ptr<RNSkViewInfo> info) {
+        nativeId,
+        [&](std::shared_ptr<RNSkViewInfo> info) {
           if (view != nullptr) {
             info->view = view;
             info->view->setNativeId(nativeId);
@@ -330,7 +351,8 @@ public:
             info->view = view; // Set to nullptr
           }
           return nullptr;
-        });
+        },
+        /* revive= */ view != nullptr);
   }
 
 private:

package/cpp/rnwgpu/SurfaceRegistry.h

@@ -8,6 +8,8 @@
 #include "webgpu/webgpu_cpp.h"
 
 #ifdef __APPLE__
+#include "rnskia/RNMetalLayerColorSpace.h"
+
 namespace dawn::native::metal {
 void WaitForCommandsToBeScheduled(WGPUDevice device);
 } // namespace dawn::native::metal
@@ -126,10 +128,11 @@ public:
 #ifdef __APPLE__
     // Ensure command buffers are scheduled before presenting. Read the device
     // under a shared lock, then wait without holding it (the wait can block).
-    // The device may be reconfigured between the two locks; that is safe because
-    // present() is called on the rendering thread right after submit(), the wait
-    // just flushes that thread's already-submitted work, and the Present() below
-    // re-checks `surface` under the unique lock before touching it.
+    // The device may be reconfigured between the two locks; that is safe
+    // because present() is called on the rendering thread right after submit(),
+    // the wait just flushes that thread's already-submitted work, and the
+    // Present() below re-checks `surface` under the unique lock before touching
+    // it.
     wgpu::Device device;
     {
       std::shared_lock<std::shared_mutex> lock(_mutex);
@@ -186,6 +189,9 @@ private:
   void _configure() {
     if (surface) {
       surface.Configure(&config);
+#ifdef __APPLE__
+      RNSkia::applyCAMetalLayerColorSpace(nativeSurface, config.format);
+#endif
     } else {
       wgpu::TextureDescriptor textureDesc;
       textureDesc.format = config.format;

package/lib/commonjs/Platform/Platform.web.js

@@ -7,100 +7,13 @@ exports.Platform = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _types = require("../skia/types");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js
-const DOM_LAYOUT_HANDLER_NAME = "__reactLayoutHandler";
-let resizeObserver = null;
-const getObserver = () => {
-  if (resizeObserver == null) {
-    resizeObserver = new window.ResizeObserver(function (entries) {
-      entries.forEach(entry => {
-        const node = entry.target;
-        const {
-          left,
-          top,
-          width,
-          height
-        } = entry.contentRect;
-        const onLayout = node[DOM_LAYOUT_HANDLER_NAME];
-        if (typeof onLayout === "function") {
-          // setTimeout 0 is taken from react-native-web (UIManager)
-          setTimeout(() => onLayout({
-            timeStamp: Date.now(),
-            nativeEvent: {
-              layout: {
-                x: left,
-                y: top,
-                width,
-                height
-              }
-            },
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            currentTarget: 0,
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            target: 0,
-            bubbles: false,
-            cancelable: false,
-            defaultPrevented: false,
-            eventPhase: 0,
-            isDefaultPrevented() {
-              throw new Error("Method not supported on web.");
-            },
-            isPropagationStopped() {
-              throw new Error("Method not supported on web.");
-            },
-            persist() {
-              throw new Error("Method not supported on web.");
-            },
-            preventDefault() {
-              throw new Error("Method not supported on web.");
-            },
-            stopPropagation() {
-              throw new Error("Method not supported on web.");
-            },
-            isTrusted: true,
-            type: ""
-          }), 0);
-        }
-      });
-    });
-  }
-  return resizeObserver;
-};
-const useElementLayout = (ref, onLayout) => {
-  const observer = getObserver();
-  (0, _react.useLayoutEffect)(() => {
-    const node = ref.current;
-    if (node !== null) {
-      node[DOM_LAYOUT_HANDLER_NAME] = onLayout;
-    }
-  }, [ref, onLayout]);
-  (0, _react.useLayoutEffect)(() => {
-    const node = ref.current;
-    if (node != null && observer != null) {
-      if (typeof node[DOM_LAYOUT_HANDLER_NAME] === "function") {
-        observer.observe(node);
-      } else {
-        observer.unobserve(node);
-      }
-    }
-    return () => {
-      if (node != null && observer != null) {
-        observer.unobserve(node);
-      }
-    };
-  }, [observer, ref]);
-};
+// Layout is observed by the views themselves (see SkiaPictureView.web.tsx):
+// this shim only reproduces react-native-web's default View styling.
 const View = ({
   children,
-  onLayout,
   style: rawStyle
 }) => {
   const style = (0, _react.useMemo)(() => rawStyle !== null && rawStyle !== void 0 ? rawStyle : {}, [rawStyle]);
-  const ref = (0, _react.useRef)(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  useElementLayout(ref, onLayout);
   const cssStyles = (0, _react.useMemo)(() => {
     return {
       alignItems: "stretch",
@@ -123,7 +36,6 @@ const View = ({
     };
   }, [style]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
     style: cssStyles
   }, children);
 };