react-native-skia 0.0.1 → 3.0.0

package/scripts/setup-canvaskit.js

@@ -0,0 +1,111 @@
+#!/usr/bin/env node
+
+/**
+ * A script to automate the setup of `react-native-skia` for web.
+ * The only requirement is that your project supports a 'static' folder (often named '/public').
+ * In `@expo/webpack-config` this is `./web` (default for now).
+ *
+ * This script does the following:
+ * 0. Try to detect if it's an expo project and if the bundler is set to metro
+ * 1. Resolve the public path relative to wherever the script is being run.
+ * 2. Log out some useful info about the web setup, just in case anything goes wrong.
+ * 3. Resolve the installed wasm file `canvaskit-wasm/bin/full/canvaskit.wasm`
+ *  from `react-native-skia -> canvaskit`.
+ * 4. Recursively ensure the path exists and copy the file into the desired location.
+ *
+ *
+ * Usage:
+ * $ `npx <script>`
+ *
+ * On webpack:
+ * -> Copies the file to `<project>/web/static/js/canvaskit.wasm`
+ * on metro:
+ * -> Copies the file to `<project>/public/canvaskit.wasm`
+ *
+ * Tooling that uses a custom static assets folder, like `/assets` for example:
+ * $ `npx <script> assets`
+ *
+ * -> Copies the file to `<project>/assets/canvaskit.wasm`
+ *
+ */
+const fs = require("fs");
+const path = require("path");
+
+const args = process.argv.slice(2);
+
+const gray = (text) => `\x1b[90m${text}\x1b[0m`;
+const lime = (text) => `\x1b[32m${text}\x1b[0m`;
+
+function getWetherItsAnExpoProjectWithMetro() {
+  try {
+    const appJsonPath = path.join(process.cwd(), "app.json");
+
+    console.log(
+      `› Reading Expo settings from (if any):\n  ${gray(appJsonPath)}`
+    );
+
+    const appJson = require(appJsonPath);
+    const isAnExpoProjectWithMetro =
+      appJson.expo && appJson.expo.web && appJson.expo.web.bundler === "metro";
+    if (isAnExpoProjectWithMetro) {
+      console.log(`  ${gray("Expo project with metro bundler detected")}\n`);
+      return true;
+    } else {
+      console.log(
+        `  ${gray(`Metro bundler not detected. Assuming the project is using Webpack.`)}\n`
+      );
+      return false;
+    }
+  } catch (error) {
+    console.log(`  ${gray("No Expo settings found")}\n`);
+    return false;
+  }
+}
+
+function getWasmFilePath() {
+  try {
+    return require.resolve("canvaskit-wasm/bin/full/canvaskit.wasm");
+  } catch (error) {
+    console.error(
+      `Could not find 'canvaskit-wasm'.
+Please install 'react-native-skia' and ensure it can be resolved from your project: ${process.cwd()}`
+    );
+    process.exit(1);
+  }
+}
+
+function getOutputFilePath(isAnExpoProjectWithMetro) {
+  // Default to using `web` public path.
+  const publicFolder = path.resolve(
+    args[0] || (isAnExpoProjectWithMetro ? "public" : "web/static/js")
+  );
+  const publicLocation = "./canvaskit.wasm";
+  const output = path.join(publicFolder, publicLocation);
+
+  console.log(
+    `› Copying 'canvaskit.wasm' file to public folder:\n  ${gray(output)}\n`
+  );
+  return output;
+}
+
+function copyFile(from, to) {
+  const data = fs.readFileSync(from);
+  fs.mkdirSync(path.dirname(to), { recursive: true });
+  fs.writeFileSync(to, data);
+}
+
+(() => {
+  // Automatically detect if it's an expo project with a metro bundler
+  const isAnExpoProjectWithMetro = getWetherItsAnExpoProjectWithMetro();
+
+  // Copy the WASM file to `<static>/canvaskit.wasm`
+  copyFile(getWasmFilePath(), getOutputFilePath(isAnExpoProjectWithMetro));
+
+  console.log(lime("› Success! You are almost there:"));
+  console.log(
+    gray(
+      `› To load React Native Skia Web,
+follow these instructions: https://shopify.github.io/react-native-skia/docs/getting-started/web`
+    )
+  );
+})();

