react-native-skia 3.0.2 → 3.0.3

package/README.md

@@ -4,6 +4,23 @@ High-performance 2d Graphics for React Native using Skia
 
 <img width="400" alt="skia" src="https://user-images.githubusercontent.com/306134/146549218-b7959ad9-0107-4c1c-b439-b96c780f5230.png">
 
-Checkout the full documentation [here](https://shopify.github.io/react-native-skia).
+React Native Skia brings the Skia Graphics Library to React Native. Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and Firefox OS, and many other products.
 
-Documentation on the library development is available [here](https://github.com/Shopify/react-native-skia#library-development).
+## Getting Started
+
+```sh
+yarn add react-native-skia
+```
+
+Checkout the full documentation [here](https://wcandillon.github.io/react-native-skia).
+
+## v3 and v2
+
+React Native Skia v3 renders with [Graphite](https://skia.org/docs/user/graphite/), Skia's new GPU backend, on iOS, Android (API level 26 and above), and macOS.
+
+- To upgrade from v2 or from `@shopify/react-native-skia`, follow the [migration guide](https://wcandillon.github.io/react-native-skia/docs/getting-started/migration).
+- v2 keeps the Ganesh backend and is still maintained. Install it with `yarn add react-native-skia@2`. Its documentation is available at [wcandillon.github.io/react-native-skia/v2](https://wcandillon.github.io/react-native-skia/v2/).
+
+## Contributing
+
+Documentation on the library development is available [here](https://github.com/wcandillon/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md).

package/apple/MetalLayerColorSpace.mm

@@ -8,20 +8,22 @@
 
 namespace RNSkia {
 
-// WebGPU canvas values are sRGB-encoded regardless of the texture format
-// (GPUCanvasConfiguration.colorSpace defaults to "srgb"), so the same shader
-// output must display identically on bgra8unorm and rgba16float surfaces.
-// Tagging the float layer as (gamma-encoded) extended sRGB matches the
-// browser behavior: identical colors, with the extra precision of float16.
+// The surface holds gamma-encoded values in the gamut the view renders in
+// (sRGB or Display P3, see DawnUtils::viewColorSpace) regardless of the
+// texture format, so the same content must display identically on bgra8unorm
+// and rgba16float surfaces. Tagging the float layer with the gamma-encoded
+// extended colorspace of that gamut gives identical colors, with the extra
+// precision of float16.
 void applyCAMetalLayerColorSpace(void *nativeSurface,
-                                 wgpu::TextureFormat format) {
+                                 wgpu::TextureFormat format,
+                                 bool useP3ColorSpace) {
   CALayer *layer = (__bridge CALayer *)nativeSurface;
   if (![layer isKindOfClass:[CAMetalLayer class]]) {
     return;
   }
   auto metalLayer = static_cast<CAMetalLayer *>(layer);
-  setCAMetalLayerColorSpace(metalLayer,
-                            format == wgpu::TextureFormat::RGBA16Float, false);
+  setCAMetalLayerColorSpace(
+      metalLayer, format == wgpu::TextureFormat::RGBA16Float, useP3ColorSpace);
   // The change must be set synchronously so the first present already sees
   // it, and it must reach the render server. On a non-main thread (RN JS or
   // worklet runtime) the property lands in that thread's implicit

package/apple/RNSkApplePlatformContext.h

@@ -32,10 +32,21 @@ public:
     // Create screenshot manager
     _screenshotService =
         [[ViewScreenshotService alloc] initWithViewRegistry:viewRegistry];
+    _prefersP3ColorSpace = mainScreenSupportsP3();
   }
 
   ~RNSkApplePlatformContext() = default;
 
+  /**
+   Whether the main screen has a wide color gamut (Display P3). The screen is
+   asked once and the answer is kept: RNSkiaModule asks first, on the main
+   queue it is created on, so that the context (created on the JS thread)
+   only reads the answer.
+   */
+  static bool mainScreenSupportsP3();
+
+  bool prefersP3ColorSpace() override { return _prefersP3ColorSpace; }
+
   void runOnMainThread(std::function<void()>) override;
 
   sk_sp<SkImage> takeScreenshotFromViewTag(size_t tag) override;
@@ -66,6 +77,7 @@ public:
 
 private:
   ViewScreenshotService *_screenshotService;
+  bool _prefersP3ColorSpace = false;
 };
 
 } // namespace RNSkia

package/apple/RNSkApplePlatformContext.mm

@@ -242,6 +242,23 @@ void RNSkApplePlatformContext::raiseError(const std::exception &err) {
   RCTFatal(RCTErrorWithMessage([NSString stringWithUTF8String:err.what()]));
 }
 
+bool RNSkApplePlatformContext::mainScreenSupportsP3() {
+  static bool supportsP3 = false;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+#if !TARGET_OS_OSX
+    supportsP3 =
+        [UIScreen mainScreen].traitCollection.displayGamut == UIDisplayGamutP3;
+#else
+    NSColorSpace *screenColorSpace = [NSScreen mainScreen].colorSpace;
+    supportsP3 =
+        screenColorSpace != nil &&
+        [screenColorSpace isEqual:[NSColorSpace displayP3ColorSpace]];
+#endif // !TARGET_OS_OSX
+  });
+  return supportsP3;
+}
+
 sk_sp<SkSurface>
 RNSkApplePlatformContext::makeOffscreenSurface(int width, int height,
                                                bool useP3ColorSpace) {

package/apple/RNSkMetalCanvasProvider.mm

@@ -94,8 +94,9 @@ void RNSkMetalCanvasProvider::setSize(int width, int height) {
   // product like 1169.9999 gives the pixel size the layout means.
   int w = static_cast<int>(std::lround(width * _context->getPixelDensity()));
   int h = static_cast<int>(std::lround(height * _context->getPixelDensity()));
-  _ctx = RNSkia::DawnContext::getInstance().MakeWindow((__bridge void *)_layer,
-                                                       w, h, _highBitDepth);
+  _ctx = RNSkia::DawnContext::getInstance().MakeWindow(
+      (__bridge void *)_layer, w, h, _highBitDepth,
+      _context->prefersP3ColorSpace());
   {
     auto *window = static_cast<RNSkia::DawnWindowContext *>(_ctx.get());
     std::lock_guard<std::mutex> lock(_targetInfoMutex);
@@ -104,6 +105,7 @@ void RNSkMetalCanvasProvider::setSize(int width, int height) {
     _targetInfo.width = window->getWidth();
     _targetInfo.height = window->getHeight();
     _targetInfo.colorType = window->getColorType();
+    _targetInfo.useP3ColorSpace = window->usesP3ColorSpace();
     _targetInfo.textureInfo = window->getTextureInfo();
     _hasTargetInfo = true;
   }

package/apple/RNSkiaModule.mm

@@ -39,6 +39,16 @@ RCT_EXPORT_MODULE()
   return YES;
 }
 
+- (instancetype)init {
+  if (self = [super init]) {
+    // Created on the main queue (see requiresMainQueueSetup): the screen is
+    // asked for its color gamut here, where UIKit may be used. The platform
+    // context is created on the JS thread and only reads the answer.
+    RNSkia::RNSkApplePlatformContext::mainScreenSupportsP3();
+  }
+  return self;
+}
+
 - (void)
     installJSIBindingsWithRuntime:(facebook::jsi::Runtime &)runtime
                       callInvoker:

package/cpp/rnskia/RNDawnContext.h

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

package/cpp/rnskia/RNDawnUtils.h

@@ -8,6 +8,7 @@
 
 #include "dawn/native/DawnNative.h"
 
+#include "include/core/SkColorSpace.h"
 #include "include/core/SkColorType.h"
 #include "include/gpu/graphite/dawn/DawnBackendContext.h"
 #include "utils/RNSkLog.h"
@@ -42,6 +43,17 @@ static const wgpu::TextureFormat HighBitDepthTextureFormat =
     wgpu::TextureFormat::RGB10A2Unorm;
 #endif
 
+// The color space a view renders in: Display P3 (with the sRGB transfer
+// function) where the platform prefers it (a wide gamut display on Apple
+// platforms, see RNSkPlatformContext::prefersP3ColorSpace), sRGB otherwise.
+// Colors are managed either way: content looks the same in both, Display P3
+// only adds the colors sRGB cannot represent.
+inline sk_sp<SkColorSpace> viewColorSpace(bool useP3ColorSpace) {
+  return useP3ColorSpace ? SkColorSpace::MakeRGB(SkNamedTransferFn::kSRGB,
+                                                 SkNamedGamut::kDisplayP3)
+                         : SkColorSpace::MakeSRGB();
+}
+
 // Usage requested for a window texture when the surface supports it (see
 // DawnWindowContext::supportedSurfaceUsage), and assumed for a Graphite
 // recording made before its window exists: TextureBinding lets a render pass

package/cpp/rnskia/RNDawnWindowContext.cpp

@@ -29,7 +29,8 @@ bool DawnWindowContext::presentRecordings(
   auto backendTex = skgpu::graphite::BackendTextures::MakeDawn(texture.Get());
   SkSurfaceProps surfaceProps;
   auto surface = SkSurfaces::WrapBackendTexture(
-      _recorder, backendTex, SkColorSpace::MakeSRGB(), &surfaceProps);
+      _recorder, backendTex, DawnUtils::viewColorSpace(_useP3ColorSpace),
+      &surfaceProps);
   if (!surface) {
     return false;
   }

package/cpp/rnskia/RNDawnWindowContext.h

@@ -30,9 +30,11 @@ class DawnWindowContext : public WindowContext {
 public:
   DawnWindowContext(skgpu::graphite::Recorder *recorder, wgpu::Device device,
                     wgpu::Surface surface, void *nativeSurface, int width,
-                    int height, bool highBitDepth = false)
+                    int height, bool highBitDepth = false,
+                    bool useP3ColorSpace = false)
       : _recorder(recorder), _device(device), _surface(surface),
-        _nativeSurface(nativeSurface), _width(width), _height(height) {
+        _nativeSurface(nativeSurface), _useP3ColorSpace(useP3ColorSpace),
+        _width(width), _height(height) {
     _format = DawnUtils::PreferredTextureFormat;
     _colorType = DawnUtils::PreferedColorType;
     if (highBitDepth) {
@@ -59,10 +61,10 @@ public:
         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, _colorType, colorSpace, &surfaceProps);
+        _recorder, backendTex, _colorType,
+        DawnUtils::viewColorSpace(_useP3ColorSpace), &surfaceProps);
     return surface;
   }
 
@@ -80,6 +82,10 @@ public:
 
   SkColorType getColorType() const { return _colorType; }
 
+  // Whether the window is in Display P3 rather than sRGB: a deferred canvas
+  // must be recorded in the color space of the window it is replayed onto.
+  bool usesP3ColorSpace() const { return _useP3ColorSpace; }
+
   // The texture description a deferred canvas must be recorded with to be
   // replayed onto this window.
   skgpu::graphite::TextureInfo getTextureInfo() const {
@@ -114,9 +120,10 @@ private:
 #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);
+    // The layer is tagged with the gamut the window renders in; float formats
+    // need the (gamma-encoded) extended variant so the values display
+    // identically to the 8-bit path.
+    applyCAMetalLayerColorSpace(_nativeSurface, _format, _useP3ColorSpace);
 #endif
   }
 
@@ -161,6 +168,7 @@ private:
   wgpu::Device _device;
   wgpu::Surface _surface;
   [[maybe_unused]] void *_nativeSurface;
+  bool _useP3ColorSpace;
   wgpu::TextureFormat _format;
   wgpu::TextureUsage _usage = wgpu::TextureUsage::RenderAttachment;
   SkColorType _colorType;

package/cpp/rnskia/RNMetalLayerColorSpace.h

@@ -7,9 +7,11 @@
 namespace RNSkia {
 
 // Tags the CAMetalLayer with the colorspace matching the configured texture
-// format. Implemented in apple/MetalLayerColorSpace.mm.
+// format and the gamut the view renders in. Implemented in
+// apple/MetalLayerColorSpace.mm.
 void applyCAMetalLayerColorSpace(void *nativeSurface,
-                                 wgpu::TextureFormat format);
+                                 wgpu::TextureFormat format,
+                                 bool useP3ColorSpace);
 
 } // namespace RNSkia
 

package/cpp/rnskia/RNSkCanvasProvider.h

@@ -24,15 +24,19 @@
 namespace RNSkia {
 
 /**
- * Describes the texture a recording is replayed onto: the pixel size and the
- * format of a window (or offscreen) surface. A deferred canvas is recorded
- * against this description, so it can be created before the surface itself
- * exists.
+ * Describes the texture a recording is replayed onto: the pixel size, the
+ * format and the color space of a window (or offscreen) surface. A deferred
+ * canvas is recorded against this description, so it can be created before
+ * the surface itself exists.
  */
 struct RNSkGraphiteTargetInfo {
   int width = 0;
   int height = 0;
   SkColorType colorType = kUnknown_SkColorType;
+  // Display P3 rather than sRGB (see DawnUtils::viewColorSpace). The colors
+  // of a recording are converted to the color space of its target when it is
+  // recorded, not when it is replayed.
+  bool useP3ColorSpace = false;
   skgpu::graphite::TextureInfo textureInfo;
 };
 
@@ -80,8 +84,8 @@ public:
   /**
    Draws an image at the origin of the target texture and presents it. Same
    thread and return value as presentRecordings(). Used for a recording whose
-   size differs from the target's: it is replayed into a texture of its own
-   size first (see RNSkView::present).
+   size or color space differs from the target's: it is replayed into a
+   texture of its own first (see RNSkView::present).
    */
   virtual bool presentImage(const sk_sp<SkImage> &image) = 0;
 
@@ -106,14 +110,18 @@ private:
 
 /**
  * An offscreen surface the content of a view is replayed into for a snapshot.
+ * A recording is replayed as is, so the surface takes the color space of the
+ * recordings it is meant for.
  */
 class RNSkOffscreenCanvasProvider : public RNSkCanvasProvider {
 public:
   RNSkOffscreenCanvasProvider(
       const std::shared_ptr<RNSkPlatformContext> &context, int width,
-      int height)
+      int height, bool useP3ColorSpace = false)
       : _width(width), _height(height), _pd(context->getPixelDensity()),
-        _surface(context->makeOffscreenSurface(width, height)) {}
+        _useP3ColorSpace(useP3ColorSpace),
+        _surface(
+            context->makeOffscreenSurface(width, height, useP3ColorSpace)) {}
 
   virtual ~RNSkOffscreenCanvasProvider() = default;
 
@@ -175,6 +183,7 @@ public:
     info->width = _width;
     info->height = _height;
     info->colorType = colorType;
+    info->useP3ColorSpace = _useP3ColorSpace;
     info->textureInfo = skgpu::graphite::TextureInfos::MakeDawn(
         skgpu::graphite::DawnTextureInfo(
             skgpu::graphite::SampleCount::k1, skgpu::Mipmapped::kNo,
@@ -214,6 +223,7 @@ private:
   int _width;
   int _height;
   float _pd;
+  bool _useP3ColorSpace;
   sk_sp<SkSurface> _surface;
   bool _cleared = false;
 };

package/cpp/rnskia/RNSkGraphiteTarget.h

@@ -78,9 +78,21 @@ public:
            _target.textureInfo.canBeFulfilledBy(target.textureInfo);
   }
 
+  /**
+   Whether the recording was made in the color space of the given target. The
+   colors of a recording are converted when it is recorded: replayed onto a
+   target in another color space, they would be read in the wrong gamut. Such
+   a recording is replayed through a texture in its own color space instead,
+   which is then drawn, and converted, onto the target (see
+   RNSkView::present).
+   */
+  bool hasColorSpaceOf(const RNSkGraphiteTargetInfo &target) const {
+    return _target.useP3ColorSpace == target.useP3ColorSpace;
+  }
+
   /** Whether the recording can be replayed straight onto the given target. */
   bool isCompatibleWith(const RNSkGraphiteTargetInfo &target) const {
-    return hasSizeOf(target) && hasFormatOf(target);
+    return hasSizeOf(target) && hasFormatOf(target) && hasColorSpaceOf(target);
   }
 
 private:
@@ -153,9 +165,9 @@ public:
       }
       _recorder = std::move(recorder);
     }
-    auto imageInfo =
-        SkImageInfo::Make(target.width, target.height, target.colorType,
-                          kPremul_SkAlphaType, SkColorSpace::MakeSRGB());
+    auto imageInfo = SkImageInfo::Make(
+        target.width, target.height, target.colorType, kPremul_SkAlphaType,
+        DawnUtils::viewColorSpace(target.useP3ColorSpace));
     auto *canvas =
         _recorder->recorder->makeDeferredCanvas(imageInfo, target.textureInfo);
     if (canvas == nullptr) {
@@ -271,9 +283,9 @@ private:
   /**
    The target to record against: the view's surface when it has one, else
    the pixel size the platform laid the view out with, else the layout size
-   JS measured; in the last two cases with the format the surface will be
-   created with, following the same rules (see DawnWindowContext and
-   SkiaView.java).
+   JS measured; in the last two cases with the format and the color space
+   the surface will be created with, following the same rules (see
+   DawnWindowContext and SkiaView.java).
    */
   RNSkGraphiteTargetInfo resolveTargetInfo() {
     std::shared_ptr<RNSkCanvasProvider> provider;
@@ -313,6 +325,7 @@ private:
     }
     info.colorType = highBitDepth ? DawnUtils::HighBitDepthColorType
                                   : DawnUtils::PreferedColorType;
+    info.useP3ColorSpace = _context->prefersP3ColorSpace();
     info.textureInfo = skgpu::graphite::TextureInfos::MakeDawn(
         skgpu::graphite::DawnTextureInfo(
             skgpu::graphite::SampleCount::k1, skgpu::Mipmapped::kNo,

package/cpp/rnskia/RNSkPlatformContext.h

@@ -191,6 +191,14 @@ public:
    */
   float getPixelDensity() { return _pixelDensity; }
 
+  /**
+   * Whether views render in Display P3 rather than sRGB: true on Apple
+   * platforms when the main screen has a wide color gamut. The answer does
+   * not change over the lifetime of the context, so a frame can be recorded
+   * for a view before its surface exists.
+   */
+  virtual bool prefersP3ColorSpace() { return false; }
+
 private:
   float _pixelDensity;
   std::shared_ptr<react::CallInvoker> _callInvoker;

package/cpp/rnskia/RNSkView.h

@@ -22,6 +22,7 @@
 #pragma clang diagnostic ignored "-Wdocumentation"
 
 #include "include/core/SkCanvas.h"
+#include "include/core/SkColorSpace.h"
 #include "include/core/SkImage.h"
 #include "include/core/SkRect.h"
 
@@ -208,19 +209,34 @@ public:
   /**
    Renders the view into an offscreen surface: declarative content is
    replayed on the calling thread with the latest values, so the snapshot
-   does not wait for a frame; otherwise the current frame is replayed.
+   does not wait for a frame; otherwise the current frame is replayed. A
+   snapshot is in sRGB whichever color space the view renders in: a frame
+   recorded in Display P3 is replayed into a surface in that color space and
+   the image is converted.
    */
   sk_sp<SkImage> makeImageSnapshot(SkRect *bounds) {
-    auto provider = std::make_shared<RNSkOffscreenCanvasProvider>(
-        _platformContext, getScaledWidth(), getScaledHeight());
     if (_producer->hasContent()) {
+      auto provider = std::make_shared<RNSkOffscreenCanvasProvider>(
+          _platformContext, getScaledWidth(), getScaledHeight());
       if (auto *canvas = provider->getCanvas()) {
         _producer->renderInto(canvas, _platformContext->getPixelDensity());
       }
-    } else {
-      renderLastFrame(provider);
+      return provider->makeSnapshot(bounds);
+    }
+    auto frame = getLastFrame();
+    const bool useP3ColorSpace =
+        frame != nullptr && frame->getTarget().useP3ColorSpace;
+    auto provider = std::make_shared<RNSkOffscreenCanvasProvider>(
+        _platformContext, getScaledWidth(), getScaledHeight(), useP3ColorSpace);
+    if (frame != nullptr) {
+      renderFrame(provider, frame);
+    }
+    auto image = provider->makeSnapshot(bounds);
+    if (image != nullptr && useP3ColorSpace) {
+      // A raster image: converted on the CPU, no recorder involved.
+      image = image->makeColorSpace(nullptr, SkColorSpace::MakeSRGB(), {});
     }
-    return provider->makeSnapshot(bounds);
+    return image;
   }
 
   /** Width of the surface, in pixels. */
@@ -297,11 +313,8 @@ private:
     return _target;
   }
 
-  /**
-   Replays the frame on screen, or the one about to be, onto another
-   provider (a snapshot surface). Any thread.
-   */
-  bool renderLastFrame(const std::shared_ptr<RNSkCanvasProvider> &provider) {
+  /** The frame on screen, or the one about to be, if any. Any thread. */
+  std::shared_ptr<RNSkGraphiteRecording> getLastFrame() {
     std::shared_ptr<RNSkGraphiteTarget> target;
     std::shared_ptr<RNSkGraphiteRecording> recording;
     {
@@ -314,9 +327,12 @@ private:
         recording = latest;
       }
     }
-    if (recording == nullptr) {
-      return false;
-    }
+    return recording;
+  }
+
+  /** Replays a frame onto another provider (a snapshot surface). Any thread. */
+  bool renderFrame(const std::shared_ptr<RNSkCanvasProvider> &provider,
+                   const std::shared_ptr<RNSkGraphiteRecording> &recording) {
     RNSkGraphiteTargetInfo targetInfo;
     if (!provider->getTargetInfo(&targetInfo)) {
       return false;
@@ -335,8 +351,8 @@ private:
           const RNSkGraphiteTargetInfo &targetInfo,
           const std::vector<std::shared_ptr<RNSkGraphiteRecording>> &recordings,
           bool remember) {
-    // Recordings of the target's size are replayed straight onto it, as one
-    // batch; one of another size goes through a texture of its own size.
+    // Recordings of the target's size and color space are replayed straight
+    // onto it, as one batch; any other goes through a texture of its own.
     std::vector<skgpu::graphite::Recording *> batch;
     std::shared_ptr<RNSkGraphiteRecording> last;
     bool success = true;
@@ -355,13 +371,14 @@ private:
                                  "different surface format");
         continue;
       }
-      if (recording->hasSizeOf(targetInfo)) {
+      if (recording->hasSizeOf(targetInfo) &&
+          recording->hasColorSpaceOf(targetInfo)) {
         batch.push_back(recording->get());
         last = recording;
         continue;
       }
       flush();
-      if (presentResized(provider, recording)) {
+      if (presentThroughTexture(provider, recording)) {
         last = recording;
       } else {
         success = false;
@@ -385,13 +402,17 @@ private:
    rounds the layout to pixels on its own terms), and the view may have been
    resized since. The recording is replayed into a texture of its own size
    and that texture is drawn onto the target, so the frame shows rather than
-   being dropped; the copy only happens while the sizes differ.
+   being dropped; the copy only happens while the sizes differ. The same goes
+   for a recording made in another color space than the target's: the
+   texture is in the color space of the recording, and drawing it converts
+   the colors.
    */
-  bool presentResized(const std::shared_ptr<RNSkCanvasProvider> &provider,
-                      const std::shared_ptr<RNSkGraphiteRecording> &recording) {
+  bool presentThroughTexture(
+      const std::shared_ptr<RNSkCanvasProvider> &provider,
+      const std::shared_ptr<RNSkGraphiteRecording> &recording) {
     const auto &size = recording->getTarget();
     auto intermediate = std::make_shared<RNSkOffscreenCanvasProvider>(
-        _platformContext, size.width, size.height);
+        _platformContext, size.width, size.height, size.useP3ColorSpace);
     RNSkGraphiteTargetInfo info;
     if (!intermediate->getTargetInfo(&info) ||
         !recording->isCompatibleWith(info)) {

package/lib/commonjs/external/reanimated/interpolators.js

@@ -82,7 +82,7 @@ const usePathInterpolation = (value, input, outputRange, options) => {
     // Handle the case where not all paths are interpolable
     // For example, throw an error or return early
     throw new Error(`Not all paths in the output range are interpolable.
-See: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`);
+See: https://wcandillon.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`);
   }
   return useInterpolator(() => _skia.Skia.Path.Make(), value, _animation.interpolatePaths, input, outputRange, options);
 };

package/lib/commonjs/external/reanimated/interpolators.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_animation","_skia","_Offscreen","_ReanimatedProxy","_interopRequireDefault","e","__esModule","default","notifyChange","value","isOnMainThread","_value","exports","usePathValue","cb","init","transform","builderInit","useMemo","Skia","PathBuilder","Make","pathInit","Path","builder","Rea","useSharedValue","path","useDerivedValue","reset","undefined","addPath","result","build","useClock","clock","callback","useCallback","info","timeSinceFirstFrame","useFrameCallback","useInterpolator","factory","interpolator","input","output","options","useAnimatedReaction","val","usePathInterpolation","outputRange","allPathsInterpolable","slice","every","isInterpolatable","Error","interpolatePaths","useVectorInterpolation","Point","interpolateVector"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n  ExtrapolationType,\n  FrameInfo,\n  SharedValue,\n} from \"react-native-reanimated\";\nimport { useCallback, useMemo } from \"react\";\n\nimport type { SkPath, SkPathBuilder, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\nimport { isOnMainThread } from \"../../renderer/Offscreen\";\n\nimport Rea from \"./ReanimatedProxy\";\n\nexport const notifyChange = <T>(value: SharedValue<T>) => {\n  \"worklet\";\n  if (isOnMainThread()) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (value as any)._value = value.value;\n  }\n};\n\n/**\n * Hook for creating animated paths using PathBuilder.\n * The callback receives a mutable PathBuilder that can be used to construct the path.\n * The resulting immutable SkPath is stored in a shared value.\n *\n * @param cb - Callback that receives the PathBuilder to construct the path\n * @param init - Optional initial path to add to the builder\n * @param transform - Optional transform function applied to the built path\n */\nexport const usePathValue = (\n  cb: (builder: SkPathBuilder) => void,\n  init?: SkPath,\n  transform?: (path: SkPath) => SkPath\n) => {\n  const builderInit = useMemo(() => Skia.PathBuilder.Make(), []);\n  const pathInit = useMemo(() => Skia.Path.Make(), []);\n  const builder = Rea.useSharedValue(builderInit);\n  const path = Rea.useSharedValue(pathInit);\n  Rea.useDerivedValue(() => {\n    builder.value.reset();\n    if (init !== undefined) {\n      builder.value.addPath(init);\n    }\n    cb(builder.value);\n    let result = builder.value.build();\n    if (transform !== undefined) {\n      result = transform(result);\n    }\n    path.value = result;\n    notifyChange(path);\n  });\n  return path;\n};\n\nexport const useClock = () => {\n  const clock = Rea.useSharedValue(0);\n  const callback = useCallback(\n    (info: FrameInfo) => {\n      \"worklet\";\n      clock.value = info.timeSinceFirstFrame;\n    },\n    [clock]\n  );\n  Rea.useFrameCallback(callback);\n  return clock;\n};\n\n/**\n * @worklet\n */\ntype Interpolator<T> = (\n  value: number,\n  input: number[],\n  output: T[],\n  options: ExtrapolationType,\n  result: T\n) => T;\n\nconst useInterpolator = <T>(\n  factory: () => T,\n  value: SharedValue<number>,\n  interpolator: Interpolator<T>,\n  input: number[],\n  output: T[],\n  options?: ExtrapolationType\n) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const init = useMemo(() => factory(), []);\n  const result = Rea.useSharedValue(init);\n  Rea.useAnimatedReaction(\n    () => value.value,\n    (val) => {\n      result.value = interpolator(val, input, output, options, result.value);\n      notifyChange(result);\n    },\n    [input, output, options]\n  );\n  return result;\n};\n\nexport const usePathInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPath[],\n  options?: ExtrapolationType\n) => {\n  // Check if all paths in outputRange are interpolable\n  const allPathsInterpolable = outputRange\n    .slice(1)\n    .every((path) => outputRange[0].isInterpolatable(path));\n  if (!allPathsInterpolable) {\n    // Handle the case where not all paths are interpolable\n    // For example, throw an error or return early\n    throw new Error(\n      `Not all paths in the output range are interpolable.\nSee: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`\n    );\n  }\n  return useInterpolator(\n    () => Skia.Path.Make(),\n    value,\n    interpolatePaths,\n    input,\n    outputRange,\n    options\n  );\n};\n\nexport const useVectorInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPoint[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Point(0, 0),\n    value,\n    interpolateVector,\n    input,\n    outputRange,\n    options\n  );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","require","_animation","_skia","_Offscreen","_ReanimatedProxy","_interopRequireDefault","e","__esModule","default","notifyChange","value","isOnMainThread","_value","exports","usePathValue","cb","init","transform","builderInit","useMemo","Skia","PathBuilder","Make","pathInit","Path","builder","Rea","useSharedValue","path","useDerivedValue","reset","undefined","addPath","result","build","useClock","clock","callback","useCallback","info","timeSinceFirstFrame","useFrameCallback","useInterpolator","factory","interpolator","input","output","options","useAnimatedReaction","val","usePathInterpolation","outputRange","allPathsInterpolable","slice","every","isInterpolatable","Error","interpolatePaths","useVectorInterpolation","Point","interpolateVector"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n  ExtrapolationType,\n  FrameInfo,\n  SharedValue,\n} from \"react-native-reanimated\";\nimport { useCallback, useMemo } from \"react\";\n\nimport type { SkPath, SkPathBuilder, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\nimport { isOnMainThread } from \"../../renderer/Offscreen\";\n\nimport Rea from \"./ReanimatedProxy\";\n\nexport const notifyChange = <T>(value: SharedValue<T>) => {\n  \"worklet\";\n  if (isOnMainThread()) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (value as any)._value = value.value;\n  }\n};\n\n/**\n * Hook for creating animated paths using PathBuilder.\n * The callback receives a mutable PathBuilder that can be used to construct the path.\n * The resulting immutable SkPath is stored in a shared value.\n *\n * @param cb - Callback that receives the PathBuilder to construct the path\n * @param init - Optional initial path to add to the builder\n * @param transform - Optional transform function applied to the built path\n */\nexport const usePathValue = (\n  cb: (builder: SkPathBuilder) => void,\n  init?: SkPath,\n  transform?: (path: SkPath) => SkPath\n) => {\n  const builderInit = useMemo(() => Skia.PathBuilder.Make(), []);\n  const pathInit = useMemo(() => Skia.Path.Make(), []);\n  const builder = Rea.useSharedValue(builderInit);\n  const path = Rea.useSharedValue(pathInit);\n  Rea.useDerivedValue(() => {\n    builder.value.reset();\n    if (init !== undefined) {\n      builder.value.addPath(init);\n    }\n    cb(builder.value);\n    let result = builder.value.build();\n    if (transform !== undefined) {\n      result = transform(result);\n    }\n    path.value = result;\n    notifyChange(path);\n  });\n  return path;\n};\n\nexport const useClock = () => {\n  const clock = Rea.useSharedValue(0);\n  const callback = useCallback(\n    (info: FrameInfo) => {\n      \"worklet\";\n      clock.value = info.timeSinceFirstFrame;\n    },\n    [clock]\n  );\n  Rea.useFrameCallback(callback);\n  return clock;\n};\n\n/**\n * @worklet\n */\ntype Interpolator<T> = (\n  value: number,\n  input: number[],\n  output: T[],\n  options: ExtrapolationType,\n  result: T\n) => T;\n\nconst useInterpolator = <T>(\n  factory: () => T,\n  value: SharedValue<number>,\n  interpolator: Interpolator<T>,\n  input: number[],\n  output: T[],\n  options?: ExtrapolationType\n) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const init = useMemo(() => factory(), []);\n  const result = Rea.useSharedValue(init);\n  Rea.useAnimatedReaction(\n    () => value.value,\n    (val) => {\n      result.value = interpolator(val, input, output, options, result.value);\n      notifyChange(result);\n    },\n    [input, output, options]\n  );\n  return result;\n};\n\nexport const usePathInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPath[],\n  options?: ExtrapolationType\n) => {\n  // Check if all paths in outputRange are interpolable\n  const allPathsInterpolable = outputRange\n    .slice(1)\n    .every((path) => outputRange[0].isInterpolatable(path));\n  if (!allPathsInterpolable) {\n    // Handle the case where not all paths are interpolable\n    // For example, throw an error or return early\n    throw new Error(\n      `Not all paths in the output range are interpolable.\nSee: https://wcandillon.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`\n    );\n  }\n  return useInterpolator(\n    () => Skia.Path.Make(),\n    value,\n    interpolatePaths,\n    input,\n    outputRange,\n    options\n  );\n};\n\nexport const useVectorInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPoint[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Point(0, 0),\n    value,\n    interpolateVector,\n    input,\n    outputRange,\n    options\n  );\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/renderer/Canvas.js

@@ -56,7 +56,7 @@ const useCanvasRoot = ({
   onLayout
 }) => {
   if (onLayout && _Platform.Platform.OS !== "web") {
-    console.error("<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size");
+    console.error("<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://wcandillon.github.io/react-native-skia/docs/canvas/overview/#canvas-size");
   }
   const viewRef = useCanvasRefPriv(null);
   // Native ID

package/lib/commonjs/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_ReanimatedProxy","_interopRequireDefault","_SkiaViewNativeId","_android","_SkiaViewNativeComponent","_Reconciler","_skia","_Platform","_external","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useReanimatedFrame","HAS_REANIMATED_3","Rea","useFrameCallback","measure","useCanvasRefPriv","useAnimatedRef","useCanvasSize","userRef","ourRef","ref","size","setSize","useState","width","height","useLayoutEffect","current","_x","_y","useCanvasRoot","children","onSize","onLayout","Platform","OS","console","error","viewRef","nativeId","useMemo","SkiaViewNativeId","root","SkiaSGRoot","Skia","_viewRef$current","result","canvasRef","value","render","useEffect","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current2","measureInWindow","_viewRef$current3","Canvas","opaque","highBitDepth","android","viewProps","onLayoutWeb","useCallback","nativeEvent","layout","createElement","collapsable","nativeID","androidNativeProps"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  LayoutChangeEvent,\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport { androidNativeProps } from \"../views/android\";\nimport type { AndroidCanvasProps } from \"../views/types\";\nimport SkiaViewNativeComponent from \"../specs/SkiaViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\nconst measure = !HAS_REANIMATED_3 ? null : Rea.measure;\n\nconst useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3\n  ? useRef\n  : Rea.useAnimatedRef;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  /** @deprecated Not supported on native. Use `onSize` or `useCanvasSize()` instead. */\n  onLayout?: ViewProps[\"onLayout\"];\n  /**\n   * Declares that the canvas covers every pixel of its bounds, so nothing\n   * behind it needs to show through. On Android an opaque canvas is backed by\n   * a `SurfaceView` by default, the cheapest path (see `android.surfaceType`).\n   * Defaults to false.\n   */\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  /**\n   * Renders into a surface with more than 8 bits per channel (16-bit float on\n   * iOS, 10-bit on Android) to avoid banding in subtle gradients. Colors are\n   * identical to the default 8-bit surface, only with more precision (this is\n   * about bit depth, not HDR). On Android the extra precision survives\n   * composition only when combined with `opaque`, and the prop must be set\n   * before the canvas is mounted.\n   */\n  highBitDepth?: boolean;\n  /** Android-only rendering options. Ignored on iOS and web. */\n  android?: AndroidCanvasProps;\n  ref?: React.Ref<CanvasRef>;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\n/**\n * What the canvas owns: the native id, the scene graph root rendered into it,\n * the `onSize` measurement and the imperative handle of the ref.\n */\nconst useCanvasRoot = ({\n  children,\n  onSize,\n  ref,\n  onLayout,\n}: Pick<CanvasProps, \"children\" | \"onSize\" | \"ref\" | \"onLayout\">) => {\n  if (onLayout && Platform.OS !== \"web\") {\n    console.error(\n      \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n    );\n  }\n  const viewRef = useCanvasRefPriv(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n  useReanimatedFrame(() => {\n    \"worklet\";\n    if (onSize && measure) {\n      const result =\n        // eslint-disable-next-line no-nested-ternary\n        Platform.OS === \"web\"\n          ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-expect-error\n            viewRef.current?.canvasRef\n            ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n              // @ts-expect-error\n              measure(viewRef.current.canvasRef)\n            : { width: 0, height: 0 }\n          : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            measure(viewRef as any);\n      if (result) {\n        const { width, height } = result;\n        if (onSize.value.width !== width || onSize.value.height !== height) {\n          onSize.value = { width, height };\n        }\n      }\n    }\n  }, !!onSize);\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      }) as CanvasRef\n  );\n  return { nativeId, viewRef };\n};\n\n/**\n * The declarative canvas. Its children are rendered by Skia's own React\n * renderer; the frames are produced off the JS thread:\n *\n * - the JS thread records the scene graph into a native recorder once per\n *   React commit and hands it to the view;\n * - the Reanimated UI runtime only reads the shared values into it (the one\n *   step that needs a JS runtime), it never replays anything;\n * - a dedicated native thread pool replays the recorder into a Graphite\n *   recording whenever the content changed, at most once per presented frame;\n * - the view presents the recording on the next vsync.\n *\n * On the web the scene is drawn into a picture on the JS thread and painted\n * on a WebGL canvas.\n */\nexport const Canvas = ({\n  opaque,\n  children,\n  onSize,\n  highBitDepth = false,\n  android,\n  ref,\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  const { nativeId, viewRef } = useCanvasRoot({\n    children,\n    onSize,\n    ref,\n    onLayout,\n  });\n\n  const onLayoutWeb = useCallback(\n    (e: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(e);\n      }\n      if (Platform.OS === \"web\" && onSize) {\n        const { width, height } = e.nativeEvent.layout;\n        onSize.value = { width, height };\n      }\n    },\n    [onLayout, onSize]\n  );\n  return (\n    <SkiaViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      opaque={opaque}\n      highBitDepth={highBitDepth}\n      {...androidNativeProps(android)}\n      onLayout={\n        Platform.OS === \"web\" && (onSize || onLayout) ? onLayoutWeb : onLayout\n      }\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_ReanimatedProxy","_interopRequireDefault","_SkiaViewNativeId","_android","_SkiaViewNativeComponent","_Reconciler","_skia","_Platform","_external","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useReanimatedFrame","HAS_REANIMATED_3","Rea","useFrameCallback","measure","useCanvasRefPriv","useAnimatedRef","useCanvasSize","userRef","ourRef","ref","size","setSize","useState","width","height","useLayoutEffect","current","_x","_y","useCanvasRoot","children","onSize","onLayout","Platform","OS","console","error","viewRef","nativeId","useMemo","SkiaViewNativeId","root","SkiaSGRoot","Skia","_viewRef$current","result","canvasRef","value","render","useEffect","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current2","measureInWindow","_viewRef$current3","Canvas","opaque","highBitDepth","android","viewProps","onLayoutWeb","useCallback","nativeEvent","layout","createElement","collapsable","nativeID","androidNativeProps"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  LayoutChangeEvent,\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport { androidNativeProps } from \"../views/android\";\nimport type { AndroidCanvasProps } from \"../views/types\";\nimport SkiaViewNativeComponent from \"../specs/SkiaViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\nconst measure = !HAS_REANIMATED_3 ? null : Rea.measure;\n\nconst useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3\n  ? useRef\n  : Rea.useAnimatedRef;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  /** @deprecated Not supported on native. Use `onSize` or `useCanvasSize()` instead. */\n  onLayout?: ViewProps[\"onLayout\"];\n  /**\n   * Declares that the canvas covers every pixel of its bounds, so nothing\n   * behind it needs to show through. On Android an opaque canvas is backed by\n   * a `SurfaceView` by default, the cheapest path (see `android.surfaceType`).\n   * Defaults to false.\n   */\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  /**\n   * Renders into a surface with more than 8 bits per channel (16-bit float on\n   * iOS, 10-bit on Android) to avoid banding in subtle gradients. Colors are\n   * identical to the default 8-bit surface, only with more precision (this is\n   * about bit depth, not HDR). On Android the extra precision survives\n   * composition only when combined with `opaque`, and the prop must be set\n   * before the canvas is mounted.\n   */\n  highBitDepth?: boolean;\n  /** Android-only rendering options. Ignored on iOS and web. */\n  android?: AndroidCanvasProps;\n  ref?: React.Ref<CanvasRef>;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\n/**\n * What the canvas owns: the native id, the scene graph root rendered into it,\n * the `onSize` measurement and the imperative handle of the ref.\n */\nconst useCanvasRoot = ({\n  children,\n  onSize,\n  ref,\n  onLayout,\n}: Pick<CanvasProps, \"children\" | \"onSize\" | \"ref\" | \"onLayout\">) => {\n  if (onLayout && Platform.OS !== \"web\") {\n    console.error(\n      \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://wcandillon.github.io/react-native-skia/docs/canvas/overview/#canvas-size\"\n    );\n  }\n  const viewRef = useCanvasRefPriv(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n  useReanimatedFrame(() => {\n    \"worklet\";\n    if (onSize && measure) {\n      const result =\n        // eslint-disable-next-line no-nested-ternary\n        Platform.OS === \"web\"\n          ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-expect-error\n            viewRef.current?.canvasRef\n            ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n              // @ts-expect-error\n              measure(viewRef.current.canvasRef)\n            : { width: 0, height: 0 }\n          : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            measure(viewRef as any);\n      if (result) {\n        const { width, height } = result;\n        if (onSize.value.width !== width || onSize.value.height !== height) {\n          onSize.value = { width, height };\n        }\n      }\n    }\n  }, !!onSize);\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      }) as CanvasRef\n  );\n  return { nativeId, viewRef };\n};\n\n/**\n * The declarative canvas. Its children are rendered by Skia's own React\n * renderer; the frames are produced off the JS thread:\n *\n * - the JS thread records the scene graph into a native recorder once per\n *   React commit and hands it to the view;\n * - the Reanimated UI runtime only reads the shared values into it (the one\n *   step that needs a JS runtime), it never replays anything;\n * - a dedicated native thread pool replays the recorder into a Graphite\n *   recording whenever the content changed, at most once per presented frame;\n * - the view presents the recording on the next vsync.\n *\n * On the web the scene is drawn into a picture on the JS thread and painted\n * on a WebGL canvas.\n */\nexport const Canvas = ({\n  opaque,\n  children,\n  onSize,\n  highBitDepth = false,\n  android,\n  ref,\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  const { nativeId, viewRef } = useCanvasRoot({\n    children,\n    onSize,\n    ref,\n    onLayout,\n  });\n\n  const onLayoutWeb = useCallback(\n    (e: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(e);\n      }\n      if (Platform.OS === \"web\" && onSize) {\n        const { width, height } = e.nativeEvent.layout;\n        onSize.value = { width, height };\n      }\n    },\n    [onLayout, onSize]\n  );\n  return (\n    <SkiaViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      opaque={opaque}\n      highBitDepth={highBitDepth}\n      {...androidNativeProps(android)}\n      onLayout={\n        Platform.OS === \"web\" && (onSize || onLayout) ? onLayoutWeb : onLayout\n      }\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/external/reanimated/interpolators.js

@@ -73,7 +73,7 @@ export const usePathInterpolation = (value, input, outputRange, options) => {
     // Handle the case where not all paths are interpolable
     // For example, throw an error or return early
     throw new Error(`Not all paths in the output range are interpolable.
-See: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`);
+See: https://wcandillon.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`);
   }
   return useInterpolator(() => Skia.Path.Make(), value, interpolatePaths, input, outputRange, options);
 };

package/lib/module/external/reanimated/interpolators.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","interpolatePaths","interpolateVector","Skia","isOnMainThread","Rea","notifyChange","value","_value","usePathValue","cb","init","transform","builderInit","PathBuilder","Make","pathInit","Path","builder","useSharedValue","path","useDerivedValue","reset","undefined","addPath","result","build","useClock","clock","callback","info","timeSinceFirstFrame","useFrameCallback","useInterpolator","factory","interpolator","input","output","options","useAnimatedReaction","val","usePathInterpolation","outputRange","allPathsInterpolable","slice","every","isInterpolatable","Error","useVectorInterpolation","Point"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n  ExtrapolationType,\n  FrameInfo,\n  SharedValue,\n} from \"react-native-reanimated\";\nimport { useCallback, useMemo } from \"react\";\n\nimport type { SkPath, SkPathBuilder, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\nimport { isOnMainThread } from \"../../renderer/Offscreen\";\n\nimport Rea from \"./ReanimatedProxy\";\n\nexport const notifyChange = <T>(value: SharedValue<T>) => {\n  \"worklet\";\n  if (isOnMainThread()) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (value as any)._value = value.value;\n  }\n};\n\n/**\n * Hook for creating animated paths using PathBuilder.\n * The callback receives a mutable PathBuilder that can be used to construct the path.\n * The resulting immutable SkPath is stored in a shared value.\n *\n * @param cb - Callback that receives the PathBuilder to construct the path\n * @param init - Optional initial path to add to the builder\n * @param transform - Optional transform function applied to the built path\n */\nexport const usePathValue = (\n  cb: (builder: SkPathBuilder) => void,\n  init?: SkPath,\n  transform?: (path: SkPath) => SkPath\n) => {\n  const builderInit = useMemo(() => Skia.PathBuilder.Make(), []);\n  const pathInit = useMemo(() => Skia.Path.Make(), []);\n  const builder = Rea.useSharedValue(builderInit);\n  const path = Rea.useSharedValue(pathInit);\n  Rea.useDerivedValue(() => {\n    builder.value.reset();\n    if (init !== undefined) {\n      builder.value.addPath(init);\n    }\n    cb(builder.value);\n    let result = builder.value.build();\n    if (transform !== undefined) {\n      result = transform(result);\n    }\n    path.value = result;\n    notifyChange(path);\n  });\n  return path;\n};\n\nexport const useClock = () => {\n  const clock = Rea.useSharedValue(0);\n  const callback = useCallback(\n    (info: FrameInfo) => {\n      \"worklet\";\n      clock.value = info.timeSinceFirstFrame;\n    },\n    [clock]\n  );\n  Rea.useFrameCallback(callback);\n  return clock;\n};\n\n/**\n * @worklet\n */\ntype Interpolator<T> = (\n  value: number,\n  input: number[],\n  output: T[],\n  options: ExtrapolationType,\n  result: T\n) => T;\n\nconst useInterpolator = <T>(\n  factory: () => T,\n  value: SharedValue<number>,\n  interpolator: Interpolator<T>,\n  input: number[],\n  output: T[],\n  options?: ExtrapolationType\n) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const init = useMemo(() => factory(), []);\n  const result = Rea.useSharedValue(init);\n  Rea.useAnimatedReaction(\n    () => value.value,\n    (val) => {\n      result.value = interpolator(val, input, output, options, result.value);\n      notifyChange(result);\n    },\n    [input, output, options]\n  );\n  return result;\n};\n\nexport const usePathInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPath[],\n  options?: ExtrapolationType\n) => {\n  // Check if all paths in outputRange are interpolable\n  const allPathsInterpolable = outputRange\n    .slice(1)\n    .every((path) => outputRange[0].isInterpolatable(path));\n  if (!allPathsInterpolable) {\n    // Handle the case where not all paths are interpolable\n    // For example, throw an error or return early\n    throw new Error(\n      `Not all paths in the output range are interpolable.\nSee: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`\n    );\n  }\n  return useInterpolator(\n    () => Skia.Path.Make(),\n    value,\n    interpolatePaths,\n    input,\n    outputRange,\n    options\n  );\n};\n\nexport const useVectorInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPoint[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Point(0, 0),\n    value,\n    interpolateVector,\n    input,\n    outputRange,\n    options\n  );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useMemo","interpolatePaths","interpolateVector","Skia","isOnMainThread","Rea","notifyChange","value","_value","usePathValue","cb","init","transform","builderInit","PathBuilder","Make","pathInit","Path","builder","useSharedValue","path","useDerivedValue","reset","undefined","addPath","result","build","useClock","clock","callback","info","timeSinceFirstFrame","useFrameCallback","useInterpolator","factory","interpolator","input","output","options","useAnimatedReaction","val","usePathInterpolation","outputRange","allPathsInterpolable","slice","every","isInterpolatable","Error","useVectorInterpolation","Point"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n  ExtrapolationType,\n  FrameInfo,\n  SharedValue,\n} from \"react-native-reanimated\";\nimport { useCallback, useMemo } from \"react\";\n\nimport type { SkPath, SkPathBuilder, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\nimport { isOnMainThread } from \"../../renderer/Offscreen\";\n\nimport Rea from \"./ReanimatedProxy\";\n\nexport const notifyChange = <T>(value: SharedValue<T>) => {\n  \"worklet\";\n  if (isOnMainThread()) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (value as any)._value = value.value;\n  }\n};\n\n/**\n * Hook for creating animated paths using PathBuilder.\n * The callback receives a mutable PathBuilder that can be used to construct the path.\n * The resulting immutable SkPath is stored in a shared value.\n *\n * @param cb - Callback that receives the PathBuilder to construct the path\n * @param init - Optional initial path to add to the builder\n * @param transform - Optional transform function applied to the built path\n */\nexport const usePathValue = (\n  cb: (builder: SkPathBuilder) => void,\n  init?: SkPath,\n  transform?: (path: SkPath) => SkPath\n) => {\n  const builderInit = useMemo(() => Skia.PathBuilder.Make(), []);\n  const pathInit = useMemo(() => Skia.Path.Make(), []);\n  const builder = Rea.useSharedValue(builderInit);\n  const path = Rea.useSharedValue(pathInit);\n  Rea.useDerivedValue(() => {\n    builder.value.reset();\n    if (init !== undefined) {\n      builder.value.addPath(init);\n    }\n    cb(builder.value);\n    let result = builder.value.build();\n    if (transform !== undefined) {\n      result = transform(result);\n    }\n    path.value = result;\n    notifyChange(path);\n  });\n  return path;\n};\n\nexport const useClock = () => {\n  const clock = Rea.useSharedValue(0);\n  const callback = useCallback(\n    (info: FrameInfo) => {\n      \"worklet\";\n      clock.value = info.timeSinceFirstFrame;\n    },\n    [clock]\n  );\n  Rea.useFrameCallback(callback);\n  return clock;\n};\n\n/**\n * @worklet\n */\ntype Interpolator<T> = (\n  value: number,\n  input: number[],\n  output: T[],\n  options: ExtrapolationType,\n  result: T\n) => T;\n\nconst useInterpolator = <T>(\n  factory: () => T,\n  value: SharedValue<number>,\n  interpolator: Interpolator<T>,\n  input: number[],\n  output: T[],\n  options?: ExtrapolationType\n) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const init = useMemo(() => factory(), []);\n  const result = Rea.useSharedValue(init);\n  Rea.useAnimatedReaction(\n    () => value.value,\n    (val) => {\n      result.value = interpolator(val, input, output, options, result.value);\n      notifyChange(result);\n    },\n    [input, output, options]\n  );\n  return result;\n};\n\nexport const usePathInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPath[],\n  options?: ExtrapolationType\n) => {\n  // Check if all paths in outputRange are interpolable\n  const allPathsInterpolable = outputRange\n    .slice(1)\n    .every((path) => outputRange[0].isInterpolatable(path));\n  if (!allPathsInterpolable) {\n    // Handle the case where not all paths are interpolable\n    // For example, throw an error or return early\n    throw new Error(\n      `Not all paths in the output range are interpolable.\nSee: https://wcandillon.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`\n    );\n  }\n  return useInterpolator(\n    () => Skia.Path.Make(),\n    value,\n    interpolatePaths,\n    input,\n    outputRange,\n    options\n  );\n};\n\nexport const useVectorInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPoint[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Point(0, 0),\n    value,\n    interpolateVector,\n    input,\n    outputRange,\n    options\n  );\n"],"mappings":"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","ignoreList":[]}

package/lib/module/renderer/Canvas.js

@@ -46,7 +46,7 @@ const useCanvasRoot = ({
   onLayout
 }) => {
   if (onLayout && Platform.OS !== "web") {
-    console.error("<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size");
+    console.error("<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://wcandillon.github.io/react-native-skia/docs/canvas/overview/#canvas-size");
   }
   const viewRef = useCanvasRefPriv(null);
   // Native ID

package/lib/module/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","Rea","SkiaViewNativeId","androidNativeProps","SkiaViewNativeComponent","SkiaSGRoot","Skia","Platform","HAS_REANIMATED_3","useCanvasRef","useReanimatedFrame","useFrameCallback","measure","useCanvasRefPriv","useAnimatedRef","useCanvasSize","userRef","ourRef","ref","size","setSize","width","height","current","_x","_y","useCanvasRoot","children","onSize","onLayout","OS","console","error","viewRef","nativeId","root","_viewRef$current","result","canvasRef","value","render","unmount","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current2","measureInWindow","_viewRef$current3","Canvas","opaque","highBitDepth","android","viewProps","onLayoutWeb","e","nativeEvent","layout","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  LayoutChangeEvent,\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport { androidNativeProps } from \"../views/android\";\nimport type { AndroidCanvasProps } from \"../views/types\";\nimport SkiaViewNativeComponent from \"../specs/SkiaViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\nconst measure = !HAS_REANIMATED_3 ? null : Rea.measure;\n\nconst useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3\n  ? useRef\n  : Rea.useAnimatedRef;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  /** @deprecated Not supported on native. Use `onSize` or `useCanvasSize()` instead. */\n  onLayout?: ViewProps[\"onLayout\"];\n  /**\n   * Declares that the canvas covers every pixel of its bounds, so nothing\n   * behind it needs to show through. On Android an opaque canvas is backed by\n   * a `SurfaceView` by default, the cheapest path (see `android.surfaceType`).\n   * Defaults to false.\n   */\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  /**\n   * Renders into a surface with more than 8 bits per channel (16-bit float on\n   * iOS, 10-bit on Android) to avoid banding in subtle gradients. Colors are\n   * identical to the default 8-bit surface, only with more precision (this is\n   * about bit depth, not HDR). On Android the extra precision survives\n   * composition only when combined with `opaque`, and the prop must be set\n   * before the canvas is mounted.\n   */\n  highBitDepth?: boolean;\n  /** Android-only rendering options. Ignored on iOS and web. */\n  android?: AndroidCanvasProps;\n  ref?: React.Ref<CanvasRef>;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\n/**\n * What the canvas owns: the native id, the scene graph root rendered into it,\n * the `onSize` measurement and the imperative handle of the ref.\n */\nconst useCanvasRoot = ({\n  children,\n  onSize,\n  ref,\n  onLayout,\n}: Pick<CanvasProps, \"children\" | \"onSize\" | \"ref\" | \"onLayout\">) => {\n  if (onLayout && Platform.OS !== \"web\") {\n    console.error(\n      \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size\"\n    );\n  }\n  const viewRef = useCanvasRefPriv(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n  useReanimatedFrame(() => {\n    \"worklet\";\n    if (onSize && measure) {\n      const result =\n        // eslint-disable-next-line no-nested-ternary\n        Platform.OS === \"web\"\n          ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-expect-error\n            viewRef.current?.canvasRef\n            ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n              // @ts-expect-error\n              measure(viewRef.current.canvasRef)\n            : { width: 0, height: 0 }\n          : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            measure(viewRef as any);\n      if (result) {\n        const { width, height } = result;\n        if (onSize.value.width !== width || onSize.value.height !== height) {\n          onSize.value = { width, height };\n        }\n      }\n    }\n  }, !!onSize);\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      }) as CanvasRef\n  );\n  return { nativeId, viewRef };\n};\n\n/**\n * The declarative canvas. Its children are rendered by Skia's own React\n * renderer; the frames are produced off the JS thread:\n *\n * - the JS thread records the scene graph into a native recorder once per\n *   React commit and hands it to the view;\n * - the Reanimated UI runtime only reads the shared values into it (the one\n *   step that needs a JS runtime), it never replays anything;\n * - a dedicated native thread pool replays the recorder into a Graphite\n *   recording whenever the content changed, at most once per presented frame;\n * - the view presents the recording on the next vsync.\n *\n * On the web the scene is drawn into a picture on the JS thread and painted\n * on a WebGL canvas.\n */\nexport const Canvas = ({\n  opaque,\n  children,\n  onSize,\n  highBitDepth = false,\n  android,\n  ref,\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  const { nativeId, viewRef } = useCanvasRoot({\n    children,\n    onSize,\n    ref,\n    onLayout,\n  });\n\n  const onLayoutWeb = useCallback(\n    (e: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(e);\n      }\n      if (Platform.OS === \"web\" && onSize) {\n        const { width, height } = e.nativeEvent.layout;\n        onSize.value = { width, height };\n      }\n    },\n    [onLayout, onSize]\n  );\n  return (\n    <SkiaViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      opaque={opaque}\n      highBitDepth={highBitDepth}\n      {...androidNativeProps(android)}\n      onLayout={\n        Platform.OS === \"web\" && (onSize || onLayout) ? onLayoutWeb : onLayout\n      }\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useImperativeHandle","useLayoutEffect","useMemo","useRef","useState","Rea","SkiaViewNativeId","androidNativeProps","SkiaViewNativeComponent","SkiaSGRoot","Skia","Platform","HAS_REANIMATED_3","useCanvasRef","useReanimatedFrame","useFrameCallback","measure","useCanvasRefPriv","useAnimatedRef","useCanvasSize","userRef","ourRef","ref","size","setSize","width","height","current","_x","_y","useCanvasRoot","children","onSize","onLayout","OS","console","error","viewRef","nativeId","root","_viewRef$current","result","canvasRef","value","render","unmount","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","callback","_viewRef$current2","measureInWindow","_viewRef$current3","Canvas","opaque","highBitDepth","android","viewProps","onLayoutWeb","e","nativeEvent","layout","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC, RefObject } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  LayoutChangeEvent,\n  MeasureInWindowOnSuccessCallback,\n  MeasureOnSuccessCallback,\n  View,\n  ViewProps,\n} from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport Rea from \"../external/reanimated/ReanimatedProxy\";\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport { androidNativeProps } from \"../views/android\";\nimport type { AndroidCanvasProps } from \"../views/types\";\nimport SkiaViewNativeComponent from \"../specs/SkiaViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\nimport { HAS_REANIMATED_3 } from \"../external\";\n\nexport interface CanvasRef extends FC<CanvasProps> {\n  makeImageSnapshot(rect?: SkRect): SkImage;\n  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;\n  redraw(): void;\n  getNativeId(): number;\n  measure(callback: MeasureOnSuccessCallback): void;\n  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;\n}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\nconst useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;\nconst measure = !HAS_REANIMATED_3 ? null : Rea.measure;\n\nconst useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3\n  ? useRef\n  : Rea.useAnimatedRef;\n\nexport const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {\n  const ourRef = useCanvasRef();\n  const ref = userRef ?? ourRef;\n  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.measure((_x, _y, width, height) => {\n        setSize({ width, height });\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  return { ref, size };\n};\n\nexport interface CanvasProps extends Omit<ViewProps, \"onLayout\"> {\n  /** @deprecated Not supported on native. Use `onSize` or `useCanvasSize()` instead. */\n  onLayout?: ViewProps[\"onLayout\"];\n  /**\n   * Declares that the canvas covers every pixel of its bounds, so nothing\n   * behind it needs to show through. On Android an opaque canvas is backed by\n   * a `SurfaceView` by default, the cheapest path (see `android.surfaceType`).\n   * Defaults to false.\n   */\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  /**\n   * Renders into a surface with more than 8 bits per channel (16-bit float on\n   * iOS, 10-bit on Android) to avoid banding in subtle gradients. Colors are\n   * identical to the default 8-bit surface, only with more precision (this is\n   * about bit depth, not HDR). On Android the extra precision survives\n   * composition only when combined with `opaque`, and the prop must be set\n   * before the canvas is mounted.\n   */\n  highBitDepth?: boolean;\n  /** Android-only rendering options. Ignored on iOS and web. */\n  android?: AndroidCanvasProps;\n  ref?: React.Ref<CanvasRef>;\n  __destroyWebGLContextAfterRender?: boolean;\n}\n\n/**\n * What the canvas owns: the native id, the scene graph root rendered into it,\n * the `onSize` measurement and the imperative handle of the ref.\n */\nconst useCanvasRoot = ({\n  children,\n  onSize,\n  ref,\n  onLayout,\n}: Pick<CanvasProps, \"children\" | \"onSize\" | \"ref\" | \"onLayout\">) => {\n  if (onLayout && Platform.OS !== \"web\") {\n    console.error(\n      \"<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://wcandillon.github.io/react-native-skia/docs/canvas/overview/#canvas-size\"\n    );\n  }\n  const viewRef = useCanvasRefPriv(null);\n  // Native ID\n  const nativeId = useMemo(() => {\n    return SkiaViewNativeId.current++;\n  }, []);\n\n  // Root\n  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n  useReanimatedFrame(() => {\n    \"worklet\";\n    if (onSize && measure) {\n      const result =\n        // eslint-disable-next-line no-nested-ternary\n        Platform.OS === \"web\"\n          ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-expect-error\n            viewRef.current?.canvasRef\n            ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n              // @ts-expect-error\n              measure(viewRef.current.canvasRef)\n            : { width: 0, height: 0 }\n          : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            measure(viewRef as any);\n      if (result) {\n        const { width, height } = result;\n        if (onSize.value.width !== width || onSize.value.height !== height) {\n          onSize.value = { width, height };\n        }\n      }\n    }\n  }, !!onSize);\n\n  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root, nativeId]);\n\n  useEffect(() => {\n    return () => {\n      root.unmount();\n    };\n  }, [root]);\n\n  // Component methods\n  useImperativeHandle(\n    ref,\n    () =>\n      ({\n        makeImageSnapshot: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n        },\n        makeImageSnapshotAsync: (rect?: SkRect) => {\n          return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n        },\n        redraw: () => {\n          SkiaViewApi.requestRedraw(nativeId);\n        },\n        getNativeId: () => {\n          return nativeId;\n        },\n        measure: (callback) => {\n          viewRef.current?.measure(callback);\n        },\n        measureInWindow: (callback) => {\n          viewRef.current?.measureInWindow(callback);\n        },\n      }) as CanvasRef\n  );\n  return { nativeId, viewRef };\n};\n\n/**\n * The declarative canvas. Its children are rendered by Skia's own React\n * renderer; the frames are produced off the JS thread:\n *\n * - the JS thread records the scene graph into a native recorder once per\n *   React commit and hands it to the view;\n * - the Reanimated UI runtime only reads the shared values into it (the one\n *   step that needs a JS runtime), it never replays anything;\n * - a dedicated native thread pool replays the recorder into a Graphite\n *   recording whenever the content changed, at most once per presented frame;\n * - the view presents the recording on the next vsync.\n *\n * On the web the scene is drawn into a picture on the JS thread and painted\n * on a WebGL canvas.\n */\nexport const Canvas = ({\n  opaque,\n  children,\n  onSize,\n  highBitDepth = false,\n  android,\n  ref,\n  onLayout,\n  ...viewProps\n}: CanvasProps) => {\n  const { nativeId, viewRef } = useCanvasRoot({\n    children,\n    onSize,\n    ref,\n    onLayout,\n  });\n\n  const onLayoutWeb = useCallback(\n    (e: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(e);\n      }\n      if (Platform.OS === \"web\" && onSize) {\n        const { width, height } = e.nativeEvent.layout;\n        onSize.value = { width, height };\n      }\n    },\n    [onLayout, onSize]\n  );\n  return (\n    <SkiaViewNativeComponent\n      ref={viewRef}\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      opaque={opaque}\n      highBitDepth={highBitDepth}\n      {...androidNativeProps(android)}\n      onLayout={\n        Platform.OS === \"web\" && (onSize || onLayout) ? onLayoutWeb : onLayout\n      }\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/react-native-skia.podspec

@@ -163,7 +163,7 @@ Pod::Spec.new do |s|
     "Christian Falch" => "christian.falch@gmail.com",
     "William Candillon" => "wcandillon@gmail.com"
   }
-  s.platforms    = { :ios => "14.0", :osx => "11" }
+  s.platforms    = { :ios => "15.1", :osx => "11" }
   s.source       = { :git => "https://github.com/wcandillon/react-native-skia.git", :tag => "#{s.version}" }
 
   s.requires_arc = true

package/src/external/reanimated/interpolators.ts

@@ -115,7 +115,7 @@ export const usePathInterpolation = (
     // For example, throw an error or return early
     throw new Error(
       `Not all paths in the output range are interpolable.
-See: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`
+See: https://wcandillon.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`
     );
   }
   return useInterpolator(

package/src/renderer/Canvas.tsx

@@ -99,7 +99,7 @@ const useCanvasRoot = ({
 }: Pick<CanvasProps, "children" | "onSize" | "ref" | "onLayout">) => {
   if (onLayout && Platform.OS !== "web") {
     console.error(
-      "<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size"
+      "<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://wcandillon.github.io/react-native-skia/docs/canvas/overview/#canvas-size"
     );
   }
   const viewRef = useCanvasRefPriv(null);