@shopify/react-native-skia 0.1.136 → 0.1.139

package/lib/typescript/src/views/SkiaView.web.d.ts

@@ -3,10 +3,8 @@ import type { PointerEvent } from "react";
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 import type { DrawMode, SkiaViewProps } from "./types";
-export declare class SkiaView extends React.Component<SkiaViewProps, {
-    width: number;
-    height: number;
-}> {
+import { TouchType } from "./types";
+export declare class SkiaView extends React.Component<SkiaViewProps> {
     constructor(props: SkiaViewProps);
     private _surface;
     private _unsubscriptions;
@@ -15,10 +13,13 @@ export declare class SkiaView extends React.Component<SkiaViewProps, {
     private _canvasRef;
     private _mode;
     private _redrawRequests;
-    private _unmounted;
+    private width;
+    private height;
+    private requestId;
     private unsubscribeAll;
     private onLayout;
     componentDidMount(): void;
+    componentDidUpdate(): void;
     componentWillUnmount(): void;
     /**
      * Creates a snapshot from the canvas in the surface
@@ -29,8 +30,8 @@ export declare class SkiaView extends React.Component<SkiaViewProps, {
     /**
      * Sends a redraw request to the native SkiaView.
      */
-    private redraw;
-    requestRedraw(): void;
+    private tick;
+    redraw(): void;
     /**
      * Updates the drawing mode for the skia view. This is the same
      * as declaratively setting the mode property on the SkiaView.
@@ -48,9 +49,6 @@ export declare class SkiaView extends React.Component<SkiaViewProps, {
      */
     registerValues(_values: SkiaValue<unknown>[]): void;
     private handleTouchEvent;
-    handleTouchStart(evt: PointerEvent): void;
-    handleTouchMove(evt: PointerEvent): void;
-    handleTouchEnd(evt: PointerEvent): void;
-    handleTouchCancel(evt: PointerEvent): void;
+    createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
     render(): JSX.Element;
 }

package/lib/typescript/src/web/LoadSkiaWeb.d.ts

@@ -0,0 +1,6 @@
+import type { CanvasKit as CanvasKitType, CanvasKitInitOptions } from "canvaskit-wasm";
+declare global {
+    var CanvasKit: CanvasKitType;
+}
+export declare const LoadSkiaWeb: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;
+export declare const LoadSkia: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;

package/lib/typescript/src/web/WithSkiaWeb.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, ComponentType } from "react";
+import { Suspense } from "react";
+import { LoadSkiaWeb } from "./LoadSkiaWeb";
+interface WithSkiaProps {
+    fallback?: ComponentProps<typeof Suspense>["fallback"];
+    getComponent: () => Promise<{
+        default: ComponentType;
+    }>;
+    opts?: Parameters<typeof LoadSkiaWeb>[0];
+}
+export declare const WithSkiaWeb: ({ getComponent, fallback, opts, }: WithSkiaProps) => JSX.Element;
+export {};

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

@@ -1,5 +1,2 @@
-import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
-declare global {
-    var CanvasKit: CanvasKitType;
-}
-export declare const LoadSkia: () => Promise<void>;
+export * from "./LoadSkiaWeb";
+export * from "./WithSkiaWeb";

package/package.json

@@ -3,8 +3,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "bin": {
+    "setup-skia-web": "./scripts/setup-canvaskit.js"
+  },
   "title": "React Native Skia",
-  "version": "0.1.136",
+  "version": "0.1.139",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -29,6 +32,7 @@
     "libs/ios/libsvg.xcframework",
     "react-native-skia.podspec",
     "scripts/install-npm.js",
+    "scripts/setup-canvaskit.js",
     "dist/**"
   ],
   "scripts": {

package/scripts/setup-canvaskit.js

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+/* eslint-disable max-len */
+
+/**
+ * A script to automate the setup of `@shopify/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:
+ * 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 `@shopify/react-native-skia -> canvaskit`.
+ * 4. Recursively ensure the path exists and copy the file into the desired location.
+ *
+ *
+ * Usage:
+ * $ `npx <script> web`
+ *
+ * -> Copies the file to `<project>/web/static/js/canvaskit.wasm`
+ *
+ * Tooling that uses `/public`:
+ * $ `npx <script> public`
+ *
+ * -> Copies the file to `<project>/public/static/js/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 getWasmFilePath() {
+  try {
+    return require.resolve("canvaskit-wasm/bin/full/canvaskit.wasm");
+  } catch (error) {
+    console.error(
+      `Could not find 'canvaskit-wasm'. Please install '@shopify/react-native-skia' and ensure it can be resolved from your project: ${process.cwd()}`
+    );
+    process.exit(1);
+  }
+}
+
+function getOutputFilePath() {
+  // Default to using `web` public path.
+  const publicFolder = path.resolve(args[0] || "web");
+  const publicLocation = "./static/js/canvaskit.wasm";
+  const output = path.join(publicFolder, publicLocation);
+
+  console.log(
+    `› Copying 'canvaskit.wasm' file to static 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);
+}
+
+// Copy the WASM file to `<static>/static/js/canvaskit.wasm`
+(() => {
+  copyFile(getWasmFilePath(), getOutputFilePath());
+
+  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/mock/index.ts

@@ -52,12 +52,8 @@ export const Mock: typeof SkiaExports &
   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) => ({

package/src/renderer/Canvas.tsx

@@ -18,7 +18,6 @@ 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";
 
@@ -50,13 +49,10 @@ 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) => {
+  ({ children, style, debug, mode, onTouch }, forwardedRef) => {
     const size = useValue({ width: 0, height: 0 });
     const canvasCtx = useMemo(() => ({ Skia, size }), [size]);
     const innerRef = useCanvasRef();
@@ -106,7 +102,6 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           opacity: 1,
           ref,
           center: Skia.Point(width / 2, height / 2),
-          fontMgr: fontMgr ?? defaultFontMgr,
           Skia,
         };
         container.draw(ctx);
@@ -116,9 +111,11 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
 
     useEffect(() => {
       return () => {
-        container.depMgr.unsubscribe();
+        skiaReconciler.updateContainer(null, root, null, () => {
+          container.depMgr.unsubscribe();
+        });
       };
-    }, [container]);
+    }, [container, root]);
 
     return (
       <SkiaView

package/src/renderer/DrawingContext.ts

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

package/src/renderer/components/Group.tsx

@@ -58,7 +58,7 @@ const onDraw = createDrawing<GroupProps>(
       } else {
         canvas.save();
       }
-      processCanvasTransform(ctx, groupProps);
+      processCanvasTransform(canvas, groupProps);
       if (clip) {
         const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
         processClip(Skia, canvas, clip, op);

package/src/renderer/components/text/Glyphs.tsx

@@ -4,7 +4,6 @@ import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
 import type { SkPoint } from "../../../skia/types";
 import type { FontDef } from "../../processors/Font";
-import { processFont } from "../../processors/Font";
 
 export interface Glyph {
   id: number;
@@ -24,11 +23,8 @@ interface ProcessedGlyphs {
 }
 
 const onDraw = createDrawing<GlyphsProps>(
-  (
-    { canvas, paint, fontMgr, Skia },
-    { glyphs: rawGlyphs, x, y, ...fontDef }
-  ) => {
-    const font = processFont(Skia, fontMgr, fontDef);
+  ({ canvas, paint }, { glyphs: rawGlyphs, x, y, ...fontDef }) => {
+    const { font } = fontDef;
     const { glyphs, positions } = rawGlyphs.reduce<ProcessedGlyphs>(
       (acc, glyph) => {
         const { id, pos } = glyph;

package/src/renderer/components/text/Text.tsx

@@ -6,7 +6,6 @@ import type {
   FontDef,
 } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
-import { processFont } from "../../processors";
 
 type TextProps = CustomPaintProps &
   FontDef & {
@@ -16,8 +15,8 @@ type TextProps = CustomPaintProps &
   };
 
 const onDraw = createDrawing<TextProps>(
-  ({ canvas, paint, fontMgr, Skia }, { text, x, y, ...fontDef }) => {
-    const font = processFont(Skia, fontMgr, fontDef);
+  ({ canvas, paint }, { text, x, y, ...fontDef }) => {
+    const { font } = fontDef;
     canvas.drawText(text, x, y, paint, font);
   }
 );

package/src/renderer/components/text/TextPath.tsx

@@ -4,7 +4,6 @@ import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes";
 import type { SkPath, SkRSXform } from "../../../skia/types";
 import type { FontDef } from "../../processors/Font";
-import { processFont } from "../../processors/Font";
 
 export type TextPathProps = CustomPaintProps &
   FontDef & {
@@ -15,7 +14,7 @@ export type TextPathProps = CustomPaintProps &
 
 const onDraw = createDrawing<TextPathProps>(
   (
-    { canvas, paint, fontMgr, Skia },
+    { canvas, paint, Skia },
     { text, initialOffset, path: pathDef, ...fontDef }
   ) => {
     const path =
@@ -25,7 +24,7 @@ const onDraw = createDrawing<TextPathProps>(
     if (path === null) {
       throw new Error("Invalid path: " + pathDef);
     }
-    const font = processFont(Skia, fontMgr, fontDef);
+    const { font } = fontDef;
     const ids = font.getGlyphIDs(text);
     const widths = font.getGlyphWidths(ids, paint);
     const rsx: SkRSXform[] = [];

package/src/renderer/processors/Font.ts

@@ -1,31 +1,8 @@
-import type { SkFontMgr, SkFont, Skia } from "../../skia/types";
+import type { SkFont } from "../../skia/types";
 
-export type FontDef = { font: SkFont } | { familyName: string; size: number };
+export type FontDef = { font: SkFont };
 
 export const isFont = (fontDef: FontDef): fontDef is { font: SkFont } =>
   // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (fontDef as any).font !== undefined;
-
-export const processFont = (
-  Skia: Skia,
-  fontMgr: SkFontMgr,
-  fontDef: FontDef
-) => {
-  let selectedFont: SkFont;
-  if (isFont(fontDef)) {
-    selectedFont = fontDef.font;
-  } else {
-    console.warn(
-      // eslint-disable-next-line max-len
-      "Using system fonts is deprecated. Please use the font property instead: https://shopify.github.io/react-native-skia/docs/text/fonts"
-    );
-    const { familyName, size } = fontDef;
-    const typeface = fontMgr.matchFamilyStyle(familyName);
-    if (typeface === null) {
-      throw new Error(`No typeface found for ${familyName}`);
-    }
-    selectedFont = Skia.Font(typeface, size);
-  }
-  return selectedFont;
-};

package/src/renderer/processors/Transform.ts

@@ -1,6 +1,6 @@
-import type { DrawingContext } from "../DrawingContext";
 import type { SkMatrix, Vector, Transforms2d } from "../../skia/types";
 import { processTransform } from "../../skia/types";
+import type { SkCanvas } from "../../skia/types/Canvas";
 
 export interface TransformProps {
   transform?: Transforms2d;
@@ -9,25 +9,22 @@ export interface TransformProps {
 }
 
 export const processCanvasTransform = (
-  { canvas, Skia }: DrawingContext,
+  canvas: SkCanvas,
   { transform, origin, matrix }: TransformProps
 ) => {
   if (matrix) {
     if (origin) {
-      const m3 = Skia.Matrix();
-      m3.translate(origin.x, origin.y);
-      m3.concat(matrix);
-      m3.translate(-origin.x, -origin.y);
-      canvas.concat(m3);
+      canvas.translate(origin.x, origin.y);
+      canvas.concat(matrix);
+      canvas.translate(-origin.x, -origin.y);
     } else {
       canvas.concat(matrix);
     }
   } else if (transform) {
-    const m3 = processTransform(
-      Skia.Matrix(),
+    processTransform(
+      canvas,
       origin ? transformOrigin(origin, transform) : transform
     );
-    canvas.concat(m3);
   }
 };
 

package/src/skia/core/Data.ts

@@ -37,7 +37,9 @@ const loadData = <T>(
   factory: (data: SkData) => T,
   onError?: (err: Error) => void
 ): Promise<T | null> => {
-  if (source instanceof Uint8Array) {
+  if (source === null) {
+    return new Promise((resolve) => resolve(null));
+  } else if (source instanceof Uint8Array) {
     return new Promise((resolve) =>
       resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))
     );

package/src/skia/core/Image.ts

@@ -3,10 +3,12 @@ import type { DataSource } from "../types";
 
 import { useRawData } from "./Data";
 
+const imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);
+
 /**
  * Returns a Skia Image object
  * */
 export const useImage = (
   source: DataSource | null | undefined,
   onError?: (err: Error) => void
-) => useRawData(source, Skia.Image.MakeImageFromEncoded, onError);
+) => useRawData(source, imgFactory, onError);

