@shopify/react-native-skia 2.1.0 → 2.2.0

package/android/CMakeLists.txt

@@ -85,7 +85,7 @@ if(SK_GRAPHITE)
     add_definitions(-DSK_GRAPHITE)
     set(BACKEND_SOURCES
     #TODO: is this source needed to be added?
-        "${PROJECT_SOURCE_DIR}/../cpp/rnskia/DawnWindowContext.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnskia/RNDawnWindowContext.cpp"
     )
 else()
     add_definitions(-DSK_GL -DSK_GANESH)

package/android/cpp/rnskia-android/OpenGLWindowContext.h

@@ -13,7 +13,7 @@
 #include <thread>
 #include <unordered_map>
 
-#include "WindowContext.h"
+#include "RNWindowContext.h"
 #include "gl/Display.h"
 
 #pragma clang diagnostic push

package/android/cpp/rnskia-android/RNSkAndroidPlatformContext.h

@@ -9,7 +9,7 @@
 #include <string>
 
 #if defined(SK_GRAPHITE)
-#include "DawnContext.h"
+#include "RNDawnContext.h"
 #else
 #include "OpenGLContext.h"
 #endif

package/android/cpp/rnskia-android/RNSkAndroidVideo.cpp

@@ -8,7 +8,7 @@
 #include "RNSkLog.h"
 
 #if defined(SK_GRAPHITE)
-#include "DawnContext.h"
+#include "RNDawnContext.h"
 #else
 #include "OpenGLContext.h"
 #endif

package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.cpp

@@ -8,7 +8,7 @@
 #include "RNSkLog.h"
 
 #if defined(SK_GRAPHITE)
-#include "DawnContext.h"
+#include "RNDawnContext.h"
 #else
 #include "OpenGLContext.h"
 #endif

package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.h

@@ -5,7 +5,7 @@
 #include <memory>
 
 #include "RNSkView.h"
-#include "WindowContext.h"
+#include "RNWindowContext.h"
 
 #include <android/native_window.h>
 

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

@@ -5,6 +5,7 @@ import com.facebook.react.viewmanagers.SkiaPictureViewManagerDelegate;
 import com.facebook.react.viewmanagers.SkiaPictureViewManagerInterface;
 
 import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 
 public class SkiaPictureViewManager extends SkiaBaseViewManager<SkiaPictureView> implements SkiaPictureViewManagerInterface<SkiaPictureView> {
 
@@ -30,4 +31,9 @@ public class SkiaPictureViewManager extends SkiaBaseViewManager<SkiaPictureView>
     public SkiaPictureView createViewInstance(@NonNull ThemedReactContext reactContext) {
         return new SkiaPictureView(reactContext);
     }
+
+    @Override
+    public void setColorSpace(SkiaPictureView view, @Nullable String value) {
+        // nothing to do here at the moment
+    }
 }

package/apple/MetalContext.h

@@ -113,10 +113,10 @@ public:
   }
 
   std::unique_ptr<RNSkia::WindowContext> MakeWindow(CALayer *window, int width,
-                                                    int height) {
+                                                    int height, bool useP3ColorSpace = true) {
     auto device = MetalSharedContext::getInstance().getDevice();
     return std::make_unique<MetalWindowContext>(
-        _directContext.get(), device, _commandQueue, window, width, height);
+        _directContext.get(), device, _commandQueue, window, width, height, useP3ColorSpace);
   }
 
   GrDirectContext *getDirectContext() { return _directContext.get(); }

package/apple/MetalWindowContext.h

@@ -2,7 +2,7 @@
 
 #import <MetalKit/MetalKit.h>
 
-#include "WindowContext.h"
+#include "RNWindowContext.h"
 
 class SkiaMetalContext;
 
@@ -10,7 +10,7 @@ class MetalWindowContext : public RNSkia::WindowContext {
 public:
   MetalWindowContext(GrDirectContext *directContext, id<MTLDevice> device,
                      id<MTLCommandQueue> commandQueue, CALayer *layer,
-                     int width, int height);
+                     int width, int height, bool useP3ColorSpace = true);
   ~MetalWindowContext() = default;
 
   sk_sp<SkSurface> getSurface() override;

package/apple/MetalWindowContext.mm

