@shopify/react-native-skia 0.1.236 → 0.1.238

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

@@ -1,5 +1,5 @@
 import { NodeType } from "../dom/types";
-import type { DeclarationNode, FractalNoiseProps, RenderNode, CircleProps, DrawingNodeProps, ImageProps, PaintProps, PathProps, LineProps, OvalProps, DiffRectProps, PointsProps, RectProps, RoundedRectProps, TextProps, VerticesProps, BlurMaskFilterProps, BlendImageFilterProps, BlurImageFilterProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps, MatrixColorFilterProps, ShaderProps, ImageShaderProps, LinearGradientProps, GroupProps, PatchProps, BlendColorFilterProps, DashPathEffectProps, DiscretePathEffectProps, CornerPathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps, TextPathProps, TextBlobProps, GlyphsProps, TwoPointConicalGradientProps, TurbulenceProps, SweepGradientProps, RadialGradientProps, ColorProps, PictureProps, ImageSVGProps, LerpColorFilterProps, BoxProps, BoxShadowProps, ParagraphProps } from "../dom/types";
+import type { DeclarationNode, FractalNoiseProps, RenderNode, CircleProps, DrawingNodeProps, ImageProps, PaintProps, PathProps, LineProps, OvalProps, DiffRectProps, PointsProps, RectProps, RoundedRectProps, TextProps, VerticesProps, BlurMaskFilterProps, BlendImageFilterProps, BlurImageFilterProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps, MatrixColorFilterProps, ShaderProps, ImageShaderProps, LinearGradientProps, GroupProps, PatchProps, BlendColorFilterProps, DashPathEffectProps, DiscretePathEffectProps, CornerPathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps, TextPathProps, TextBlobProps, GlyphsProps, TwoPointConicalGradientProps, TurbulenceProps, SweepGradientProps, RadialGradientProps, ColorProps, PictureProps, ImageSVGProps, LerpColorFilterProps, BoxProps, BoxShadowProps, ParagraphProps, AtlasProps } from "../dom/types";
 import type { ChildrenProps } from "../dom/types/Common";
 import type { BlendProps, MorphologyImageFilterProps } from "../dom/types/ImageFilters";
 import type { SkRect, SkRRect } from "../skia/types";
