@shopify/react-native-skia 0.1.157 → 0.1.159

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.157",
+  "version": "0.1.159",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -32,6 +32,8 @@
     "libs/ios/libsvg.xcframework",
     "libs/ios/libskottie.xcframework",
     "libs/ios/libsksg.xcframework",
+    "libs/ios/libskparagraph.xcframework",
+    "libs/ios/libskunicode.xcframework",
     "react-native-skia.podspec",
     "scripts/install-npm.js",
     "scripts/setup-canvaskit.js",
@@ -77,21 +79,21 @@
     }
   },
   "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@types/jest": "^28.1.6",
-    "@types/react-native": "0.66.2",
+    "@types/react-native": "0.70.6",
     "@types/react-reconciler": "^0.26.7",
     "eslint": "8.21.0",
     "eslint-config-react-native-wcandillon": "3.9.0",
     "eslint-plugin-reanimated": "2.0.0",
     "jest": "28.1.3",
     "react": "18.1.0",
-    "react-native": "0.70.1",
+    "react-native": "0.70.6",
     "react-native-builder-bob": "^0.18.2",
     "ts-jest": "^28.0.7",
     "typescript": "4.8.3"
   },
   "dependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "canvaskit-wasm": "0.36.1",
     "react-reconciler": "^0.27.0"
   },

package/react-native-skia.podspec

@@ -31,7 +31,9 @@ Pod::Spec.new do |s|
   s.ios.vendored_frameworks = [
     'libs/ios/libskia.xcframework', 
     'libs/ios/libsvg.xcframework', 
-    'libs/ios/libskshaper.xcframework'
+    'libs/ios/libskshaper.xcframework',
+    'libs/ios/libskparagraph.xcframework',
+    'libs/ios/libskunicode.xcframework',
   ]
 
   # All iOS cpp/h files

package/src/dom/nodes/DrawingNode.ts