@@ -6,7 +6,8 @@
 MetalWindowContext::MetalWindowContext(GrDirectContext *directContext,
                                        id<MTLDevice> device,
                                        id<MTLCommandQueue> commandQueue,
-                                       CALayer *layer, int width, int height)
+                                       CALayer *layer, int width, int height,
+                                       bool useP3ColorSpace)
     : _directContext(directContext), _commandQueue(commandQueue) {
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
@@ -24,9 +25,11 @@ MetalWindowContext::MetalWindowContext(GrDirectContext *directContext,
   _layer.contentsGravity = kCAGravityBottomLeft;
   _layer.drawableSize = CGSizeMake(width, height);
   BOOL supportsWideColor = NO;
-  if (@available(iOS 10.0, *)) {
-    supportsWideColor =
-        [UIScreen mainScreen].traitCollection.displayGamut == UIDisplayGamutP3;
+  if (useP3ColorSpace) {
+    if (@available(iOS 10.0, *)) {
+      supportsWideColor =
+          [UIScreen mainScreen].traitCollection.displayGamut == UIDisplayGamutP3;
+    }
   }
   if (supportsWideColor) {
     CGColorSpaceRef colorSpace =

package/apple/RNSkApplePlatformContext.mm

@@ -7,7 +7,7 @@
 #include <utility>
 
 #if defined(SK_GRAPHITE)
-#include "DawnContext.h"
+#include "RNDawnContext.h"
 #else
 #include "MetalContext.h"
 #endif

package/apple/RNSkAppleView.h

@@ -10,6 +10,7 @@ class RNSkBaseAppleView {
 public:
   virtual CALayer *getLayer() = 0;
   virtual void setSize(int width, int height) = 0;
+  virtual void setUseP3ColorSpace(bool useP3ColorSpace) = 0;
   virtual std::shared_ptr<RNSkia::RNSkView> getDrawView() = 0;
 };
 
@@ -18,7 +19,7 @@ public:
   RNSkAppleView(std::shared_ptr<RNSkia::RNSkPlatformContext> context)
       : T(context,
           std::make_shared<RNSkMetalCanvasProvider>(
-              std::bind(&RNSkia::RNSkView::requestRedraw, this), context)) {}
+              std::bind(&RNSkia::RNSkView::requestRedraw, this), context, true)) {}
 
   CALayer *getLayer() override {
     return std::static_pointer_cast<RNSkMetalCanvasProvider>(
@@ -31,6 +32,11 @@ public:
         ->setSize(width, height);
   }
 
+  void setUseP3ColorSpace(bool useP3ColorSpace) override {
+    std::static_pointer_cast<RNSkMetalCanvasProvider>(this->getCanvasProvider())
+        ->setUseP3ColorSpace(useP3ColorSpace);
+  }
+
   std::shared_ptr<RNSkia::RNSkView> getDrawView() override {
     return this->shared_from_this();
   }

package/apple/RNSkMetalCanvasProvider.h

@@ -16,7 +16,8 @@
 class RNSkMetalCanvasProvider : public RNSkia::RNSkCanvasProvider {
 public:
   RNSkMetalCanvasProvider(std::function<void()> requestRedraw,
-                          std::shared_ptr<RNSkia::RNSkPlatformContext> context);
+                          std::shared_ptr<RNSkia::RNSkPlatformContext> context,
+                          bool useP3ColorSpace = true);
 
   ~RNSkMetalCanvasProvider();
 
@@ -26,6 +27,7 @@ public:
   bool renderToCanvas(const std::function<void(SkCanvas *)> &cb) override;
 
   void setSize(int width, int height);
+  void setUseP3ColorSpace(bool useP3ColorSpace);
   CALayer *getLayer();
 
 private:
@@ -35,4 +37,5 @@ private:
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
   CAMetalLayer *_layer;
 #pragma clang diagnostic pop
+  bool _useP3ColorSpace = true;
 };

package/apple/RNSkMetalCanvasProvider.mm

@@ -3,7 +3,7 @@
 #import "RNSkLog.h"
 
 #if defined(SK_GRAPHITE)
-#import "DawnContext.h"
+#import "RNDawnContext.h"
 #else
 #import "MetalContext.h"
 #endif
@@ -23,8 +23,9 @@
 
 RNSkMetalCanvasProvider::RNSkMetalCanvasProvider(
     std::function<void()> requestRedraw,
-    std::shared_ptr<RNSkia::RNSkPlatformContext> context)
-    : RNSkCanvasProvider(requestRedraw), _context(context) {
+    std::shared_ptr<RNSkia::RNSkPlatformContext> context,
+    bool useP3ColorSpace)
+    : RNSkCanvasProvider(requestRedraw), _context(context), _useP3ColorSpace(useP3ColorSpace) {
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
   _layer = [CAMetalLayer layer];
@@ -100,9 +101,13 @@ void RNSkMetalCanvasProvider::setSize(int width, int height) {
   _ctx = RNSkia::DawnContext::getInstance().MakeWindow((__bridge void *)_layer,
                                                        w, h);
 #else
-  _ctx = MetalContext::getInstance().MakeWindow(_layer, w, h);
+  _ctx = MetalContext::getInstance().MakeWindow(_layer, w, h, _useP3ColorSpace);
 #endif
   _requestRedraw();
 }
 
 CALayer *RNSkMetalCanvasProvider::getLayer() { return _layer; }
+
+void RNSkMetalCanvasProvider::setUseP3ColorSpace(bool useP3ColorSpace) {
+  _useP3ColorSpace = useP3ColorSpace;
+}

package/apple/SkiaPictureView.mm

@@ -55,6 +55,10 @@ using namespace facebook::react;
   [self setNativeId:nativeId];
   [self setDebugMode:newProps.debug];
   [self setOpaque:newProps.opaque];
+  if (newProps.colorSpace == "" || newProps.colorSpace == "srgb") {
+    bool useP3 = false;
+    [self setUseP3ColorSpace:useP3];
+  }
 }
 
 @end

package/apple/SkiaUIView.h

@@ -41,5 +41,6 @@
 - (void)setDebugMode:(bool)debugMode;
 - (void)setOpaque:(bool)opaque;
 - (void)setNativeId:(size_t)nativeId;
+- (void)setUseP3ColorSpace:(bool)useP3ColorSpace;
 
 @end

package/apple/SkiaUIView.mm

@@ -16,6 +16,7 @@
       _factory;
   bool _debugMode;
   bool _opaque;
+  bool _useP3ColorSpace;
   size_t _nativeId;
 }
 
@@ -73,6 +74,7 @@
         _manager->setSkiaView(_nativeId, _impl->getDrawView());
       }
       _impl->getDrawView()->setShowDebugOverlays(_debugMode);