@@ -22,6 +22,7 @@ declare global {
         PatchNode: (props: PatchProps) => RenderNode<PatchProps>;
         PointsNode: (props: PointsProps) => RenderNode<PointsProps>;
         DiffRectNode: (props: DiffRectProps) => RenderNode<DiffRectProps>;
+        AtlasNode: (props: AtlasProps) => RenderNode<AtlasProps>;
         BlurMaskFilterNode: (props: BlurMaskFilterProps) => DeclarationNode<BlurMaskFilterProps>;
         DashPathEffectNode: (props: DashPathEffectProps) => DeclarationNode<DashPathEffectProps>;
         DiscretePathEffectNode: (props: DiscretePathEffectProps) => DeclarationNode<DiscretePathEffectProps>;
@@ -81,6 +82,7 @@ declare global {
             skPoints: SkiaProps<PointsProps>;
             skRect: SkiaProps<RectProps>;
             skRRect: SkiaProps<RoundedRectProps>;
+            skAtlas: SkiaProps<AtlasProps>;
             skVertices: SkiaProps<VerticesProps>;
             skText: SkiaProps<TextProps>;
             skTextPath: SkiaProps<TextPathProps>;

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

@@ -1,3 +1,5 @@
 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;
+import type { SkPicture, SkSize } from "../skia/types";
+export declare const drawAsPicture: (element: ReactElement) => SkPicture;
+export declare const drawAsImage: (element: ReactElement, size: SkSize) => import("../skia").SkImage;
+export declare const drawAsImageFromPicture: (picture: SkPicture, size: SkSize) => import("../skia").SkImage;

package/lib/typescript/src/renderer/components/shapes/Atlas.d.ts

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

package/lib/typescript/src/renderer/components/shapes/index.d.ts

@@ -11,3 +11,4 @@ export * from "./Vertices";
 export * from "./Fill";
 export * from "./FitBox";
 export * from "./Box";
+export * from "./Atlas";

package/lib/typescript/src/skia/core/AnimatedImage.d.ts

@@ -2,4 +2,4 @@ import type { DataSourceParam } from "../types";
 /**
  * Returns a Skia Animated Image object
  * */
-export declare const useAnimatedImage: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => import("../types").SkAnimatedImage | null;
+export declare const useAnimatedImage: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined, managed?: boolean) => import("../types").SkAnimatedImage | null;

package/lib/typescript/src/skia/core/Data.d.ts

@@ -1,5 +1,5 @@
 import type { SkData, DataSourceParam, SkJSIInstance } from "../types";
 export declare const loadData: <T>(source: DataSourceParam, factory: (data: SkData) => T | null, onError?: ((err: Error) => void) | undefined) => Promise<T | null>;
 export declare const useCollectionLoading: <T extends SkJSIInstance<string>>(source: DataSourceParam[], loader: () => Promise<(T | null)[]>) => T[] | null;
-export declare const useRawData: <T extends SkJSIInstance<string>>(source: DataSourceParam, factory: (data: SkData) => T | null, onError?: ((err: Error) => void) | undefined) => T | null;
+export declare const useRawData: <T extends SkJSIInstance<string>>(source: DataSourceParam, factory: (data: SkData) => T | null, onError?: ((err: Error) => void) | undefined, manage?: boolean) => T | null;
 export declare const useData: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => SkData | null;

package/lib/typescript/src/skia/core/Rect.d.ts

@@ -1,6 +1,6 @@
 import type { SkRect, SkRRect } from "../types";
-export declare const rect: (x: number, y: number, width: number, height: number) => SkRect;
-export declare const bounds: (rects: SkRect[]) => SkRect;
+export declare const rect: (x: number, y: number, width: number, height: number) => import("../types").SkHostRect;
+export declare const bounds: (rects: SkRect[]) => import("../types").SkHostRect;
 export declare const topLeft: (r: SkRect | SkRRect) => import("../types").SkPoint;
 export declare const topRight: (r: SkRect | SkRRect) => import("../types").SkPoint;
 export declare const bottomLeft: (r: SkRect | SkRRect) => import("../types").SkPoint;

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

@@ -2,7 +2,7 @@ import type { SkPaint } from "./Paint";
 import type { SkRect } from "./Rect";
 import type { SkFont } from "./Font";
 import type { SkPath } from "./Path";
-import type { SkImage, MipmapMode, FilterMode, ImageInfo } from "./Image";
+import type { SkImage, MipmapMode, FilterMode, ImageInfo, CubicResampler, FilterOptions } from "./Image";
 import type { SkSVG } from "./SVG";
 import type { SkColor } from "./Color";
 import type { InputRRect } from "./RRect";
@@ -13,6 +13,7 @@ import type { SkImageFilter } from "./ImageFilter";
 import type { SkVertices } from "./Vertices";
 import type { SkTextBlob } from "./TextBlob";
 import type { SkPicture } from "./Picture";
+import type { SkRSXform } from "./RSXform";
 export declare enum ClipOp {
     Difference = 0,
     Intersect = 1
@@ -378,6 +379,20 @@ export interface SkCanvas {
      * @param skp
      */
     drawPicture(skp: SkPicture): void;
+    /**
+     * This method is used to draw an atlas on the canvas.
+     *
+     * @method drawAtlas
+     * @param {SkImage} atlas - The image to be drawn.
+     * @param {SkRect[]} srcs - The source rectangles.
+     * @param {SkRSXform[]} dsts - The destination transformations.
+     * @param {SkPaint} paint - The paint used for drawing.
+     * @param {BlendMode} [blendMode] - The blend mode used for drawing. Optional.
+     * @param {SkColor[]} [colors] - The colors used for drawing. Optional.
+     * @param {CubicResampler | FilterOptions} [sampling] - The sampling options. Optional.
+     * @returns {void} This method does not return anything.
+     */
+    drawAtlas(atlas: SkImage, srcs: SkRect[], dsts: SkRSXform[], paint: SkPaint, blendMode?: BlendMode, colors?: SkColor[], sampling?: CubicResampler | FilterOptions): void;
     /** Read Image pixels
      *
      * @param srcX - x-axis upper left corner of the rectangle to read from

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

@@ -3,6 +3,14 @@ import type { SkJSIInstance } from "../JsiInstance";
 import type { TileMode } from "../ImageFilter";
 import type { SkShader } from "../Shader";
 import type { ImageInfo } from "./ImageFactory";
+export interface CubicResampler {
+    B: number;
+    C: number;
+}
+export interface FilterOptions {
+    filter: FilterMode;
+    mipmap?: MipmapMode;
+}
 export declare enum FilterMode {
     Nearest = 0,
     Linear = 1

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

@@ -1,2 +1,8 @@
 import type { SkJSIInstance } from "./JsiInstance";
-export type SkRSXform = SkJSIInstance<"RSXform">;
+export interface SkRSXform extends SkJSIInstance<"RSXform"> {
+    readonly scos: number;
+    readonly ssin: number;
+    readonly tx: number;
+    readonly ty: number;
+    set(scos: number, ssin: number, tx: number, ty: number): void;
+}

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

@@ -1,7 +1,11 @@
+import type { SkJSIInstance } from "./JsiInstance";
 export interface SkRect {
     readonly x: number;
     readonly y: number;
     readonly width: number;
     readonly height: number;
 }
+export interface SkHostRect extends SkRect, SkJSIInstance<"Rect"> {
+    setXYWH(x: number, y: number, width: number, height: number): void;
+}
 export declare const isRect: (def: unknown) => def is SkRect;

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

@@ -6,7 +6,7 @@ import type { SkTypeface, TypefaceFactory } from "./Typeface";
 import type { ImageFactory } from "./Image";
 import type { MaskFilterFactory } from "./MaskFilter";
 import type { SkPaint } from "./Paint";
-import type { SkRect } from "./Rect";
+import type { SkHostRect, SkRect } from "./Rect";
 import type { SkRRect } from "./RRect";
 import type { RuntimeEffectFactory, SkRuntimeEffect, SkRuntimeShaderBuilder } from "./RuntimeEffect";
 import type { ShaderFactory } from "./Shader";
@@ -31,10 +31,11 @@ import type { ParagraphBuilderFactory } from "./Paragraph/ParagraphBuilder";
  */
 export interface Skia {
     Point: (x: number, y: number) => SkPoint;
-    XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
+    XYWHRect: (x: number, y: number, width: number, height: number) => SkHostRect;
     RuntimeShaderBuilder: (rt: SkRuntimeEffect) => SkRuntimeShaderBuilder;
     RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
     RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
+    RSXformFromRadians: (scale: number, radians: number, tx: number, ty: number, px: number, py: number) => SkRSXform;
     Color: (color: Color) => SkColor;
     ContourMeasureIter: (path: SkPath, forceClosed: boolean, resScale: number) => SkContourMeasureIter;
     Paint: () => SkPaint;

package/lib/typescript/src/skia/web/JsiSkCanvas.d.ts

@@ -1,5 +1,5 @@
 import type { Canvas, CanvasKit } from "canvaskit-wasm";
-import type { BlendMode, ClipOp, FilterMode, MipmapMode, PointMode, SaveLayerFlag, ImageInfo, SkCanvas, SkColor, SkFont, SkImage, SkImageFilter, SkMatrix, SkPaint, SkPath, SkPicture, SkPoint, SkRect, InputRRect, SkSVG, SkTextBlob, SkVertices } from "../types";
+import { type BlendMode, type ClipOp, type FilterMode, type MipmapMode, type PointMode, type SaveLayerFlag, type ImageInfo, type SkCanvas, type SkColor, type SkFont, type SkImage, type SkImageFilter, type SkMatrix, type SkPaint, type SkPath, type SkPicture, type SkPoint, type SkRect, type InputRRect, type SkSVG, type SkTextBlob, type SkVertices, type SkRSXform, type CubicResampler, type FilterOptions } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkCanvas extends HostObject<Canvas, "Canvas"> implements SkCanvas {
     constructor(CanvasKit: CanvasKit, ref: Canvas);
@@ -42,5 +42,6 @@ export declare class JsiSkCanvas extends HostObject<Canvas, "Canvas"> implements
     clipRRect(rrect: InputRRect, op: ClipOp, doAntiAlias: boolean): void;
     concat(m: SkMatrix | number[]): void;
     drawPicture(skp: SkPicture): void;
+    drawAtlas(atlas: SkImage, srcs: SkRect[], dsts: SkRSXform[], paint: SkPaint, blendMode?: BlendMode, colors?: SkColor[], _sampling?: CubicResampler | FilterOptions): void;
     readPixels(srcX: number, srcY: number, imageInfo: ImageInfo): Float32Array | Uint8Array | null;
 }

package/lib/typescript/src/skia/web/JsiSkRSXform.d.ts

@@ -1,8 +1,14 @@
 import type { CanvasKit } from "canvaskit-wasm";
 import type { SkRSXform } from "../types";
-import { HostObject } from "./Host";
+import { BaseHostObject } from "./Host";
 export type RSXform = Float32Array;
-export declare class JsiSkRSXform extends HostObject<RSXform, "RSXform"> implements SkRSXform {
+export declare class JsiSkRSXform extends BaseHostObject<RSXform, "RSXform"> implements SkRSXform {
+    static fromValue(rsxform: SkRSXform): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: RSXform);
+    set(scos: number, ssin: number, tx: number, ty: number): void;
+    get scos(): number;
+    get ssin(): number;
+    get tx(): number;
+    get ty(): number;
     dispose: () => void;
 }

package/lib/typescript/src/skia/web/JsiSkRect.d.ts

@@ -1,10 +1,11 @@
 import type { CanvasKit, Rect } from "canvaskit-wasm";
-import type { SkRect } from "../types";
+import type { SkHostRect, SkRect } from "../types";
 import { BaseHostObject } from "./Host";
-export declare class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkRect {
+export declare class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkHostRect {
     static fromValue(CanvasKit: CanvasKit, rect: SkRect): Float32Array;
     dispose: () => void;
     constructor(CanvasKit: CanvasKit, ref: Rect);
+    setXYWH(x: number, y: number, width: number, height: number): void;
     get x(): number;
     get y(): number;
     get width(): number;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.236",
+  "version": "0.1.238",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -83,32 +83,32 @@
     }
   },
   "devDependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@types/jest": "29.5.6",
-    "@types/pixelmatch": "^5.2.4",
-    "@types/pngjs": "^6.0.1",
-    "@types/react": "^18.2.37",
-    "@types/react-reconciler": "^0.26.7",
-    "@types/ws": "^8.5.3",
+    "@types/pixelmatch": "5.2.4",
+    "@types/pngjs": "6.0.1",
+    "@types/react": "18.2.37",
+    "@types/react-reconciler": "0.26.7",
+    "@types/ws": "8.5.3",
     "eslint": "8.21.0",
     "eslint-config-react-native-wcandillon": "3.10.2",
     "eslint-plugin-reanimated": "2.0.0",
     "jest": "29.6.4",
-    "jest-diff": "^29.7.0",
-    "merge-dirs": "^0.2.1",
-    "pixelmatch": "^5.3.0",
-    "pngjs": "^6.0.0",
+    "jest-diff": "29.7.0",
+    "merge-dirs": "0.2.1",
+    "pixelmatch": "5.3.0",
+    "pngjs": "6.0.0",
     "react": "18.1.0",
     "react-native": "0.72.6",
-    "react-native-builder-bob": "^0.18.2",
-    "react-native-reanimated": "^3.5.4",
+    "react-native-builder-bob": "0.18.2",
+    "react-native-reanimated": "3.6.2",
     "ts-jest": "29.1.1",
     "typescript": "5.1.6",
-    "ws": "^8.11.0"
+    "ws": "8.11.0"
   },
   "dependencies": {
     "canvaskit-wasm": "0.39.1",
-    "react-reconciler": "^0.27.0"
+    "react-reconciler": "0.27.0"
   },
   "eslintIgnore": [
     "node_modules/",

package/react-native-skia.podspec

@@ -17,7 +17,7 @@ Pod::Spec.new do |s|
   # optional - use expanded license entry instead:
   # s.license    = { :type => "MIT", :file => "LICENSE" }
   s.authors      = { "Your Name" => "yourname@email.com" }
-  s.platforms    = { :ios => "12.0" }
+  s.platforms    = { :ios => "13.0" }
   s.source       = { :git => "https://github.com/shopify/react-native-skia/react-native-skia.git", :tag => "#{s.version}" }
 
   s.requires_arc = true

package/src/dom/nodes/JsiSkDOM.ts

@@ -38,6 +38,7 @@ import type {
   BoxProps,
   BoxShadowProps,
   ChildrenProps,
+  AtlasProps,
 } from "../types";
 import type {
   BlendImageFilterProps,
@@ -79,6 +80,7 @@ import {
   BackdropFilterNode,
   BoxNode,
   BoxShadowNode,
+  AtlasNode,
 } from "./drawings";
 import {
   BlendImageFilterNode,
@@ -247,6 +249,12 @@ export class JsiSkDOM implements SkDOM {
       : new PictureNode(this.ctx, props);
   }
 
+  Atlas(props: AtlasProps) {
+    return this.native
+      ? global.SkiaDomApi.AtlasNode(props)
+      : new AtlasNode(this.ctx, props);
+  }
+
   ImageSVG(props: ImageSVGProps) {
     return this.native
       ? global.SkiaDomApi.ImageSVGNode(props)

package/src/dom/nodes/Node.ts

@@ -38,6 +38,7 @@ export abstract class JsiNode<P> implements Node<P> {
   }
 
   addChild(child: Node<unknown>) {
+    this.removeChild(child);
     this._children.push(child as JsiNode<unknown>);
   }
 

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

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

package/src/external/reanimated/interpolators.ts

@@ -25,11 +25,14 @@ export const notifyChange = (value: SharedValue<unknown>) => {
   }
 };
 
-export const usePathValue = (cb: (path: SkPath) => void) => {
+export const usePathValue = (cb: (path: SkPath) => void, init?: SkPath) => {
   const pathInit = useMemo(() => Skia.Path.Make(), []);
   const path = useSharedValue(pathInit);
   useDerivedValue(() => {
     path.value.reset();
+    if (init !== undefined) {
+      path.value.addPath(init);
+    }
     cb(path.value);
     notifyChange(path);
   });

package/src/external/reanimated/textures.tsx

@@ -2,33 +2,21 @@ 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 {
+  drawAsImageFromPicture,
+  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 = (
+const createTextureValue = (
   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();
+  texture.value = drawAsImageFromPicture(picture, size);
 };
 
 export const useTextureValue = (element: ReactElement, size: SkSize) => {
@@ -44,7 +32,7 @@ export const useTextureValueFromPicture = (
 ) => {
   const texture = useSharedValue<SkImage | null>(null);
   useEffect(() => {
-    runOnUI(createTexture)(texture, picture, size);
+    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/mock/index.ts

@@ -33,6 +33,11 @@ export const Mock = (CanvasKit: CanvasKit) => {
     usePathInterpolation: NoopSharedValue,
     useTextureValue: NoopSharedValue,
     useTextureValueFromPicture: NoopSharedValue,
+    useRSXformBuffer: NoopSharedValue,
+    usePointBuffer: NoopSharedValue,
+    useColorBuffer: NoopSharedValue,
+    useRectBuffer: NoopSharedValue,
+    useBuffer: NoopSharedValue,
     useRawData: Noop,
     useData: Noop,
     useFont: () => Skia.Font(undefined, 0),

package/src/renderer/HostComponents.ts

@@ -50,6 +50,7 @@ import type {
   BoxProps,
   BoxShadowProps,
   ParagraphProps,
+  AtlasProps,
 } from "../dom/types";
 import type { ChildrenProps } from "../dom/types/Common";
 import type {
@@ -69,7 +70,6 @@ export const NATIVE_DOM = shouldUseJSDomOnNative ? false : !!global.SkiaDomApi;
 
 declare global {
   var SkiaDomApi: {
-    // FIXME: We need a better type for this
     RectNode: (props: RectProps) => JsiDrawingNode<RectProps, SkRect>;
     RRectNode: (
       props: RoundedRectProps
@@ -85,6 +85,8 @@ declare global {
     PatchNode: (props: PatchProps) => RenderNode<PatchProps>;
     PointsNode: (props: PointsProps) => RenderNode<PointsProps>;
     DiffRectNode: (props: DiffRectProps) => RenderNode<DiffRectProps>;
+    AtlasNode: (props: AtlasProps) => RenderNode<AtlasProps>;
+
     // Mask filters
     BlurMaskFilterNode: (
       props: BlurMaskFilterProps
@@ -207,6 +209,7 @@ declare global {
       skPoints: SkiaProps<PointsProps>;
       skRect: SkiaProps<RectProps>;
       skRRect: SkiaProps<RoundedRectProps>;
+      skAtlas: SkiaProps<AtlasProps>;
       skVertices: SkiaProps<VerticesProps>;
       skText: SkiaProps<TextProps>;
       skTextPath: SkiaProps<TextPathProps>;
@@ -313,6 +316,8 @@ export const createNode = (
       return Sk.TextBlob(props);
     case NodeType.Glyphs:
       return Sk.Glyphs(props);
+    case NodeType.Atlas:
+      return Sk.Atlas(props);
     case NodeType.DiffRect:
       return Sk.DiffRect(props);
     case NodeType.Picture: