@shopify/react-native-skia 0.0.135

package/src/animation/timing/useTiming.ts

@@ -0,0 +1,68 @@
+import { useEffect, useMemo, useRef } from "react";
+
+import type { SkiaValue, SkiaAnimation } from "../../values/types";
+import type {
+  AnimationParams,
+  TimingConfig,
+  AnimationCallback,
+} from "../types";
+import { useValue } from "../../values/hooks/useValue";
+
+import { getResolvedParams } from "./functions";
+import { createTiming } from "./createTiming";
+
+/**
+ * Creats an animation value that will run whenever
+ * the animation parameters change. The animation start immediately.
+ * @param toOrParams
+ * @param config
+ * @returns A value that is animated
+ */
+export const useTiming = (
+  toOrParams: number | AnimationParams,
+  config?: TimingConfig,
+  callback?: AnimationCallback
+): SkiaValue<number> => {
+  // Resolve parameters - keep a cached version to avoid
+  // unnecesary re-renders.
+  const prevCfgRef = useRef<ReturnType<typeof getResolvedParams>>();
+  const resolvedParameters = useMemo(() => {
+    const nextParams = getResolvedParams(toOrParams, config);
+    if (!equals(prevCfgRef.current, nextParams)) {
+      prevCfgRef.current = nextParams;
+    }
+    return prevCfgRef.current!;
+  }, [config, toOrParams]);
+
+  // Create value
+  const value = useValue(resolvedParameters.from ?? 0);
+
+  // Create timing animation - keep a cached version to avoid
+  // uneccessary recreation of animations
+  const prevAnimationRef = useRef<SkiaAnimation>();
+  const prevParamsRef = useRef<typeof resolvedParameters>();
+  const animation = useMemo(() => {
+    if (!equals(prevParamsRef.current, resolvedParameters)) {
+      prevParamsRef.current = resolvedParameters;
+      prevAnimationRef.current = createTiming(
+        resolvedParameters,
+        value,
+        callback
+      );
+    }
+    return prevAnimationRef.current!;
+  }, [callback, resolvedParameters, value]);
+
+  // Run animation on the value - and stop it on unmount
+  useEffect(() => {
+    value.animation = animation;
+    return () => (value.animation = undefined);
+  }, [animation, value]);
+
+  // Return the value that is animated
+  return value;
+};
+
+const equals = <T1, T2>(a: T1, b: T2) => {
+  return JSON.stringify(a) === JSON.stringify(b);
+};

package/src/animation/types.ts

@@ -0,0 +1,23 @@
+export interface SpringConfig {
+  mass?: number;
+  stiffness?: number;
+  damping?: number;
+  velocity?: number;
+}
+
+export interface TimingConfig {
+  duration?: number;
+  easing?: (t: number) => number;
+}
+
+export interface AnimationParams {
+  from?: number;
+  to?: number;
+  loop?: boolean;
+  yoyo?: boolean;
+}
+
+export type RequiredAnimationParams = Required<Omit<AnimationParams, "from">> &
+  Pick<AnimationParams, "from">;
+
+export type AnimationCallback = (current: number) => void;

package/src/external/index.ts

@@ -0,0 +1 @@
+export * from "./reanimated";

package/src/external/reanimated/index.ts

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

