@shopify/react-native-skia 2.8.0 → 2.9.0

package/src/Platform/Platform.web.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 import type { ViewComponent, ViewProps } from "react-native";
 
 import type { DataModule } from "../skia/types";
-import { isRNModule } from "../skia/types";
+import { isRNModule, unwrapModule } from "../skia/types";
 
 import type { IPlatform } from "./IPlatform";
 
@@ -40,12 +40,16 @@ export const Platform: IPlatform = {
   OS: "web",
   PixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1, // window is not defined on node
   resolveAsset: (source: DataModule) => {
-    if (isRNModule(source)) {
-      if (typeof source === "number" && typeof require === "function") {
+    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(source);
+        const { httpServerLocation, name, type } = getAssetByID(asset);
         const uri = `${httpServerLocation}/${name}.${type}`;
         return uri;
       }
@@ -53,10 +57,7 @@ export const Platform: IPlatform = {
         "Asset source is a number - this is not supported on the web"
       );
     }
-    if ("uri" in source) {
-      return source.uri;
-    }
-    return source.default;
+    return asset.uri;
   },
   findNodeHandle: () => {
     throw new Error("findNodeHandle is not supported on the web");

package/src/skia/core/Font.ts

@@ -2,7 +2,7 @@
 import { useEffect, useMemo, useState } from "react";
 
 import { Skia } from "../Skia";
-import { FontSlant } from "../types";
+import { FontSlant, FontWeight } from "../types";
 import type { DataModule, DataSourceParam, SkFontMgr } from "../types";
 import { Platform } from "../../Platform";
 import type { SkTypefaceFontProvider } from "../types/Paragraph/TypefaceFontProvider";
@@ -29,8 +29,18 @@ export const useFont = (
   }, [size, typeface]);
 };
 
-type Slant = "normal" | "italic" | "oblique";
-type Weight =
+/**
+ * React Native style font slant, as found in the `fontStyle` property of
+ * `TextStyle`. The Skia {@link FontSlant} enum is accepted as well.
+ */
+export type RNFontSlant = "normal" | "italic" | "oblique" | FontSlant;
+
+/**
+ * React Native style font weight, as found in the `fontWeight` property of
+ * `TextStyle`. Numeric weights such as the {@link FontWeight} enum values
+ * used by the Paragraph API are accepted as well.
+ */
+export type RNFontWeight =
   | "normal"
   | "bold"
   | "100"
@@ -41,13 +51,20 @@ type Weight =
   | "600"
   | "700"
   | "800"
-  | "900";
+  | "900"
+  | FontWeight;
 
