@shopify/react-native-skia 0.1.216 → 0.1.218

package/lib/typescript/src/renderer/processors/Animations/Animations.d.ts

@@ -1,5 +1,5 @@
 import type { SkiaSelector, SkiaValue } from "../../../values";
-export declare type SharedValueType<T = number> = {
+export type SharedValueType<T = number> = {
     value: T;
 };
 export declare const isValue: (value: unknown) => value is SkiaValue<unknown>;
@@ -8,13 +8,13 @@ export declare const isSelector: <T, R>(value: unknown) => value is {
     value: SkiaValue<T>;
 };
 export declare const isAnimated: <T>(props: AnimatedProps<T, never>) => boolean;
-export declare type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P> | SharedValueType<T>;
-export declare type AnimatedProps<T, O extends keyof T | never = never> = {
+export type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P> | SharedValueType<T>;
+export type AnimatedProps<T, O extends keyof T | never = never> = {
     [K in keyof T]: K extends "children" ? T[K] : K extends O ? T[K] : AnimatedProp<T[K]>;
 };
-export declare type SkiaProps<P = object, O extends keyof P | never = never> = AnimatedProps<P, O>;
-declare type WithOptional<T extends object, N extends keyof T> = Omit<T, N> & {
+export type SkiaProps<P = object, O extends keyof P | never = never> = AnimatedProps<P, O>;
+type WithOptional<T extends object, N extends keyof T> = Omit<T, N> & {
     [K in N]?: T[K];
 };
-export declare type SkiaDefaultProps<T extends object, N extends keyof T> = WithOptional<SkiaProps<T>, N>;
+export type SkiaDefaultProps<T extends object, N extends keyof T> = WithOptional<SkiaProps<T>, N>;
 export {};

package/lib/typescript/src/skia/core/Font.d.ts

@@ -4,8 +4,8 @@ import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProv
  * Returns a Skia Font object
  * */
 export declare const useFont: (font: DataSourceParam, size?: number, onError?: ((err: Error) => void) | undefined) => import("../types").SkFont | null;
-declare type Slant = "normal" | "italic" | "oblique";
-declare type Weight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+type Slant = "normal" | "italic" | "oblique";
+type Weight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
 interface RNFontStyle {
     fontFamily: string;
     fontSize: number;

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

@@ -1,2 +1,2 @@
-export declare type SkColor = Float32Array;
-export declare type Color = string | Float32Array | number | number[];
+export type SkColor = Float32Array;
+export type Color = string | Float32Array | number | number[];

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

@@ -1,3 +1,3 @@
 import type { SkJSIInstance } from "../JsiInstance";
 export declare const isColorFilter: (obj: SkJSIInstance<string> | null) => obj is SkColorFilter;
-export declare type SkColorFilter = SkJSIInstance<"ColorFilter">;
+export type SkColorFilter = SkJSIInstance<"ColorFilter">;

package/lib/typescript/src/skia/types/ColorFilter/ColorFilterFactory.d.ts

@@ -1,7 +1,7 @@
 import type { SkColor } from "../Color";
 import type { BlendMode } from "../Paint";
 import type { SkColorFilter } from "./ColorFilter";
-export declare type InputColorMatrix = number[];
+export type InputColorMatrix = number[];
 export interface ColorFilterFactory {
     /**
      * Creates a color filter using the provided color matrix.

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

@@ -1,12 +1,12 @@
 import type { SkJSIInstance } from "../JsiInstance";
-export declare type SkData = SkJSIInstance<"Data">;
-declare type RNModule = number;
-declare type ESModule = {
+export type SkData = SkJSIInstance<"Data">;
+type RNModule = number;
+type ESModule = {
     __esModule: true;
     default: string;
 };
-export declare type DataModule = RNModule | ESModule;
-export declare type DataSource = DataModule | string | Uint8Array;
-export declare type DataSourceParam = DataSource | null | undefined;
+export type DataModule = RNModule | ESModule;
+export type DataSource = DataModule | string | Uint8Array;
+export type DataSourceParam = DataSource | null | undefined;
 export declare const isRNModule: (mod: DataModule) => mod is number;
 export {};

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

@@ -20,4 +20,4 @@ export declare enum TileMode {
     Decal = 3
 }
 export declare const isImageFilter: (obj: SkJSIInstance<string> | null) => obj is SkImageFilter;
-export declare type SkImageFilter = SkJSIInstance<"ImageFilter">;
+export type SkImageFilter = SkJSIInstance<"ImageFilter">;

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

@@ -6,7 +6,7 @@ export declare enum BlurStyle {
     Inner = 3
 }
 export declare const isMaskFilter: (obj: SkJSIInstance<string> | null) => obj is SkMaskFilter;
-export declare type SkMaskFilter = SkJSIInstance<"MaskFilter">;
+export type SkMaskFilter = SkJSIInstance<"MaskFilter">;
 /**
  * See SkMaskFilter.h for more details.
  */

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

@@ -25,11 +25,11 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
     identity: () => SkMatrix;
     get: () => number[];
 }
-declare type Transform2dName = "translateX" | "translateY" | "scale" | "skewX" | "skewY" | "scaleX" | "scaleY" | "rotateZ" | "rotate";
-declare type Transformations = {
+type Transform2dName = "translateX" | "translateY" | "scale" | "skewX" | "skewY" | "scaleX" | "scaleY" | "rotateZ" | "rotate";
+type Transformations = {
     readonly [Name in Transform2dName]: number;
 };
-export declare type Transforms2d = readonly (Pick<Transformations, "translateX"> | Pick<Transformations, "translateY"> | Pick<Transformations, "scale"> | Pick<Transformations, "scaleX"> | Pick<Transformations, "scaleY"> | Pick<Transformations, "skewX"> | Pick<Transformations, "skewY"> | Pick<Transformations, "rotate">)[];
+export type Transforms2d = readonly (Pick<Transformations, "translateX"> | Pick<Transformations, "translateY"> | Pick<Transformations, "scale"> | Pick<Transformations, "scaleX"> | Pick<Transformations, "scaleY"> | Pick<Transformations, "skewX"> | Pick<Transformations, "skewY"> | Pick<Transformations, "rotate">)[];
 export interface TransformProp {
     transform?: Transforms2d;
 }

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

@@ -40,7 +40,7 @@ export declare enum PathVerb {
     Cubic = 4,
     Close = 5
 }
-export declare type PathCommand = number[];
+export type PathCommand = number[];
 export declare const isPath: (obj: SkJSIInstance<string> | null) => obj is SkPath;
 export interface SkPath extends SkJSIInstance<"Path"> {
     /**

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

@@ -1,7 +1,7 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkPath } from "./Path/Path";
 import type { SkMatrix } from "./Matrix";
-export declare type SkPathEffect = SkJSIInstance<"PathEffect">;
+export type SkPathEffect = SkJSIInstance<"PathEffect">;
 export declare const isPathEffect: (obj: SkJSIInstance<string> | null) => obj is SkPathEffect;
 export declare enum Path1DEffectStyle {
     Translate = 0,

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

@@ -7,4 +7,4 @@ export interface SkPoint {
     readonly x: number;
     readonly y: number;
 }
-export declare type Vector = SkPoint;
+export type Vector = SkPoint;

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

@@ -1,2 +1,2 @@
 import type { SkJSIInstance } from "./JsiInstance";
-export declare type SkRSXform = SkJSIInstance<"RSXform">;
+export type SkRSXform = SkJSIInstance<"RSXform">;

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

@@ -2,8 +2,8 @@ import type { SkJSIInstance } from "../JsiInstance";
 import type { Vector } from "../Point";
 import type { SkRuntimeEffect, SkRuntimeShaderBuilder } from "../RuntimeEffect";
 export declare const isShader: (obj: SkJSIInstance<string> | null) => obj is SkShader;
-export declare type SkShader = SkJSIInstance<"Shader">;
-export declare type Uniform = number | Vector | Float32Array | Uniform[];
+export type SkShader = SkJSIInstance<"Shader">;
+export type Uniform = number | Vector | Float32Array | Uniform[];
 export interface Uniforms {
     [name: string]: Uniform;
 }

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

@@ -1,7 +1,7 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkFont } from "./Font/Font";
 import type { SkRSXform } from "./RSXform";
-export declare type SkTextBlob = SkJSIInstance<"TextBlob">;
+export type SkTextBlob = SkJSIInstance<"TextBlob">;
 export interface TextBlobFactory {
     /**
      * Return a TextBlob with a single run of text.

package/lib/typescript/src/skia/web/JsiSkData.d.ts

@@ -1,7 +1,7 @@
 import type { CanvasKit } from "canvaskit-wasm";
 import type { SkData } from "../types";
 import { HostObject } from "./Host";
-declare type Data = ArrayBuffer;
+type Data = ArrayBuffer;
 export declare class JsiSkData extends HostObject<Data, "Data"> implements SkData {
     constructor(CanvasKit: CanvasKit, ref: Data);
     dispose: () => void;

package/lib/typescript/src/skia/web/JsiSkRSXform.d.ts

@@ -1,7 +1,7 @@
 import type { CanvasKit } from "canvaskit-wasm";
 import type { SkRSXform } from "../types";
 import { HostObject } from "./Host";
-export declare type RSXform = Float32Array;
+export type RSXform = Float32Array;
 export declare class JsiSkRSXform extends HostObject<RSXform, "RSXform"> implements SkRSXform {
     constructor(CanvasKit: CanvasKit, ref: RSXform);
     dispose: () => void;

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

@@ -0,0 +1,6 @@
+import type { TurboModule } from "react-native/Libraries/TurboModule/RCTExport";
+export interface Spec extends TurboModule {
+    install: () => boolean;
+}
+declare const _default: Spec;
+export default _default;

package/lib/typescript/src/specs/NativeSkiaModule.web.d.ts

@@ -0,0 +1,2 @@
+import { throwOnMissingReanimated } from "../external/reanimated/moduleWrapper";
+export default throwOnMissingReanimated;

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

@@ -0,0 +1,8 @@
+/// <reference types="react-native/types/modules/Codegen" />
+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>;
+export default _default;

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

@@ -0,0 +1,8 @@
+/// <reference types="react-native/types/modules/Codegen" />
+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>;
+export default _default;

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

@@ -0,0 +1,8 @@
+/// <reference types="react-native/types/modules/Codegen" />
+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>;
+export default _default;

package/lib/typescript/src/values/selector.d.ts

@@ -1,5 +1,5 @@
 import type { SkiaValue } from "./types";
-export declare type SkiaSelector<TReturn, TInput = unknown> = {
+export type SkiaSelector<TReturn, TInput = unknown> = {
     value: SkiaValue<TInput>;
     selector: (v: TInput) => TReturn;
 };

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

@@ -63,5 +63,5 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
     private onCancel;
     private onEnd;
     private onLayout;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -27,5 +27,5 @@ export declare class SkiaDomView extends React.Component<SkiaDomViewProps> {
      * Clear up the dom node when unmounting to release resources.
      */
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -23,5 +23,5 @@ export declare class SkiaPictureView extends React.Component<SkiaPictureViewProp
      * @param values Values to register
      */
     registerValues(values: SkiaValue<unknown>[]): () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -26,5 +26,5 @@ export declare class SkiaView extends React.Component<SkiaDrawViewProps> {
      * @param values Values to register
      */
     registerValues(values: SkiaValue<unknown>[]): () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -3,8 +3,8 @@ import type { GroupProps, RenderNode } from "../dom/types";
 import type { SkCanvas, SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SkiaMutableValue, SkiaValue } from "../values";
 import type { SharedValueType } from "../renderer/processors/Animations/Animations";
-export declare type DrawMode = "continuous" | "default";
-export declare type NativeSkiaViewProps = ViewProps & {
+export type DrawMode = "continuous" | "default";
+export type NativeSkiaViewProps = ViewProps & {
     mode?: DrawMode;
     debug?: boolean;
 };
@@ -28,17 +28,17 @@ export interface DrawingInfo {
     timestamp: number;
     touches: Array<Array<TouchInfo>>;
 }
-export declare type ExtendedTouchInfo = TouchInfo & {
+export type ExtendedTouchInfo = TouchInfo & {
     velocityX: number;
     velocityY: number;
 };
-export declare type TouchHandlers = {
+export type TouchHandlers = {
     onStart?: (touchInfo: TouchInfo) => void;
     onActive?: (touchInfo: ExtendedTouchInfo) => void;
     onEnd?: (touchInfo: ExtendedTouchInfo) => void;
 };
-export declare type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
-export declare type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
+export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
+export type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
 /**
  * Listener interface for value changes
  */

package/lib/typescript/src/web/WithSkiaWeb.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps, ComponentType } from "react";
-import { Suspense } from "react";
+import React, { Suspense } from "react";
 import { LoadSkiaWeb } from "./LoadSkiaWeb";
 interface WithSkiaProps {
     fallback?: ComponentProps<typeof Suspense>["fallback"];
@@ -8,5 +8,5 @@ interface WithSkiaProps {
     }>;
     opts?: Parameters<typeof LoadSkiaWeb>[0];
 }
-export declare const WithSkiaWeb: ({ getComponent, fallback, opts, }: WithSkiaProps) => JSX.Element;
+export declare const WithSkiaWeb: ({ getComponent, fallback, opts, }: WithSkiaProps) => React.JSX.Element;
 export {};

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.216",
+  "version": "0.1.218",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -86,22 +86,22 @@
     "@types/jest": "29.5.6",
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.1",
-    "@types/react-native": "0.70.6",
+    "@types/react": "^18.2.37",
     "@types/react-reconciler": "^0.26.7",
     "@types/ws": "^8.5.3",
     "eslint": "8.21.0",
-    "eslint-config-react-native-wcandillon": "3.9.0",
+    "eslint-config-react-native-wcandillon": "3.10.2",
     "eslint-plugin-reanimated": "2.0.0",
     "jest": "29.6.4",
     "merge-dirs": "^0.2.1",
     "pixelmatch": "^5.3.0",
     "pngjs": "^6.0.0",
     "react": "18.1.0",
-    "react-native": "0.71.7",
+    "react-native": "0.72.6",
     "react-native-builder-bob": "^0.18.2",
     "react-native-reanimated": "^3.5.4",
-    "ts-jest": "^28.0.7",
-    "typescript": "4.8.3",
+    "ts-jest": "29.1.1",
+    "typescript": "5.1.6",
     "ws": "^8.11.0"
   },
   "dependencies": {
@@ -112,6 +112,14 @@
     "node_modules/",
     "lib/"
   ],
+  "codegenConfig": {
+    "name": "rnskia",
+    "type": "all",
+    "jsSrcsDir": "src/specs",
+    "android": {
+      "javaPackageName": "com.shopify.reactnative.skia"
+    }
+  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
@@ -126,6 +134,10 @@
       "typescript"
     ]
   },
+  "resolutions": {
+    "@typescript-eslint/eslint-plugin": "6.10.0",
+    "@typescript-eslint/parser": "6.10.0"
+  },
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index.js",
   "react-native": "lib/module/index.js"

package/react-native-skia.podspec

@@ -44,8 +44,16 @@ Pod::Spec.new do |s|
     "cpp/**/*.{h,cpp}"
   ]
 
-  s.dependency "React"
-  s.dependency "React-callinvoker"
-  s.dependency "React-Core"
+
+  if defined?(install_modules_dependencies()) != nil
+    install_modules_dependencies(s)
+    s.dependency "React"
+    s.dependency "React-callinvoker"
+    s.dependency "React-Core"
+  else
+    s.dependency "React"
+    s.dependency "React-callinvoker"
+    s.dependency "React-Core"
+  end
 end
 

package/src/Platform/IPlatform.ts

@@ -1,13 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { HostComponent, NodeHandle, ViewComponent } from "react-native";
+import type { NodeHandle, ViewComponent } from "react-native";
 
 import type { DataModule } from "../skia/types";
 
 export interface IPlatform {
   OS: string;
-  requireNativeComponent: <T>(viewName: string) => HostComponent<T>;
   PixelRatio: number;
-  NativeModules: Record<string, any>;
   findNodeHandle: (
     componentOrHandle:
       | null

package/src/Platform/Platform.ts

@@ -1,10 +1,8 @@
 import {
   Image,
   PixelRatio,
-  requireNativeComponent,
   Platform as RNPlatform,
   findNodeHandle,
-  NativeModules,
   View,
 } from "react-native";
 
@@ -16,13 +14,11 @@ import type { IPlatform } from "./IPlatform";
 export const Platform: IPlatform = {
   OS: RNPlatform.OS,
   PixelRatio: PixelRatio.get(),
-  requireNativeComponent,
   resolveAsset: (source: DataModule) => {
     return isRNModule(source)
       ? Image.resolveAssetSource(source).uri
       : source.default;
   },
   findNodeHandle,
-  NativeModules,
   View,
 };

package/src/Platform/Platform.web.tsx

@@ -117,9 +117,6 @@ const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
 export const Platform: IPlatform = {
   OS: "web",
   PixelRatio: window.devicePixelRatio,
-  requireNativeComponent: () => {
-    throw new Error("requireNativeComponent is not supported on the web");
-  },
   resolveAsset: (source: DataModule) => {
     if (isRNModule(source)) {
       throw new Error(
@@ -131,6 +128,5 @@ export const Platform: IPlatform = {
   findNodeHandle: () => {
     throw new Error("findNodeHandle is not supported on the web");
   },
-  NativeModules: {},
   View,
 };

package/src/dom/types/DrawingContext.ts

@@ -137,7 +137,7 @@ class ConcatablePaint {
 
   private setValue<T extends keyof typeof this>(
     key: T,
-    value?: typeof this[T]
+    value?: (typeof this)[T]
   ) {
     if (value !== undefined) {
       this[key] = value;

package/src/external/reanimated/renderHelpers.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable reanimated/js-function-in-worklet */
+
 import type { Container } from "../../renderer/Container";
 import type { AnimatedProps } from "../../renderer/processors";
 import type { Node } from "../../dom/types";

package/src/renderer/Canvas.tsx

@@ -11,6 +11,7 @@ import type {
   ReactNode,
   MutableRefObject,
   ForwardedRef,
+  FunctionComponent,
 } from "react";
 
 import { SkiaDomView, SkiaView } from "../views";
@@ -126,7 +127,7 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       );
     }
   }
-) as React.FC<CanvasProps & React.RefAttributes<SkiaDomView>>;
+) as FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;
 
 /**
  * Combines a list of refs into a single ref. This can be used to provide

package/src/renderer/Reconciler.tsx

@@ -50,7 +50,8 @@ export class SkiaRoot {
   }
 
   render(element: ReactNode) {
-    skiaReconciler.updateContainer(element, this.root, null, () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    skiaReconciler.updateContainer(element as any, this.root, null, () => {
       hostDebug("updateContainer");
     });
   }

package/src/skia/NativeSetup.ts

@@ -1,8 +1,9 @@
 import { Platform } from "../Platform";
+import NativeSkiaModule from "../specs/NativeSkiaModule";
 
 if (Platform.OS !== "web" && global.SkiaApi == null) {
   // Initialize RN Skia
-  const SkiaModule = Platform.NativeModules.RNSkia;
+  const SkiaModule = NativeSkiaModule;
   if (SkiaModule == null || typeof SkiaModule.install !== "function") {
     throw new Error(
       "Native RNSkia Module cannot be found! Make sure you correctly " +

package/src/specs/NativeSkiaModule.ts

@@ -0,0 +1,9 @@
+import type { TurboModule } from "react-native/Libraries/TurboModule/RCTExport";
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {
+  install: () => boolean;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default TurboModuleRegistry.getEnforcing<Spec>("RNSkiaModule");

package/src/specs/NativeSkiaModule.web.ts

@@ -0,0 +1,4 @@
+import { throwOnMissingReanimated } from "../external/reanimated/moduleWrapper";
+
+// eslint-disable-next-line import/no-default-export
+export default throwOnMissingReanimated;

package/src/specs/SkiaDomViewNativeComponent.ts

@@ -0,0 +1,10 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+import type { ViewProps } from "react-native";
+
+export interface NativeProps extends ViewProps {
+  mode: string;
+  debug?: boolean;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default codegenNativeComponent<NativeProps>("SkiaDomView");

package/src/specs/SkiaDrawViewNativeComponent.ts

@@ -0,0 +1,10 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+import type { ViewProps } from "react-native";
+
+export interface NativeProps extends ViewProps {
+  mode: string;
+  debug?: boolean;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default codegenNativeComponent<NativeProps>("SkiaDrawView");

package/src/specs/SkiaPictureViewNativeComponent.ts

@@ -0,0 +1,10 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+import type { ViewProps } from "react-native";
+
+export interface NativeProps extends ViewProps {
+  mode: string;
+  debug?: boolean;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default codegenNativeComponent<NativeProps>("SkiaPictureView");

package/src/views/SkiaDomView.tsx

@@ -4,14 +4,15 @@ import type { HostComponent } from "react-native";
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 import { Platform } from "../Platform";
+import SkiaDomViewNativeComponent from "../specs/SkiaDomViewNativeComponent";
 
 import { SkiaViewApi } from "./api";
 import { SkiaViewNativeId } from "./SkiaView";
-import type { NativeSkiaViewProps, SkiaDomViewProps } from "./types";
+import type { SkiaDomViewProps } from "./types";
 
 const NativeSkiaDomView: HostComponent<SkiaDomViewProps> =
   Platform.OS !== "web"
-    ? Platform.requireNativeComponent<NativeSkiaViewProps>("SkiaDomView")
+    ? SkiaDomViewNativeComponent
     : // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (null as any);
 

package/src/views/SkiaPictureView.tsx

@@ -2,14 +2,13 @@ import React from "react";
 
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
-import { Platform } from "../Platform";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
 
 import { SkiaViewApi } from "./api";
 import { SkiaViewNativeId } from "./SkiaView";
-import type { NativeSkiaViewProps, SkiaPictureViewProps } from "./types";
+import type { SkiaPictureViewProps } from "./types";
 
-const NativeSkiaPictureView =
-  Platform.requireNativeComponent<NativeSkiaViewProps>("SkiaPictureView");
+const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 
 export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   constructor(props: SkiaPictureViewProps) {
@@ -78,7 +77,7 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
       <NativeSkiaPictureView
         collapsable={false}
         nativeID={`${this._nativeId}`}
-        mode={mode}
+        mode={mode ?? "default"}
         debug={debug}
         {...viewProps}
       />