package/src/skia/core/SVG.ts

@@ -3,7 +3,9 @@ import type { DataSource } from "../types";
 
 import { useRawData } from "./Data";
 
+const svgFactory = Skia.SVG.MakeFromData.bind(Skia.SVG);
+
 export const useSVG = (
   source: DataSource | null | undefined,
   onError?: (err: Error) => void
-) => useRawData(source, Skia.SVG.MakeFromData, onError);
+) => useRawData(source, svgFactory, onError);

package/src/skia/core/Typeface.ts

@@ -2,15 +2,13 @@ import { Skia } from "../Skia";
 import type { DataSource } from "../types";
 
 import { useRawData } from "./Data";
+
+const tfFactory = Skia.Typeface.MakeFreeTypeFaceFromData.bind(Skia.Typeface);
+
 /**
  * Returns a Skia Typeface object
  * */
 export const useTypeface = (
   source: DataSource | null | undefined,
   onError?: (err: Error) => void
-) =>
-  useRawData(
-    source,
-    Skia.Typeface.MakeFreeTypeFaceFromData.bind(Skia.Typeface),
-    onError
-  );
+) => useRawData(source, tfFactory, onError);

package/src/skia/core/index.ts

@@ -4,9 +4,7 @@ export * from "./Typeface";
 export * from "./Image";
 export * from "./Picture";
 export * from "./SVG";
