@shopify/react-native-skia 0.1.234 → 0.1.237

package/src/dom/nodes/JsiSkDOM.ts

@@ -38,6 +38,7 @@ import type {
   BoxProps,
   BoxShadowProps,
   ChildrenProps,
+  AtlasProps,
 } from "../types";
 import type {
   BlendImageFilterProps,
@@ -55,7 +56,6 @@ import type {
   Path1DPathEffectProps,
   Path2DPathEffectProps,
 } from "../types/PathEffects";
-import { NATIVE_DOM } from "../../renderer/HostComponents";
 import type { ParagraphProps } from "../types/Paragraph";
 
 import {
@@ -80,6 +80,7 @@ import {
   BackdropFilterNode,
   BoxNode,
   BoxShadowNode,
+  AtlasNode,
 } from "./drawings";
 import {
   BlendImageFilterNode,
@@ -125,200 +126,206 @@ 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);
   }
 
+  Atlas(props: AtlasProps) {
+    return this.native
+      ? global.SkiaDomApi.AtlasNode(props)
+      : new AtlasNode(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 +345,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/dom/nodes/drawings/AtlasNode.ts

@@ -0,0 +1,24 @@
+import { BlendMode } from "../../../skia/types";
+import type { AtlasProps, DrawingContext } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+import { enumKey } from "../datatypes";
+
+export class AtlasNode extends JsiDrawingNode<AtlasProps, null> {
+  protected deriveProps() {
+    return null;
+  }
+
+  constructor(ctx: NodeContext, props: AtlasProps) {
+    super(ctx, NodeType.Atlas, props);
+  }
+
+  draw({ canvas, paint }: DrawingContext) {
+    const { image, sprites, transforms, colors, blendMode } = this.props;
+    const blend = blendMode ? BlendMode[enumKey(blendMode)] : undefined;
+    if (image) {
+      canvas.drawAtlas(image, sprites, transforms, paint, blend, colors);
+    }
+  }
+}

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

@@ -1,3 +1,4 @@
+export * from "./AtlasNode";
 export * from "./CircleNode";
 export * from "./FillNode";
 export * from "./ImageNode";

package/src/dom/types/Drawings.ts

@@ -15,6 +15,8 @@ import type {
   SkSVG,
   SkPaint,
   SkRect,
+  SkRSXform,
+  SkColor,
 } from "../../skia/types";
 
 import type {
@@ -58,6 +60,13 @@ export type RectProps = RectDef & DrawingNodeProps;
 
 export type RoundedRectProps = RRectDef & DrawingNodeProps;
 
+export interface AtlasProps extends DrawingNodeProps {
+  image: SkImage | null;
+  sprites: SkRect[];
+  transforms: SkRSXform[];
+  colors?: SkColor[];
+}
+
 export interface CubicBezierHandle {
   pos: Vector;
   c1: Vector;

package/src/dom/types/NodeType.ts

@@ -67,6 +67,7 @@ export const enum NodeType {
   Glyphs = "skGlyphs",
   Picture = "skPicture",
   ImageSVG = "skImageSVG",
+  Atlas = "skAtlas",
 
   // Paragraph
   Paragraph = "skParagraph",

package/src/dom/types/SkDOM.ts

@@ -36,6 +36,7 @@ import type {
   DrawingNodeProps,
   BoxProps,
   BoxShadowProps,
+  AtlasProps,
 } from "./Drawings";
 import type { BlurMaskFilterProps } from "./MaskFilters";
 import type {
@@ -90,6 +91,7 @@ export interface SkDOM {
   DiffRect(props: DiffRectProps): DrawingNode<DiffRectProps>;
   Picture(props: PictureProps): DrawingNode<PictureProps>;
   ImageSVG(props: ImageSVGProps): DrawingNode<ImageSVGProps>;
+  Atlas(props: AtlasProps): DrawingNode<AtlasProps>;
 
   // BlurMaskFilters
   BlurMaskFilter(

package/src/external/reanimated/buffers.ts

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+
+import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
+import { Skia } from "../../skia";
+
+import { useDerivedValue, useSharedValue } from "./moduleWrapper";
+import { notifyChange } from "./interpolators";
+
+const useBuffer = <T>(
+  size: number,
+  bufferInitializer: () => T,
+  modifier: (input: T, index: number) => void
+) => {
+  const buffer = useMemo(
+    () => new Array(size).fill(0).map(bufferInitializer),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [size]
+  );
+  const transforms = useSharedValue(buffer);
+
+  useDerivedValue(() => {
+    buffer.forEach((val, index) => {
+      modifier(val, index);
+    });
+    // Assuming notifyChange is a function that notifies about the change in transforms.
+    notifyChange(transforms);
+  });
+
+  return transforms;
+};
+
+export const useRectBuffer = (
+  size: number,
+  modifier: (input: SkHostRect, index: number) => void
+) => useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);
+
+// Usage for RSXform Buffer
+export const useRSXformBuffer = (
+  size: number,
+  modifier: (input: SkRSXform, index: number) => void
+) => useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);
+
+// Usage for Point Buffer
+export const usePointBuffer = (
+  size: number,
+  modifier: (input: SkPoint, index: number) => void
+) => useBuffer(size, () => Skia.Point(0, 0), modifier);
+
+// Usage for Color Buffer
+export const useColorBuffer = (
+  size: number,
+  modifier: (input: SkColor, index: number) => void
+) => useBuffer(size, () => Skia.Color("black"), modifier);

package/src/external/reanimated/index.ts

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

package/src/external/reanimated/interpolators.ts

@@ -87,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,
@@ -96,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,38 @@
+import { useEffect, useMemo } from "react";
+import type { ReactElement } from "react";
+import type { SharedValue } from "react-native-reanimated";
+
+import type { SkImage, SkPicture, SkSize } from "../../skia/types";
+import {
+  drawAsImageFromPicture,
+  drawAsPicture,
+} from "../../renderer/Offscreen";
+
+import { runOnUI, useSharedValue } from "./moduleWrapper";
+
+const createTextureValue = (
+  texture: SharedValue<SkImage | null>,
+  picture: SkPicture,
+  size: SkSize
+) => {
+  "worklet";
+  texture.value = drawAsImageFromPicture(picture, size);
+};
+
+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(createTextureValue)(texture, picture, size);
+  }, [texture, picture, size]);
+  return texture;
+};

package/src/external/reanimated/useAnimatedImageValue.ts

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import type { FrameInfo } from "react-native-reanimated";
 
 import { useAnimatedImage } from "../../skia/core/AnimatedImage";
@@ -15,10 +16,14 @@ export const useAnimatedImageValue = (source: DataSourceParam) => {
   throwOnMissingReanimated();
   const currentFrame = useSharedValue<null | SkImage>(null);
   const lastTimestamp = useSharedValue(0);
-  const animatedImage = useAnimatedImage(source, (err) => {
-    console.error(err);
-    throw new Error(`Could not load animated image - got '${err.message}'`);
-  });
+  const animatedImage = useAnimatedImage(
+    source,
+    (err) => {
+      console.error(err);
+      throw new Error(`Could not load animated image - got '${err.message}'`);
+    },
+    false
+  );
   const frameDuration =
     animatedImage?.currentFrameDuration() || DEFAULT_FRAME_DURATION;
 
@@ -47,5 +52,11 @@ export const useAnimatedImageValue = (source: DataSourceParam) => {
     lastTimestamp.value = timestamp;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, true);
+  useEffect(() => {
+    return () => {
+      animatedImage?.dispose();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return currentFrame;
 };

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