@shopify/react-native-skia 0.1.176 → 0.1.178

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

package/src/renderer/Reconciler.tsx

@@ -31,10 +31,11 @@ export class SkiaRoot {
   constructor(
     Skia: Skia,
     registerValues: RegisterValues = () => () => {},
-    redraw: () => void = () => {}
+    redraw: () => void = () => {},
+    getNativeId: () => number = () => 0
   ) {
     const depMgr = createDependencyManager(registerValues);
-    this.container = new Container(Skia, depMgr, redraw);
+    this.container = new Container(Skia, depMgr, redraw, getNativeId);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,

package/src/renderer/processors/Animations/Animations.ts

@@ -1,5 +1,9 @@
 import type { SkiaSelector, SkiaValue } from "../../../values";
 
+export type SharedValueType<T = number> = {
+  value: T;
+};
+
 export const isValue = (value: unknown): value is SkiaValue<unknown> => {
   if (value === undefined || value === null) {
     return false;
@@ -44,7 +48,11 @@ export const isAnimated = <T>(props: AnimatedProps<T>) => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
+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"