react-native-skia 3.0.2 → 3.0.4

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"
 
@@ -37,7 +38,8 @@ namespace jsi = facebook::jsi;
  * (SkiaViewApi.makeGraphiteContext), or <Canvas> hands over a recorder (or a
  * picture) that the render thread pool records for the view. Either way the
  * recordings are queued on the target; the view presents them onto its canvas
- * provider on the main thread, aligned with the platform's display link.
+ * provider on the main thread, once the platform view's surface can show a new
+ * frame (see setFrameScheduler).
  *
  * Threading: the registry side (RNSkJsiViewApi) runs on the JS thread, except
  * applyUpdates() which a Reanimated mapper calls on the UI runtime; snapshots
@@ -208,19 +210,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. */
@@ -232,8 +249,10 @@ public:
   // Platform view side -------------------------------------------------------
 
   /**
-   Installed by the platform view: arms its display link. Main thread. Without
-   one, frames are presented as soon as the main thread gets to them.
+   Installed by the platform view, which calls presentFrame() once its surface
+   can show a new frame: on the display link on iOS, straight away on macOS,
+   and on Android as its FrameScheduler decides. Main thread. Without one,
+   frames are presented as soon as the main thread gets to them.
    */
   void setFrameScheduler(std::function<void()> scheduler) {
     _frameScheduler = std::move(scheduler);
@@ -249,10 +268,10 @@ public:
   }
 
   /**
-   Display link tick: presents the queued recordings. Returns whether more
-   are waiting, so that the caller keeps its display link armed: also when the
-   present failed (the app is in the background), so that the recordings are
-   tried again on the next frame rather than left waiting for a redraw.
+   Presents the queued recordings (see setFrameScheduler for when). Returns
+   whether more are waiting, so that the platform view asks again: also when
+   the present failed (the app is in the background), so that the recordings
+   are tried again on the next frame rather than left waiting for a redraw.
    Without a surface the queue is left alone: the surface presents it when
    it appears.
    */
@@ -297,11 +316,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 +330,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 +354,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 +374,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 +405,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