package/src/external/reanimated/useSharedValueEffect.ts

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { useEffect, useMemo } from "react";
+
+// @ts-ignore
+let Reanimated: typeof import("react-native-reanimated") | undefined;
+let Core: // @ts-ignore
+typeof import("react-native-reanimated/lib/reanimated2/core") | undefined;
+
+try {
+  Reanimated = require("react-native-reanimated");
+  Core = require("react-native-reanimated/lib/reanimated2/core");
+} catch (e) {
+  // Ignore
+}
+
+type SharedValueTypeWrapper<T = number> = {
+  value: T;
+};
+
+const useSharedValueWrapper =
+  Reanimated?.useSharedValue === undefined
+    ? (value: number) => useMemo(() => ({ value }), [value])
+    : Reanimated.useSharedValue;
+
+/**
+ * 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 const useSharedValueEffect = <T = number>(
+  cb: () => void,
+  value: SharedValueTypeWrapper<T>,
+  ...values: SharedValueTypeWrapper<T>[]
+) => {
+  const input = useSharedValueWrapper(0);
+  const { runOnJS, startMapper, stopMapper } = useMemo(() => {
+    if (Reanimated && Core) {
+      const { runOnJS } = Reanimated;
+      const { startMapper, stopMapper } = Core;
+      return { runOnJS, startMapper, stopMapper };
+    } else {
+      console.warn(
+        "Reanimated was not found and the useSharedValueEffect hook will have no effect."
+      );
+      return {
+        runOnJS: undefined,
+        startMapper: undefined,
+        stopMapper: undefined,
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    if (
+      startMapper !== undefined &&
+      runOnJS !== undefined &&
+      stopMapper !== undefined
+    ) {
+      // Start a mapper in Reanimated
+      const mapperId = startMapper(
+        () => {
+          "worklet";
+          runOnJS(cb)();
+        },
+        [value, ...values],
+        [input]
+      );
+      // Return unregistering the mapper
+      return () => {
+        if (stopMapper && mapperId !== undefined) {
+          stopMapper(mapperId);
+        }
+      };
+    }
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [input, runOnJS, startMapper, stopMapper, value, ...values]);
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+import "./skia/NativeSetup";
+export * from "./renderer";
+export * from "./renderer/Canvas";
+export * from "./views";
+export * from "./skia";
+export * from "./external";
+export * from "./values";
+export * from "./animation";

package/src/mock/index.ts

@@ -0,0 +1,110 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { Color, Skia as SkiaApi, SkRect, Vector } from "../skia/types";
+import * as Values from "../values/web";
+import * as ValuesHooks from "../values/hooks";
+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";
+import * as interpolateFn from "../animation/functions/interpolate";
+import * as interpolatePathFn from "../animation/functions/interpolatePaths";
+import * as interpolateVectorFn from "../animation/functions/interpolateVector";
+import { ShaderLib } from "../renderer/components/shaders/ShaderLib";
+
+class Stub {
+  constructor() {
+    return new Proxy(() => {}, {
+      get: () => new Stub(),
+      apply: () => new Stub(),
+      set: () => true,
+    });
+  }
+}
+
+const Noop: () => any = () => {};
+
+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;
+    createDeclaration: () => any;
+    ShaderLib: typeof ShaderLib;
+  } = {
+  // SkiaExports
+  // 1. Skia API. BaseSkia contains the enums, and functions like isPaint etc
+  Skia,
+  ...BaseSkia,
+  // 2. Hooks
+  useDataCollection: Noop,
+  useRawData: Noop,
+  useData: Noop,
+  useFont: Noop,
+  useTypeface: Noop,
+  useImage: Noop,
+  usePath: Noop,
+  useSVG: Noop,
+  useTextPath: Noop,
+  usePaint: Noop,
+  usePicture: Noop,
+  useSvgPath: Noop,
+  // 3. Point/Rect/Transform utilities
+  vec,
+  rect: (x: number, y: number, width: number, height: number) => ({
+    x,
+    y,
+    width,
+    height,
+  }),
+  rrect: (r: SkRect, rx: number, ry: number) => ({
+    rect: r,
+    rx,
+    ry,
+  }),
+  point: vec,
+  add: (a: Vector, b: Vector) => vec(a.x + b.x, a.y + b.y),
+  sub: (a: Vector, b: Vector) => vec(a.x - b.x, a.y - b.y),
+  neg: (a: Vector) => vec(-a.x, -a.y),
+  dist: (a: Vector, b: Vector) => Math.hypot(a.x - b.x, a.y - b.y),
+  translate: ({ x, y }: Vector) =>
+    [{ translateX: x }, { translateY: y }] as const,
+
+  bounds: Noop,
+  topLeft: Noop,
+  topRight: Noop,
+  bottomLeft: Noop,
+  bottomRight: Noop,
+  center: Noop,
+  processTransform2d: Noop,
+  // ExternalExports
+  useSharedValueEffect,
+  // ValueExports
+  ...Values,
+  ...ValuesHooks,
+  // Animations
+  ...timingFunctions,
+  ...springFunctions,
+  ...decayFunctions,
+  ...interpolateFn,
+  ...interpolatePathFn,
+  ...interpolateVectorFn,
+  interpolateColors: (
+    _value: number,
+    _inputRange: number[],
+    _outputRange: Color[]
+  ) => Float32Array.of(0, 0, 0, 0),
+  mixColors: (_v: number, _x: Color, _y: Color) => Float32Array.of(0, 0, 0, 0),
+  ShaderLib,
+  createDrawing: Noop,
+  createDeclaration: Noop,
+};

package/src/renderer/Canvas.tsx

@@ -0,0 +1,158 @@
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+  useMemo,
+  forwardRef,
+  useRef,
+} from "react";
+import type {
+  RefObject,
+  ReactNode,
+  ComponentProps,
+  MutableRefObject,
+  ForwardedRef,
+} from "react";
+import type { OpaqueRoot } from "react-reconciler";
+import ReactReconciler from "react-reconciler";
+
+import { SkiaView, useDrawCallback } from "../views";
+import type { TouchHandler } from "../views";
+import type { SkFontMgr } from "../skia/types";
+import { useValue } from "../values/hooks/useValue";
+import { Skia } from "../skia/Skia";
+
+import { debug as hostDebug, skHostConfig } from "./HostConfig";
+// import { debugTree } from "./nodes";
+import { Container } from "./nodes";
+import { DependencyManager } from "./DependencyManager";
+import { CanvasProvider } from "./useCanvas";
+
+export const skiaReconciler = ReactReconciler(skHostConfig);
+
+skiaReconciler.injectIntoDevTools({
+  bundleType: 1,
+  version: "0.0.1",
+  rendererPackageName: "react-native-skia",
+});
+
+const render = (element: ReactNode, root: OpaqueRoot, container: Container) => {
+  skiaReconciler.updateContainer(element, root, null, () => {
+    hostDebug("updateContainer");
+
+    container.depMgr.subscribe();
+  });
+};
+
+export const useCanvasRef = () => useRef<SkiaView>(null);
+
+export interface CanvasProps extends ComponentProps<typeof SkiaView> {
+  ref?: RefObject<SkiaView>;
+  children: ReactNode;
+  onTouch?: TouchHandler;
+  fontMgr?: SkFontMgr;
+}
+
+const defaultFontMgr = Skia.FontMgr.RefDefault();
+
+export const Canvas = forwardRef<SkiaView, CanvasProps>(
+  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {
+    const size = useValue({ width: 0, height: 0 });
+    const canvasCtx = useMemo(() => ({ Skia, size }), [size]);
+    const innerRef = useCanvasRef();
+    const ref = useCombinedRefs(forwardedRef, innerRef);
+    const [tick, setTick] = useState(0);
+    const redraw = useCallback(() => setTick((t) => t + 1), []);
+
+    const container = useMemo(
+      () => new Container(new DependencyManager(ref), redraw),
+      [redraw, ref]
+    );
+
+    const root = useMemo(
+      () => skiaReconciler.createContainer(container, 0, false, null),
+      [container]
+    );
+    // Render effect
+    useEffect(() => {
+      render(
+        <CanvasProvider value={canvasCtx}>{children}</CanvasProvider>,
+        root,
+        container
+      );
+    }, [children, root, redraw, container, canvasCtx]);
+
+    // Draw callback
+    const onDraw = useDrawCallback(
+      (canvas, info) => {
+        // TODO: if tree is empty (count === 1) maybe we should not render?
+        const { width, height, timestamp } = info;
+        if (onTouch) {
+          onTouch(info.touches);
+        }
+        if (
+          width !== canvasCtx.size.current.width ||
+          height !== canvasCtx.size.current.height
+        ) {
+          canvasCtx.size.current = { width, height };
+        }
+        const paint = Skia.Paint();
+        const ctx = {
+          width,
+          height,
+          timestamp,
+          canvas,
+          paint,
+          opacity: 1,
+          ref,
+          center: Skia.Point(width / 2, height / 2),
+          fontMgr: fontMgr ?? defaultFontMgr,
+          Skia,
+        };
+        container.draw(ctx);
+      },
+      [tick, onTouch]
+    );
+
+    useEffect(() => {
+      return () => {
+        container.depMgr.unsubscribe();
+      };
+    }, [container]);
+
+    return (
+      <SkiaView
+        ref={ref}
+        style={style}
+        onDraw={onDraw}
+        mode={mode}
+        debug={debug}
+      />
+    );
+  }
+);
+
+/**
+ * Combines a list of refs into a single ref. This can be used to provide
+ * both a forwarded ref and an internal ref keeping the same functionality
+ * on both of the refs.
+ * @param refs Array of refs to combine
+ * @returns A single ref that can be used in a ref prop.
+ */
+const useCombinedRefs = <T,>(
+  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>
+) => {
+  const targetRef = React.useRef<T>(null);
+  React.useEffect(() => {
+    refs.forEach((ref) => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(targetRef.current);
+        } else {
+          ref.current = targetRef.current;
+        }
+      }
+    });
+  }, [refs]);
+  return targetRef;
+};

