@shopify/react-native-skia 0.1.175 → 0.1.178

package/lib/module/skia/web/JsiSkSurfaceFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["Host","JsiSkSurface","JsiSkSurfaceFactory","constructor","CanvasKit","Make","width","height","surface","MakeSurface","MakeOffscreen","OC","globalThis","OffscreenCanvas","undefined","offscreen","MakeWebGLCanvasSurface"],"sources":["JsiSkSurfaceFactory.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { SurfaceFactory } from \"../types\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkSurface } from \"./JsiSkSurface\";\n\nexport class JsiSkSurfaceFactory extends Host implements SurfaceFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(width: number, height: number) {\n    const surface = this.CanvasKit.MakeSurface(width, height);\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n\n  MakeOffscreen(width: number, height: number) {\n    // OffscreenCanvas may be unvailable in some environments.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const OC = (globalThis as any).OffscreenCanvas;\n    let surface: Surface | null;\n    if (OC === undefined) {\n      surface = this.CanvasKit.MakeSurface(width, height);\n    } else {\n      const offscreen = new OC(width, height);\n      surface = this.CanvasKit.MakeWebGLCanvasSurface(\n        offscreen as unknown as HTMLCanvasElement\n      );\n    }\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n}\n"],"mappings":"AAIA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,OAAO,MAAMC,mBAAN,SAAkCF,IAAlC,CAAiE;EACtEG,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,IAAI,CAACC,KAAD,EAAgBC,MAAhB,EAAgC;IAClC,MAAMC,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAhB;;IACA,IAAI,CAACC,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIP,YAAJ,CAAiB,KAAKG,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;EAEDE,aAAa,CAACJ,KAAD,EAAgBC,MAAhB,EAAgC;IAC3C;IACA;IACA,MAAMI,EAAE,GAAIC,UAAD,CAAoBC,eAA/B;IACA,IAAIL,OAAJ;;IACA,IAAIG,EAAE,KAAKG,SAAX,EAAsB;MACpBN,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAV;IACD,CAFD,MAEO;MACL,MAAMQ,SAAS,GAAG,IAAIJ,EAAJ,CAAOL,KAAP,EAAcC,MAAd,CAAlB;MACAC,OAAO,GAAG,KAAKJ,SAAL,CAAeY,sBAAf,CACRD,SADQ,CAAV;IAGD;;IACD,IAAI,CAACP,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIP,YAAJ,CAAiB,KAAKG,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;AA9BqE"}
+{"version":3,"names":["Host","JsiSkSurface","JsiSkSurfaceFactory","constructor","CanvasKit","Make","width","height","surface","MakeSurface","MakeOffscreen","OC","globalThis","OffscreenCanvas","undefined","offscreen","webglContext","GetWebGLContext","grContext","MakeWebGLContext","Error","MakeRenderTarget"],"sources":["JsiSkSurfaceFactory.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { SurfaceFactory } from \"../types\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkSurface } from \"./JsiSkSurface\";\n\nexport class JsiSkSurfaceFactory extends Host implements SurfaceFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(width: number, height: number) {\n    const surface = this.CanvasKit.MakeSurface(width, height);\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n\n  MakeOffscreen(width: number, height: number) {\n    // OffscreenCanvas may be unvailable in some environments.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const OC = (globalThis as any).OffscreenCanvas;\n    let surface: Surface | null;\n    if (OC === undefined) {\n      surface = this.CanvasKit.MakeSurface(width, height);\n    } else {\n      const offscreen = new OC(width, height);\n      const webglContext = this.CanvasKit.GetWebGLContext(offscreen);\n      const grContext = this.CanvasKit.MakeWebGLContext(webglContext);\n      if (!grContext) {\n        throw new Error(\"Could not make a graphics context\");\n      }\n      surface = this.CanvasKit.MakeRenderTarget(grContext, width, height);\n    }\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n}\n"],"mappings":"AAIA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,OAAO,MAAMC,mBAAN,SAAkCF,IAAlC,CAAiE;EACtEG,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,IAAI,CAACC,KAAD,EAAgBC,MAAhB,EAAgC;IAClC,MAAMC,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAhB;;IACA,IAAI,CAACC,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIP,YAAJ,CAAiB,KAAKG,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;EAEDE,aAAa,CAACJ,KAAD,EAAgBC,MAAhB,EAAgC;IAC3C;IACA;IACA,MAAMI,EAAE,GAAIC,UAAD,CAAoBC,eAA/B;IACA,IAAIL,OAAJ;;IACA,IAAIG,EAAE,KAAKG,SAAX,EAAsB;MACpBN,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAV;IACD,CAFD,MAEO;MACL,MAAMQ,SAAS,GAAG,IAAIJ,EAAJ,CAAOL,KAAP,EAAcC,MAAd,CAAlB;MACA,MAAMS,YAAY,GAAG,KAAKZ,SAAL,CAAea,eAAf,CAA+BF,SAA/B,CAArB;MACA,MAAMG,SAAS,GAAG,KAAKd,SAAL,CAAee,gBAAf,CAAgCH,YAAhC,CAAlB;;MACA,IAAI,CAACE,SAAL,EAAgB;QACd,MAAM,IAAIE,KAAJ,CAAU,mCAAV,CAAN;MACD;;MACDZ,OAAO,GAAG,KAAKJ,SAAL,CAAeiB,gBAAf,CAAgCH,SAAhC,EAA2CZ,KAA3C,EAAkDC,MAAlD,CAAV;IACD;;IACD,IAAI,CAACC,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIP,YAAJ,CAAiB,KAAKG,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;AAjCqE"}