package/src/Platform/IPlatform.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { NodeHandle, ViewComponent } from "react-native";
+
+import type { DataModule } from "../skia/types";
+
+export interface IPlatform {
+  OS: string;
+  PixelRatio: number;
+  findNodeHandle: (
+    componentOrHandle:
+      null | number | React.Component<any, any> | React.ComponentClass<any>
+  ) => null | NodeHandle;
+  resolveAsset: (source: DataModule) => string;
+  View: typeof ViewComponent;
+}

package/src/Platform/Platform.ts

@@ -0,0 +1,26 @@
+import {
+  Image,
+  PixelRatio,
+  Platform as RNPlatform,
+  findNodeHandle,
+  View,
+} from "react-native";
+
+import type { DataModule } from "../skia/types";
+import { isRNModule, unwrapModule } from "../skia/types";
+
+import type { IPlatform } from "./IPlatform";
+
+export const Platform: IPlatform = {
+  OS: RNPlatform.OS,
+  PixelRatio: PixelRatio.get(),
+  resolveAsset: (source: DataModule) => {
+    const asset = unwrapModule(source);
+    if (typeof asset === "string") {
+      return asset;
+    }
+    return isRNModule(asset) ? Image.resolveAssetSource(asset).uri : asset.uri;
+  },
+  findNodeHandle,
+  View,
+};

package/src/Platform/Platform.web.tsx

@@ -0,0 +1,66 @@
+import type { CSSProperties } from "react";
+import React, { useMemo } from "react";
+import type { ViewComponent, ViewProps } from "react-native";
+
+import type { DataModule } from "../skia/types";
+import { isRNModule, unwrapModule } from "../skia/types";
+
+import type { IPlatform } from "./IPlatform";
+
+// Layout is observed by the views themselves (see SkiaPictureView.web.tsx):
+// this shim only reproduces react-native-web's default View styling.
+const View = (({ children, style: rawStyle }: ViewProps) => {
+  const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);
+  const cssStyles = useMemo(() => {
+    return {
+      alignItems: "stretch" as const,
+      backgroundColor: "transparent" as const,
+      border: "0 solid black" as const,
+      boxSizing: "border-box" as const,
+      display: "flex" as const,
+      flexBasis: "auto" as const,
+      flexDirection: "column" as const,
+      flexShrink: 0,
+      listStyle: "none" as const,
+      margin: 0,
+      minHeight: 0,
+      minWidth: 0,
+      padding: 0,
+      position: "relative" as const,
+      textDecoration: "none" as const,
+      zIndex: 0,
+      ...style,
+    };
+  }, [style]);
+
+  return <div style={cssStyles}>{children}</div>;
+}) as unknown as typeof ViewComponent;
+
+export const Platform: IPlatform = {
+  OS: "web",
+  PixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1, // window is not defined on node
+  resolveAsset: (source: DataModule) => {
+    const asset = unwrapModule(source);
+    if (typeof asset === "string") {
+      return asset;
+    }
+    if (isRNModule(asset)) {
+      if (typeof require === "function") {
+        const {
+          getAssetByID,
+        } = require("react-native/Libraries/Image/AssetRegistry");
+        const { httpServerLocation, name, type } = getAssetByID(asset);
+        const uri = `${httpServerLocation}/${name}.${type}`;
+        return uri;
+      }
+      throw new Error(
+        "Asset source is a number - this is not supported on the web"
+      );
+    }
+    return asset.uri;
+  },
+  findNodeHandle: () => {
+    throw new Error("findNodeHandle is not supported on the web");
+  },
+  View,
+};

package/src/Platform/index.ts

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

package/src/animation/functions/index.ts

@@ -0,0 +1,4 @@
+export * from "./interpolate";
+export * from "./interpolateColors";
+export * from "./interpolateVector";
+export * from "./interpolatePaths";

package/src/animation/functions/interpolate.ts

