@shopify/react-native-skia 2.3.10 → 2.3.12

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

@@ -4,12 +4,8 @@ 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/module/sksg/Container.native.d.ts

@@ -3,13 +3,9 @@ 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/src/sksg/Container.native.d.ts

@@ -6,9 +6,6 @@ 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/specs/SkiaPictureViewNativeComponent.d.ts

@@ -3,6 +3,7 @@ export interface NativeProps extends ViewProps {
     debug?: boolean;
     opaque?: boolean;
     colorSpace?: string;
+    coldStart?: boolean;
 }
 declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
 export default _default;

package/lib/typescript/src/views/SkiaPictureView.d.ts

@@ -3,6 +3,7 @@ import type { SkRect } from "../skia/types";
 import type { SkiaPictureViewNativeProps } from "./types";
 interface SkiaPictureViewProps extends SkiaPictureViewNativeProps {
     mode?: "default" | "continuous";
+    coldStart?: boolean;
 }
 export declare class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
     private requestId;

package/package.json

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

package/src/renderer/Canvas.tsx

@@ -160,7 +160,6 @@ export const Canvas = ({
     },
     [onLayout, onSize]
   );
-
   return (
     <SkiaPictureViewNativeComponent
       ref={viewRef}
@@ -169,7 +168,10 @@ export const Canvas = ({
       debug={debug}
       opaque={opaque}
       colorSpace={colorSpace}
-      onLayout={onLayoutWeb}
+      coldStart={false}
+      onLayout={
+        Platform.OS === "web" && (onSize || onLayout) ? onLayoutWeb : onLayout
+      }
       {...viewProps}
     />
   );

package/src/sksg/Container.native.ts

@@ -27,18 +27,12 @@ const nativeDrawOnscreen = (
 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)!;
   }
 
@@ -49,21 +43,18 @@ 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, picture } = this;
-    recorder.reset();
+    const recorder = new ReanimatedRecorder(this.Skia);
+    const { nativeId, picture, Skia } = this;
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
-    Rea.runOnUI(() => {
+    // Draw first frame
+    Rea.executeOnUIRuntimeSync(() => {
       "worklet";
-      nativeDrawOnscreen(nativeId, sharedRecorder, picture);
+      const firstPicture = Skia.Picture.MakePicture(null)!;
+      nativeDrawOnscreen(nativeId, sharedRecorder, firstPicture);
     })();
+    // Animate
     if (sharedValues.length > 0) {
       this.mapperId = Rea.startMapper(() => {
         "worklet";

package/src/sksg/Reconciler.ts

@@ -27,12 +27,13 @@ export class SkiaSGRoot {
     public Skia: Skia,
     nativeId = -1
   ) {
+    const strictMode = false;
     this.container = createContainer(Skia, nativeId);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,
       null,
-      true,
+      strictMode,
       null,
       "",
       console.error,
@@ -48,7 +49,6 @@ export class SkiaSGRoot {
   private updateContainer(element: ReactNode) {
     return new Promise((resolve) => {
       skiaReconciler.updateContainer(element, this.root, null, () => {
-        debug("updateContainer");
         resolve(true);
       });
     });

package/src/specs/SkiaPictureViewNativeComponent.ts

@@ -5,6 +5,7 @@ export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
   colorSpace?: string;
+  coldStart?: boolean;
 }
 
 // eslint-disable-next-line import/no-default-export

package/src/views/SkiaPictureView.tsx

@@ -11,6 +11,7 @@ const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 
 interface SkiaPictureViewProps extends SkiaPictureViewNativeProps {
   mode?: "default" | "continuous";
+  coldStart?: boolean;
 }
 
 export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
@@ -82,13 +83,14 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   }
 
   render() {
-    const { mode, debug = false, opaque = false, ...viewProps } = this.props;
+    const { mode, debug = false, opaque = false, coldStart = false, ...viewProps } = this.props;
     return (
       <NativeSkiaPictureView
         collapsable={false}
         nativeID={`${this._nativeId}`}
         debug={debug}
         opaque={opaque}
+        coldStart={coldStart}
         {...viewProps}
       />
     );

package/src/views/SkiaPictureView.web.tsx

@@ -16,6 +16,18 @@ import type { ISkiaViewApiWeb } from "../specs/NativeSkiaModule.web";
 import type { SkiaPictureViewNativeProps } from "./types";
 import { SkiaViewNativeId } from "./SkiaViewNativeId";
 
+const dp2Pixel = (pd: number, rect?: SkRect) => {
+  if (!rect) {
+    return undefined;
+  }
+  return {
+    x: rect.x * pd,
+    y: rect.y * pd,
+    width: rect.width * pd,
+    height: rect.height * pd,
+  };
+};
+
 interface Renderer {
   onResize(): void;
   draw(picture: SkPicture): void;
@@ -41,7 +53,7 @@ class WebGLRenderer implements Renderer {
     canvas!.clear(CanvasKit.TRANSPARENT);
     this.draw(picture);
     this.surface.ref.flush();
-    return this.surface.makeImageSnapshot(rect);
+    return this.surface.makeImageSnapshot(dp2Pixel(this.pd, rect));
   }
 
   onResize() {
@@ -187,7 +199,7 @@ class StaticWebGLRenderer implements Renderer {
       const { surface, tempCanvas } = renderResult;
 
       try {
-        this.cachedImage = surface.makeImageSnapshot(rect);
+        this.cachedImage = surface.makeImageSnapshot(dp2Pixel(this.pd, rect));
       } catch (error) {
         console.error("Error creating image snapshot:", error);
       } finally {