-export * from "./Path";
 export * from "./Vector";
 export * from "./Rect";
 export * from "./RRect";
 export * from "./Matrix";
-export * from "./Paint";

package/src/skia/types/Font/Font.ts

@@ -28,19 +28,6 @@ export interface SkFont extends SkJSIInstance<"Font"> {
    */
   getGlyphWidths(glyphs: number[], paint?: SkPaint): number[];
 
-  /** Returns the advance width of text.
-      The advance is the normal distance to move before drawing additional text.
-      Returns the bounding box of text if bounds is not nullptr. The paint
-      stroke settings, mask filter, or path effect may modify the bounds.
-
-      @param text        character storage encoded with SkTextEncoding
-      @param byteLength  length of character storage in bytes
-      @param bounds      returns bounding box relative to (0, 0) if not nullptr
-      @param paint       optional; may be nullptr
-      @return            number of glyphs represented by text of length byteLength
-  */
-  measureText: (text: string, paint?: SkPaint) => SkRect;
-
   /**
    * Returns the FontMetrics for this font.
    */

package/src/skia/types/Matrix.ts

@@ -1,4 +1,5 @@
 import type { SkJSIInstance } from "./JsiInstance";
+import type { SkCanvas } from "./Canvas";
 export enum MatrixIndex {
   ScaleX = 0,
   SkewX = 1,
@@ -8,15 +9,19 @@ export enum MatrixIndex {
   TransY = 5,
   Persp0 = 6,
   Persp1 = 7,
-  persp2 = 8,
+  Persp2 = 8,
 }
 
+export const isMatrix = (obj: unknown): obj is SkMatrix =>
+  obj !== null && (obj as SkJSIInstance<string>).__typename__ === "Matrix";
+
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   concat: (matrix: SkMatrix) => void;
   translate: (x: number, y: number) => void;
   scale: (x: number, y?: number) => void;
   skew: (x: number, y: number) => void;
   rotate: (theta: number) => void;
+  identity: () => void;
 }
 
 type Transform2dName =
@@ -49,7 +54,10 @@ export interface TransformProp {
   transform?: Transforms2d;
 }
 
-export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
+export const processTransform = <T extends SkMatrix | SkCanvas>(
+  m: T,
+  transforms: Transforms2d
+) => {
   for (const transform of transforms) {
     const key = Object.keys(transform)[0] as Transform2dName;
     const value = (transform as Pick<Transformations, typeof key>)[key];
@@ -82,7 +90,11 @@ export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
       continue;
     }
     if (key === "rotate" || key === "rotateZ") {
-      m.rotate(value);
+      if (isMatrix(m)) {
+        m.rotate(value);
+      } else {
+        m.rotate(toDegrees(value), 0, 0);
+      }
       continue;
     }
     exhaustiveCheck(key);
@@ -93,3 +105,7 @@ export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
 const exhaustiveCheck = (a: never): never => {
   throw new Error(`Unknown transformation: ${a}`);
 };
+
+export const toDegrees = (rad: number) => {
+  return (rad * 180) / Math.PI;
+};

package/src/skia/types/Skia.ts

@@ -21,7 +21,6 @@ import type { SkVertices, VertexMode } from "./Vertices/Vertices";
 import type { DataFactory } from "./Data";
 import type { SVGFactory } from "./SVG";
 import type { TextBlobFactory } from "./TextBlob";
-import type { FontMgrFactory } from "./FontMgr/FontMgrFactory";
 import type { SurfaceFactory } from "./Surface";
 import type { SkRSXform } from "./RSXform";
 import type { SkPath } from "./Path/Path";
@@ -78,7 +77,6 @@ export interface Skia {
   Data: DataFactory;
   Image: ImageFactory;
   SVG: SVGFactory;
-  FontMgr: FontMgrFactory;
   TextBlob: TextBlobFactory;
   Surface: SurfaceFactory;
 }

package/src/skia/types/Typeface/Typeface.ts

@@ -1,6 +1,3 @@
 import type { SkJSIInstance } from "../JsiInstance";
 
-export interface SkTypeface extends SkJSIInstance<"Typeface"> {
-  readonly bold: boolean;
-  readonly italic: boolean;
-}
+export type SkTypeface = SkJSIInstance<"Typeface">;

package/src/skia/types/index.ts

@@ -2,7 +2,6 @@ export * from "./Picture";
 export * from "./Data";
 export * from "./SVG";
 export * from "./Surface";
-export * from "./FontMgr";
 export * from "./Vertices";
 export * from "./RuntimeEffect";
 export * from "./Shader";

package/src/skia/web/JsiSkFont.ts

@@ -6,7 +6,6 @@ import type {
   SkFont,
   SkPaint,
   SkPoint,
-  SkRect,
   SkTypeface,
 } from "../types";
 
@@ -19,14 +18,6 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     super(CanvasKit, ref, "Font");
   }
 
-  measureText(_text: string, _paint?: SkPaint): SkRect {
-    console.warn(
-      `measureText() is deprecated an returns an empty rectangle on React Native Web.
-Clients should use "Font.getGlyphWidths" instead (the latter does no shaping)`
-    );
-    return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
-  }
-
   getTextWidth(text: string, paint?: SkPaint | undefined) {
     const ids = this.getGlyphIDs(text);
     const widths = this.getGlyphWidths(ids, paint);

package/src/skia/web/JsiSkMatrix.ts

@@ -51,4 +51,8 @@ export class JsiSkMatrix
       )
     );
   }
