@shopify/react-native-skia 0.1.233 → 0.1.236

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);
   }

package/src/external/reanimated/index.ts

@@ -2,3 +2,4 @@ export * from "./useAnimatedImageValue";
 export * from "./useDerivedValueOnJS";
 export * from "./renderHelpers";
 export * from "./interpolators";
+export * from "./textures";

package/src/external/reanimated/interpolators.ts

@@ -8,6 +8,7 @@ import { useCallback, useMemo } from "react";
 import type { SkPath, SkPoint } from "../../skia/types";
 import { interpolatePaths, interpolateVector } from "../../animation";
 import { Skia } from "../../skia";
+import { Platform } from "../../Platform";
 
 import {
   useAnimatedReaction,
@@ -18,7 +19,7 @@ import {
 
 export const notifyChange = (value: SharedValue<unknown>) => {
   "worklet";
-  if (_WORKLET) {
+  if (_WORKLET || Platform.OS === "web") {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (value as any)._value = value.value;
   }
@@ -86,8 +87,20 @@ export const usePathInterpolation = (
   input: number[],
   outputRange: SkPath[],
   options?: ExtrapolationType
-) =>
-  useInterpolator(
+) => {
+  // Check if all paths in outputRange are interpolable
+  const allPathsInterpolable = outputRange
+    .slice(1)
+    .every((path) => outputRange[0].isInterpolatable(path));
+  if (!allPathsInterpolable) {
+    // 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`
+    );
+  }
+  return useInterpolator(
     () => Skia.Path.Make(),
     value,
     interpolatePaths,
@@ -95,6 +108,7 @@ export const usePathInterpolation = (
     outputRange,
     options
   );
+};
 
 export const useVectorInterpolation = (
   value: SharedValue<number>,

package/src/external/reanimated/moduleWrapper.ts

@@ -63,6 +63,7 @@ export const stopMapper: (mapperID: number) => void =
   Reanimated2?.stopMapper || throwOnMissingReanimated;
 
 export const runOnJS = Reanimated2?.runOnJS || throwOnMissingReanimated;
+export const runOnUI = Reanimated2?.runOnUI || throwOnMissingReanimated;
 
 export const useAnimatedReaction: <T>(
   prepare: () => T,

package/src/external/reanimated/textures.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useMemo } from "react";
+import type { ReactElement } from "react";
+import type { SharedValue } from "react-native-reanimated";
+
+import { Skia } from "../../skia";
+import type { SkImage, SkPicture, SkSize } from "../../skia/types";
+import { drawAsPicture } from "../../renderer/Offscreen";
+
+import { runOnUI, useSharedValue } from "./moduleWrapper";
+
+// TODO: We're not sure yet why PixelRatio is not needed here.
+const pd = 1; //Platform.PixelRatio;
+
+const createTexture = (
+  texture: SharedValue<SkImage | null>,
+  picture: SkPicture,
+  size: SkSize
+) => {
+  "worklet";
+  const surface = Skia.Surface.MakeOffscreen(
+    size.width * pd,
+    size.height * pd
+  )!;
+  const canvas = surface.getCanvas();
+  // see comment above
+  //canvas.save();
+  //canvas.scale(pd, pd);
+  canvas.drawPicture(picture);
+  //canvas.restore();
+  surface.flush();
+  texture.value = surface.makeImageSnapshot();
+};
+
+export const useTextureValue = (element: ReactElement, size: SkSize) => {
+  const picture = useMemo(() => {
+    return drawAsPicture(element);
+  }, [element]);
+  return useTextureValueFromPicture(picture, size);
+};
+
+export const useTextureValueFromPicture = (
+  picture: SkPicture,
+  size: SkSize
+) => {
+  const texture = useSharedValue<SkImage | null>(null);
+  useEffect(() => {
+    runOnUI(createTexture)(texture, picture, size);
+  }, [texture, picture, size]);
+  return texture;
+};

package/src/headless/index.ts

@@ -25,7 +25,7 @@ export const makeOffscreenSurface = (width: number, height: number) => {
 };
 
 export const drawOffscreen = (surface: SkSurface, element: ReactNode) => {
-  const root = new SkiaRoot(Skia);
+  const root = new SkiaRoot(Skia, false);
   root.render(element);
   const canvas = surface.getCanvas();
   const ctx = new JsiDrawingContext(Skia, canvas);

package/src/mock/index.ts

@@ -31,9 +31,12 @@ export const Mock = (CanvasKit: CanvasKit) => {
     // Reanimated hooks
     useClock: NoopSharedValue,
     usePathInterpolation: NoopSharedValue,
+    useTextureValue: NoopSharedValue,
+    useTextureValueFromPicture: NoopSharedValue,
     useRawData: Noop,
     useData: Noop,
     useFont: () => Skia.Font(undefined, 0),
+    useFonts: Noop,
     useTypeface: () => null,
     useImage: () => null,
     useSVG: () => null,

package/src/renderer/Canvas.tsx

@@ -15,9 +15,9 @@ import type {
 import type { LayoutChangeEvent } from "react-native";
 
 import { SkiaDomView } from "../views";
-import { SkiaDomView as SkiaDomViewWeb } from "../views/SkiaDomView.web";
 import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
+import { SkiaJSDomView } from "../views/SkiaJSDomView";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
@@ -75,7 +75,7 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
     }, [innerRef]);
 
     const root = useMemo(
-      () => new SkiaRoot(Skia, redraw, getNativeId),
+      () => new SkiaRoot(Skia, NATIVE_DOM, redraw, getNativeId),
       [redraw, getNativeId]
     );
 
@@ -105,7 +105,8 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       );
     } else {
       return (
-        <SkiaDomViewWeb
+        <SkiaJSDomView
+          Skia={Skia}
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
           style={style}

package/src/renderer/Container.tsx

@@ -13,9 +13,10 @@ export class Container {
   constructor(
     Skia: Skia,
     public redraw: () => void = () => {},
-    public getNativeId: () => number = () => 0
+    public getNativeId: () => number = () => 0,
+    native: boolean
   ) {
-    this.Sk = new JsiSkDOM({ Skia });
+    this.Sk = new JsiSkDOM({ Skia }, native);
     this._root = this.Sk.Group();
   }
 

package/src/renderer/Offscreen.tsx

@@ -10,15 +10,24 @@ export const drawAsImage = (
   width: number,
   height: number
 ) => {
+  const picture = drawAsPicture(element);
   const surface = Skia.Surface.MakeOffscreen(width, height);
   if (!surface) {
     throw new Error("Could not create offscreen surface");
   }
   const canvas = surface.getCanvas();
-  const root = new SkiaRoot(Skia);
+  canvas.drawPicture(picture);
+  surface.flush();
+  return surface.makeImageSnapshot();
+};
+
+export const drawAsPicture = (element: ReactElement) => {
+  const recorder = Skia.PictureRecorder();
+  const canvas = recorder.beginRecording();
+  const root = new SkiaRoot(Skia, false);
   root.render(element);
   const ctx = new JsiDrawingContext(Skia, canvas);
   root.dom.render(ctx);
-  surface.flush();
-  return surface.makeImageSnapshot();
+  const picture = recorder.finishRecordingAsPicture();
+  return picture;
 };

package/src/renderer/Reconciler.tsx

@@ -21,10 +21,11 @@ export class SkiaRoot {
 
   constructor(
     Skia: Skia,
+    native = false,
     redraw: () => void = () => {},
     getNativeId: () => number = () => 0
   ) {
-    this.container = new Container(Skia, redraw, getNativeId);
+    this.container = new Container(Skia, redraw, getNativeId, native);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,
@@ -45,7 +46,9 @@ export class SkiaRoot {
   }
 
   unmount() {
-    skiaReconciler.updateContainer(null, this.root, null, () => {});
+    skiaReconciler.updateContainer(null, this.root, null, () => {
+      hostDebug("unmountContainer");
+    });
   }
 
   get dom() {

package/src/skia/types/Matrix4.ts

@@ -356,13 +356,13 @@ export const convertToColumnMajor = (rowMajorMatrix: Matrix4) => {
       colMajorMatrix[col * size + row] = rowMajorMatrix[row * size + col];
     }
   }
-  return colMajorMatrix;
+  return colMajorMatrix as unknown as Matrix4;
 };
 
 /**
  * @worklet
  */
-export const convertToAffineMatrix = (m4: number[]) => {
+export const convertToAffineMatrix = (m4: Matrix4) => {
   "worklet";
   // Extracting the relevant components from the 4x4 matrix
   const a = m4[0]; // Scale X

package/src/skia/types/Shader/Shader.ts

@@ -7,7 +7,12 @@ export 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;