@shopify/react-native-skia 0.1.215 → 0.1.218

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.215",
+  "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";
@@ -15,6 +15,13 @@ import {
 
 const _bindings = new WeakMap<Node<unknown>, unknown>();
 
+export const unbindReanimatedNode = (node: Node<unknown>) => {
+  const previousMapperId = _bindings.get(node);
+  if (previousMapperId !== undefined) {
+    stopMapper(previousMapperId as number);
+  }
+};
+
 export function extractReanimatedProps(props: AnimatedProps<any>) {
   if (!HAS_REANIMATED3 && !HAS_REANIMATED2) {
     return [props, {}];
@@ -76,7 +83,7 @@ export function bindReanimatedProps(
   node: Node<any>,
   reanimatedProps: AnimatedProps<any>
 ) {
-  if (HAS_REANIMATED2) {
+  if (HAS_REANIMATED2 && !HAS_REANIMATED3) {
     return bindReanimatedProps2(container, node, reanimatedProps);
   }
   if (!HAS_REANIMATED3) {
@@ -92,8 +99,10 @@ export function bindReanimatedProps(
     const { SkiaViewApi } = global;
     const mapperId = startMapper(() => {
       "worklet";
-      for (const propName in reanimatedProps) {
-        node && node.setProp(propName, reanimatedProps[propName].value);
+      if (node) {
+        for (const propName in reanimatedProps) {
+          node.setProp(propName, reanimatedProps[propName].value);
+        }
       }
       // On React Native we use the SkiaViewApi to redraw because it can
       // run on the worklet thread (container.redraw can't)

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/HostConfig.ts

@@ -7,6 +7,7 @@ import type { SkiaValue } from "../values";
 import {
   bindReanimatedProps,
   extractReanimatedProps,
+  unbindReanimatedNode,
 } from "../external/reanimated/renderHelpers";
 
 import type { Container } from "./Container";
@@ -56,6 +57,7 @@ const appendNode = (parent: Node<unknown>, child: Node<unknown>) => {
 };
 
 const removeNode = (parent: Node<unknown>, child: Node<unknown>) => {
+  unbindReanimatedNode(child);
   return parent.removeChild(child);
 };
 

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}
       />

package/src/views/SkiaView.tsx

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