@@ -0,0 +1,185 @@
+export enum Extrapolate {
+  IDENTITY = "identity",
+  CLAMP = "clamp",
+  EXTEND = "extend",
+}
+
+interface InterpolationNarrowedInput {
+  leftEdgeInput: number;
+  rightEdgeInput: number;
+  leftEdgeOutput: number;
+  rightEdgeOutput: number;
+}
+
+export interface ExtrapolationConfig {
+  extrapolateLeft?: Extrapolate | string;
+  extrapolateRight?: Extrapolate | string;
+}
+
+interface RequiredExtrapolationConfig {
+  extrapolateLeft: Extrapolate;
+  extrapolateRight: Extrapolate;
+}
+
+export type ExtrapolationType =
+  ExtrapolationConfig | Extrapolate | string | undefined;
+
+function getVal(
+  type: Extrapolate,
+  coef: number,
+  val: number,
+  leftEdgeOutput: number,
+  rightEdgeOutput: number,
+  x: number
+): number {
+  "worklet";
+  switch (type) {
+    case Extrapolate.IDENTITY:
+      return x;
+    case Extrapolate.CLAMP:
+      if (coef * val < coef * leftEdgeOutput) {
+        return leftEdgeOutput;
+      }
+      return rightEdgeOutput;
+    case Extrapolate.EXTEND:
+    default:
+      return val;
+  }
+}
+
+function isExtrapolate(value: string): value is Extrapolate {
+  "worklet";
+  return (
+    value === Extrapolate.EXTEND ||
+    value === Extrapolate.CLAMP ||
+    value === Extrapolate.IDENTITY
+  );
+}
+
+// validates extrapolations type
+// if type is correct, converts it to ExtrapolationConfig
+export function validateInterpolationOptions(
+  type: ExtrapolationType
+): RequiredExtrapolationConfig {
+  "worklet";
+  // initialize extrapolationConfig with default extrapolation
+  const extrapolationConfig: RequiredExtrapolationConfig = {
+    extrapolateLeft: Extrapolate.EXTEND,
+    extrapolateRight: Extrapolate.EXTEND,
+  };
+
+  if (!type) {
+    return extrapolationConfig;
+  }
+
+  if (typeof type === "string") {
+    if (!isExtrapolate(type)) {
+      throw new Error(
+        `No supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+        interpolate(value, [inputRange], [outputRange], "clamp")`
+      );
+    }
+    extrapolationConfig.extrapolateLeft = type;
+    extrapolationConfig.extrapolateRight = type;
+    return extrapolationConfig;
+  }
+
+  // otherwise type is extrapolation config object
+  if (
+    (type.extrapolateLeft && !isExtrapolate(type.extrapolateLeft)) ||
+    (type.extrapolateRight && !isExtrapolate(type.extrapolateRight))
+  ) {
+    throw new Error(
+      `No supported value for "interpolate" \nSupported values: ["extend", "clamp", "identity", Extrapolatation.CLAMP, Extrapolatation.EXTEND, Extrapolatation.IDENTITY]\n Valid example:
+      interpolate(value, [inputRange], [outputRange], {
+        extrapolateLeft: Extrapolation.CLAMP,
+        extrapolateRight: Extrapolation.IDENTITY
+      }})`
+    );
+  }
+
+  Object.assign(extrapolationConfig, type);
+  return extrapolationConfig;
+}
+
+function internalInterpolate(
+  x: number,
+  narrowedInput: InterpolationNarrowedInput,
+  extrapolationConfig: RequiredExtrapolationConfig
+) {
+  "worklet";
+  const { leftEdgeInput, rightEdgeInput, leftEdgeOutput, rightEdgeOutput } =
+    narrowedInput;
+  if (rightEdgeInput - leftEdgeInput === 0) {
+    return leftEdgeOutput;
+  }
+  const progress = (x - leftEdgeInput) / (rightEdgeInput - leftEdgeInput);
+  const val = leftEdgeOutput + progress * (rightEdgeOutput - leftEdgeOutput);
+  const coef = rightEdgeOutput >= leftEdgeOutput ? 1 : -1;
+
+  if (coef * val < coef * leftEdgeOutput) {
+    return getVal(
+      extrapolationConfig.extrapolateLeft,
+      coef,
+      val,
+      leftEdgeOutput,
+      rightEdgeOutput,
+      x
+    );
+  } else if (coef * val > coef * rightEdgeOutput) {
+    return getVal(
+      extrapolationConfig.extrapolateRight,
+      coef,
+      val,
+      leftEdgeOutput,
+      rightEdgeOutput,
+      x
+    );
+  }
+
+  return val;
+}
+
+// e.g. function interpolate(x, input, output, type = Extrapolatation.CLAMP)
+export function interpolate(
+  x: number,
+  input: readonly number[],
+  output: readonly number[],
+  type?: ExtrapolationType
+): number {
+  "worklet";
+  if (input.length < 2 || output.length < 2) {
+    throw Error(
+      "Interpolation input and output should contain at least two values."
+    );
+  }
+
+  const extrapolationConfig = validateInterpolationOptions(type);
+  const { length } = input;
+  const narrowedInput: InterpolationNarrowedInput = {
+    leftEdgeInput: input[0],
+    rightEdgeInput: input[1],
+    leftEdgeOutput: output[0],
+    rightEdgeOutput: output[1],
+  };
+  if (length > 2) {
+    if (x > input[length - 1]) {
+      narrowedInput.leftEdgeInput = input[length - 2];
+      narrowedInput.rightEdgeInput = input[length - 1];
+      narrowedInput.leftEdgeOutput = output[length - 2];
+      narrowedInput.rightEdgeOutput = output[length - 1];
+    } else {
+      for (let i = 1; i < length; ++i) {
+        if (x <= input[i]) {
+          narrowedInput.leftEdgeInput = input[i - 1];
+          narrowedInput.rightEdgeInput = input[i];
+          narrowedInput.leftEdgeOutput = output[i - 1];
+          narrowedInput.rightEdgeOutput = output[i];
+          break;
+        }
+      }
+    }
+  }
+
+  return internalInterpolate(x, narrowedInput, extrapolationConfig);
+}

