@shopify/react-native-skia 1.10.2 → 1.11.0

package/lib/typescript/lib/commonjs/sksg/Reconciler.d.ts

@@ -3,6 +3,12 @@ export class SkiaSGRoot {
     constructor(Skia: any, nativeId?: number);
     Skia: any;
     container: {
+        redraw(): void;
+        mapperId: any;
+        Skia: any;
+        nativeId: any;
+        drawOnCanvas(canvas: any): void;
+    } | {
         redraw(): void;
         recording: {
             commands: any;

package/lib/typescript/lib/commonjs/sksg/Recorder/ReanimatedRecorder.d.ts

@@ -0,0 +1,47 @@
+export const __esModule: boolean;
+export class ReanimatedRecorder {
+    constructor(Skia: any);
+    recorder: any;
+    processAnimationValues(props: any): void;
+    getRecorder(): any;
+    getSharedValues(): any[];
+    saveGroup(): void;
+    restoreGroup(): void;
+    savePaint(props: any): void;
+    restorePaint(): void;
+    restorePaintDeclaration(): void;
+    materializePaint(): void;
+    pushPathEffect(pathEffectType: any, props: any): void;
+    pushImageFilter(imageFilterType: any, props: any): void;
+    pushColorFilter(colorFilterType: any, props: any): void;
+    pushShader(shaderType: any, props: any): void;
+    pushBlurMaskFilter(props: any): void;
+    composePathEffect(): void;
+    composeColorFilter(): void;
+    composeImageFilter(): void;
+    saveCTM(props: any): void;
+    restoreCTM(): void;
+    drawPaint(): void;
+    saveLayer(): void;
+    saveBackdropFilter(): void;
+    drawBox(boxProps: any, shadows: any): void;
+    drawImage(props: any): void;
+    drawCircle(props: any): void;
+    drawPoints(props: any): void;
+    drawPath(props: any): void;
+    drawRect(props: any): void;
+    drawRRect(props: any): void;
+    drawOval(props: any): void;
+    drawLine(props: any): void;
+    drawPatch(props: any): void;
+    drawVertices(props: any): void;
+    drawDiffRect(props: any): void;
+    drawText(props: any): void;
+    drawTextPath(props: any): void;
+    drawTextBlob(props: any): void;
+    drawGlyphs(props: any): void;
+    drawPicture(props: any): void;
+    drawImageSVG(props: any): void;
+    drawParagraph(props: any): void;
+    drawAtlas(props: any): void;
+}

package/lib/typescript/lib/module/mock/index.d.ts

@@ -348,7 +348,10 @@ export function Mock(CanvasKit: any): {
         filter: any;
         children: any;
     }>;
-    Image: (props: any) => import("react").DOMElement<any, Element>;
+    Image: ({ fit, ...props }: {
+        [x: string]: any;
+        fit?: string | undefined;
+    }) => import("react").DOMElement<any, Element>;
     ImageShader: ({ tx, ty, fit, transform, ...props }: {
         [x: string]: any;
         tx?: string | undefined;

package/lib/typescript/lib/module/renderer/components/image/Image.d.ts

@@ -1,2 +1,5 @@
-export function Image(props: any): React.DOMElement<any, Element>;
+export function Image({ fit, ...props }: {
+    [x: string]: any;
+    fit?: string | undefined;
+}): React.DOMElement<any, Element>;
 import React from "react";

package/lib/typescript/lib/module/skia/Skia.web.d.ts

@@ -33,4 +33,5 @@ export const Skia: {
     NativeBuffer: import("./web/JsiSkNativeBufferFactory").JsiSkNativeBufferFactory;
     Video: (url?: any) => Promise<any>;
     Context: (_surface: any, _width: any, _height: any) => never;
+    Recorder: () => never;
 };

package/lib/typescript/lib/module/skia/types/Recorder.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/lib/module/skia/types/index.d.ts

@@ -27,4 +27,5 @@ export * from "./TextBlob";
 export * from "./Paragraph";
 export * from "./Matrix4";
 export * from "./NativeBuffer";
+export * from "./Recorder";
 export * from "./Video";

package/lib/typescript/lib/module/skia/web/JsiSkia.d.ts

@@ -33,6 +33,7 @@ export function JsiSkApi(CanvasKit: any): {
     NativeBuffer: JsiSkNativeBufferFactory;
     Video: (url?: any) => Promise<any>;
     Context: (_surface: any, _width: any, _height: any) => never;
+    Recorder: () => never;
 };
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRRect } from "./JsiSkRRect";

package/lib/typescript/lib/module/sksg/Container.d.ts

@@ -4,7 +4,7 @@ export class Container {
     nativeId: any;
     drawOnCanvas(canvas: any): void;
 }
-export function createContainer(Skia: any, nativeId: any): StaticContainer | ReanimatedContainer;
+export function createContainer(Skia: any, nativeId: any): StaticContainer | ReanimatedContainer | NativeReanimatedContainer;
 declare class StaticContainer extends Container {
     redraw(): void;
     recording: {
@@ -21,4 +21,8 @@ declare class ReanimatedContainer extends Container {
     } | undefined;
     mapperId: any;
 }
+declare class NativeReanimatedContainer extends Container {
+    redraw(): void;
+    mapperId: any;
+}
 export {};

package/lib/typescript/lib/module/sksg/Reconciler.d.ts

@@ -21,6 +21,12 @@ export class SkiaSGRoot {
         Skia: any;
         nativeId: any;
         drawOnCanvas(canvas: any): void;
+    } | {
+        redraw(): void;
+        mapperId: any;
+        Skia: any;
+        nativeId: any;
+        drawOnCanvas(canvas: any): void;
     };
     root: any;
     get sg(): {

package/lib/typescript/lib/module/sksg/Recorder/ReanimatedRecorder.d.ts

@@ -0,0 +1,46 @@
+export class ReanimatedRecorder {
+    constructor(Skia: any);
+    recorder: any;
+    processAnimationValues(props: any): void;
+    getRecorder(): any;
+    getSharedValues(): any[];
+    saveGroup(): void;
+    restoreGroup(): void;
+    savePaint(props: any): void;
+    restorePaint(): void;
+    restorePaintDeclaration(): void;
+    materializePaint(): void;
+    pushPathEffect(pathEffectType: any, props: any): void;
+    pushImageFilter(imageFilterType: any, props: any): void;
+    pushColorFilter(colorFilterType: any, props: any): void;
+    pushShader(shaderType: any, props: any): void;
+    pushBlurMaskFilter(props: any): void;
+    composePathEffect(): void;
+    composeColorFilter(): void;
+    composeImageFilter(): void;
+    saveCTM(props: any): void;
+    restoreCTM(): void;
+    drawPaint(): void;
+    saveLayer(): void;
+    saveBackdropFilter(): void;
+    drawBox(boxProps: any, shadows: any): void;
+    drawImage(props: any): void;
+    drawCircle(props: any): void;
+    drawPoints(props: any): void;
+    drawPath(props: any): void;
+    drawRect(props: any): void;
+    drawRRect(props: any): void;
+    drawOval(props: any): void;
+    drawLine(props: any): void;
+    drawPatch(props: any): void;
+    drawVertices(props: any): void;
+    drawDiffRect(props: any): void;
+    drawText(props: any): void;
+    drawTextPath(props: any): void;
+    drawTextBlob(props: any): void;
+    drawGlyphs(props: any): void;
+    drawPicture(props: any): void;
+    drawImageSVG(props: any): void;
+    drawParagraph(props: any): void;
+    drawAtlas(props: any): void;
+}

package/lib/typescript/src/renderer/components/image/Image.d.ts

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

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

@@ -0,0 +1,52 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { TextProps, AtlasProps, BlurMaskFilterProps, BoxProps, BoxShadowProps, CircleProps, CTMProps, DiffRectProps, GlyphsProps, ImageProps, ImageSVGProps, LineProps, NodeType, OvalProps, PaintProps, ParagraphProps, PatchProps, PathProps, PictureProps, PointsProps, RectProps, RoundedRectProps, TextBlobProps, TextPathProps, VerticesProps } from "../../dom/types";
+import type { AnimatedProps } from "../../renderer/processors/Animations/Animations";
+import type { SkCanvas } from "./Canvas";
+export interface BaseRecorder {
+    saveGroup(): void;
+    restoreGroup(): void;
+    savePaint(props: AnimatedProps<PaintProps>): void;
+    restorePaint(): void;
+    restorePaintDeclaration(): void;
+    materializePaint(): void;
+    pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;
+    pushImageFilter(imageFilterType: NodeType, props: AnimatedProps<unknown>): void;
+    pushColorFilter(colorFilterType: NodeType, props: AnimatedProps<unknown>): void;
+    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;
+    pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;
+    composePathEffect(): void;
+    composeColorFilter(): void;
+    composeImageFilter(): void;
+    saveCTM(props: AnimatedProps<CTMProps>): void;
+    restoreCTM(): void;
+    drawPaint(): void;
+    saveLayer(): void;
+    saveBackdropFilter(): void;
+    drawBox(boxProps: AnimatedProps<BoxProps>, shadows: {
+        props: BoxShadowProps;
+        animatedProps?: Record<string, SharedValue<unknown>>;
+    }[]): void;
+    drawImage(props: AnimatedProps<ImageProps>): void;
+    drawCircle(props: AnimatedProps<CircleProps>): void;
+    drawPoints(props: AnimatedProps<PointsProps>): void;
+    drawPath(props: AnimatedProps<PathProps>): void;
+    drawRect(props: AnimatedProps<RectProps>): void;
+    drawRRect(props: AnimatedProps<RoundedRectProps>): void;
+    drawOval(props: AnimatedProps<OvalProps>): void;
+    drawLine(props: AnimatedProps<LineProps>): void;
+    drawPatch(props: AnimatedProps<PatchProps>): void;
+    drawVertices(props: AnimatedProps<VerticesProps>): void;
+    drawDiffRect(props: AnimatedProps<DiffRectProps>): void;
+    drawText(props: AnimatedProps<TextProps>): void;
+    drawTextPath(props: AnimatedProps<TextPathProps>): void;
+    drawTextBlob(props: AnimatedProps<TextBlobProps>): void;
+    drawGlyphs(props: AnimatedProps<GlyphsProps>): void;
+    drawPicture(props: AnimatedProps<PictureProps>): void;
+    drawImageSVG(props: AnimatedProps<ImageSVGProps>): void;
+    drawParagraph(props: AnimatedProps<ParagraphProps>): void;
+    drawAtlas(props: AnimatedProps<AtlasProps>): void;
+}
+export interface JsiRecorder extends BaseRecorder {
+    play(canvas: SkCanvas): void;
+    applyUpdates(variables: SharedValue<unknown>[]): void;
+}

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

@@ -28,6 +28,7 @@ import type { AnimatedImageFactory } from "./AnimatedImage";
 import type { ParagraphBuilderFactory } from "./Paragraph/ParagraphBuilder";
 import type { Video } from "./Video";
 import type { NativeBufferFactory } from "./NativeBuffer";
+import type { JsiRecorder } from "./Recorder";
 export interface SkiaContext {
     getSurface(): SkSurface;
     present(): void;
@@ -80,4 +81,5 @@ export interface Skia {
     Video: (url: string) => Promise<Video> | Video;
     Context(surface: bigint, width: number, height: number): SkiaContext;
     NativeBuffer: NativeBufferFactory;
+    Recorder(): JsiRecorder;
 }

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

@@ -30,4 +30,5 @@ export * from "./Size";
 export * from "./Paragraph";
 export * from "./Matrix4";
 export * from "./NativeBuffer";
+export * from "./Recorder";
 export * from "./Video";

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

@@ -19,5 +19,10 @@ declare class ReanimatedContainer extends Container {
     constructor(Skia: Skia, nativeId: number);
     redraw(): void;
 }
-export declare const createContainer: (Skia: Skia, nativeId: number) => StaticContainer | ReanimatedContainer;
+declare class NativeReanimatedContainer extends Container {
+    private mapperId;
+    constructor(Skia: Skia, nativeId: number);
+    redraw(): void;
+}
+export declare const createContainer: (Skia: Skia, nativeId: number) => StaticContainer | ReanimatedContainer | NativeReanimatedContainer;
 export {};

package/lib/typescript/src/sksg/Recorder/ReanimatedRecorder.d.ts

@@ -0,0 +1,53 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { BaseRecorder, JsiRecorder, Skia } from "../../skia/types";
+import type { PaintProps, NodeType, BlurMaskFilterProps, CTMProps, BoxProps, BoxShadowProps, ImageProps, CircleProps, PointsProps, PathProps, RectProps, RoundedRectProps, OvalProps, LineProps, PatchProps, VerticesProps, DiffRectProps, TextProps, TextPathProps, TextBlobProps, GlyphsProps, PictureProps, ImageSVGProps, ParagraphProps, AtlasProps } from "../../dom/types";
+import type { AnimatedProps } from "../../renderer";
+export declare class ReanimatedRecorder implements BaseRecorder {
+    private values;
+    private recorder;
+    constructor(Skia: Skia);
+    private processAnimationValues;
+    getRecorder(): JsiRecorder;
+    getSharedValues(): SharedValue<unknown>[];
+    saveGroup(): void;
+    restoreGroup(): void;
+    savePaint(props: AnimatedProps<PaintProps>): void;
+    restorePaint(): void;
+    restorePaintDeclaration(): void;
+    materializePaint(): void;
+    pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;
+    pushImageFilter(imageFilterType: NodeType, props: AnimatedProps<unknown>): void;
+    pushColorFilter(colorFilterType: NodeType, props: AnimatedProps<unknown>): void;
+    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;
+    pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;
+    composePathEffect(): void;
+    composeColorFilter(): void;
+    composeImageFilter(): void;
+    saveCTM(props: AnimatedProps<CTMProps>): void;
+    restoreCTM(): void;
+    drawPaint(): void;
+    saveLayer(): void;
+    saveBackdropFilter(): void;
+    drawBox(boxProps: AnimatedProps<BoxProps>, shadows: {
+        props: BoxShadowProps;
+    }[]): void;
+    drawImage(props: AnimatedProps<ImageProps>): void;
+    drawCircle(props: AnimatedProps<CircleProps>): void;
+    drawPoints(props: AnimatedProps<PointsProps>): void;
+    drawPath(props: AnimatedProps<PathProps>): void;
+    drawRect(props: AnimatedProps<RectProps>): void;
+    drawRRect(props: AnimatedProps<RoundedRectProps>): void;
+    drawOval(props: AnimatedProps<OvalProps>): void;
+    drawLine(props: AnimatedProps<LineProps>): void;
+    drawPatch(props: AnimatedProps<PatchProps>): void;
+    drawVertices(props: AnimatedProps<VerticesProps>): void;
+    drawDiffRect(props: AnimatedProps<DiffRectProps>): void;
+    drawText(props: AnimatedProps<TextProps>): void;
+    drawTextPath(props: AnimatedProps<TextPathProps>): void;
+    drawTextBlob(props: AnimatedProps<TextBlobProps>): void;
+    drawGlyphs(props: AnimatedProps<GlyphsProps>): void;
+    drawPicture(props: AnimatedProps<PictureProps>): void;
+    drawImageSVG(props: AnimatedProps<ImageSVGProps>): void;
+    drawParagraph(props: AnimatedProps<ParagraphProps>): void;
+    drawAtlas(props: AnimatedProps<AtlasProps>): void;
+}

package/lib/typescript/src/sksg/Recorder/Recorder.d.ts

@@ -2,7 +2,7 @@ import type { SharedValue } from "react-native-reanimated";
 import { NodeType } from "../../dom/types";
 import type { BlurMaskFilterProps, CircleProps, CTMProps, ImageProps, PaintProps, PointsProps, PathProps, RectProps, RoundedRectProps, OvalProps, LineProps, PatchProps, VerticesProps, DiffRectProps, TextProps, TextPathProps, TextBlobProps, GlyphsProps, PictureProps, ImageSVGProps, ParagraphProps, AtlasProps, BoxProps, BoxShadowProps } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer";
-import type { SkPaint } from "../../skia/types";
+import type { SkPaint, BaseRecorder } from "../../skia/types";
 import type { Command } from "./Core";
 export interface Recording {
     commands: Command[];
@@ -11,7 +11,7 @@ export interface Recording {
 interface AnimationValues {
     animationValues: Set<SharedValue<unknown>>;
 }
-export declare class Recorder {
+export declare class Recorder implements BaseRecorder {
     commands: Command[];
     cursors: Command[][];
     animationValues: Set<SharedValue<unknown>>;

package/lib/typescript/src/sksg/Recorder/Visitor.d.ts

@@ -1,5 +1,5 @@
 import type { DrawingNodeProps } from "../../dom/types";
+import type { BaseRecorder } from "../../skia/types/Recorder";
 import type { Node } from "../Node";
-import type { Recorder } from "./Recorder";
 export declare const processPaint: ({ opacity, color, strokeWidth, blendMode, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, paint: paintRef, }: DrawingNodeProps) => DrawingNodeProps | null;
-export declare const visit: (recorder: Recorder, root: Node[]) => void;
+export declare const visit: (recorder: BaseRecorder, root: Node[]) => void;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@shopify/react-native-skia",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "bin": {
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.10.2",
+  "version": "1.11.0",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/renderer/components/image/Image.tsx

@@ -3,6 +3,6 @@ import React from "react";
 import type { SkiaProps } from "../../processors";
 import type { ImageProps } from "../../../dom/types";
 
-export const Image = (props: SkiaProps<ImageProps>) => {
-  return <skImage {...props} />;
+export const Image = ({ fit = "contain", ...props }: SkiaProps<ImageProps>) => {
+  return <skImage fit={fit} {...props} />;
 };

package/src/skia/types/Recorder.ts

@@ -0,0 +1,91 @@
+import type { SharedValue } from "react-native-reanimated";
+
+import type {
+  TextProps,
+  AtlasProps,
+  BlurMaskFilterProps,
+  BoxProps,
+  BoxShadowProps,
+  CircleProps,
+  CTMProps,
+  DiffRectProps,
+  GlyphsProps,
+  ImageProps,
+  ImageSVGProps,
+  LineProps,
+  NodeType,
+  OvalProps,
+  PaintProps,
+  ParagraphProps,
+  PatchProps,
+  PathProps,
+  PictureProps,
+  PointsProps,
+  RectProps,
+  RoundedRectProps,
+  TextBlobProps,
+  TextPathProps,
+  VerticesProps,
+} from "../../dom/types";
+import type { AnimatedProps } from "../../renderer/processors/Animations/Animations";
+
+import type { SkCanvas } from "./Canvas";
+
+export interface BaseRecorder {
+  saveGroup(): void;
+  restoreGroup(): void;
+  savePaint(props: AnimatedProps<PaintProps>): void;
+  restorePaint(): void;
+  restorePaintDeclaration(): void;
+  materializePaint(): void;
+  pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;
+  pushImageFilter(
+    imageFilterType: NodeType,
+    props: AnimatedProps<unknown>
+  ): void;
+  pushColorFilter(
+    colorFilterType: NodeType,
+    props: AnimatedProps<unknown>
+  ): void;
+  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;
+  pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;
+  composePathEffect(): void;
+  composeColorFilter(): void;
+  composeImageFilter(): void;
+  saveCTM(props: AnimatedProps<CTMProps>): void;
+  restoreCTM(): void;
+  drawPaint(): void;
+  saveLayer(): void;
+  saveBackdropFilter(): void;
+  drawBox(
+    boxProps: AnimatedProps<BoxProps>,
+    shadows: {
+      props: BoxShadowProps;
+      animatedProps?: Record<string, SharedValue<unknown>>;
+    }[]
+  ): void;
+  drawImage(props: AnimatedProps<ImageProps>): void;
+  drawCircle(props: AnimatedProps<CircleProps>): void;
+  drawPoints(props: AnimatedProps<PointsProps>): void;
+  drawPath(props: AnimatedProps<PathProps>): void;
+  drawRect(props: AnimatedProps<RectProps>): void;
+  drawRRect(props: AnimatedProps<RoundedRectProps>): void;
+  drawOval(props: AnimatedProps<OvalProps>): void;
+  drawLine(props: AnimatedProps<LineProps>): void;
+  drawPatch(props: AnimatedProps<PatchProps>): void;
+  drawVertices(props: AnimatedProps<VerticesProps>): void;
+  drawDiffRect(props: AnimatedProps<DiffRectProps>): void;
+  drawText(props: AnimatedProps<TextProps>): void;
+  drawTextPath(props: AnimatedProps<TextPathProps>): void;
+  drawTextBlob(props: AnimatedProps<TextBlobProps>): void;
+  drawGlyphs(props: AnimatedProps<GlyphsProps>): void;
+  drawPicture(props: AnimatedProps<PictureProps>): void;
+  drawImageSVG(props: AnimatedProps<ImageSVGProps>): void;
+  drawParagraph(props: AnimatedProps<ParagraphProps>): void;
+  drawAtlas(props: AnimatedProps<AtlasProps>): void;
+}
+
+export interface JsiRecorder extends BaseRecorder {
+  play(canvas: SkCanvas): void;
+  applyUpdates(variables: SharedValue<unknown>[]): void;
+}

package/src/skia/types/Skia.ts

@@ -32,6 +32,7 @@ import type { AnimatedImageFactory } from "./AnimatedImage";
 import type { ParagraphBuilderFactory } from "./Paragraph/ParagraphBuilder";
 import type { Video } from "./Video";
 import type { NativeBufferFactory } from "./NativeBuffer";
+import type { JsiRecorder } from "./Recorder";
 
 export interface SkiaContext {
   getSurface(): SkSurface;
@@ -104,4 +105,5 @@ export interface Skia {
   Video: (url: string) => Promise<Video> | Video;
   Context(surface: bigint, width: number, height: number): SkiaContext;
   NativeBuffer: NativeBufferFactory;
+  Recorder(): JsiRecorder;
 }

package/src/skia/types/index.ts

@@ -30,4 +30,5 @@ export * from "./Size";
 export * from "./Paragraph";
 export * from "./Matrix4";
 export * from "./NativeBuffer";
+export * from "./Recorder";
 export * from "./Video";

package/src/skia/web/JsiSkia.ts

@@ -132,4 +132,7 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Context: (_surface: bigint, _width: number, _height: number) => {
     throw new Error("Not implemented on React Native Web");
   },
+  Recorder: () => {
+    throw new Error("Not implemented on React Native Web");
+  },
 });

package/src/sksg/Container.ts

@@ -1,6 +1,8 @@
 import Rea from "../external/reanimated/ReanimatedProxy";
 import type { Skia, SkCanvas } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
+import type { JsiRecorder } from "../skia/types/Recorder";
+import { Platform } from "../Platform";
 
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
@@ -8,6 +10,7 @@ import { Recorder } from "./Recorder/Recorder";
 import { visit } from "./Recorder/Visitor";
 import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
+import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 
 const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   "worklet";
@@ -26,6 +29,26 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   picture.dispose();
 };
 
+const nativeDrawOnscreen = (
+  Skia: Skia,
+  nativeId: number,
+  recorder: JsiRecorder
+) => {
+  "worklet";
+
+  const rec = Skia.PictureRecorder();
+  const canvas = rec.beginRecording();
+  //const start = performance.now();
+
+  recorder.play(canvas);
+  const picture = rec.finishRecordingAsPicture();
+  //const end = performance.now();
+  //console.log("Recording time: ", end - start);
+  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+  rec.dispose();
+  picture.dispose();
+};
+
 export abstract class Container {
   public root: Node[] = [];
   protected recording: Recording | null = null;
@@ -41,7 +64,6 @@ export abstract class Container {
       this.recording.paintPool,
       canvas
     );
-    //console.log(this.recording.commands);
     replay(ctx, this.recording.commands);
   }
 
@@ -101,8 +123,45 @@ class ReanimatedContainer extends Container {
   }
 }
 
+class NativeReanimatedContainer extends Container {
+  private mapperId: number | null = null;
+
+  constructor(Skia: Skia, nativeId: number) {
+    super(Skia, nativeId);
+  }
+
+  redraw() {
+    if (this.mapperId !== null) {
+      Rea.stopMapper(this.mapperId);
+    }
+    const { nativeId, Skia } = this;
+    const recorder = new ReanimatedRecorder(Skia);
+    visit(recorder, this.root);
+    const sharedValues = recorder.getSharedValues();
+    const sharedRecorder = recorder.getRecorder();
+    if (sharedValues.length > 0) {
+      this.mapperId = Rea.startMapper(() => {
+        "worklet";
+        sharedRecorder.applyUpdates(sharedValues);
+        nativeDrawOnscreen(Skia, nativeId, sharedRecorder);
+      }, sharedValues);
+    }
+    Rea.runOnUI(() => {
+      "worklet";
+      nativeDrawOnscreen(Skia, nativeId, sharedRecorder);
+    })();
+  }
+}
+
 export const createContainer = (Skia: Skia, nativeId: number) => {
-  return HAS_REANIMATED_3 && nativeId !== -1
-    ? new ReanimatedContainer(Skia, nativeId)
-    : new StaticContainer(Skia, nativeId);
+  const native = Platform.OS !== "web";
+  if (HAS_REANIMATED_3 && nativeId !== -1) {
+    if (native) {
+      return new NativeReanimatedContainer(Skia, nativeId);
+    } else {
+      return new ReanimatedContainer(Skia, nativeId);
+    }
+  } else {
+    return new StaticContainer(Skia, nativeId);
+  }
 };

package/src/sksg/Recorder/DrawingContext.ts

@@ -87,6 +87,7 @@ export const createDrawingContext = (
         )
       );
     }
+
     // Path Effects
     if (pathEffects.length > 0) {
       getCurrentPaint().setPathEffect(