@shopify/react-native-skia 1.5.8 → 1.5.9

package/lib/typescript/lib/module/views/SkiaBaseWebView.d.ts

@@ -1,6 +1,5 @@
 export class SkiaBaseWebView extends React.Component<any, any, any> {
     constructor(props: any);
-    _mode: any;
     unsubscribeAll(): void;
     _unsubscriptions: any[] | undefined;
     onLayoutEvent(evt: any): void;
@@ -31,16 +30,6 @@ export class SkiaBaseWebView extends React.Component<any, any, any> {
     _redrawRequests: number | undefined;
     requestId: number | undefined;
     redraw(): void;
-    /**
-     * 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.
-     */
-    setDrawMode(mode: any): void;
     render(): React.CElement<import("react-native").ViewProps, import("react-native").View>;
 }
 import React from "react";

package/lib/typescript/lib/module/views/SkiaDomView.d.ts

@@ -3,6 +3,9 @@ export class SkiaDomView extends React.Component<any, any, any> {
     _nativeId: number;
     get nativeId(): number;
     componentDidUpdate(prevProps: any): void;
+    componentWillUnmount(): void;
+    tick(): void;
+    requestId: number | undefined;
     /**
      * Creates a snapshot from the canvas in the surface
      * @param rect Rect to use as bounds. Optional.

package/lib/typescript/lib/module/views/SkiaJSDomView.d.ts

@@ -1,6 +1,8 @@
 export class SkiaJSDomView extends React.Component<any, any, any> {
     constructor(props: any);
     _nativeId: number;
+    tick(): void;
+    requestId: number | undefined;
     get nativeId(): number;
     componentDidUpdate(prevProps: any): void;
     /**

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

@@ -3,6 +3,9 @@ export class SkiaPictureView extends React.Component<any, any, any> {
     _nativeId: number;
     get nativeId(): number;
     componentDidUpdate(prevProps: any): void;
+    componentWillUnmount(): void;
+    tick(): void;
+    requestId: number | undefined;
     /**
      * Creates a snapshot from the canvas in the surface
      * @param rect Rect to use as bounds. Optional.

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

@@ -6,5 +6,6 @@ export declare const useCanvasRef: () => React.RefObject<SkiaDomView>;
 export interface CanvasProps extends SkiaBaseViewProps {
     ref?: RefObject<SkiaDomView>;
     children: ReactNode;
+    mode?: "default" | "continuous";
 }
 export declare const Canvas: FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;

package/lib/typescript/src/specs/SkiaPictureViewNativeComponent.d.ts

@@ -1,6 +1,5 @@
 import type { ViewProps } from "react-native";
 export interface NativeProps extends ViewProps {
-    mode: string;
     debug?: boolean;
 }
 declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;

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

@@ -1,13 +1,12 @@
 import React from "react";
 import type { SkRect, SkCanvas } from "../skia/types";
-import type { DrawMode, SkiaBaseViewProps } from "./types";
+import type { SkiaBaseViewProps } from "./types";
 export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
     constructor(props: TProps);
     private _surface;
     private _unsubscriptions;
     private _canvas;
     private _canvasRef;
-    private _mode;
     private _redrawRequests;
     private requestId;
     protected width: number;
@@ -36,16 +35,6 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
      */
     private tick;
     redraw(): void;
-    /**
-     * 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.
-     */
-    setDrawMode(mode: DrawMode): void;
     private onLayout;
     render(): React.JSX.Element;
 }

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

@@ -1,11 +1,17 @@
 import React from "react";
 import type { SkRect } from "../skia/types";
-import type { SkiaDomViewProps } from "./types";
+import type { SkiaDomViewNativeProps } from "./types";
+interface SkiaDomViewProps extends SkiaDomViewNativeProps {
+    mode?: "default" | "continuous";
+}
 export declare class SkiaDomView extends React.Component<SkiaDomViewProps> {
     constructor(props: SkiaDomViewProps);
     private _nativeId;
+    private requestId;
     get nativeId(): number;
     componentDidUpdate(prevProps: SkiaDomViewProps): void;
+    componentWillUnmount(): void;
+    private tick;
     /**
      * Creates a snapshot from the canvas in the surface
      * @param rect Rect to use as bounds. Optional.
@@ -24,3 +30,4 @@ export declare class SkiaDomView extends React.Component<SkiaDomViewProps> {
     redraw(): void;
     render(): React.JSX.Element;
 }
+export {};

package/lib/typescript/src/views/SkiaDomView.web.d.ts

@@ -1,7 +1,7 @@
 import type { SkCanvas } from "../skia/types";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
-import type { SkiaDomViewProps } from "./types";
-export declare class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
-    constructor(props: SkiaDomViewProps);
+import type { SkiaDomViewNativeProps } from "./types";
+export declare class SkiaDomView extends SkiaBaseWebView<SkiaDomViewNativeProps> {
+    constructor(props: SkiaDomViewNativeProps);
     protected renderInCanvas(canvas: SkCanvas): void;
 }

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

@@ -1,13 +1,18 @@
 import React from "react";
 import type { Skia, SkRect } from "../skia/types";
-import type { SkiaDomViewProps } from "./types";
-export declare class SkiaJSDomView extends React.Component<SkiaDomViewProps & {
+import type { SkiaDomViewNativeProps } from "./types";
+interface SkiaDomViewProps extends SkiaDomViewNativeProps {
+    mode?: "default" | "continuous";
+}
+type SkiaJSDomViewProps = SkiaDomViewProps & {
     Skia: Skia;
-}> {
-    constructor(props: SkiaDomViewProps & {
-        Skia: Skia;
-    });
+    mode?: "default" | "continuous";
+};
+export declare class SkiaJSDomView extends React.Component<SkiaJSDomViewProps> {
+    constructor(props: SkiaJSDomViewProps);
     private _nativeId;
+    private requestId;
+    private tick;
     get nativeId(): number;
     componentDidUpdate(prevProps: SkiaDomViewProps & {
         Skia: Skia;
@@ -29,3 +34,4 @@ export declare class SkiaJSDomView extends React.Component<SkiaDomViewProps & {
     componentWillUnmount(): void;
     render(): React.JSX.Element;
 }
+export {};

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

@@ -1,11 +1,17 @@
 import React from "react";
 import type { SkRect } from "../skia/types";
-import type { SkiaPictureViewProps } from "./types";
+import type { SkiaPictureViewNativeProps } from "./types";
+interface SkiaPictureViewProps extends SkiaPictureViewNativeProps {
+    mode?: "default" | "continuous";
+}
 export declare class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
+    private requestId;
     constructor(props: SkiaPictureViewProps);
     private _nativeId;
     get nativeId(): number;
     componentDidUpdate(prevProps: SkiaPictureViewProps): void;
+    componentWillUnmount(): void;
+    private tick;
     /**
      * Creates a snapshot from the canvas in the surface
      * @param rect Rect to use as bounds. Optional.
@@ -18,3 +24,4 @@ export declare class SkiaPictureView extends React.Component<SkiaPictureViewProp
     redraw(): void;
     render(): React.JSX.Element;
 }
+export {};

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

@@ -1,7 +1,7 @@
 import type { SkCanvas } from "../skia/types";
-import type { SkiaPictureViewProps } from "./types";
+import type { SkiaPictureViewNativeProps } from "./types";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
-export declare class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {
-    constructor(props: SkiaPictureViewProps);
+export declare class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewNativeProps> {
+    constructor(props: SkiaPictureViewNativeProps);
     protected renderInCanvas(canvas: SkCanvas): void;
 }

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

@@ -2,9 +2,7 @@ import type { ViewProps } from "react-native";
 import type { GroupProps, RenderNode } from "../dom/types";
 import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SharedValueType } from "../renderer/processors/Animations/Animations";
-export type DrawMode = "continuous" | "default";
 export type NativeSkiaViewProps = ViewProps & {
-    mode?: DrawMode;
     debug?: boolean;
 };
 export interface DrawingInfo {
@@ -19,14 +17,6 @@ export interface ISkiaViewApi {
     makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;
 }
 export interface SkiaBaseViewProps extends ViewProps {
-    /**
-     * Sets the drawing mode for the skia view. 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
-     * sizes and margins.
-     */
-    mode?: DrawMode;
     /**
      * When set to true the view will display information about the
      * average time it takes to render.
@@ -38,9 +28,9 @@ export interface SkiaBaseViewProps extends ViewProps {
      */
     onSize?: SharedValueType<SkSize>;
 }
-export interface SkiaPictureViewProps extends SkiaBaseViewProps {
+export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {
     picture?: SkPicture;
 }
-export interface SkiaDomViewProps extends SkiaBaseViewProps {
+export interface SkiaDomViewNativeProps extends SkiaBaseViewProps {
     root?: RenderNode<GroupProps>;
 }

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/renderer/Canvas.tsx

@@ -27,6 +27,7 @@ export const useCanvasRef = () => useRef<SkiaDomView>(null);
 export interface CanvasProps extends SkiaBaseViewProps {
   ref?: RefObject<SkiaDomView>;
   children: ReactNode;
+  mode?: "default" | "continuous";
 }
 
 const useOnSizeEvent = (
@@ -54,7 +55,7 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       children,
       style,
       debug,
-      mode,
+      mode = "default",
       onSize: _onSize,
       onLayout: _onLayout,
       ...props
@@ -95,8 +96,8 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
           style={style}
           root={root.dom}
           onLayout={onLayout}
-          mode={mode}
           debug={debug}
+          mode={mode}
           {...props}
         />
       );
@@ -104,12 +105,12 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       return (
         <SkiaJSDomView
           Skia={Skia}
+          mode={mode}
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
           style={style}
           root={root.dom}
           onLayout={onLayout}
-          mode={mode}
           debug={debug}
           {...props}
         />

package/src/specs/SkiaPictureViewNativeComponent.ts

@@ -2,7 +2,6 @@ import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNati
 import type { ViewProps } from "react-native";
 
 export interface NativeProps extends ViewProps {
-  mode: string;
   debug?: boolean;
 }
 

package/src/views/SkiaBaseWebView.tsx

@@ -6,7 +6,7 @@ import type { SkRect, SkCanvas } from "../skia/types";
 import { JsiSkSurface } from "../skia/web/JsiSkSurface";
 import { Platform } from "../Platform";
 
-import type { DrawMode, SkiaBaseViewProps } from "./types";
+import type { SkiaBaseViewProps } from "./types";
 
 const pd = Platform.PixelRatio;
 
@@ -15,14 +15,12 @@ export abstract class SkiaBaseWebView<
 > extends React.Component<TProps> {
   constructor(props: TProps) {
     super(props);
-    this._mode = props.mode ?? "default";
   }
 
   private _surface: JsiSkSurface | null = null;
   private _unsubscriptions: Array<() => void> = [];
   private _canvas: SkCanvas | null = null;
   private _canvasRef = React.createRef<HTMLCanvasElement>();
-  private _mode: DrawMode;
   private _redrawRequests = 0;
   private requestId = 0;
 
@@ -106,7 +104,7 @@ export abstract class SkiaBaseWebView<
    * Sends a redraw request to the native SkiaView.
    */
   private tick() {
-    if (this._mode === "continuous" || this._redrawRequests > 0) {
+    if (this._redrawRequests > 0) {
       this._redrawRequests = 0;
       if (this._canvas) {
         const canvas = this._canvas!;
@@ -125,24 +123,10 @@ export abstract class SkiaBaseWebView<
     this._redrawRequests++;
   }
 
-  /**
-   * 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) {
-    this._mode = mode;
-    this.tick();
-  }
-
   private onLayout = this.onLayoutEvent.bind(this);
 
   render() {
-    const { mode, debug = false, ...viewProps } = this.props;
+    const { debug = false, ...viewProps } = this.props;
     return (
       <Platform.View {...viewProps} onLayout={this.onLayout}>
         <canvas ref={this._canvasRef} style={{ display: "flex", flex: 1 }} />

package/src/views/SkiaDomView.tsx

@@ -6,15 +6,19 @@ import { Platform } from "../Platform";
 import SkiaDomViewNativeComponent from "../specs/SkiaDomViewNativeComponent";
 
 import { SkiaViewApi } from "./api";
-import type { SkiaDomViewProps } from "./types";
+import type { SkiaDomViewNativeProps } from "./types";
 import { SkiaViewNativeId } from "./SkiaViewNativeId";
 
-const NativeSkiaDomView: HostComponent<SkiaDomViewProps> =
+const NativeSkiaDomView: HostComponent<SkiaDomViewNativeProps> =
   Platform.OS !== "web"
     ? SkiaDomViewNativeComponent
     : // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (null as any);
 
+interface SkiaDomViewProps extends SkiaDomViewNativeProps {
+  mode?: "default" | "continuous";
+}
+
 export class SkiaDomView extends React.Component<SkiaDomViewProps> {
   constructor(props: SkiaDomViewProps) {
     super(props);
@@ -28,9 +32,11 @@ export class SkiaDomView extends React.Component<SkiaDomViewProps> {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
     }
+    this.tick();
   }
 
   private _nativeId: number;
+  private requestId = 0;
 
   public get nativeId() {
     return this._nativeId;
@@ -46,6 +52,20 @@ export class SkiaDomView extends React.Component<SkiaDomViewProps> {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
     }
+    this.tick();
+  }
+
+  componentWillUnmount(): void {
+    if (this.requestId) {
+      cancelAnimationFrame(this.requestId);
+    }
+  }
+
+  private tick() {
+    this.redraw();
+    if (this.props.mode === "continuous") {
+      this.requestId = requestAnimationFrame(this.tick.bind(this));
+    }
   }
 
   /**
@@ -77,12 +97,11 @@ export class SkiaDomView extends React.Component<SkiaDomViewProps> {
   }
 
   render() {
-    const { mode, debug = false, ...viewProps } = this.props;
+    const { debug = false, ...viewProps } = this.props;
     return (
       <NativeSkiaDomView
         collapsable={false}
         nativeID={`${this._nativeId}`}
-        mode={mode}
         debug={debug}
         {...viewProps}
       />

package/src/views/SkiaDomView.web.tsx

@@ -3,10 +3,10 @@ import type { SkCanvas } from "../skia/types";
 import { JsiDrawingContext } from "../dom/types/DrawingContext";
 
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
-import type { SkiaDomViewProps } from "./types";
+import type { SkiaDomViewNativeProps } from "./types";
 
-export class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
-  constructor(props: SkiaDomViewProps) {
+export class SkiaDomView extends SkiaBaseWebView<SkiaDomViewNativeProps> {
+  constructor(props: SkiaDomViewNativeProps) {
     super(props);
   }
 

package/src/views/SkiaJSDomView.tsx

@@ -7,19 +7,29 @@ import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeCompon
 import { JsiDrawingContext } from "../dom/types";
 
 import { SkiaViewApi } from "./api";
-import type { SkiaPictureViewProps, SkiaDomViewProps } from "./types";
+import type {
+  SkiaPictureViewNativeProps,
+  SkiaDomViewNativeProps,
+} from "./types";
 import { SkiaViewNativeId } from "./SkiaViewNativeId";
 
-const NativeSkiaPictureView: HostComponent<SkiaPictureViewProps> =
+const NativeSkiaPictureView: HostComponent<SkiaPictureViewNativeProps> =
   Platform.OS !== "web"
     ? SkiaPictureViewNativeComponent
     : // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (null as any);
 
-export class SkiaJSDomView extends React.Component<
-  SkiaDomViewProps & { Skia: Skia }
-> {
-  constructor(props: SkiaDomViewProps & { Skia: Skia }) {
+interface SkiaDomViewProps extends SkiaDomViewNativeProps {
+  mode?: "default" | "continuous";
+}
+
+type SkiaJSDomViewProps = SkiaDomViewProps & {
+  Skia: Skia;
+  mode?: "default" | "continuous";
+};
+
+export class SkiaJSDomView extends React.Component<SkiaJSDomViewProps> {
+  constructor(props: SkiaJSDomViewProps) {
     super(props);
     this._nativeId = SkiaViewNativeId.current++;
     const { root, onSize } = props;
@@ -31,9 +41,18 @@ export class SkiaJSDomView extends React.Component<
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
     }
+    this.tick();
   }
 
   private _nativeId: number;
+  private requestId = 0;
+
+  private tick() {
+    this.redraw();
+    if (this.props.mode === "continuous") {
+      this.requestId = requestAnimationFrame(this.tick.bind(this));
+    }
+  }
 
   public get nativeId() {
     return this._nativeId;
@@ -49,6 +68,7 @@ export class SkiaJSDomView extends React.Component<
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
     }
+    this.tick();
   }
 
   /**
@@ -67,7 +87,6 @@ export class SkiaJSDomView extends React.Component<
   public redraw() {
     assertSkiaViewApi();
     this.draw();
-    //SkiaViewApi.requestRedraw(this._nativeId);
   }
 
   private draw() {
@@ -89,15 +108,17 @@ export class SkiaJSDomView extends React.Component<
   componentWillUnmount(): void {
     assertSkiaViewApi();
     SkiaViewApi.setJsiProperty(this._nativeId, "picture", null);
+    if (this.requestId) {
+      cancelAnimationFrame(this.requestId);
+    }
   }
 
   render() {
-    const { mode, debug = false, ...viewProps } = this.props;
+    const { debug = false, ...viewProps } = this.props;
     return (
       <NativeSkiaPictureView
         collapsable={false}
         nativeID={`${this._nativeId}`}
-        mode={mode}
         debug={debug}
         {...viewProps}
       />

package/src/views/SkiaPictureView.tsx

@@ -4,12 +4,18 @@ import type { SkRect } from "../skia/types";
 import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
 
 import { SkiaViewApi } from "./api";
-import type { SkiaPictureViewProps } from "./types";
+import type { SkiaPictureViewNativeProps } from "./types";
 import { SkiaViewNativeId } from "./SkiaViewNativeId";
 
 const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 
+interface SkiaPictureViewProps extends SkiaPictureViewNativeProps {
+  mode?: "default" | "continuous";
+}
+
 export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
+  private requestId = 0;
+
   constructor(props: SkiaPictureViewProps) {
     super(props);
     this._nativeId = SkiaViewNativeId.current++;
@@ -22,6 +28,7 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
     }
+    this.tick();
   }
 
   private _nativeId: number;
@@ -40,6 +47,20 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
     }
+    this.tick();
+  }
+
+  componentWillUnmount() {
+    if (this.requestId) {
+      cancelAnimationFrame(this.requestId);
+    }
+  }
+
+  private tick() {
+    this.redraw();
+    if (this.props.mode === "continuous") {
+      this.requestId = requestAnimationFrame(this.tick.bind(this));
+    }
   }
 
   /**
@@ -66,7 +87,6 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
       <NativeSkiaPictureView
         collapsable={false}
         nativeID={`${this._nativeId}`}
-        mode={mode ?? "default"}
         debug={debug}
         {...viewProps}
       />

package/src/views/SkiaPictureView.web.tsx

@@ -1,10 +1,10 @@
 import type { SkCanvas } from "../skia/types";
 
-import type { SkiaPictureViewProps } from "./types";
+import type { SkiaPictureViewNativeProps } from "./types";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
 
-export class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {
-  constructor(props: SkiaPictureViewProps) {
+export class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewNativeProps> {
+  constructor(props: SkiaPictureViewNativeProps) {
     super(props);
   }
 

package/src/views/types.ts

@@ -4,10 +4,7 @@ import type { GroupProps, RenderNode } from "../dom/types";
 import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 
-export type DrawMode = "continuous" | "default";
-
 export type NativeSkiaViewProps = ViewProps & {
-  mode?: DrawMode;
   debug?: boolean;
 };
 
@@ -25,14 +22,6 @@ export interface ISkiaViewApi {
 }
 
 export interface SkiaBaseViewProps extends ViewProps {
-  /**
-   * Sets the drawing mode for the skia view. 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
-   * sizes and margins.
-   */
-  mode?: DrawMode;
   /**
    * When set to true the view will display information about the
    * average time it takes to render.
@@ -45,10 +34,10 @@ export interface SkiaBaseViewProps extends ViewProps {
   onSize?: SharedValueType<SkSize>;
 }
 
-export interface SkiaPictureViewProps extends SkiaBaseViewProps {
+export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {
   picture?: SkPicture;
 }
 
-export interface SkiaDomViewProps extends SkiaBaseViewProps {
+export interface SkiaDomViewNativeProps extends SkiaBaseViewProps {
   root?: RenderNode<GroupProps>;
 }