package/src/animation/functions/interpolateColors.ts

@@ -0,0 +1,61 @@
+import { mix } from "../../renderer/processors/math";
+import type { Color, SkColor } from "../../skia";
+import { Skia } from "../../skia";
+
+import { interpolate } from "./interpolate";
+
+const interpolateColorsRGB = (
+  value: number,
+  inputRange: number[],
+  outputRange: SkColor[]
+) => {
+  "worklet";
+  const r = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[0]),
+    "clamp"
+  );
+  const g = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[1]),
+    "clamp"
+  );
+  const b = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[2]),
+    "clamp"
+  );
+  const a = interpolate(
+    value,
+    inputRange,
+    outputRange.map((c) => c[3]),
+    "clamp"
+  );
+  // TODO: once Float32Array are supported in the reanimated integration we can switch there
+  return [r, g, b, a];
+};
+
+export const interpolateColors = (
+  value: number,
+  inputRange: number[],
+  _outputRange: Color[]
+) => {
+  "worklet";
+  const outputRange = _outputRange.map((cl) => Skia.Color(cl));
+  return interpolateColorsRGB(value, inputRange, outputRange);
+};
+
+export const mixColors = (value: number, x: Color, y: Color) => {
+  "worklet";
+  const c1 = Skia.Color(x);
+  const c2 = Skia.Color(y);
+  return new Float32Array([
+    mix(value, c1[0], c2[0]),
+    mix(value, c1[1], c2[1]),
+    mix(value, c1[2], c2[2]),
+    mix(value, c1[3], c2[3]),
+  ]);
+};

package/src/animation/functions/interpolatePaths.ts

