@shopify/react-native-skia 2.3.8 → 2.3.9

package/lib/module/sksg/Container.native.js

@@ -8,11 +8,11 @@ import { Container, StaticContainer } from "./StaticContainer";
 import { visit } from "./Recorder/Visitor";
 import "../skia/NativeSetup";
 import "../views/api";
-const nativeDrawOnscreen = (nativeId, recorder) => {
+const nativeDrawOnscreen = (nativeId, recorder, picture) => {
   "worklet";
 
   //const start = performance.now();
-  const picture = recorder.play();
+  recorder.play(picture);
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
@@ -22,6 +22,14 @@ class NativeReanimatedContainer extends Container {
     super(Skia);
     this.nativeId = nativeId;
     _defineProperty(this, "mapperId", null);
+    _defineProperty(this, "picture", void 0);
+    _defineProperty(this, "recorderA", void 0);
+    _defineProperty(this, "recorderB", void 0);
+    _defineProperty(this, "currentRecorder", void 0);
+    this.recorderA = new ReanimatedRecorder(Skia);
+    this.recorderB = new ReanimatedRecorder(Skia);
+    this.currentRecorder = this.recorderA;
+    this.picture = Skia.Picture.MakePicture(null);
   }
   redraw() {
     if (this.mapperId !== null) {
@@ -30,25 +38,29 @@ class NativeReanimatedContainer extends Container {
     if (this.unmounted) {
       return;
     }
+
+    // Swap to the next recorder (double buffering)
+    const recorder = this.currentRecorder;
+    this.currentRecorder = this.currentRecorder === this.recorderA ? this.recorderB : this.recorderA;
     const {
       nativeId,
-      Skia
+      picture
     } = this;
-    const recorder = new ReanimatedRecorder(Skia);
+    recorder.reset();
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
     Rea.runOnUI(() => {
       "worklet";
 
-      nativeDrawOnscreen(nativeId, sharedRecorder);
+      nativeDrawOnscreen(nativeId, sharedRecorder, picture);
     })();
     if (sharedValues.length > 0) {
       this.mapperId = Rea.startMapper(() => {
         "worklet";
 
         sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(nativeId, sharedRecorder);
+        nativeDrawOnscreen(nativeId, sharedRecorder, picture);
       }, sharedValues);
     }
   }

package/lib/module/sksg/Container.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Rea","HAS_REANIMATED_3","ReanimatedRecorder","Container","StaticContainer","visit","nativeDrawOnscreen","nativeId","recorder","picture","play","SkiaViewApi","setJsiProperty","NativeReanimatedContainer","constructor","Skia","_defineProperty","redraw","mapperId","stopMapper","unmounted","root","sharedValues","getSharedValues","sharedRecorder","getRecorder","runOnUI","length","startMapper","applyUpdates","createContainer"],"sources":["Container.native.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\nimport { visit } from \"./Recorder/Visitor\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\nconst nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {\n  \"worklet\";\n\n  //const start = performance.now();\n  const picture = recorder.play();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    Rea.runOnUI(() => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder);\n    })();\n    if (sharedValues.length > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder);\n      }, sharedValues);\n    }\n  }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    return new NativeReanimatedContainer(Skia, nativeId);\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":";;;AAAA,OAAOA,GAAG,MAAM,wCAAwC;AAExD,SAASC,gBAAgB,QAAQ,sCAAsC;AAGvE,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,SAASC,SAAS,EAAEC,eAAe,QAAQ,mBAAmB;AAC9D,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,OAAO,qBAAqB;AAC5B,OAAO,cAAc;AAErB,MAAMC,kBAAkB,GAAGA,CAACC,QAAgB,EAAEC,QAAqB,KAAK;EACtE,SAAS;;EAET;EACA,MAAMC,OAAO,GAAGD,QAAQ,CAACE,IAAI,CAAC,CAAC;EAC/B;EACA;EACAC,WAAW,CAACC,cAAc,CAACL,QAAQ,EAAE,SAAS,EAAEE,OAAO,CAAC;AAC1D,CAAC;AAED,MAAMI,yBAAyB,SAASV,SAAS,CAAC;EAGhDW,WAAWA,CACTC,IAAU,EACFR,QAAgB,EACxB;IACA,KAAK,CAACQ,IAAI,CAAC;IAAC,KAFJR,QAAgB,GAAhBA,QAAgB;IAAAS,eAAA,mBAJQ,IAAI;EAOtC;EAEAC,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACC,QAAQ,KAAK,IAAI,EAAE;MAC1BlB,GAAG,CAACmB,UAAU,CAAC,IAAI,CAACD,QAAQ,CAAC;IAC/B;IACA,IAAI,IAAI,CAACE,SAAS,EAAE;MAClB;IACF;IACA,MAAM;MAAEb,QAAQ;MAAEQ;IAAK,CAAC,GAAG,IAAI;IAC/B,MAAMP,QAAQ,GAAG,IAAIN,kBAAkB,CAACa,IAAI,CAAC;IAC7CV,KAAK,CAACG,QAAQ,EAAE,IAAI,CAACa,IAAI,CAAC;IAC1B,MAAMC,YAAY,GAAGd,QAAQ,CAACe,eAAe,CAAC,CAAC;IAC/C,MAAMC,cAAc,GAAGhB,QAAQ,CAACiB,WAAW,CAAC,CAAC;IAC7CzB,GAAG,CAAC0B,OAAO,CAAC,MAAM;MAChB,SAAS;;MACTpB,kBAAkB,CAACC,QAAQ,EAAEiB,cAAc,CAAC;IAC9C,CAAC,CAAC,CAAC,CAAC;IACJ,IAAIF,YAAY,CAACK,MAAM,GAAG,CAAC,EAAE;MAC3B,IAAI,CAACT,QAAQ,GAAGlB,GAAG,CAAC4B,WAAW,CAAC,MAAM;QACpC,SAAS;;QACTJ,cAAc,CAACK,YAAY,CAACP,YAAY,CAAC;QACzChB,kBAAkB,CAACC,QAAQ,EAAEiB,cAAc,CAAC;MAC9C,CAAC,EAAEF,YAAY,CAAC;IAClB;EACF;AACF;AAEA,OAAO,MAAMQ,eAAe,GAAGA,CAACf,IAAU,EAAER,QAAgB,KAAK;EAC/D,IAAIN,gBAAgB,IAAIM,QAAQ,KAAK,CAAC,CAAC,EAAE;IACvC,OAAO,IAAIM,yBAAyB,CAACE,IAAI,EAAER,QAAQ,CAAC;EACtD,CAAC,MAAM;IACL,OAAO,IAAIH,eAAe,CAACW,IAAI,EAAER,QAAQ,CAAC;EAC5C;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["Rea","HAS_REANIMATED_3","ReanimatedRecorder","Container","StaticContainer","visit","nativeDrawOnscreen","nativeId","recorder","picture","play","SkiaViewApi","setJsiProperty","NativeReanimatedContainer","constructor","Skia","_defineProperty","recorderA","recorderB","currentRecorder","Picture","MakePicture","redraw","mapperId","stopMapper","unmounted","reset","root","sharedValues","getSharedValues","sharedRecorder","getRecorder","runOnUI","length","startMapper","applyUpdates","createContainer"],"sources":["Container.native.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkPicture } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\nimport { visit } from \"./Recorder/Visitor\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\nconst nativeDrawOnscreen = (\n  nativeId: number,\n  recorder: JsiRecorder,\n  picture: SkPicture\n) => {\n  \"worklet\";\n\n  //const start = performance.now();\n  recorder.play(picture);\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n  private picture: SkPicture;\n  private recorderA: ReanimatedRecorder;\n  private recorderB: ReanimatedRecorder;\n  private currentRecorder: ReanimatedRecorder;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number\n  ) {\n    super(Skia);\n    this.recorderA = new ReanimatedRecorder(Skia);\n    this.recorderB = new ReanimatedRecorder(Skia);\n    this.currentRecorder = this.recorderA;\n    this.picture = Skia.Picture.MakePicture(null)!;\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n\n    // Swap to the next recorder (double buffering)\n    const recorder = this.currentRecorder;\n    this.currentRecorder =\n      this.currentRecorder === this.recorderA ? this.recorderB : this.recorderA;\n\n    const { nativeId, picture } = this;\n    recorder.reset();\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    Rea.runOnUI(() => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder, picture);\n    })();\n    if (sharedValues.length > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder, picture);\n      }, sharedValues);\n    }\n  }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    return new NativeReanimatedContainer(Skia, nativeId);\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":";;;AAAA,OAAOA,GAAG,MAAM,wCAAwC;AAExD,SAASC,gBAAgB,QAAQ,sCAAsC;AAGvE,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,SAASC,SAAS,EAAEC,eAAe,QAAQ,mBAAmB;AAC9D,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,OAAO,qBAAqB;AAC5B,OAAO,cAAc;AAErB,MAAMC,kBAAkB,GAAGA,CACzBC,QAAgB,EAChBC,QAAqB,EACrBC,OAAkB,KACf;EACH,SAAS;;EAET;EACAD,QAAQ,CAACE,IAAI,CAACD,OAAO,CAAC;EACtB;EACA;EACAE,WAAW,CAACC,cAAc,CAACL,QAAQ,EAAE,SAAS,EAAEE,OAAO,CAAC;AAC1D,CAAC;AAED,MAAMI,yBAAyB,SAASV,SAAS,CAAC;EAOhDW,WAAWA,CACTC,IAAU,EACFR,QAAgB,EACxB;IACA,KAAK,CAACQ,IAAI,CAAC;IAAC,KAFJR,QAAgB,GAAhBA,QAAgB;IAAAS,eAAA,mBARQ,IAAI;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAWpC,IAAI,CAACC,SAAS,GAAG,IAAIf,kBAAkB,CAACa,IAAI,CAAC;IAC7C,IAAI,CAACG,SAAS,GAAG,IAAIhB,kBAAkB,CAACa,IAAI,CAAC;IAC7C,IAAI,CAACI,eAAe,GAAG,IAAI,CAACF,SAAS;IACrC,IAAI,CAACR,OAAO,GAAGM,IAAI,CAACK,OAAO,CAACC,WAAW,CAAC,IAAI,CAAE;EAChD;EAEAC,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACC,QAAQ,KAAK,IAAI,EAAE;MAC1BvB,GAAG,CAACwB,UAAU,CAAC,IAAI,CAACD,QAAQ,CAAC;IAC/B;IACA,IAAI,IAAI,CAACE,SAAS,EAAE;MAClB;IACF;;IAEA;IACA,MAAMjB,QAAQ,GAAG,IAAI,CAACW,eAAe;IACrC,IAAI,CAACA,eAAe,GAClB,IAAI,CAACA,eAAe,KAAK,IAAI,CAACF,SAAS,GAAG,IAAI,CAACC,SAAS,GAAG,IAAI,CAACD,SAAS;IAE3E,MAAM;MAAEV,QAAQ;MAAEE;IAAQ,CAAC,GAAG,IAAI;IAClCD,QAAQ,CAACkB,KAAK,CAAC,CAAC;IAChBrB,KAAK,CAACG,QAAQ,EAAE,IAAI,CAACmB,IAAI,CAAC;IAC1B,MAAMC,YAAY,GAAGpB,QAAQ,CAACqB,eAAe,CAAC,CAAC;IAC/C,MAAMC,cAAc,GAAGtB,QAAQ,CAACuB,WAAW,CAAC,CAAC;IAC7C/B,GAAG,CAACgC,OAAO,CAAC,MAAM;MAChB,SAAS;;MACT1B,kBAAkB,CAACC,QAAQ,EAAEuB,cAAc,EAAErB,OAAO,CAAC;IACvD,CAAC,CAAC,CAAC,CAAC;IACJ,IAAImB,YAAY,CAACK,MAAM,GAAG,CAAC,EAAE;MAC3B,IAAI,CAACV,QAAQ,GAAGvB,GAAG,CAACkC,WAAW,CAAC,MAAM;QACpC,SAAS;;QACTJ,cAAc,CAACK,YAAY,CAACP,YAAY,CAAC;QACzCtB,kBAAkB,CAACC,QAAQ,EAAEuB,cAAc,EAAErB,OAAO,CAAC;MACvD,CAAC,EAAEmB,YAAY,CAAC;IAClB;EACF;AACF;AAEA,OAAO,MAAMQ,eAAe,GAAGA,CAACrB,IAAU,EAAER,QAAgB,KAAK;EAC/D,IAAIN,gBAAgB,IAAIM,QAAQ,KAAK,CAAC,CAAC,EAAE;IACvC,OAAO,IAAIM,yBAAyB,CAACE,IAAI,EAAER,QAAQ,CAAC;EACtD,CAAC,MAAM;IACL,OAAO,IAAIH,eAAe,CAACW,IAAI,EAAER,QAAQ,CAAC;EAC5C;AACF,CAAC","ignoreList":[]}

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

@@ -10,6 +10,7 @@ export declare class ReanimatedRecorder implements BaseRecorder {
     private values;
     private recorder;
     constructor(Skia: Skia);
+    reset(): void;
     private processAnimationValues;
     getRecorder(): JsiRecorder;
     getSharedValues(): SharedValue<unknown>[];

package/lib/module/sksg/Recorder/ReanimatedRecorder.js

@@ -13,6 +13,10 @@ export class ReanimatedRecorder {
     _defineProperty(this, "recorder", void 0);
     this.recorder = Skia.Recorder();
   }
+  reset() {
+    this.values.clear();
+    this.recorder.reset();
+  }
   processAnimationValues(props) {
     if (!props) {
       return;

package/lib/module/sksg/Recorder/ReanimatedRecorder.js.map

@@ -1 +1 @@
-{"version":3,"names":["isSharedValue","ReanimatedRecorder","constructor","Skia","_defineProperty","Set","recorder","Recorder","processAnimationValues","props","Object","values","forEach","value","has","name","size","add","getRecorder","getSharedValues","Array","from","saveGroup","restoreGroup","savePaint","standalone","restorePaint","restorePaintDeclaration","materializePaint","pushPathEffect","pathEffectType","pushImageFilter","imageFilterType","pushColorFilter","colorFilterType","pushShader","shaderType","children","pushBlurMaskFilter","composePathEffect","composeColorFilter","composeImageFilter","saveCTM","restoreCTM","drawPaint","saveLayer","saveBackdropFilter","drawBox","boxProps","shadows","shadow","map","s","drawImage","drawCircle","drawPoints","drawPath","drawRect","drawRRect","drawOval","drawLine","drawPatch","drawVertices","drawDiffRect","drawText","drawTextPath","drawTextBlob","drawGlyphs","drawPicture","drawImageSVG","drawParagraph","drawAtlas","drawSkottie"],"sources":["ReanimatedRecorder.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type { BaseRecorder, JsiRecorder, Skia } from \"../../skia/types\";\nimport type {\n  PaintProps,\n  NodeType,\n  BlurMaskFilterProps,\n  CTMProps,\n  BoxProps,\n  BoxShadowProps,\n  ImageProps,\n  CircleProps,\n  PointsProps,\n  PathProps,\n  RectProps,\n  RoundedRectProps,\n  OvalProps,\n  LineProps,\n  PatchProps,\n  VerticesProps,\n  DiffRectProps,\n  TextProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  PictureProps,\n  ImageSVGProps,\n  ParagraphProps,\n  AtlasProps,\n  SkottieProps,\n} from \"../../dom/types\";\nimport type { AnimatedProps } from \"../../renderer\";\nimport { isSharedValue } from \"../utils\";\n\n/**\n * Currently the recorder only work if the GPU resources (e.g Images) are owned by the main thread.\n * It will crash otherwise on Ganesh (iOS/Android).\n */\nexport class ReanimatedRecorder implements BaseRecorder {\n  private values = new Set<SharedValue<unknown>>();\n  private recorder: JsiRecorder;\n\n  constructor(Skia: Skia) {\n    this.recorder = Skia.Recorder();\n  }\n\n  private processAnimationValues(props?: Record<string, unknown>) {\n    if (!props) {\n      return;\n    }\n    Object.values(props).forEach((value) => {\n      if (isSharedValue(value) && !this.values.has(value)) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        value.name = `variable${this.values.size}`;\n        this.values.add(value as SharedValue<unknown>);\n      }\n    });\n  }\n\n  getRecorder() {\n    return this.recorder;\n  }\n\n  getSharedValues() {\n    return Array.from(this.values);\n  }\n\n  saveGroup(): void {\n    this.recorder.saveGroup();\n  }\n\n  restoreGroup(): void {\n    this.recorder.restoreGroup();\n  }\n\n  savePaint(props: AnimatedProps<PaintProps>, standalone: boolean): void {\n    this.processAnimationValues(props);\n    this.recorder.savePaint(props, standalone);\n  }\n\n  restorePaint(): void {\n    this.recorder.restorePaint();\n  }\n\n  restorePaintDeclaration(): void {\n    this.recorder.restorePaintDeclaration();\n  }\n\n  materializePaint(): void {\n    this.recorder.materializePaint();\n  }\n\n  pushPathEffect(\n    pathEffectType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void {\n    this.processAnimationValues(props);\n    this.recorder.pushPathEffect(pathEffectType, props);\n  }\n\n  pushImageFilter(\n    imageFilterType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void {\n    this.processAnimationValues(props);\n    this.recorder.pushImageFilter(imageFilterType, props);\n  }\n\n  pushColorFilter(\n    colorFilterType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void {\n    this.processAnimationValues(props);\n    this.recorder.pushColorFilter(colorFilterType, props);\n  }\n\n  pushShader(\n    shaderType: NodeType,\n    props: AnimatedProps<unknown>,\n    children: number\n  ): void {\n    this.processAnimationValues(props);\n    this.recorder.pushShader(shaderType, props, children);\n  }\n\n  pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.pushBlurMaskFilter(props);\n  }\n\n  composePathEffect(): void {\n    this.recorder.composePathEffect();\n  }\n\n  composeColorFilter(): void {\n    this.recorder.composeColorFilter();\n  }\n\n  composeImageFilter(): void {\n    this.recorder.composeImageFilter();\n  }\n\n  saveCTM(props: AnimatedProps<CTMProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.saveCTM(props);\n  }\n\n  restoreCTM(): void {\n    this.recorder.restoreCTM();\n  }\n\n  drawPaint(): void {\n    this.recorder.drawPaint();\n  }\n\n  saveLayer(): void {\n    this.recorder.saveLayer();\n  }\n\n  saveBackdropFilter(): void {\n    this.recorder.saveBackdropFilter();\n  }\n\n  drawBox(\n    boxProps: AnimatedProps<BoxProps>,\n    shadows: {\n      props: BoxShadowProps;\n    }[]\n  ): void {\n    this.processAnimationValues(boxProps);\n    shadows.forEach((shadow) => {\n      this.processAnimationValues(\n        shadow.props as AnimatedProps<BoxShadowProps>\n      );\n    });\n    this.recorder.drawBox(\n      boxProps,\n      // TODO: Fix this type BaseRecorder.drawBox()\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error\n      shadows.map((s) => s.props)\n    );\n  }\n\n  drawImage(props: AnimatedProps<ImageProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawImage(props);\n  }\n\n  drawCircle(props: AnimatedProps<CircleProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawCircle(props);\n  }\n\n  drawPoints(props: AnimatedProps<PointsProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawPoints(props);\n  }\n\n  drawPath(props: AnimatedProps<PathProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawPath(props);\n  }\n\n  drawRect(props: AnimatedProps<RectProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawRect(props);\n  }\n\n  drawRRect(props: AnimatedProps<RoundedRectProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawRRect(props);\n  }\n\n  drawOval(props: AnimatedProps<OvalProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawOval(props);\n  }\n\n  drawLine(props: AnimatedProps<LineProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawLine(props);\n  }\n\n  drawPatch(props: AnimatedProps<PatchProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawPatch(props);\n  }\n\n  drawVertices(props: AnimatedProps<VerticesProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawVertices(props);\n  }\n\n  drawDiffRect(props: AnimatedProps<DiffRectProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawDiffRect(props);\n  }\n\n  drawText(props: AnimatedProps<TextProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawText(props);\n  }\n\n  drawTextPath(props: AnimatedProps<TextPathProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawTextPath(props);\n  }\n\n  drawTextBlob(props: AnimatedProps<TextBlobProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawTextBlob(props);\n  }\n\n  drawGlyphs(props: AnimatedProps<GlyphsProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawGlyphs(props);\n  }\n\n  drawPicture(props: AnimatedProps<PictureProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawPicture(props);\n  }\n\n  drawImageSVG(props: AnimatedProps<ImageSVGProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawImageSVG(props);\n  }\n\n  drawParagraph(props: AnimatedProps<ParagraphProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawParagraph(props);\n  }\n\n  drawAtlas(props: AnimatedProps<AtlasProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawAtlas(props);\n  }\n\n  drawSkottie(props: AnimatedProps<SkottieProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawSkottie(props);\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["isSharedValue","ReanimatedRecorder","constructor","Skia","_defineProperty","Set","recorder","Recorder","reset","values","clear","processAnimationValues","props","Object","forEach","value","has","name","size","add","getRecorder","getSharedValues","Array","from","saveGroup","restoreGroup","savePaint","standalone","restorePaint","restorePaintDeclaration","materializePaint","pushPathEffect","pathEffectType","pushImageFilter","imageFilterType","pushColorFilter","colorFilterType","pushShader","shaderType","children","pushBlurMaskFilter","composePathEffect","composeColorFilter","composeImageFilter","saveCTM","restoreCTM","drawPaint","saveLayer","saveBackdropFilter","drawBox","boxProps","shadows","shadow","map","s","drawImage","drawCircle","drawPoints","drawPath","drawRect","drawRRect","drawOval","drawLine","drawPatch","drawVertices","drawDiffRect","drawText","drawTextPath","drawTextBlob","drawGlyphs","drawPicture","drawImageSVG","drawParagraph","drawAtlas","drawSkottie"],"sources":["ReanimatedRecorder.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type { BaseRecorder, JsiRecorder, Skia } from \"../../skia/types\";\nimport type {\n  PaintProps,\n  NodeType,\n  BlurMaskFilterProps,\n  CTMProps,\n  BoxProps,\n  BoxShadowProps,\n  ImageProps,\n  CircleProps,\n  PointsProps,\n  PathProps,\n  RectProps,\n  RoundedRectProps,\n  OvalProps,\n  LineProps,\n  PatchProps,\n  VerticesProps,\n  DiffRectProps,\n  TextProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  PictureProps,\n  ImageSVGProps,\n  ParagraphProps,\n  AtlasProps,\n  SkottieProps,\n} from \"../../dom/types\";\nimport type { AnimatedProps } from \"../../renderer\";\nimport { isSharedValue } from \"../utils\";\n\n/**\n * Currently the recorder only work if the GPU resources (e.g Images) are owned by the main thread.\n * It will crash otherwise on Ganesh (iOS/Android).\n */\nexport class ReanimatedRecorder implements BaseRecorder {\n  private values = new Set<SharedValue<unknown>>();\n  private recorder: JsiRecorder;\n\n  constructor(Skia: Skia) {\n    this.recorder = Skia.Recorder();\n  }\n\n  reset() {\n    this.values.clear();\n    this.recorder.reset();\n  }\n\n  private processAnimationValues(props?: Record<string, unknown>) {\n    if (!props) {\n      return;\n    }\n    Object.values(props).forEach((value) => {\n      if (isSharedValue(value) && !this.values.has(value)) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-expect-error\n        value.name = `variable${this.values.size}`;\n        this.values.add(value as SharedValue<unknown>);\n      }\n    });\n  }\n\n  getRecorder() {\n    return this.recorder;\n  }\n\n  getSharedValues() {\n    return Array.from(this.values);\n  }\n\n  saveGroup(): void {\n    this.recorder.saveGroup();\n  }\n\n  restoreGroup(): void {\n    this.recorder.restoreGroup();\n  }\n\n  savePaint(props: AnimatedProps<PaintProps>, standalone: boolean): void {\n    this.processAnimationValues(props);\n    this.recorder.savePaint(props, standalone);\n  }\n\n  restorePaint(): void {\n    this.recorder.restorePaint();\n  }\n\n  restorePaintDeclaration(): void {\n    this.recorder.restorePaintDeclaration();\n  }\n\n  materializePaint(): void {\n    this.recorder.materializePaint();\n  }\n\n  pushPathEffect(\n    pathEffectType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void {\n    this.processAnimationValues(props);\n    this.recorder.pushPathEffect(pathEffectType, props);\n  }\n\n  pushImageFilter(\n    imageFilterType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void {\n    this.processAnimationValues(props);\n    this.recorder.pushImageFilter(imageFilterType, props);\n  }\n\n  pushColorFilter(\n    colorFilterType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void {\n    this.processAnimationValues(props);\n    this.recorder.pushColorFilter(colorFilterType, props);\n  }\n\n  pushShader(\n    shaderType: NodeType,\n    props: AnimatedProps<unknown>,\n    children: number\n  ): void {\n    this.processAnimationValues(props);\n    this.recorder.pushShader(shaderType, props, children);\n  }\n\n  pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.pushBlurMaskFilter(props);\n  }\n\n  composePathEffect(): void {\n    this.recorder.composePathEffect();\n  }\n\n  composeColorFilter(): void {\n    this.recorder.composeColorFilter();\n  }\n\n  composeImageFilter(): void {\n    this.recorder.composeImageFilter();\n  }\n\n  saveCTM(props: AnimatedProps<CTMProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.saveCTM(props);\n  }\n\n  restoreCTM(): void {\n    this.recorder.restoreCTM();\n  }\n\n  drawPaint(): void {\n    this.recorder.drawPaint();\n  }\n\n  saveLayer(): void {\n    this.recorder.saveLayer();\n  }\n\n  saveBackdropFilter(): void {\n    this.recorder.saveBackdropFilter();\n  }\n\n  drawBox(\n    boxProps: AnimatedProps<BoxProps>,\n    shadows: {\n      props: BoxShadowProps;\n    }[]\n  ): void {\n    this.processAnimationValues(boxProps);\n    shadows.forEach((shadow) => {\n      this.processAnimationValues(\n        shadow.props as AnimatedProps<BoxShadowProps>\n      );\n    });\n    this.recorder.drawBox(\n      boxProps,\n      // TODO: Fix this type BaseRecorder.drawBox()\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-expect-error\n      shadows.map((s) => s.props)\n    );\n  }\n\n  drawImage(props: AnimatedProps<ImageProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawImage(props);\n  }\n\n  drawCircle(props: AnimatedProps<CircleProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawCircle(props);\n  }\n\n  drawPoints(props: AnimatedProps<PointsProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawPoints(props);\n  }\n\n  drawPath(props: AnimatedProps<PathProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawPath(props);\n  }\n\n  drawRect(props: AnimatedProps<RectProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawRect(props);\n  }\n\n  drawRRect(props: AnimatedProps<RoundedRectProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawRRect(props);\n  }\n\n  drawOval(props: AnimatedProps<OvalProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawOval(props);\n  }\n\n  drawLine(props: AnimatedProps<LineProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawLine(props);\n  }\n\n  drawPatch(props: AnimatedProps<PatchProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawPatch(props);\n  }\n\n  drawVertices(props: AnimatedProps<VerticesProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawVertices(props);\n  }\n\n  drawDiffRect(props: AnimatedProps<DiffRectProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawDiffRect(props);\n  }\n\n  drawText(props: AnimatedProps<TextProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawText(props);\n  }\n\n  drawTextPath(props: AnimatedProps<TextPathProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawTextPath(props);\n  }\n\n  drawTextBlob(props: AnimatedProps<TextBlobProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawTextBlob(props);\n  }\n\n  drawGlyphs(props: AnimatedProps<GlyphsProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawGlyphs(props);\n  }\n\n  drawPicture(props: AnimatedProps<PictureProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawPicture(props);\n  }\n\n  drawImageSVG(props: AnimatedProps<ImageSVGProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawImageSVG(props);\n  }\n\n  drawParagraph(props: AnimatedProps<ParagraphProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawParagraph(props);\n  }\n\n  drawAtlas(props: AnimatedProps<AtlasProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawAtlas(props);\n  }\n\n  drawSkottie(props: AnimatedProps<SkottieProps>): void {\n    this.processAnimationValues(props);\n    this.recorder.drawSkottie(props);\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/typescript/lib/commonjs/sksg/Container.native.d.ts

@@ -4,7 +4,12 @@ import _StaticContainer = require("./StaticContainer");
 declare class NativeReanimatedContainer extends _StaticContainer.Container {
     constructor(Skia: any, nativeId: any);
     nativeId: any;
+    recorderA: _ReanimatedRecorder.ReanimatedRecorder;
+    recorderB: _ReanimatedRecorder.ReanimatedRecorder;
+    currentRecorder: _ReanimatedRecorder.ReanimatedRecorder;
+    picture: any;
     redraw(): void;
     mapperId: any;
 }
+import _ReanimatedRecorder = require("./Recorder/ReanimatedRecorder");
 export {};

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

@@ -6,6 +6,7 @@ export const __esModule: boolean;
 export class ReanimatedRecorder {
     constructor(Skia: any);
     recorder: any;
+    reset(): void;
     processAnimationValues(props: any): void;
     getRecorder(): any;
     getSharedValues(): any[];

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

@@ -3,8 +3,13 @@ import { StaticContainer } from "./StaticContainer";
 declare class NativeReanimatedContainer extends Container {
     constructor(Skia: any, nativeId: any);
     nativeId: any;
+    recorderA: ReanimatedRecorder;
+    recorderB: ReanimatedRecorder;
+    currentRecorder: ReanimatedRecorder;
+    picture: any;
     redraw(): void;
     mapperId: any;
 }
 import { Container } from "./StaticContainer";
+import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 export {};

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

@@ -5,6 +5,7 @@
 export class ReanimatedRecorder {
     constructor(Skia: any);
     recorder: any;
+    reset(): void;
     processAnimationValues(props: any): void;
     getRecorder(): any;
     getSharedValues(): any[];

package/lib/typescript/src/skia/types/Picture/PictureFactory.d.ts

@@ -4,5 +4,5 @@ export interface PictureFactory {
      * Returns an SkPicture which has been serialized previously to the given bytes.
      * @param bytes
      */
-    MakePicture(bytes: Uint8Array | ArrayBuffer): SkPicture | null;
+    MakePicture(bytes: Uint8Array | ArrayBuffer | null): SkPicture | null;
 }

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

@@ -48,6 +48,7 @@ export interface BaseRecorder {
     drawAtlas(props: AnimatedProps<AtlasProps>): void;
 }
 export interface JsiRecorder extends BaseRecorder {
-    play(): SkPicture;
+    play(picture: SkPicture): void;
     applyUpdates(variables: SharedValue<unknown>[]): void;
+    reset(): void;
 }

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

@@ -5,6 +5,10 @@ import "../views/api";
 declare class NativeReanimatedContainer extends Container {
     private nativeId;
     private mapperId;
+    private picture;
+    private recorderA;
+    private recorderB;
+    private currentRecorder;
     constructor(Skia: Skia, nativeId: number);
     redraw(): void;
 }

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

@@ -10,6 +10,7 @@ export declare class ReanimatedRecorder implements BaseRecorder {
     private values;
     private recorder;
     constructor(Skia: Skia);
+    reset(): void;
     private processAnimationValues;
     getRecorder(): JsiRecorder;
     getSharedValues(): SharedValue<unknown>[];

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "skia": {
     "version": "m142",
     "checksums": {

package/src/skia/types/Picture/PictureFactory.ts

@@ -5,5 +5,5 @@ export interface PictureFactory {
    * Returns an SkPicture which has been serialized previously to the given bytes.
    * @param bytes
    */
-  MakePicture(bytes: Uint8Array | ArrayBuffer): SkPicture | null;
+  MakePicture(bytes: Uint8Array | ArrayBuffer | null): SkPicture | null;
 }

package/src/skia/types/Recorder.ts

@@ -92,6 +92,7 @@ export interface BaseRecorder {
 }
 
 export interface JsiRecorder extends BaseRecorder {
-  play(): SkPicture;
+  play(picture: SkPicture): void;
   applyUpdates(variables: SharedValue<unknown>[]): void;
+  reset(): void;
 }

package/src/sksg/Container.native.ts

@@ -1,5 +1,5 @@
 import Rea from "../external/reanimated/ReanimatedProxy";
-import type { Skia } from "../skia/types";
+import type { Skia, SkPicture } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 import type { JsiRecorder } from "../skia/types/Recorder";
 
@@ -10,11 +10,15 @@ import { visit } from "./Recorder/Visitor";
 import "../skia/NativeSetup";
 import "../views/api";
 
-const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
+const nativeDrawOnscreen = (
+  nativeId: number,
+  recorder: JsiRecorder,
+  picture: SkPicture
+) => {
   "worklet";
 
   //const start = performance.now();
-  const picture = recorder.play();
+  recorder.play(picture);
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
@@ -22,12 +26,20 @@ const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
 
 class NativeReanimatedContainer extends Container {
   private mapperId: number | null = null;
+  private picture: SkPicture;
+  private recorderA: ReanimatedRecorder;
+  private recorderB: ReanimatedRecorder;
+  private currentRecorder: ReanimatedRecorder;
 
   constructor(
     Skia: Skia,
     private nativeId: number
   ) {
     super(Skia);
+    this.recorderA = new ReanimatedRecorder(Skia);
+    this.recorderB = new ReanimatedRecorder(Skia);
+    this.currentRecorder = this.recorderA;
+    this.picture = Skia.Picture.MakePicture(null)!;
   }
 
   redraw() {
@@ -37,20 +49,26 @@ class NativeReanimatedContainer extends Container {
     if (this.unmounted) {
       return;
     }
-    const { nativeId, Skia } = this;
-    const recorder = new ReanimatedRecorder(Skia);
+
+    // Swap to the next recorder (double buffering)
+    const recorder = this.currentRecorder;
+    this.currentRecorder =
+      this.currentRecorder === this.recorderA ? this.recorderB : this.recorderA;
+
+    const { nativeId, picture } = this;
+    recorder.reset();
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
     Rea.runOnUI(() => {
       "worklet";
-      nativeDrawOnscreen(nativeId, sharedRecorder);
+      nativeDrawOnscreen(nativeId, sharedRecorder, picture);
     })();
     if (sharedValues.length > 0) {
       this.mapperId = Rea.startMapper(() => {
         "worklet";
         sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(nativeId, sharedRecorder);
+        nativeDrawOnscreen(nativeId, sharedRecorder, picture);
       }, sharedValues);
     }
   }

package/src/sksg/Recorder/ReanimatedRecorder.ts

@@ -44,6 +44,11 @@ export class ReanimatedRecorder implements BaseRecorder {
     this.recorder = Skia.Recorder();
   }
 
+  reset() {
+    this.values.clear();
+    this.recorder.reset();
+  }
+
   private processAnimationValues(props?: Record<string, unknown>) {
     if (!props) {
       return;