package/src/renderer/DependencyManager.tsx

@@ -0,0 +1,59 @@
+import type { RefObject } from "react";
+
+import type { SkiaView } from "../views";
+import type { SkiaValue } from "../values";
+
+import { isValue } from "./processors";
+import type { Node } from "./nodes";
+
+type Unsubscribe = () => void;
+type Props = { [key: string]: unknown };
+
+export class DependencyManager {
+  ref: RefObject<SkiaView>;
+  subscriptions: Map<
+    Node,
+    { values: SkiaValue<unknown>[]; unsubscribe: null | Unsubscribe }
+  > = new Map();
+
+  constructor(ref: RefObject<SkiaView>) {
+    this.ref = ref;
+  }
+
+  unSubscribeNode(node: Node) {
+    const subscription = this.subscriptions.get(node);
+    if (subscription && subscription.unsubscribe) {
+      subscription.unsubscribe();
+    }
+    this.subscriptions.delete(node);
+  }
+
+  subscribeNode(node: Node, props: Props) {
+    const values = Object.values(props).filter(isValue);
+    if (values.length > 0) {
+      this.subscriptions.set(node, { values, unsubscribe: null });
+    }
+  }
+
+  subscribe() {
+    if (this.ref.current === null) {
+      throw new Error("Canvas ref is not set");
+    }
+    this.subscriptions.forEach((subscription) => {
+      if (subscription.unsubscribe === null) {
+        subscription.unsubscribe = this.ref.current!.registerValues(
+          subscription.values
+        );
+      }
+    });
+  }
+
+  unsubscribe() {
+    this.subscriptions.forEach(({ unsubscribe }) => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    });
+    this.subscriptions.clear();
+  }
+}

package/src/renderer/DrawingContext.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from "react";
+
+import type { DrawingInfo, SkiaView } from "../views";
+import type { SkFontMgr, SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
+
+export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
+  canvas: SkCanvas;
+  paint: SkPaint;
+  opacity: number;
+  center: Vector;
+  ref: RefObject<SkiaView>;
+  fontMgr: SkFontMgr;
+  Skia: Skia;
+}