+      _impl->setUseP3ColorSpace(_useP3ColorSpace);
     }
   }
 }
@@ -163,6 +165,13 @@
   }
 }
 
+- (void)setUseP3ColorSpace:(bool)useP3ColorSpace {
+  _useP3ColorSpace = useP3ColorSpace;
+  if (_impl != nullptr) {
+    _impl->setUseP3ColorSpace(_useP3ColorSpace);
+  }
+}
+
 #pragma mark External API
 
 - (std::shared_ptr<RNSkBaseAppleView>)impl {

package/cpp/api/JsiSkImage.h

@@ -14,7 +14,7 @@
 #include "RNSkTypedArray.h"
 
 #if defined(SK_GRAPHITE)
-#include "DawnContext.h"
+#include "RNDawnContext.h"
 #include "include/gpu/graphite/Context.h"
 #endif
 

package/cpp/api/JsiSkSurface.h

@@ -12,7 +12,7 @@
 #include "JsiSkImage.h"
 
 #if defined(SK_GRAPHITE)
-#include "DawnContext.h"
+#include "RNDawnContext.h"
 #endif
 
 #pragma clang diagnostic push

package/cpp/api/JsiSkiaContext.h

@@ -14,7 +14,7 @@
 #include "JsiSkRect.h"
 #include "JsiSkTypeface.h"
 
-#include "WindowContext.h"
+#include "RNWindowContext.h"
 
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"

package/cpp/api/recorder/Convertor.h

@@ -450,6 +450,22 @@ sk_sp<skottie::Animation> getPropertyValue(jsi::Runtime &runtime,
       "Expected JsiSkSkottie object or null for the svg property.");
 }
 
+template <>
+sk_sp<SkImageFilter> getPropertyValue(jsi::Runtime &runtime,
+                                      const jsi::Value &value) {
+  if (value.isObject() && value.asObject(runtime).isHostObject(runtime)) {
+    auto ptr = std::dynamic_pointer_cast<JsiSkImageFilter>(
+        value.asObject(runtime).asHostObject(runtime));
+    if (ptr != nullptr) {
+      return ptr->getObject();
+    }
+  } else if (value.isNull()) {
+    return nullptr;
+  }
+  throw std::runtime_error(
+      "Expected JsiSkImageFilter object or null for the imageFilter property.");
+}
+
 template <>
 sk_sp<SkPicture> getPropertyValue(jsi::Runtime &runtime,
                                   const jsi::Value &value) {

package/cpp/api/recorder/ImageFilters.h

@@ -289,4 +289,24 @@ public:
   }
 };
 
+struct ImageFilterCmdProps {
+  sk_sp<SkImageFilter> filter;
+};
+
+class ImageFilterCmd : public Command {
+private:
+  ImageFilterCmdProps props;
+
+public:
+  ImageFilterCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                 Variables &variables)
+      : Command(CommandType::PushImageFilter, "skImageFilter") {
+    convertProperty(runtime, object, "filter", props.filter, variables);
+  }
+
+  void pushImageFilter(DrawingCtx *ctx) {
+    ctx->imageFilters.push_back(props.filter);
+  }
+};
+
 } // namespace RNSkia

package/cpp/api/recorder/Paint.h

@@ -152,6 +152,10 @@ public:
       return;
     }
     ctx->savePaint();
+    if (standalone) {
+      SkPaint freshPaint;
+      ctx->pushPaint(freshPaint);
+    }
     auto &paint = ctx->getPaint();
     if (props.opacity.has_value()) {
       if (standalone) {

package/cpp/api/recorder/RNRecorder.h

@@ -142,6 +142,9 @@ public:
     } else if (nodeType == "skRuntimeShaderImageFilter") {
       commands.push_back(std::make_unique<RuntimeShaderImageFilterCmd>(
           runtime, props, variables));
+    } else if (nodeType == "skImageFilter") {
+      commands.push_back(
+          std::make_unique<ImageFilterCmd>(runtime, props, variables));
     }
   }
 
@@ -419,6 +422,9 @@ public:
           auto *runtimeShaderCmd =
               static_cast<RuntimeShaderImageFilterCmd *>(cmd.get());
           runtimeShaderCmd->pushImageFilter(ctx);
+        } else if (nodeType == "skImageFilter") {
+          auto *imageFilterCmd = static_cast<ImageFilterCmd *>(cmd.get());
+          imageFilterCmd->pushImageFilter(ctx);
         } else {
           throw std::runtime_error("Invalid image filter type: " + nodeType);
         }

