@shopify/react-native-skia 0.1.234 → 0.1.236

package/lib/typescript/src/external/reanimated/moduleWrapper.d.ts

@@ -9,5 +9,6 @@ export declare const useFrameCallback: (callback: (frameInfo: FrameInfo) => void
 export declare const startMapper: (worklet: () => void, inputs?: unknown[], outputs?: unknown[]) => number;
 export declare const stopMapper: (mapperID: number) => void;
 export declare const runOnJS: any;
+export declare const runOnUI: any;
 export declare const useAnimatedReaction: <T>(prepare: () => T, react: (v: T) => void, dependencies?: DependencyList) => void;
 export declare const isSharedValue: <T>(value: unknown) => value is SharedValue<T>;

package/lib/typescript/src/external/reanimated/textures.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from "react";
+import type { SharedValue } from "react-native-reanimated";
+import type { SkImage, SkPicture, SkSize } from "../../skia/types";
+export declare const useTextureValue: (element: ReactElement, size: SkSize) => SharedValue<SkImage | null>;
+export declare const useTextureValueFromPicture: (picture: SkPicture, size: SkSize) => SharedValue<SkImage | null>;

package/lib/typescript/src/renderer/Container.d.ts

@@ -5,7 +5,7 @@ export declare class Container {
     getNativeId: () => number;
     private _root;
     Sk: SkDOM;
-    constructor(Skia: Skia, redraw?: () => void, getNativeId?: () => number);
+    constructor(Skia: Skia, redraw: () => void, getNativeId: () => number, native: boolean);
     draw(ctx: DrawingContext): void;
     get root(): RenderNode<GroupProps>;
 }

package/lib/typescript/src/renderer/Offscreen.d.ts

@@ -1,2 +1,3 @@
 import type { ReactElement } from "react";
 export declare const drawAsImage: (element: ReactElement, width: number, height: number) => import("../skia").SkImage;
+export declare const drawAsPicture: (element: ReactElement) => import("../skia").SkPicture;

package/lib/typescript/src/renderer/Reconciler.d.ts

@@ -3,7 +3,7 @@ import type { Skia } from "../skia/types";
 export declare class SkiaRoot {
     private root;
     private container;
-    constructor(Skia: Skia, redraw?: () => void, getNativeId?: () => number);
+    constructor(Skia: Skia, native?: boolean, redraw?: () => void, getNativeId?: () => number);
     render(element: ReactNode): void;
     unmount(): void;
     get dom(): import("..").RenderNode<import("..").GroupProps>;

package/lib/typescript/src/skia/types/Matrix4.d.ts

@@ -95,9 +95,9 @@ export declare const processTransform3d: (transforms: Transforms3d) => Matrix4;
 /**
  * @worklet
  */
-export declare const convertToColumnMajor: (rowMajorMatrix: Matrix4) => number[];
+export declare const convertToColumnMajor: (rowMajorMatrix: Matrix4) => Matrix4;
 /**
  * @worklet
  */
-export declare const convertToAffineMatrix: (m4: number[]) => number[];
+export declare const convertToAffineMatrix: (m4: Matrix4) => number[];
 export {};

package/lib/typescript/src/skia/types/Shader/Shader.d.ts

@@ -3,7 +3,7 @@ import type { Vector } from "../Point";
 import type { SkRuntimeEffect, SkRuntimeShaderBuilder } from "../RuntimeEffect";
 export declare const isShader: (obj: SkJSIInstance<string> | null) => obj is SkShader;
 export type SkShader = SkJSIInstance<"Shader">;
-export type Uniform = number | Vector | Float32Array | Uniform[];
+export type Uniform = number | Vector | Float32Array | readonly Uniform[] | Uniform[];
 export interface Uniforms {
     [name: string]: Uniform;
 }

package/libs/ios/libskshaper.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskshaper.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskshaper.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libsvg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.234",
+  "version": "0.1.236",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/dom/nodes/JsiSkDOM.ts

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