@@ -0,0 +1,115 @@
+import type { SkPath } from "../../skia/types";
+import { exhaustiveCheck } from "../../renderer/typeddash";
+
+import type { ExtrapolationType } from "./interpolate";
+import { validateInterpolationOptions, Extrapolate } from "./interpolate";
+
+const lerp = (
+  value: number,
+  from: number,
+  to: number,
+  p1: SkPath,
+  p2: SkPath
+) => {
+  "worklet";
+  // Zero-width segment (duplicate input stops): t would be NaN or Infinity.
+  // Return the segment's end path (p2), i.e. the value jumps to p2 at the stop.
+  // reanimated's interpolate has no explicit guard here, so this is our choice.
+  if (to === from) {
+    return p2;
+  }
+  const t = (value - from) / (to - from);
+  // interpolate returns a new path (immutable operation)
+  return p2.interpolate(p1, t)!;
+};
+
+/**
+ * Maps an input value within a range to an output path within a path range.
+ * @param value - The input value.
+ * @param inputRange - The range of the input value.
+ * @param outputRange - The range of the output path.
+ * @param options - Extrapolation options
+ * @returns The output path.
+ * @example <caption>Map a value between 0 and 1 to a path between two paths.</caption>
+ * const path1 = new Path();
+ * path1.moveTo(0, 0);
+ * path1.lineTo(100, 0);
+ * const path2 = new Path();
+ * path2.moveTo(0, 0);
+ * path2.lineTo(0, 100);
+ * const path = interpolatePath(0.5, [0, 1], [path1, path2]);
+ */
+export const interpolatePaths = (
+  value: number,
+  input: number[],
+  outputRange: SkPath[],
+  options?: ExtrapolationType,
+  _output?: SkPath
+) => {
+  "worklet";
+  if (input.length < 2 || input.length !== outputRange.length) {
+    throw new Error(
+      `interpolatePaths() requires input and outputRange to have the same length and at least 2 entries, received ${input.length} and ${outputRange.length}`
+    );
+  }
+  if (Number.isNaN(value)) {
+    throw new Error("interpolatePaths() received NaN as value");
+  }
+  const extrapolation = validateInterpolationOptions(options);
+  if (value < input[0]) {
+    switch (extrapolation.extrapolateLeft) {
+      case Extrapolate.CLAMP:
+        return outputRange[0];
+      case Extrapolate.EXTEND:
+        if (!Number.isFinite(value)) {
+          throw new Error(
+            "interpolatePaths() cannot extend with an infinite value, use clamp extrapolation instead"
+          );
+        }
+        return lerp(value, input[0], input[1], outputRange[0], outputRange[1]);
+      case Extrapolate.IDENTITY:
+        throw new Error(
+          "Identity is not a supported extrapolation type for interpolatePaths()"
+        );
+      default:
+        exhaustiveCheck(extrapolation.extrapolateLeft);
+    }
+  } else if (value > input[input.length - 1]) {
+    switch (extrapolation.extrapolateRight) {
+      case Extrapolate.CLAMP:
+        return outputRange[outputRange.length - 1];
+      case Extrapolate.EXTEND:
+        if (!Number.isFinite(value)) {
+          throw new Error(
+            "interpolatePaths() cannot extend with an infinite value, use clamp extrapolation instead"
+          );
+        }
+        return lerp(
+          value,
+          input[input.length - 2],
+          input[input.length - 1],
+          outputRange[input.length - 2],
+          outputRange[input.length - 1]
+        );
+      case Extrapolate.IDENTITY:
+        throw new Error(
+          "Identity is not a supported extrapolation type for interpolatePaths()"
+        );
+      default:
+        exhaustiveCheck(extrapolation.extrapolateRight);
+    }
+  }
+  let i = 0;
+  for (; i <= input.length - 1; i++) {
+    if (value >= input[i] && value <= input[i + 1]) {
+      break;
+    }
+  }
+  return lerp(
+    value,
+    input[i],
+    input[i + 1],
+    outputRange[i],
+    outputRange[i + 1]
+  );
+};

package/src/animation/functions/interpolateVector.ts

@@ -0,0 +1,31 @@
+import type { Vector } from "../../skia/types";
+
+import { interpolate } from "./interpolate";
+
+export const interpolateVector = (
+  value: number,
+  inputRange: readonly number[],
+  outputRange: readonly Vector[],
+  options?: Parameters<typeof interpolate>[3]
+) => {
+  "worklet";
+  return {
+    x: interpolate(
+      value,
+      inputRange,
+      outputRange.map((v) => v.x),
+      options
+    ),
+    y: interpolate(
+      value,
+      inputRange,
+      outputRange.map((v) => v.y),
+      options
+    ),
+  };
+};
+
+export const mixVector = (value: number, from: Vector, to: Vector) => {
+  "worklet";
+  return interpolateVector(value, [0, 1], [from, to]);
+};

package/src/animation/index.ts

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

package/src/dom/nodes/datatypes/Circle.ts

@@ -0,0 +1,16 @@
+import type { CircleDef, ScalarCircleDef } from "../../types";
+
+export const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef => {
+  "worklet";
+  // We have an issue to check property existence on JSI backed instances
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (def as any).cx !== undefined;
+};
+
+export const processCircle = (def: CircleDef) => {
+  "worklet";
+  if (isCircleScalarDef(def)) {
+    return { c: { x: def.cx, y: def.cy }, r: def.r };
+  }
+  return { ...def, c: def.c ?? { x: 0, y: 0 } };
+};

package/src/dom/nodes/datatypes/Enum.ts

@@ -0,0 +1,4 @@
+export const enumKey = <K extends string>(k: K) => {
+  "worklet";
+  return (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;
+};