package/cpp/rnskia/{DawnContext.h → RNDawnContext.h}

@@ -3,9 +3,9 @@
 #include <memory>
 #include <mutex>
 
-#include "DawnUtils.h"
-#include "DawnWindowContext.h"
-#include "ImageProvider.h"
+#include "RNDawnWindowContext.h"
+#include "RNImageProvider.h"
+#include "RNDawnUtils.h"
 
 #include "include/core/SkData.h"
 #include "include/gpu/graphite/BackendTexture.h"

package/cpp/rnskia/{DawnWindowContext.cpp → RNDawnWindowContext.cpp}

@@ -1,6 +1,6 @@
-#include "DawnWindowContext.h"
+#include "RNDawnWindowContext.h"
 
-#include "DawnContext.h"
+#include "RNDawnContext.h"
 
 namespace RNSkia {
 
@@ -16,4 +16,4 @@ void DawnWindowContext::present() {
   _surface.Present();
 }
 
-} // namespace RNSkia
+} // namespace RNSkia

package/cpp/rnskia/{DawnWindowContext.h → RNDawnWindowContext.h}

@@ -1,7 +1,7 @@
 #pragma once
 
-#include "DawnUtils.h"
-#include "WindowContext.h"
+#include "RNDawnUtils.h"
+#include "RNWindowContext.h"
 
 #include "dawn/native/MetalBackend.h"
 #include "webgpu/webgpu_cpp.h"

package/cpp/rnskia/RNSkPlatformContext.h

@@ -10,7 +10,7 @@
 #include <utility>
 
 #include "RNSkVideo.h"
-#include "WindowContext.h"
+#include "RNWindowContext.h"
 
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"

package/lib/commonjs/dom/types/Drawings.d.ts

