@shopify/react-native-skia 0.1.145 → 0.1.146

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

@@ -1,5 +1,5 @@
 import type { ViewProps } from "react-native";
-import type { SkImage, SkRect, SkCanvas } from "../skia/types";
+import type { SkCanvas, SkImage, SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 export declare type DrawMode = "continuous" | "default";
 export declare type NativeSkiaViewProps = ViewProps & {
@@ -45,11 +45,11 @@ export interface ValueListener {
     removeListener: (id: number) => void;
 }
 export interface ISkiaViewApi {
-    invalidateSkiaView: (nativeId: number) => void;
-    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
-    setDrawCallback: (nativeId: number, callback: RNSkiaDrawCallback | undefined) => void;
-    setDrawMode: (nativeId: number, mode: DrawMode) => void;
+    setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
+    callJsiMethod: <T extends Array<unknown>>(nativeId: number, name: string, ...args: T) => void;
     registerValuesInView: (nativeId: number, values: SkiaValue<unknown>[]) => () => void;
+    requestRedraw: (nativeId: number) => void;
+    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
 }
 export interface SkiaViewProps extends ViewProps {
     /**

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.145",
+  "version": "0.1.146",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/renderer/HostConfig.ts

@@ -265,7 +265,17 @@ export const skHostConfig: SkiaHostConfig = {
       return;
     }
     bustBranchMemoization(instance);
-    instance.props = nextProps;
+    if (instance instanceof DrawingNode) {
+      const { onDraw, skipProcessing, ...props } = nextProps;
+      instance.props = props;
+    } else if (instance instanceof DeclarationNode) {
+      const { onDeclare, ...props } = nextProps;
+      instance.props = props;
+    } else {
+      throw new Error(
+        "Unsupported instance commitUpdate " + instance.constructor.name
+      );
+    }
   },
 
   commitTextUpdate: (

package/src/views/SkiaView.tsx

@@ -5,7 +5,7 @@ import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 
 import { SkiaViewApi } from "./api";
-import type { DrawMode, NativeSkiaViewProps, SkiaViewProps } from "./types";
+import type { NativeSkiaViewProps, SkiaViewProps } from "./types";
 
 let SkiaViewNativeId = 1000;
 
@@ -19,8 +19,8 @@ export class SkiaView extends React.Component<SkiaViewProps> {
     this._nativeId = SkiaViewNativeId++;
     const { onDraw } = props;
     if (onDraw) {
-      assertDrawCallbacksEnabled();
-      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
     }
   }
 
@@ -33,8 +33,8 @@ export class SkiaView extends React.Component<SkiaViewProps> {
   componentDidUpdate(prevProps: SkiaViewProps) {
     const { onDraw } = this.props;
     if (onDraw !== prevProps.onDraw) {
-      assertDrawCallbacksEnabled();
-      SkiaViewApi.setDrawCallback(this._nativeId, onDraw);
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
     }
   }
 
@@ -44,7 +44,7 @@ export class SkiaView extends React.Component<SkiaViewProps> {
    * @returns An Image object.
    */
   public makeImageSnapshot(rect?: SkRect) {
-    assertDrawCallbacksEnabled();
+    assertSkiaViewApi();
     return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
   }
 
@@ -52,22 +52,8 @@ export class SkiaView extends React.Component<SkiaViewProps> {
    * Sends a redraw request to the native SkiaView.
    */
   public redraw() {
-    assertDrawCallbacksEnabled();
-    SkiaViewApi.invalidateSkiaView(this._nativeId);
-  }
-
-  /**
-   * Updates the drawing mode for the skia view. This is the same
-   * as declaratively setting the mode property on the SkiaView.
-   * There are two drawing modes, "continuous" and "default",
-   * where the continuous mode will continuously redraw the view and
-   * the default mode will only redraw when any of the regular react
-   * properties are changed like size and margins.
-   * @param mode Drawing mode to use.
-   */
-  public setDrawMode(mode: DrawMode) {
-    assertDrawCallbacksEnabled();
-    SkiaViewApi.setDrawMode(this._nativeId, mode);
+    assertSkiaViewApi();
+    SkiaViewApi.requestRedraw(this._nativeId);
   }
 
   /**
@@ -75,8 +61,8 @@ export class SkiaView extends React.Component<SkiaViewProps> {
    * The view will redraw itself when any of the values change.
    * @param values Values to register
    */
-  public registerValues(values: SkiaValue<unknown>[]) {
-    assertDrawCallbacksEnabled();
+  public registerValues(values: SkiaValue<unknown>[]): () => void {
+    assertSkiaViewApi();
     return SkiaViewApi.registerValuesInView(this._nativeId, values);
   }
 
@@ -94,12 +80,15 @@ export class SkiaView extends React.Component<SkiaViewProps> {
   }
 }
 
-const assertDrawCallbacksEnabled = () => {
+const assertSkiaViewApi = () => {
   if (
     SkiaViewApi === null ||
-    SkiaViewApi.setDrawCallback == null ||
-    SkiaViewApi.invalidateSkiaView == null
+    SkiaViewApi.setJsiProperty === null ||
+    SkiaViewApi.callJsiMethod === null ||
+    SkiaViewApi.registerValuesInView === null ||
+    SkiaViewApi.requestRedraw === null ||
+    SkiaViewApi.makeImageSnapshot === null
   ) {
-    throw Error("Skia Api is not enabled.");
+    throw Error("Skia View Api was not found.");
   }
 };

package/src/views/types.ts

@@ -1,6 +1,6 @@
 import type { ViewProps } from "react-native";
 
-import type { SkImage, SkRect, SkCanvas } from "../skia/types";
+import type { SkCanvas, SkImage, SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 
 export type DrawMode = "continuous" | "default";
@@ -58,17 +58,18 @@ export interface ValueListener {
 }
 
 export interface ISkiaViewApi {
-  invalidateSkiaView: (nativeId: number) => void;
-  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
-  setDrawCallback: (
+  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
+  callJsiMethod: <T extends Array<unknown>>(
     nativeId: number,
-    callback: RNSkiaDrawCallback | undefined
+    name: string,
+    ...args: T
   ) => void;
-  setDrawMode: (nativeId: number, mode: DrawMode) => void;
   registerValuesInView: (
     nativeId: number,
     values: SkiaValue<unknown>[]
   ) => () => void;
+  requestRedraw: (nativeId: number) => void;
+  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
 }
 
 export interface SkiaViewProps extends ViewProps {