-interface RNFontStyle {
+/**
+ * Font style accepted by {@link matchFont}.
+ * `fontStyle` and `fontWeight` accept both the React Native string values
+ * and the Skia enums ({@link FontSlant} and {@link FontWeight}), so the same
+ * values can be shared with the Paragraph API.
+ */
+export interface RNFontStyle {
   fontFamily: string;
   fontSize: number;
-  fontStyle: Slant;
-  fontWeight: Weight;
+  fontStyle: RNFontSlant;
+  fontWeight: RNFontWeight;
 }
 
 const defaultFontStyle: RNFontStyle = {
@@ -57,8 +74,10 @@ const defaultFontStyle: RNFontStyle = {
   fontWeight: "normal",
 };
 
-const slant = (s: Slant) => {
-  if (s === "italic") {
+const slant = (s: RNFontSlant): FontSlant => {
+  if (typeof s === "number") {
+    return s;
+  } else if (s === "italic") {
     return FontSlant.Italic;
   } else if (s === "oblique") {
     return FontSlant.Oblique;
@@ -67,14 +86,16 @@ const slant = (s: Slant) => {
   }
 };
 
-const weight = (fontWeight: Weight) => {
+const weight = (fontWeight: RNFontWeight): FontWeight => {
   switch (fontWeight) {
     case "normal":
-      return 400;
+      return FontWeight.Normal;
     case "bold":
-      return 700;
+      return FontWeight.Bold;
     default:
-      return parseInt(fontWeight, 10);
+      return typeof fontWeight === "number"
+        ? fontWeight
+        : (parseInt(fontWeight, 10) as FontWeight);
   }
 };
 

package/src/skia/types/Data/Data.ts

@@ -3,15 +3,15 @@ import type { SkJSIInstance } from "../JsiInstance";
 export type SkData = SkJSIInstance<"Data">;
 
 type RNModule = number;
-type ESModule = {
-  __esModule: true;
-  default: string;
-};
 type MetroAsset = {
   uri: string;
   width: number;
   height: number;
 };
+type ESModule = {
+  __esModule: true;
+  default: RNModule | MetroAsset | string;
+};
 
 export type DataModule = RNModule | ESModule | MetroAsset;
 export type DataSource = DataModule | string | Uint8Array;
@@ -19,3 +19,13 @@ export type DataSourceParam = DataSource | null | undefined;
 
 export const isRNModule = (mod: DataModule): mod is RNModule =>
   typeof mod === "number";
+
+// Since Expo SDK 52, on web, require() may return an ES module interop
+// object ({ default: <asset> }) instead of the asset itself.
+// See https://github.com/Shopify/react-native-skia/issues/2784
+export const unwrapModule = (
+  mod: DataModule
+): RNModule | MetroAsset | string =>
+  typeof mod === "object" && mod !== null && "default" in mod
+    ? mod.default
+    : mod;

package/src/skia/web/JsiSkFont.ts

@@ -1,4 +1,4 @@
-import type { CanvasKit, Font } from "canvaskit-wasm";
+import type { CanvasKit, Font, Paint } from "canvaskit-wasm";
 
 import type {
   FontEdging,
@@ -10,7 +10,7 @@ import type {
   SkTypeface,
 } from "../types";
 
-import { HostObject, getEnum, throwNotImplementedOnRNWeb } from "./Host";
+import { HostObject, getEnum } from "./Host";
 import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
@@ -21,8 +21,52 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     super(CanvasKit, ref, "Font");
   }
 
-  measureText(_text: string, _paint?: SkPaint | undefined) {
-    return throwNotImplementedOnRNWeb<SkRect>();
+  measureText(text: string, paint?: SkPaint | undefined): SkRect {
+    // CanvasKit doesn't expose SkFont::measureText directly, so we polyfill
+    // it: for each glyph we take its ink bounds (relative to its own origin),
+    // offset it by the accumulated advance, and union the results. This
+    // matches the bounds computed natively by SkFont::measureText.
+    const glyphs = this.ref.getGlyphIDs(text);
+    if (glyphs.length === 0) {
+      return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
+    }
+    const skPaint = paint ? JsiSkPaint.fromValue<Paint>(paint) : null;
+    // Flattened rectangles: 4 floats (left, top, right, bottom) per glyph.
+    const bounds = this.ref.getGlyphBounds(glyphs, skPaint);
+    const advances = this.ref.getGlyphWidths(glyphs, skPaint);
+    let left = 0;
+    let top = 0;
+    let right = 0;
+    let bottom = 0;
+    let isEmpty = true;
+    let xPos = 0;
+    for (let i = 0; i < glyphs.length; i++) {
+      const l = bounds[i * 4] + xPos;
+      const t = bounds[i * 4 + 1];
+      const r = bounds[i * 4 + 2] + xPos;
+      const b = bounds[i * 4 + 3];
+      xPos += advances[i];
+      // Skip empty glyph bounds (e.g. whitespace), like SkRect::join does.
+      if (l >= r || t >= b) {
+        continue;
+      }
+      if (isEmpty) {
+        left = l;
+        top = t;
+        right = r;
+        bottom = b;
+        isEmpty = false;
+      } else {
+        left = Math.min(left, l);
+        top = Math.min(top, t);
+        right = Math.max(right, r);
+        bottom = Math.max(bottom, b);
+      }
+    }
+    return new JsiSkRect(
+      this.CanvasKit,
+      this.CanvasKit.LTRBRect(left, top, right, bottom)
+    );
   }
 
   getTextWidth(text: string, paint?: SkPaint | undefined) {