@@ -1,4 +1,4 @@
-import type { FillType, SkImage, StrokeOpts, Vector, Color, SkPoint, BlendMode, PointMode, VertexMode, SkFont, SkRRect, SkTextBlob, SkPicture, SkSVG, SkPaint, SkRect, SkRSXform, SkColor, SamplingOptions, SkSkottieAnimation } from "../../skia/types";
+import type { FillType, SkImage, StrokeOpts, Vector, Color, SkPoint, BlendMode, PointMode, VertexMode, SkFont, SkRRect, SkTextBlob, SkPicture, SkSVG, SkPaint, SkRect, SkRSXform, SkColor, SamplingOptions, SkSkottieAnimation, SkImageFilter } from "../../skia/types";
 import type { CircleDef, Fit, GroupProps, PathDef, RectDef, RRectDef, SkEnum } from "./Common";
 export interface DrawingNodeProps extends GroupProps {
     paint?: SkPaint;
@@ -115,3 +115,6 @@ export interface BoxShadowProps {
     color?: Color;
     inner?: boolean;
 }
+export interface ImageFilterProps extends GroupProps {
+    filter: SkImageFilter;
+}

package/lib/commonjs/dom/types/Drawings.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Drawings.ts"],"sourcesContent":["import type {\n  FillType,\n  SkImage,\n  StrokeOpts,\n  Vector,\n  Color,\n  SkPoint,\n  BlendMode,\n  PointMode,\n  VertexMode,\n  SkFont,\n  SkRRect,\n  SkTextBlob,\n  SkPicture,\n  SkSVG,\n  SkPaint,\n  SkRect,\n  SkRSXform,\n  SkColor,\n  SamplingOptions,\n  SkSkottieAnimation,\n} from \"../../skia/types\";\n\nimport type {\n  CircleDef,\n  Fit,\n  GroupProps,\n  PathDef,\n  RectDef,\n  RRectDef,\n  SkEnum,\n} from \"./Common\";\n\nexport interface DrawingNodeProps extends GroupProps {\n  paint?: SkPaint;\n}\n\nexport type ImageProps = DrawingNodeProps &\n  RectDef & {\n    fit?: Fit;\n    image: SkImage | null;\n    sampling?: SamplingOptions;\n  };\n\nexport type CircleProps = CircleDef & DrawingNodeProps;\n\nexport interface PathProps extends DrawingNodeProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n  fillType?: SkEnum<typeof FillType>;\n}\n\nexport interface LineProps extends DrawingNodeProps {\n  p1: Vector;\n  p2: Vector;\n}\n\nexport type OvalProps = RectDef & DrawingNodeProps;\n\nexport type RectProps = RectDef & DrawingNodeProps;\n\nexport type RoundedRectProps = RRectDef & DrawingNodeProps;\n\nexport interface AtlasProps extends DrawingNodeProps {\n  image: SkImage | null;\n  sprites: SkRect[];\n  transforms: SkRSXform[];\n  colors?: SkColor[];\n  sampling?: SamplingOptions;\n}\n\nexport interface CubicBezierHandle {\n  pos: Vector;\n  c1: Vector;\n  c2: Vector;\n}\n\nexport interface PatchProps extends DrawingNodeProps {\n  colors?: Color[];\n  patch: [\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle\n  ];\n  texture?: readonly [SkPoint, SkPoint, SkPoint, SkPoint];\n  blendMode?: SkEnum<typeof BlendMode>;\n}\n\nexport interface VerticesProps extends DrawingNodeProps {\n  colors?: string[];\n  vertices: SkPoint[];\n  textures?: SkPoint[];\n  mode: SkEnum<typeof VertexMode>;\n  blendMode?: SkEnum<typeof BlendMode>;\n  indices?: number[];\n}\n\nexport interface ImageSVGProps extends DrawingNodeProps {\n  svg: SkSVG | null;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  rect?: SkRect;\n}\n\nexport interface SkottieProps extends DrawingNodeProps {\n  animation: SkSkottieAnimation;\n  frame: number;\n}\n\nexport interface PictureProps extends DrawingNodeProps {\n  picture: SkPicture;\n}\n\nexport interface PointsProps extends DrawingNodeProps {\n  points: SkPoint[];\n  mode: SkEnum<typeof PointMode>;\n}\n\nexport interface DiffRectProps extends DrawingNodeProps {\n  inner: SkRRect;\n  outer: SkRRect;\n}\n\nexport interface TextProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  x: number;\n  y: number;\n}\n\nexport interface TextPathProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  path: PathDef;\n  initialOffset: number;\n}\n\nexport interface TextBlobProps extends DrawingNodeProps {\n  blob: SkTextBlob;\n  x: number;\n  y: number;\n}\n\nexport interface Glyph {\n  id: number;\n  pos: SkPoint;\n}\n\nexport interface GlyphsProps extends DrawingNodeProps {\n  font: SkFont | null;\n  x: number;\n  y: number;\n  glyphs: Glyph[];\n}\n\nexport interface BoxProps extends DrawingNodeProps {\n  box: SkRRect | SkRect;\n}\n\nexport interface BoxShadowProps {\n  dx?: number;\n  dy?: number;\n  spread?: number;\n  blur: number;\n  color?: Color;\n  inner?: boolean;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["Drawings.ts"],"sourcesContent":["import type {\n  FillType,\n  SkImage,\n  StrokeOpts,\n  Vector,\n  Color,\n  SkPoint,\n  BlendMode,\n  PointMode,\n  VertexMode,\n  SkFont,\n  SkRRect,\n  SkTextBlob,\n  SkPicture,\n  SkSVG,\n  SkPaint,\n  SkRect,\n  SkRSXform,\n  SkColor,\n  SamplingOptions,\n  SkSkottieAnimation,\n  SkImageFilter,\n} from \"../../skia/types\";\n\nimport type {\n  CircleDef,\n  Fit,\n  GroupProps,\n  PathDef,\n  RectDef,\n  RRectDef,\n  SkEnum,\n} from \"./Common\";\n\nexport interface DrawingNodeProps extends GroupProps {\n  paint?: SkPaint;\n}\n\nexport type ImageProps = DrawingNodeProps &\n  RectDef & {\n    fit?: Fit;\n    image: SkImage | null;\n    sampling?: SamplingOptions;\n  };\n\nexport type CircleProps = CircleDef & DrawingNodeProps;\n\nexport interface PathProps extends DrawingNodeProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n  fillType?: SkEnum<typeof FillType>;\n}\n\nexport interface LineProps extends DrawingNodeProps {\n  p1: Vector;\n  p2: Vector;\n}\n\nexport type OvalProps = RectDef & DrawingNodeProps;\n\nexport type RectProps = RectDef & DrawingNodeProps;\n\nexport type RoundedRectProps = RRectDef & DrawingNodeProps;\n\nexport interface AtlasProps extends DrawingNodeProps {\n  image: SkImage | null;\n  sprites: SkRect[];\n  transforms: SkRSXform[];\n  colors?: SkColor[];\n  sampling?: SamplingOptions;\n}\n\nexport interface CubicBezierHandle {\n  pos: Vector;\n  c1: Vector;\n  c2: Vector;\n}\n\nexport interface PatchProps extends DrawingNodeProps {\n  colors?: Color[];\n  patch: [\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle\n  ];\n  texture?: readonly [SkPoint, SkPoint, SkPoint, SkPoint];\n  blendMode?: SkEnum<typeof BlendMode>;\n}\n\nexport interface VerticesProps extends DrawingNodeProps {\n  colors?: string[];\n  vertices: SkPoint[];\n  textures?: SkPoint[];\n  mode: SkEnum<typeof VertexMode>;\n  blendMode?: SkEnum<typeof BlendMode>;\n  indices?: number[];\n}\n\nexport interface ImageSVGProps extends DrawingNodeProps {\n  svg: SkSVG | null;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  rect?: SkRect;\n}\n\nexport interface SkottieProps extends DrawingNodeProps {\n  animation: SkSkottieAnimation;\n  frame: number;\n}\n\nexport interface PictureProps extends DrawingNodeProps {\n  picture: SkPicture;\n}\n\nexport interface PointsProps extends DrawingNodeProps {\n  points: SkPoint[];\n  mode: SkEnum<typeof PointMode>;\n}\n\nexport interface DiffRectProps extends DrawingNodeProps {\n  inner: SkRRect;\n  outer: SkRRect;\n}\n\nexport interface TextProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  x: number;\n  y: number;\n}\n\nexport interface TextPathProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  path: PathDef;\n  initialOffset: number;\n}\n\nexport interface TextBlobProps extends DrawingNodeProps {\n  blob: SkTextBlob;\n  x: number;\n  y: number;\n}\n\nexport interface Glyph {\n  id: number;\n  pos: SkPoint;\n}\n\nexport interface GlyphsProps extends DrawingNodeProps {\n  font: SkFont | null;\n  x: number;\n  y: number;\n  glyphs: Glyph[];\n}\n\nexport interface BoxProps extends DrawingNodeProps {\n  box: SkRRect | SkRect;\n}\n\nexport interface BoxShadowProps {\n  dx?: number;\n  dy?: number;\n  spread?: number;\n  blur: number;\n  color?: Color;\n  inner?: boolean;\n}\n\nexport interface ImageFilterProps extends GroupProps {\n  filter: SkImageFilter;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/commonjs/dom/types/NodeType.d.ts

@@ -56,5 +56,6 @@ export declare const enum NodeType {
     ImageSVG = "skImageSVG",
     Atlas = "skAtlas",
     Paragraph = "skParagraph",
-    Skottie = "skSkottie"
+    Skottie = "skSkottie",
+    ImageFilter = "skImageFilter"
 }

package/lib/commonjs/dom/types/NodeType.js

@@ -72,6 +72,8 @@ let NodeType = exports.NodeType = /*#__PURE__*/function (NodeType) {
   NodeType["Paragraph"] = "skParagraph";
   // Skottie
   NodeType["Skottie"] = "skSkottie";
+  // ImageFilter
+  NodeType["ImageFilter"] = "skImageFilter";
   return NodeType;
 }({});
 //# sourceMappingURL=NodeType.js.map

package/lib/commonjs/dom/types/NodeType.js.map

@@ -1 +1 @@
-{"version":3,"names":["NodeType","exports"],"sources":["NodeType.ts"],"sourcesContent":["export const enum NodeType {\n  // Shaders\n  Layer = \"skLayer\",\n  Shader = \"skShader\",\n  ImageShader = \"skImageShader\",\n  ColorShader = \"skColorShader\",\n  Turbulence = \"skTurbulence\",\n  FractalNoise = \"skFractalNoise\",\n  LinearGradient = \"skLinearGradient\",\n  RadialGradient = \"skRadialGradient\",\n  SweepGradient = \"skSweepGradient\",\n  TwoPointConicalGradient = \"skTwoPointConicalGradient\",\n\n  // Mask Filters\n  BlurMaskFilter = \"skBlurMaskFilter\",\n\n  // Path Effects\n  DiscretePathEffect = \"skDiscretePathEffect\",\n  DashPathEffect = \"skDashPathEffect\",\n  Path1DPathEffect = \"skPath1DPathEffect\",\n  Path2DPathEffect = \"skPath2DPathEffect\",\n  CornerPathEffect = \"skCornerPathEffect\",\n  SumPathEffect = \"skSumPathEffect\",\n  Line2DPathEffect = \"skLine2DPathEffect\",\n\n  // Color Filters\n  MatrixColorFilter = \"skMatrixColorFilter\",\n  BlendColorFilter = \"skBlendColorFilter\",\n  LinearToSRGBGammaColorFilter = \"skLinearToSRGBGammaColorFilter\",\n  SRGBToLinearGammaColorFilter = \"skSRGBToLinearGammaColorFilter\",\n  LumaColorFilter = \"skLumaColorFilter\",\n  LerpColorFilter = \"skLerpColorFilter\",\n\n  // Image Filters\n  OffsetImageFilter = \"skOffsetImageFilter\",\n  DisplacementMapImageFilter = \"skDisplacementMapImageFilter\",\n  BlurImageFilter = \"skBlurImageFilter\",\n  DropShadowImageFilter = \"skDropShadowImageFilter\",\n  MorphologyImageFilter = \"skMorphologyImageFilter\",\n  BlendImageFilter = \"skBlendImageFilter\",\n  RuntimeShaderImageFilter = \"skRuntimeShaderImageFilter\",\n\n  // Mixed\n  Blend = \"skBlend\",\n  BackdropFilter = \"skBackdropFilter\",\n  Box = \"skBox\",\n  BoxShadow = \"skBoxShadow\",\n\n  // Drawings\n  Group = \"skGroup\",\n  Paint = \"skPaint\",\n  Circle = \"skCircle\",\n  Fill = \"skFill\",\n  Image = \"skImage\",\n  Points = \"skPoints\",\n  Path = \"skPath\",\n  Rect = \"skRect\",\n  RRect = \"skRRect\",\n  Oval = \"skOval\",\n  Line = \"skLine\",\n  Patch = \"skPatch\",\n  Vertices = \"skVertices\",\n  DiffRect = \"skDiffRect\",\n  Text = \"skText\",\n  TextPath = \"skTextPath\",\n  TextBlob = \"skTextBlob\",\n  Glyphs = \"skGlyphs\",\n  Picture = \"skPicture\",\n  ImageSVG = \"skImageSVG\",\n  Atlas = \"skAtlas\",\n\n  // Paragraph\n  Paragraph = \"skParagraph\",\n  // Skottie\n  Skottie = \"skSkottie\",\n}\n"],"mappings":";;;;;;IAAkBA,QAAQ,GAAAC,OAAA,CAAAD,QAAA,0BAARA,QAAQ;EACxB;EADgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAaxB;EAbgBA,QAAQ;EAgBxB;EAhBgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAyBxB;EAzBgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAiCxB;EAjCgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EA0CxB;EA1CgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAgDxB;EAhDgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAuExB;EAvEgBA,QAAQ;EAyExB;EAzEgBA,QAAQ;EAAA,OAARA,QAAQ;AAAA","ignoreList":[]}
+{"version":3,"names":["NodeType","exports"],"sources":["NodeType.ts"],"sourcesContent":["export const enum NodeType {\n  // Shaders\n  Layer = \"skLayer\",\n  Shader = \"skShader\",\n  ImageShader = \"skImageShader\",\n  ColorShader = \"skColorShader\",\n  Turbulence = \"skTurbulence\",\n  FractalNoise = \"skFractalNoise\",\n  LinearGradient = \"skLinearGradient\",\n  RadialGradient = \"skRadialGradient\",\n  SweepGradient = \"skSweepGradient\",\n  TwoPointConicalGradient = \"skTwoPointConicalGradient\",\n\n  // Mask Filters\n  BlurMaskFilter = \"skBlurMaskFilter\",\n\n  // Path Effects\n  DiscretePathEffect = \"skDiscretePathEffect\",\n  DashPathEffect = \"skDashPathEffect\",\n  Path1DPathEffect = \"skPath1DPathEffect\",\n  Path2DPathEffect = \"skPath2DPathEffect\",\n  CornerPathEffect = \"skCornerPathEffect\",\n  SumPathEffect = \"skSumPathEffect\",\n  Line2DPathEffect = \"skLine2DPathEffect\",\n\n  // Color Filters\n  MatrixColorFilter = \"skMatrixColorFilter\",\n  BlendColorFilter = \"skBlendColorFilter\",\n  LinearToSRGBGammaColorFilter = \"skLinearToSRGBGammaColorFilter\",\n  SRGBToLinearGammaColorFilter = \"skSRGBToLinearGammaColorFilter\",\n  LumaColorFilter = \"skLumaColorFilter\",\n  LerpColorFilter = \"skLerpColorFilter\",\n\n  // Image Filters\n  OffsetImageFilter = \"skOffsetImageFilter\",\n  DisplacementMapImageFilter = \"skDisplacementMapImageFilter\",\n  BlurImageFilter = \"skBlurImageFilter\",\n  DropShadowImageFilter = \"skDropShadowImageFilter\",\n  MorphologyImageFilter = \"skMorphologyImageFilter\",\n  BlendImageFilter = \"skBlendImageFilter\",\n  RuntimeShaderImageFilter = \"skRuntimeShaderImageFilter\",\n\n  // Mixed\n  Blend = \"skBlend\",\n  BackdropFilter = \"skBackdropFilter\",\n  Box = \"skBox\",\n  BoxShadow = \"skBoxShadow\",\n\n  // Drawings\n  Group = \"skGroup\",\n  Paint = \"skPaint\",\n  Circle = \"skCircle\",\n  Fill = \"skFill\",\n  Image = \"skImage\",\n  Points = \"skPoints\",\n  Path = \"skPath\",\n  Rect = \"skRect\",\n  RRect = \"skRRect\",\n  Oval = \"skOval\",\n  Line = \"skLine\",\n  Patch = \"skPatch\",\n  Vertices = \"skVertices\",\n  DiffRect = \"skDiffRect\",\n  Text = \"skText\",\n  TextPath = \"skTextPath\",\n  TextBlob = \"skTextBlob\",\n  Glyphs = \"skGlyphs\",\n  Picture = \"skPicture\",\n  ImageSVG = \"skImageSVG\",\n  Atlas = \"skAtlas\",\n\n  // Paragraph\n  Paragraph = \"skParagraph\",\n  // Skottie\n  Skottie = \"skSkottie\",\n  // ImageFilter\n  ImageFilter = \"skImageFilter\",\n}\n"],"mappings":";;;;;;IAAkBA,QAAQ,GAAAC,OAAA,CAAAD,QAAA,0BAARA,QAAQ;EACxB;EADgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAaxB;EAbgBA,QAAQ;EAgBxB;EAhBgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAyBxB;EAzBgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAiCxB;EAjCgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EA0CxB;EA1CgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAgDxB;EAhDgBA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAARA,QAAQ;EAuExB;EAvEgBA,QAAQ;EAyExB;EAzEgBA,QAAQ;EA2ExB;EA3EgBA,QAAQ;EAAA,OAARA,QAAQ;AAAA","ignoreList":[]}

package/lib/commonjs/renderer/Canvas.d.ts

@@ -14,6 +14,7 @@ export interface CanvasProps extends ViewProps {
     debug?: boolean;
     opaque?: boolean;
     onSize?: SharedValue<SkSize>;
+    colorSpace?: "p3" | "srgb";
     ref?: React.Ref<CanvasRef>;
 }
-export declare const Canvas: ({ debug, opaque, children, onSize, onLayout: _onLayout, ref, ...viewProps }: CanvasProps) => React.JSX.Element;
+export declare const Canvas: ({ debug, opaque, children, onSize, onLayout: _onLayout, colorSpace, ref, ...viewProps }: CanvasProps) => React.JSX.Element;

package/lib/commonjs/renderer/Canvas.js

@@ -42,6 +42,7 @@ const Canvas = ({
   children,
   onSize,
   onLayout: _onLayout,
+  colorSpace = "p3",
   ref,
   ...viewProps
 }) => {
@@ -84,6 +85,7 @@ const Canvas = ({
     nativeID: `${nativeId}`,
     debug: debug,
     opaque: opaque,
+    colorSpace: colorSpace,
     onLayout: onLayout
   }, viewProps));
 };

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_interopRequireDefault","_Reconciler","_skia","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useOnSizeEvent","resultValue","onLayout","useCallback","event","width","height","nativeEvent","layout","value","Canvas","debug","opaque","children","onSize","_onLayout","ref","viewProps","nativeId","useMemo","SkiaViewNativeId","current","root","SkiaSGRoot","Skia","useLayoutEffect","render","useEffect","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","createElement","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\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}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\n//const NativeSkiaPictureView = SkiaPictureViewNativeComponent;\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport interface CanvasProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  ref?: React.Ref<CanvasRef>;\n}\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  onLayout: _onLayout,\n  ref,\n  ...viewProps\n}: CanvasProps) => {\n  const onLayout = useOnSizeEvent(onSize, _onLayout);\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  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root]);\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      } as CanvasRef)\n  );\n  return (\n    <SkiaPictureViewNativeComponent\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      onLayout={onLayout}\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_SkiaViewNativeId","_SkiaPictureViewNativeComponent","_interopRequireDefault","_Reconciler","_skia","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useCanvasRef","useRef","exports","useOnSizeEvent","resultValue","onLayout","useCallback","event","width","height","nativeEvent","layout","value","Canvas","debug","opaque","children","onSize","_onLayout","colorSpace","ref","viewProps","nativeId","useMemo","SkiaViewNativeId","current","root","SkiaSGRoot","Skia","useLayoutEffect","render","useEffect","unmount","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","requestRedraw","getNativeId","createElement","collapsable","nativeID"],"sources":["Canvas.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkImage, SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\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}\n\nexport const useCanvasRef = () => useRef<CanvasRef>(null);\n\n//const NativeSkiaPictureView = SkiaPictureViewNativeComponent;\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport interface CanvasProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  colorSpace?: \"p3\" | \"srgb\";\n  ref?: React.Ref<CanvasRef>;\n}\n\nexport const Canvas = ({\n  debug,\n  opaque,\n  children,\n  onSize,\n  onLayout: _onLayout,\n  colorSpace = \"p3\",\n  ref,\n  ...viewProps\n}: CanvasProps) => {\n  const onLayout = useOnSizeEvent(onSize, _onLayout);\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  // Render effects\n  useLayoutEffect(() => {\n    root.render(children);\n  }, [children, root]);\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      } as CanvasRef)\n  );\n  return (\n    <SkiaPictureViewNativeComponent\n      collapsable={false}\n      nativeID={`${nativeId}`}\n      debug={debug}\n      opaque={opaque}\n      colorSpace={colorSpace}\n      onLayout={onLayout}\n      {...viewProps}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/renderer/__tests__/e2e/ImageFilter.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/commonjs/renderer/components/ImageFilter.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ImageFilterProps } from "../../dom/types";
+import type { SkiaProps } from "../processors";
+export declare const ImageFilter: (props: SkiaProps<ImageFilterProps>) => React.JSX.Element;