+
+  identity() {
+    this.ref.set(this.CanvasKit.Matrix.identity());
+  }
 }

package/src/skia/web/JsiSkTextBlobFactory.ts

@@ -30,7 +30,7 @@ export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
       this.CanvasKit,
       this.CanvasKit.TextBlob.MakeFromRSXform(
         str,
-        rsxforms.map((f) => toValue(f)),
+        rsxforms.map((f) => Array.from(toValue<Float32Array>(f))).flat(),
         toValue(font)
       )
     );

package/src/skia/web/JsiSkia.ts

@@ -34,7 +34,6 @@ import { JsiSkDataFactory } from "./JsiSkDataFactory";
 import { JsiSkImageFactory } from "./JsiSkImageFactory";
 import { JsiSkSVGFactory } from "./JsiSkSVGFactory";
 import { JsiSkTextBlobFactory } from "./JsiSkTextBlobFactory";
-import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
 import { JsiSkFont } from "./JsiSkFont";
 import { MakeVertices } from "./JsiSkVerticesFactory";
 
@@ -90,7 +89,6 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Image: new JsiSkImageFactory(CanvasKit),
   SVG: new JsiSkSVGFactory(CanvasKit),
   TextBlob: new JsiSkTextBlobFactory(CanvasKit),
-  FontMgr: new JsiSkFontMgrFactory(CanvasKit),
   XYWHRect: (x: number, y: number, width: number, height: number) => {
     return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));
   },

package/src/values/hooks/useComputedValue.ts

@@ -16,8 +16,3 @@ export const useComputedValue = <R>(cb: () => R, values: unknown[]) =>
     // eslint-disable-next-line react-hooks/exhaustive-deps
     values
   );
-
-export const useDerivedValue = <R>(cb: () => R, values: unknown[]) => {
-  console.warn("useDerivedValue is deprecated. Use useComputedValue instead.");
-  return useComputedValue(cb, values);
-};