package/lib/typescript/src/external/reanimated/index.d.ts

@@ -1 +1,2 @@
 export * from "./useSharedValueEffect";
+export * from "./renderHelpers";

package/lib/typescript/src/external/reanimated/moduleWrapper.d.ts

@@ -0,0 +1,8 @@
+import type { SharedValueType } from "../../renderer/processors/Animations";
+export declare const HAS_REANIMATED: boolean;
+export declare function throwOnIncompatibleReanimatedVersion(): void;
+export declare const useSharedValue: any;
+export declare const startMapper: any;
+export declare const stopMapper: any;
+export declare const runOnJS: any;
+export declare const isSharedValue: <T>(value: unknown) => value is SharedValueType<T>;

package/lib/typescript/src/external/reanimated/renderHelpers.d.ts

@@ -0,0 +1,5 @@
+import type { Container } from "../../renderer/Container";
+import type { AnimatedProps } from "../../renderer/processors";
+import type { Node } from "../../dom/types";
+export declare function extractReanimatedProps(props: AnimatedProps<any>): AnimatedProps<any, never>[];
+export declare function bindReanimatedProps(container: Container, node: Node<any>, reanimatedProps: AnimatedProps<any>): void;

package/lib/typescript/src/external/reanimated/useSharedValueEffect.d.ts

@@ -1,11 +1,8 @@
-declare type SharedValueTypeWrapper<T = number> = {
-    value: T;
-};
+import type { SharedValueType } from "../../renderer/processors/Animations";
 /**
  * Connects a shared value from reanimated to a SkiaView or Canvas
  * so whenever the shared value changes the SkiaView will redraw.
  * @param cb Callback that will be called whenever the shared value changes.
  * @param values One or more shared values to listen for.
  */
-export declare const useSharedValueEffect: <T = number>(cb: () => void, value: SharedValueTypeWrapper<T>, ...values: SharedValueTypeWrapper<T>[]) => void;
-export {};
+export declare const useSharedValueEffect: <T = number>(cb: () => void, value: SharedValueType<T>, ...values: SharedValueType<T>[]) => void;

package/lib/typescript/src/headless/index.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+export * from "../renderer/components";
+export declare const draw: (element: ReactNode, width: number, height: number) => any;

package/lib/typescript/src/mock/index.d.ts

@@ -1,6 +1,5 @@
 import type { Skia as SkiaApi } from "../skia/types";
 import type * as SkiaExports from "../skia";
