@shopify/react-native-skia 1.5.7 → 1.5.9

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

@@ -3,7 +3,6 @@ declare const SkiaBaseWebView_base: any;
 export class SkiaBaseWebView extends SkiaBaseWebView_base {
     [x: string]: any;
     constructor(props: any);
-    _mode: any;
     unsubscribeAll(): void;
     _unsubscriptions: any[] | undefined;
     onLayoutEvent(evt: any): void;
@@ -34,16 +33,6 @@ export class SkiaBaseWebView extends SkiaBaseWebView_base {
     _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(): any;
 }
 import _JsiSkSurface = require("../skia/web/JsiSkSurface");

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

@@ -6,6 +6,9 @@ export class SkiaDomView extends SkiaDomView_base {
     _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/commonjs/views/SkiaJSDomView.d.ts

@@ -4,6 +4,8 @@ export class SkiaJSDomView extends SkiaJSDomView_base {
     [x: string]: any;
     constructor(props: any);
     _nativeId: number;
+    tick(): void;
+    requestId: number | undefined;
     get nativeId(): number;
     componentDidUpdate(prevProps: any): void;
     /**

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

@@ -6,6 +6,9 @@ export class SkiaPictureView extends SkiaPictureView_base {
     _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/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.7",
+  "version": "1.5.9",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/react-native-skia.podspec

@@ -9,8 +9,8 @@ use_graphite = ENV['SK_GRAPHITE'] == '1'
 
 # Set preprocessor definitions based on GRAPHITE flag
 preprocessor_defs = use_graphite ? 
-  '$(inherited) SK_GRAPHITE=1' : 
-  '$(inherited) SK_METAL=1 SK_GANESH=1'
+  '$(inherited) SK_GRAPHITE=1 SK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API=1' : 
+  '$(inherited) SK_METAL=1 SK_GANESH=1 SK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API=1'
 
 # Define base frameworks
 base_frameworks = ['libs/ios/libskia.xcframework', 

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/renderer/__tests__/e2e/Image.spec.tsx

@@ -43,51 +43,17 @@ describe("Image loading from bundles", () => {
       },
       {
         data: Array.from(
-          loadImage("skia/__tests__/assets/oslo.jpg").encodeToBytes()
+          loadImage("skia/__tests__/assets/oslo-mini.jpg").encodeToBytes()
         ),
       }
     );
     expect(pixels).toBeDefined();
     expect(pixels).toEqual([
-      170, 186, 199, 255, 170, 186, 199, 255, 170, 186, 199, 255, 170, 186, 199,
+      171, 188, 198, 255, 171, 188, 198, 255, 171, 188, 198, 255, 171, 188, 198,
       255,
     ]);
   });
 
-  // it("should read pixels from an image using a preallocated buffer", async () => {
-  //   const pixels = await surface.eval(
-  //     (Skia, { colorType, alphaType, data }) => {
-  //       const image = Skia.Image.MakeImageFromEncoded(
-  //         Skia.Data.fromBytes(new Uint8Array(data))
-  //       )!;
-  //       const result = new Uint8Array(16);
-  //       image.readPixels(
-  //         0,
-  //         0,
-  //         {
-  //           width: 2,
-  //           height: 2,
-  //           colorType,
-  //           alphaType,
-  //         },
-  //         result
-  //       );
-  //       return result;
-  //     },
-  //     {
-  //       colorType: ColorType.RGBA_8888,
-  //       alphaType: AlphaType.Unpremul,
-  //       data: Array.from(
-  //         loadImage("skia/__tests__/assets/oslo.jpg").encodeToBytes()
-  //       ),
-  //     }
-  //   );
-  //   expect(pixels).toBeDefined();
-  //   expect(Array.from(pixels!)).toEqual([
-  //     170, 186, 199, 255, 170, 186, 199, 255, 170, 186, 199, 255, 170, 186, 199,
-  //     255,
-  //   ]);
-  // });
   it("should read pixels from a canvas", async () => {
     const pixels = await surface.eval(
       (Skia, { colorType, alphaType }) => {
@@ -108,32 +74,4 @@ describe("Image loading from bundles", () => {
     expect(pixels).toBeDefined();
     expect(Array.from(pixels!)).toEqual([255, 0, 0, 255]);
   });
-  // it("should read pixels from a canvas using a preallocated buffer", async () => {
-  //   const pixels = await surface.eval(
-  //     (Skia, { colorType, alphaType }) => {
-  //       const offscreen = Skia.Surface.MakeOffscreen(10, 10)!;
-  //       const canvas = offscreen.getCanvas();
-  //       canvas.drawColor(Skia.Color("red"));
-  // const result = new Uint8Array(4);
-  //        canvas.readPixels(0, 0, {
-  //         width: 1,
-  //         height: 1,
-  //         colorType,
-  //         alphaType,
-  //       }, result);
-  //     },
-  //     { colorType: ColorType.RGBA_8888, alphaType: AlphaType.Unpremul }
-  //   );
-  //   expect(pixels).toBeDefined();
-  //   expect(Array.from(pixels!)).toEqual([255, 0, 0, 255]);
-  // });
-  // This test should only run on CI because it will trigger a redbox.
-  // While this is fine on CI, it is undesirable on local dev.
-  // it("should not crash with an invalid viewTag", async () => {
-  //   const result = await surface.eval((Skia) => {
-  //     Skia.Image.MakeImageFromViewTag(-1);
-  //     return true;
-  //   });
-  //   expect(result).toBe(true);
-  // });
 });

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);
   }