package/lib/commonjs/renderer/components/ImageFilter.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageFilter = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ImageFilter = props => {
+  return /*#__PURE__*/_react.default.createElement("skImageFilter", props);
+};
+exports.ImageFilter = ImageFilter;
+//# sourceMappingURL=ImageFilter.js.map

package/lib/commonjs/renderer/components/ImageFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","e","__esModule","default","ImageFilter","props","createElement","exports"],"sources":["ImageFilter.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { ImageFilterProps } from \"../../dom/types\";\nimport type { SkiaProps } from \"../processors\";\n\nexport const ImageFilter = (props: SkiaProps<ImageFilterProps>) => {\n  return <skImageFilter {...props} />;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKnB,MAAMG,WAAW,GAAIC,KAAkC,IAAK;EACjE,oBAAOP,MAAA,CAAAK,OAAA,CAAAG,aAAA,kBAAmBD,KAAQ,CAAC;AACrC,CAAC;AAACE,OAAA,CAAAH,WAAA,GAAAA,WAAA","ignoreList":[]}

package/lib/commonjs/renderer/components/index.d.ts

@@ -14,4 +14,5 @@ export * from "./Mask";
 export * from "./Paint";
 export * from "./Blend";
 export * from "./Skottie";
+export * from "./ImageFilter";
 export * from "./paragraph";