-import type * as ExternalExports from "../external";
 import type * as ValueExports from "../values";
 import type * as AnimationExports from "../animation";
 import { ShaderLib } from "../renderer/components/shaders/ShaderLib";
@@ -9,7 +8,7 @@ export declare const vec: (x?: number, y?: number) => {
     x: number;
     y: number;
 };
-export declare const Mock: typeof SkiaExports & typeof ExternalExports & typeof ValueExports & typeof AnimationExports & {
+export declare const Mock: typeof SkiaExports & typeof ValueExports & typeof AnimationExports & {
     createDrawing: () => any;
     createDeclaration: () => any;
     ShaderLib: typeof ShaderLib;

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

@@ -4,9 +4,10 @@ import type { DependencyManager } from "./DependencyManager";
 export declare class Container {
     depMgr: DependencyManager;
     redraw: () => void;
+    getNativeId: () => number;
     private _root;
     Sk: SkDOM;
-    constructor(Skia: Skia, depMgr: DependencyManager, redraw?: () => void);
+    constructor(Skia: Skia, depMgr: DependencyManager, redraw?: () => void, getNativeId?: () => number);
     draw(ctx: DrawingContext): void;
     get root(): RenderNode<GroupProps>;
 }

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

@@ -5,7 +5,7 @@ declare type RegisterValues = (values: Array<SkiaValue<unknown>>) => () => void;
 export declare class SkiaRoot {
     private root;
     private container;
-    constructor(Skia: Skia, registerValues?: RegisterValues, redraw?: () => void);
+    constructor(Skia: Skia, registerValues?: RegisterValues, redraw?: () => void, getNativeId?: () => number);
     render(element: ReactNode): void;
     unmount(): void;
     get dom(): import("..").RenderNode<import("..").GroupProps>;

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

@@ -1,11 +1,14 @@
 import type { SkiaSelector, SkiaValue } from "../../../values";
+export declare type SharedValueType<T = number> = {
+    value: T;
+};
 export declare const isValue: (value: unknown) => value is SkiaValue<unknown>;
 export declare const isSelector: <T, R>(value: unknown) => value is {
     selector: (v: T) => R;
     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>;
+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> = {
     [K in keyof T]: K extends "children" ? T[K] : K extends O ? T[K] : AnimatedProp<T[K]>;
 };

package/libs/ios/libskia.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskia.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskia.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libskottie.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskottie.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskottie.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libsksg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsksg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsksg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

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

package/react-native-skia.podspec

@@ -24,7 +24,12 @@ Pod::Spec.new do |s|
   s.pod_target_xcconfig = {
     'GCC_PREPROCESSOR_DEFINITIONS' => '$(inherited) SK_GL=1 SK_METAL=1',
     'CLANG_CXX_LANGUAGE_STANDARD' => 'c++17',
-    'DEFINES_MODULE' => 'YES'
+    'DEFINES_MODULE' => 'YES',
+    "HEADER_SEARCH_PATHS" => '"$(PODS_ROOT)/../../node_modules/@shopify/react-native-skia/cpp/" ' + 
+                             '"$(PODS_ROOT)/../../node_modules/@shopify/react-native-skia/cpp/api/" ' + 
+                             '"$(PODS_ROOT)/../../node_modules/@shopify/react-native-skia/cpp/rnskia/" ' + 
+                             '"$(PODS_ROOT)/../../node_modules/@shopify/react-native-skia/cpp/rnskia/dom/" ' + 
+                             '"$(PODS_ROOT)/../../node_modules/@shopify/react-native-skia/cpp/skia/"'
   }
 
   s.frameworks = 'GLKit', 'MetalKit'
@@ -40,33 +45,9 @@ Pod::Spec.new do |s|
   # All iOS cpp/h files
   s.source_files = [
     "ios/**/*.{h,c,cc,cpp,m,mm,swift}",  
+    "cpp/**/*.{h,cpp}"    
   ]
 
-  s.subspec 'SkiaHeaders' do |ss|
-    ss.header_mappings_dir = 'cpp/skia'
-    ss.source_files = "cpp/skia/**/*.{h,cpp}"
-  end
-
-  s.subspec 'Utils' do |ss|
-    ss.header_mappings_dir = 'cpp/utils'
-    ss.source_files = "cpp/utils/**/*.{h,cpp}"
-  end
-
-  s.subspec 'Jsi' do |ss|
-    ss.header_mappings_dir = 'cpp/jsi'
-    ss.source_files = "cpp/jsi/**/*.{h,cpp}"
-  end
-
-  s.subspec 'Api' do |ss|
-    ss.header_mappings_dir = 'cpp/api'
-    ss.source_files = "cpp/api/**/*.{h,cpp}"
-  end
-
-  s.subspec 'RNSkia' do |ss|
-    ss.header_mappings_dir = 'cpp/rnskia'
-    ss.source_files = "cpp/rnskia/**/*.{h,cpp}"
-  end
-
   s.dependency "React"
   s.dependency "React-callinvoker"
   s.dependency "React-Core"

package/src/external/reanimated/index.ts

@@ -1 +1,2 @@
 export * from "./useSharedValueEffect";
+export * from "./renderHelpers";

package/src/external/reanimated/moduleWrapper.ts

@@ -0,0 +1,62 @@
+import { useMemo } from "react";
+
+import type { SharedValueType } from "../../renderer/processors/Animations";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let Reanimated: any;
+
+try {
+  Reanimated = require("react-native-reanimated");
+} catch (e) {
+  // Ignore
+}
+
+export const HAS_REANIMATED = !!Reanimated;
+
+function throwOnMissingReanimated() {
+  throw new Error(
+    "Reanimated was not found, make sure react-native-reanimated package is installed if you want to use \
+    react-naitve-skia's integration layer API."
+  );
+}
+
+let ReanimatedVersionTested = false;
+
+export function throwOnIncompatibleReanimatedVersion() {
+  if (ReanimatedVersionTested) {
+    // we avoid testing version more than once as it won't change and we throw
+    // an error when version is incompatible
+    return;
+  }
+  ReanimatedVersionTested = true;
+  const reanimatedVersion =
+    // eslint-disable-next-line import/extensions
+    require("react-native-reanimated/package.json").version;
+  // The first compatible version is 3.0.0 but we need to exclude 3.0.0 pre-releases
+  // as they have limited support for the used API.
+  if (
+    !reanimatedVersion ||
+    reanimatedVersion < "3.0.0" ||
+    reanimatedVersion.includes("3.0.0-")
+  ) {
+    throw new Error(
+      `Reanimated version ${reanimatedVersion} is not supported, please upgrade to 3.0.0 or newer.`
+    );
+  }
+}
+
+export const useSharedValue =
+  Reanimated?.useSharedValue ||
+  ((value: number) => useMemo(() => ({ value }), [value]));
+
+export const startMapper = Reanimated?.startMapper || throwOnMissingReanimated;
+export const stopMapper = Reanimated?.stopMapper || throwOnMissingReanimated;
+export const runOnJS = Reanimated?.runOnJS || throwOnMissingReanimated;
+export const isSharedValue = <T>(
+  value: unknown
+): value is SharedValueType<T> => {
+  if (!Reanimated) {
+    throwOnMissingReanimated();
+  }
+  return !!value && Reanimated.isSharedValue(value);
+};

package/src/external/reanimated/renderHelpers.ts

@@ -0,0 +1,74 @@
+/* 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";
+
+import {
+  startMapper,
+  stopMapper,
+  isSharedValue,
+  throwOnIncompatibleReanimatedVersion,
+  HAS_REANIMATED,
+} from "./moduleWrapper";
+
+const _bindings = new WeakMap<Node<unknown>, unknown>();
+
+export function extractReanimatedProps(props: AnimatedProps<any>) {
+  if (!HAS_REANIMATED) {
+    return [props, {}];
+  }
+  const reanimatedProps = {} as AnimatedProps<any>;
+  const otherProps = {} as AnimatedProps<any>;
+  for (const propName in props) {
+    if (propName === "children") {
+      continue;
+    }
+    const propValue = props[propName];
+    if (isSharedValue(propValue)) {
+      reanimatedProps[propName] = propValue;
+      otherProps[propName] = propValue.value;
+    } else {
+      otherProps[propName] = propValue;
+    }
+  }
+  return [otherProps, reanimatedProps];
+}
+
+export function bindReanimatedProps(
+  container: Container,
+  node: Node<any>,
+  reanimatedProps: AnimatedProps<any>
+) {
+  if (!HAS_REANIMATED) {
+    return;
+  }
+  if (__DEV__) {
+    throwOnIncompatibleReanimatedVersion();
+  }
+  const sharedValues = Object.values(reanimatedProps);
+  const previousMapperId = _bindings.get(node);
+  if (previousMapperId !== undefined) {
+    stopMapper(previousMapperId);
+  }
+  if (sharedValues.length > 0) {
+    const viewId = container.getNativeId();
+    const { SkiaViewApi } = global;
+    const mapperId = startMapper(() => {
+      "worklet";
+      for (const propName in reanimatedProps) {
+        node && 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)
+      // if SkiaViewApi is undefined, we are on web and container.redraw()
+      // can safely be invoked
+      if (SkiaViewApi) {
+        SkiaViewApi.requestRedraw(viewId);
+      } else {
+        container.redraw();
+      }
+    }, sharedValues);
+    _bindings.set(node, mapperId);
+  }
+}

package/src/external/reanimated/useSharedValueEffect.ts

@@ -1,22 +1,14 @@
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let Reanimated: any;
+import type { SharedValueType } from "../../renderer/processors/Animations";
 
-try {
-  Reanimated = require("react-native-reanimated");
-} catch (e) {
-  // Ignore
-}
-
-type SharedValueTypeWrapper<T = number> = {
-  value: T;
-};
-
-const useSharedValueWrapper =
-  Reanimated?.useSharedValue === undefined
-    ? (value: number) => useMemo(() => ({ value }), [value])
-    : Reanimated.useSharedValue;
+import {
+  HAS_REANIMATED,
+  useSharedValue,
+  runOnJS,
+  startMapper,
+  stopMapper,
+} from "./moduleWrapper";
 
 /**
  * Connects a shared value from reanimated to a SkiaView or Canvas
@@ -26,19 +18,21 @@ const useSharedValueWrapper =
  */
 export const useSharedValueEffect = <T = number>(
   cb: () => void,
-  value: SharedValueTypeWrapper<T>,
-  ...values: SharedValueTypeWrapper<T>[]
+  value: SharedValueType<T>,
+  ...values: SharedValueType<T>[]
 ) => {
-  const input = useSharedValueWrapper(0);
+  console.warn(
+    `useSharedValueEffect() is now deprecated, you can use Reanimated values directly.
+Learn more at https://shopify.github.io/react-native-skia/.`
+  );
+  const input = useSharedValue(0);
 
   useEffect(() => {
-    if (!Reanimated) {
+    if (!HAS_REANIMATED) {
       console.warn(
         "Reanimated was not found and the useSharedValueEffect hook will have no effect."
       );
     } else {
-      const { runOnJS, startMapper, stopMapper } = Reanimated;
-
       // Start a mapper in Reanimated
       const mapperId = startMapper(
         () => {

package/src/headless/index.ts

@@ -0,0 +1,31 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
+import type { ReactNode } from "react";
+
+import { JsiSkApi } from "../skia/web";
+import { SkiaRoot } from "../renderer/Reconciler";
+import { JsiDrawingContext } from "../dom/types";
+
+export * from "../renderer/components";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let Skia: any;
+
+export const draw = (element: ReactNode, width: number, height: number) => {
+  if (!Skia) {
+    Skia = JsiSkApi(CanvasKit);
+  }
+  const surface = Skia.Surface.MakeOffscreen(width, height);
+  if (surface === null) {
+    throw new Error("Couldn't create surface!");
+  }
+  const root = new SkiaRoot(Skia);
+  root.render(element);
+  const canvas = surface.getCanvas();
+  const ctx = new JsiDrawingContext(Skia, canvas);
+  root.dom.render(ctx);
+  surface.flush();
+  const image = surface.makeImageSnapshot();
+  return image;
+};

package/src/mock/index.ts

@@ -6,10 +6,8 @@ import * as ValuesHooks from "../values/hooks";
 import { Selector } from "../values/selector";
 import * as BaseSkia from "../skia/types";
 import type * as SkiaExports from "../skia";
-import type * as ExternalExports from "../external";
 import type * as ValueExports from "../values";
 import type * as AnimationExports from "../animation";
-import { useSharedValueEffect } from "../external/reanimated/useSharedValueEffect";
 import * as timingFunctions from "../animation/timing";
 import * as springFunctions from "../animation/spring";
 import * as decayFunctions from "../animation/decay";
@@ -35,7 +33,6 @@ export const Skia: SkiaApi = new Stub() as any;
 export const vec = (x?: number, y?: number) => ({ x: x ?? 0, y: y ?? x ?? 0 });
 
 export const Mock: typeof SkiaExports &
-  typeof ExternalExports &
   typeof ValueExports &
   typeof AnimationExports & {
     createDrawing: () => any;
@@ -82,8 +79,6 @@ export const Mock: typeof SkiaExports &
   bottomRight: Noop,
   center: Noop,
   processTransform2d: Noop,
-  // ExternalExports
-  useSharedValueEffect,
   // ValueExports
   ...Values,
   ...ValuesHooks,

package/src/renderer/Canvas.tsx

@@ -37,6 +37,10 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
     const redraw = useCallback(() => {
       innerRef.current?.redraw();
     }, [innerRef]);
+    const getNativeId = useCallback(() => {
+      const id = innerRef.current?.nativeId ?? -1;
+      return id;
+    }, [innerRef]);
 
     const registerValues = useCallback(
       (values: Array<SkiaValue<unknown>>) => {
@@ -48,8 +52,8 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       [ref]
     );
     const root = useMemo(
-      () => new SkiaRoot(Skia, registerValues, redraw),
-      [redraw, registerValues]
+      () => new SkiaRoot(Skia, registerValues, redraw, getNativeId),
+      [redraw, registerValues, getNativeId]
     );
 
     // Render effect

package/src/renderer/Container.tsx

@@ -15,7 +15,8 @@ export class Container {
   constructor(
     Skia: Skia,
     public depMgr: DependencyManager,
-    public redraw: () => void = () => {}
+    public redraw: () => void = () => {},
+    public getNativeId: () => number = () => 0
   ) {
     this.Sk = new JsiSkDOM({ Skia, depMgr });
     this._root = this.Sk.Group();

package/src/renderer/HostConfig.ts

@@ -4,6 +4,10 @@ import { DefaultEventPriority } from "react-reconciler/constants";
 
 import type { NodeType, Node } from "../dom/types";
 import type { SkiaValue } from "../values";
+import {
+  bindReanimatedProps,
+  extractReanimatedProps,
+} from "../external/reanimated";
 
 import type { Container } from "./Container";
 import { createNode } from "./HostComponents";
@@ -121,8 +125,9 @@ export const skHostConfig: SkiaHostConfig = {
     _internalInstanceHandle
   ) {
     debug("createInstance", type);
-    const props = { ...pristineProps };
+    const [props, reanimatedProps] = extractReanimatedProps(pristineProps);
     const node = createNode(container, type, materialize(props));
+    bindReanimatedProps(container, node, reanimatedProps);
     container.depMgr.subscribeNode(node, props);
     return node;
   },
@@ -193,9 +198,10 @@ export const skHostConfig: SkiaHostConfig = {
     if (shallowEq(prevProps, nextProps)) {
       return;
     }
-    const props = { ...nextProps };
+    const [props, reanimatedProps] = extractReanimatedProps(nextProps);
     updatePayload.depMgr.unsubscribeNode(instance);
     instance.setProps(materialize(props));
+    bindReanimatedProps(updatePayload, instance, reanimatedProps);
     updatePayload.depMgr.subscribeNode(instance, props);
   },