@@ -9,7 +9,7 @@ import type {
 import type { NodeContext } from "./Node";
 import { JsiDeclarationNode } from "./Node";
 import { PaintNode } from "./PaintNode";
-import { isSkPaint, JsiRenderNode } from "./RenderNode";
+import { JsiRenderNode } from "./RenderNode";
 
 export abstract class JsiDrawingNode<P extends DrawingNodeProps, C>
   extends JsiRenderNode<P>
@@ -52,10 +52,8 @@ export abstract class JsiDrawingNode<P extends DrawingNodeProps, C>
   }
 
   renderNode(ctx: DrawingContext): void {
-    if (this.props.paint && isSkPaint(this.props.paint)) {
+    if (this.props.paint) {
       this.draw({ ...ctx, paint: this.props.paint });
-    } else if (this.props.paint && this.props.paint.current != null) {
-      this.draw({ ...ctx, paint: this.props.paint.current.materialize() });
     } else {
       this.draw(ctx);
     }

package/src/dom/nodes/JsiSkDOM.ts

@@ -127,232 +127,346 @@ export class JsiSkDOM implements SkDOM {
   constructor(private ctx: NodeContext) {}
 
   Layer(props?: ChildrenProps) {
-    return new LayerNode(this.ctx, props ?? {});
+    return global.SkiaDomApi && global.SkiaDomApi.LayerNode
+      ? global.SkiaDomApi.LayerNode(props ?? {})
+      : new LayerNode(this.ctx, props ?? {});
   }
 
   Group(props?: GroupProps) {
-    return new GroupNode(this.ctx, props ?? {});
+    return global.SkiaDomApi && global.SkiaDomApi.GroupNode
+      ? global.SkiaDomApi.GroupNode(props ?? {})
+      : new GroupNode(this.ctx, props ?? {});
   }
 
   Paint(props: PaintProps) {
-    return new PaintNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.PaintNode
+      ? global.SkiaDomApi.PaintNode(props ?? {})
+      : new PaintNode(this.ctx, props);
   }
 
   // Drawings
   Fill(props?: DrawingNodeProps) {
-    return new FillNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.FillNode
+      ? global.SkiaDomApi.FillNode(props ?? {})
+      : new FillNode(this.ctx, props);
   }
 
   Image(props: ImageProps) {
-    return new ImageNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.ImageNode
+      ? global.SkiaDomApi.ImageNode(props ?? {})
+      : new ImageNode(this.ctx, props);
   }
 
   Circle(props: CircleProps) {
-    return new CircleNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.CircleNode
+      ? global.SkiaDomApi.CircleNode(props ?? {})
+      : new CircleNode(this.ctx, props);
   }
 
   Path(props: PathProps) {
-    return new PathNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.PathNode
+      ? global.SkiaDomApi.PathNode(props ?? {})
+      : new PathNode(this.ctx, props);
   }
 
   CustomDrawing(props: CustomDrawingNodeProps) {
-    return new CustomDrawingNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.CustomDrawingNode
+      ? global.SkiaDomApi.CustomDrawingNode(props ?? {})
+      : new CustomDrawingNode(this.ctx, props);
   }
 
   Line(props: LineProps) {
-    return new LineNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.LineNode
+      ? global.SkiaDomApi.LineNode(props ?? {})
+      : new LineNode(this.ctx, props);
   }
 
   Oval(props: OvalProps) {
-    return new OvalNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.OvalNode
+      ? global.SkiaDomApi.OvalNode(props ?? {})
+      : new OvalNode(this.ctx, props);
   }
 
   Patch(props: PatchProps) {
-    return new PatchNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.PatchNode
+      ? global.SkiaDomApi.PatchNode(props ?? {})
+      : new PatchNode(this.ctx, props);
   }
 
   Points(props: PointsProps) {
-    return new PointsNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.PointsNode
+      ? global.SkiaDomApi.PointsNode(props ?? {})
+      : new PointsNode(this.ctx, props);
   }
 
   Rect(props: RectProps) {
-    return new RectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.RectNode
+      ? global.SkiaDomApi.RectNode(props)
+      : new RectNode(this.ctx, props);
   }
 
   RRect(props: RoundedRectProps) {
-    return new RRectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.RRectNode
+      ? global.SkiaDomApi.RRectNode(props)
+      : new RRectNode(this.ctx, props);
   }
 
   Vertices(props: VerticesProps) {
-    return new VerticesNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.VerticesNode
+      ? global.SkiaDomApi.VerticesNode(props)
+      : new VerticesNode(this.ctx, props);
   }
 
   Text(props: TextProps) {
-    return new TextNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.TextNode
+      ? global.SkiaDomApi.TextNode(props)
+      : new TextNode(this.ctx, props);
   }
 
   TextPath(props: TextPathProps) {
-    return new TextPathNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.TextPathNode
+      ? global.SkiaDomApi.TextPathNode(props)
+      : new TextPathNode(this.ctx, props);
   }
 
   TextBlob(props: TextBlobProps) {
-    return new TextBlobNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.TextBlobNode
+      ? global.SkiaDomApi.TextBlobNode(props)
+      : new TextBlobNode(this.ctx, props);
   }
 
   Glyphs(props: GlyphsProps) {
-    return new GlyphsNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.GlyphsNode
+      ? global.SkiaDomApi.GlyphsNode(props)
+      : new GlyphsNode(this.ctx, props);
   }
 
   DiffRect(props: DiffRectProps) {
-    return new DiffRectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.DiffRectNode
+      ? global.SkiaDomApi.DiffRectNode(props)
+      : new DiffRectNode(this.ctx, props);
   }
 
   Picture(props: PictureProps) {
-    return new PictureNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.PictureNode
+      ? global.SkiaDomApi.PictureNode(props)
+      : new PictureNode(this.ctx, props);
   }
 
   ImageSVG(props: ImageSVGProps) {
-    return new ImageSVGNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.ImageSVGNode
+      ? global.SkiaDomApi.ImageSVGNode(props)
+      : new ImageSVGNode(this.ctx, props);
   }
 
   // BlurMaskFilters
   BlurMaskFilter(props: BlurMaskFilterProps) {
-    return new BlurMaskFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BlurMaskFilterNode
+      ? global.SkiaDomApi.BlurMaskFilterNode(props)
+      : new BlurMaskFilterNode(this.ctx, props);
   }
 
   // ImageFilters
   BlendImageFilter(props: BlendImageFilterProps) {
-    return new BlendImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BlendImageFilterNode
+      ? global.SkiaDomApi.BlendImageFilterNode(props)
+      : new BlendImageFilterNode(this.ctx, props);
   }
 
   DropShadowImageFilter(props: DropShadowImageFilterProps) {
-    return new DropShadowImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.DropShadowImageFilterNode
+      ? global.SkiaDomApi.DropShadowImageFilterNode(props)
+      : new DropShadowImageFilterNode(this.ctx, props);
   }
 
   DisplacementMapImageFilter(props: DisplacementMapImageFilterProps) {
-    return new DisplacementMapImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.DisplacementMapImageFilterNode
+      ? global.SkiaDomApi.DisplacementMapImageFilterNode(props)
+      : new DisplacementMapImageFilterNode(this.ctx, props);
   }
 
   BlurImageFilter(props: BlurImageFilterProps) {
-    return new BlurImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BlurImageFilterNode
+      ? global.SkiaDomApi.BlurImageFilterNode(props)
+      : new BlurImageFilterNode(this.ctx, props);
   }
 
   OffsetImageFilter(props: OffsetImageFilterProps) {
-    return new OffsetImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.OffsetImageFilterNode
+      ? global.SkiaDomApi.OffsetImageFilterNode(props)
+      : new OffsetImageFilterNode(this.ctx, props);
   }
 
   MorphologyImageFilter(props: MorphologyImageFilterProps) {
-    return new MorphologyImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.MorphologyImageFilterNode
+      ? global.SkiaDomApi.MorphologyImageFilterNode(props)
+      : new MorphologyImageFilterNode(this.ctx, props);
   }
 
   RuntimeShaderImageFilter(props: RuntimeShaderImageFilterProps) {
-    return new RuntimeShaderImageFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.RuntimeShaderImageFilterNode
+      ? global.SkiaDomApi.RuntimeShaderImageFilterNode(props)
+      : new RuntimeShaderImageFilterNode(this.ctx, props);
   }
 
   // Color Filters
   MatrixColorFilter(props: MatrixColorFilterProps) {
-    return new MatrixColorFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.MatrixColorFilterNode
+      ? global.SkiaDomApi.MatrixColorFilterNode(props)
+      : new MatrixColorFilterNode(this.ctx, props);
   }
 
   BlendColorFilter(props: BlendColorFilterProps) {
-    return new BlendColorFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BlendColorFilterNode
+      ? global.SkiaDomApi.BlendColorFilterNode(props)
+      : new BlendColorFilterNode(this.ctx, props);
   }
 
   LumaColorFilter() {
-    return new LumaColorFilterNode(this.ctx);
+    return global.SkiaDomApi && global.SkiaDomApi.LumaColorFilterNode
+      ? global.SkiaDomApi.LumaColorFilterNode()
+      : new LumaColorFilterNode(this.ctx);
   }
 
   LinearToSRGBGammaColorFilter() {
-    return new LinearToSRGBGammaColorFilterNode(this.ctx);
+    return global.SkiaDomApi &&
+      global.SkiaDomApi.LinearToSRGBGammaColorFilterNode
+      ? global.SkiaDomApi.LinearToSRGBGammaColorFilterNode()
+      : new LinearToSRGBGammaColorFilterNode(this.ctx);
   }
 
   SRGBToLinearGammaColorFilter() {
-    return new SRGBToLinearGammaColorFilterNode(this.ctx);
+    return global.SkiaDomApi &&
+      global.SkiaDomApi.SRGBToLinearGammaColorFilterNode
+      ? global.SkiaDomApi.SRGBToLinearGammaColorFilterNode()
+      : new SRGBToLinearGammaColorFilterNode(this.ctx);
   }
 
   LerpColorFilter(props: LerpColorFilterProps) {
-    return new LerpColorFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.LerpColorFilterNode
+      ? global.SkiaDomApi.LerpColorFilterNode(props)
+      : new LerpColorFilterNode(this.ctx, props);
   }
 
   // Shaders
   Shader(props: ShaderProps) {
-    return new ShaderNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.ShaderNode
+      ? global.SkiaDomApi.ShaderNode(props)
+      : new ShaderNode(this.ctx, props);
   }
 
   ImageShader(props: ImageShaderProps) {
-    return new ImageShaderNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.ImageShaderNode
+      ? global.SkiaDomApi.ImageShaderNode(props)
+      : new ImageShaderNode(this.ctx, props);
   }
 
   ColorShader(props: ColorProps) {
-    return new ColorNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.ColorShaderNode
+      ? global.SkiaDomApi.ColorShaderNode(props)
+      : new ColorNode(this.ctx, props);
   }
 
   SweepGradient(props: SweepGradientProps) {
-    return new SweepGradientNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.SweepGradientNode
+      ? global.SkiaDomApi.SweepGradientNode(props)
+      : new SweepGradientNode(this.ctx, props);
   }
 
   Turbulence(props: TurbulenceProps) {
-    return new TurbulenceNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.TurbulenceNode
+      ? global.SkiaDomApi.TurbulenceNode(props)
+      : new TurbulenceNode(this.ctx, props);
   }
 
   FractalNoise(props: FractalNoiseProps) {
-    return new FractalNoiseNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.FractalNoiseNode
+      ? global.SkiaDomApi.FractalNoiseNode(props)
+      : new FractalNoiseNode(this.ctx, props);
   }
 
   LinearGradient(props: LinearGradientProps) {
-    return new LinearGradientNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.LinearGradientNode
+      ? global.SkiaDomApi.LinearGradientNode(props)
+      : new LinearGradientNode(this.ctx, props);
   }
 
   RadialGradient(props: RadialGradientProps) {
-    return new RadialGradientNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.RadialGradientNode
+      ? global.SkiaDomApi.RadialGradientNode(props)
+      : new RadialGradientNode(this.ctx, props);
   }
 
   TwoPointConicalGradient(props: TwoPointConicalGradientProps) {
-    return new TwoPointConicalGradientNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.TwoPointConicalGradientNode
+      ? global.SkiaDomApi.TwoPointConicalGradientNode(props)
+      : new TwoPointConicalGradientNode(this.ctx, props);
   }
 
   // Path Effects
   CornerPathEffect(props: CornerPathEffectProps) {
-    return new CornerPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.CornerPathEffectNode
+      ? global.SkiaDomApi.CornerPathEffectNode(props)
+      : new CornerPathEffectNode(this.ctx, props);
   }
 
   DiscretePathEffect(props: DiscretePathEffectProps) {
-    return new DiscretePathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.DiscretePathEffectNode
+      ? global.SkiaDomApi.DiscretePathEffectNode(props)
+      : new DiscretePathEffectNode(this.ctx, props);
   }
 
   DashPathEffect(props: DashPathEffectProps) {
-    return new DashPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.DashPathEffectNode
+      ? global.SkiaDomApi.DashPathEffectNode(props)
+      : new DashPathEffectNode(this.ctx, props);
   }
 
   Path1DPathEffect(props: Path1DPathEffectProps) {
-    return new Path1DPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.Path1DPathEffectNode
+      ? global.SkiaDomApi.Path1DPathEffectNode(props)
+      : new Path1DPathEffectNode(this.ctx, props);
   }
 
   Path2DPathEffect(props: Path2DPathEffectProps) {
-    return new Path2DPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.Path2DPathEffectNode
+      ? global.SkiaDomApi.Path2DPathEffectNode(props)
+      : new Path2DPathEffectNode(this.ctx, props);
   }
 
   SumPathEffect() {
-    return new SumPathEffectNode(this.ctx);
+    return global.SkiaDomApi && global.SkiaDomApi.SumPathEffectNode
+      ? global.SkiaDomApi.SumPathEffectNode()
+      : new SumPathEffectNode(this.ctx);
   }
 
   Line2DPathEffect(props: Line2DPathEffectProps) {
-    return new Line2DPathEffectNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.Line2DPathEffectNode
+      ? global.SkiaDomApi.Line2DPathEffectNode(props)
+      : new Line2DPathEffectNode(this.ctx, props);
   }
 
   Blend(props: BlendProps) {
-    return new BlendNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BlendNode
+      ? global.SkiaDomApi.BlendNode(props)
+      : new BlendNode(this.ctx, props);
   }
 
   BackdropFilter(props: ChildrenProps) {
-    return new BackdropFilterNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BackdropFilterNode
+      ? global.SkiaDomApi.BackdropFilterNode(props)
+      : new BackdropFilterNode(this.ctx, props);
   }
 
   Box(props: BoxProps) {
-    return new BoxNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BoxNode
+      ? global.SkiaDomApi.BoxNode(props)
+      : new BoxNode(this.ctx, props);
   }
 
   BoxShadow(props: BoxShadowProps) {
-    return new BoxShadowNode(this.ctx, props);
+    return global.SkiaDomApi && global.SkiaDomApi.BoxShadowNode
+      ? global.SkiaDomApi.BoxShadowNode(props)
+      : new BoxShadowNode(this.ctx, props);
   }
 }

package/src/dom/nodes/RenderNode.ts

@@ -1,5 +1,3 @@
-import type { RefObject } from "react";
-
 import type {
   SkMatrix,
   SkRect,
@@ -21,7 +19,6 @@ import type {
   DrawingContext,
   NodeType,
   Node,
-  DeclarationNode,
 } from "../types";
 
 import { isPathDef, processPath, processTransformProps } from "./datatypes";
@@ -236,17 +233,12 @@ export abstract class JsiRenderNode<P extends GroupProps>
       this.clipRRect !== undefined;
     const shouldSave = hasTransform || hasClip || !!layer;
     const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
-
     if (shouldSave) {
       if (layer) {
         if (typeof layer === "boolean") {
           canvas.saveLayer();
-        } else if (isSkPaint(layer)) {
-          canvas.saveLayer(layer);
         } else {
-          canvas.saveLayer(
-            layer.current ? layer.current.materialize() : undefined
-          );
+          canvas.saveLayer(layer);
         }
       } else {
         canvas.save();
@@ -274,10 +266,6 @@ export abstract class JsiRenderNode<P extends GroupProps>
   abstract renderNode(ctx: DrawingContext): void;
 }
 
-export const isSkPaint = (
-  obj: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint
-): obj is SkPaint => "__typename__" in obj && obj.__typename__ === "Paint";
-
 const concatPaint = (
   parent: SkPaint,
   {
@@ -305,7 +293,7 @@ const concatPaint = (
     paint.setColor(color);
   } else {
     const cl = paint.getColor();
-    cl[3] *= opacity;
+    cl[3] = opacity;
     paint.setColor(cl);
   }
   if (strokeWidth !== undefined) {

package/src/dom/nodes/drawings/Text.ts

@@ -57,10 +57,10 @@ export class TextPathNode extends JsiDrawingNode<TextPathProps, SkTextBlob> {
       }
       // Gives us the (x, y) coordinates as well as the cos/sin of the tangent
       // line at that position.
-      const { px, py, tx, ty } = cont.getPosTan(dist);
-      const adjustedX = px - (width / 2) * tx;
-      const adjustedY = py - (width / 2) * ty;
-      rsx.push(this.Skia.RSXform(tx, ty, adjustedX, adjustedY));
+      const [p, t] = cont.getPosTan(dist);
+      const adjustedX = p.x - (width / 2) * t.x;
+      const adjustedY = p.y - (width / 2) * t.y;
+      rsx.push(this.Skia.RSXform(t.x, t.y, adjustedX, adjustedY));
       dist += width / 2;
     }
     return this.Skia.TextBlob.MakeFromRSXform(text, rsx, font);

package/src/dom/types/Common.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject } from "react";
+import type { ReactNode } from "react";
 
 import type {
   BlendMode,
@@ -15,8 +15,6 @@ import type {
   Vector,
 } from "../../skia/types";
 
-import type { DeclarationNode } from "./Node";
-
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 
 export type PathDef = string | SkPath;
@@ -86,5 +84,5 @@ export interface PaintProps extends ChildrenProps {
 export interface GroupProps extends PaintProps, TransformProps {
   clip?: ClipDef;
   invertClip?: boolean;
-  layer?: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint | boolean;
+  layer?: SkPaint | boolean;
 }

package/src/dom/types/Drawings.ts

@@ -1,5 +1,3 @@
-import type { RefObject } from "react";
-
 import type {
   FillType,
   SkImage,
@@ -29,10 +27,9 @@ import type {
   SkEnum,
 } from "./Common";
 import type { DrawingContext } from "./DrawingContext";
-import type { DeclarationNode } from "./Node";
 
 export interface DrawingNodeProps extends GroupProps {
-  paint?: SkPaint | RefObject<DeclarationNode<unknown, SkPaint>>;
+  paint?: SkPaint;
 }
 
 export type ImageProps = DrawingNodeProps &

package/src/mock/index.ts

@@ -53,7 +53,6 @@ export const Mock: typeof SkiaExports &
   useTypeface: Noop,
   useImage: Noop,
   useSVG: Noop,
-  usePicture: Noop,
   createPicture: Noop,
   // 3. Point/Rect/Transform utilities
   vec,