@shopify/react-native-skia 2.4.6 → 2.4.14

package/lib/typescript/lib/module/skia/core/Font.d.ts

@@ -1,4 +1,4 @@
 export function useFont(font: any, size: number | undefined, onError: any): import("../../../..").SkFont | null;
 export function matchFont(inputStyle?: {}, fontMgr?: import("../../../..").SkFontMgr): import("../../../..").SkFont;
-export function listFontFamilies(fontMgr?: import("../../../..").SkFontMgr): string[];
+export function listFontFamilies(fontMgr?: import("../../../..").SkFontMgr): any[];
 export function useFonts(sources: any): null;

package/lib/typescript/lib/module/skia/web/JsiSkCanvas.d.ts

@@ -24,7 +24,7 @@ export class JsiSkCanvas extends HostObject {
     drawText(str: any, x: any, y: any, paint: any, font: any): void;
     drawTextBlob(blob: any, x: any, y: any, paint: any): void;
     drawGlyphs(glyphs: any, positions: any, x: any, y: any, font: any, paint: any): void;
-    drawSvg(svg: any, width: any, height: any): void;
+    drawSvg(svg: any, _width: any, _height: any): void;
     save(): any;
     saveLayer(paint: any, bounds: any, backdrop: any, flags: any): any;
     restore(): void;

package/lib/typescript/lib/module/specs/SkiaPictureViewNativeComponent.web.d.ts

@@ -5,4 +5,4 @@ declare function SkiaPictureViewNativeComponent({ nativeID, debug, opaque, onLay
     debug: any;
     opaque: any;
     onLayout: any;
-}): import("react").DetailedReactHTMLElement<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+}): import("react").FunctionComponentElement<any>;

package/lib/typescript/lib/module/views/SkiaPictureView.web.d.ts

@@ -1,2 +1,2 @@
-export const SkiaPictureView: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export function SkiaPictureView(props: any): React.CElement<import("react-native").ViewProps, import("react-native").View>;
 import React from "react";

package/lib/typescript/src/skia/web/JsiSkCanvas.d.ts

@@ -27,7 +27,7 @@ export declare class JsiSkCanvas extends HostObject<Canvas, "Canvas"> implements
     drawText(str: string, x: number, y: number, paint: SkPaint, font: SkFont): void;
     drawTextBlob(blob: SkTextBlob, x: number, y: number, paint: SkPaint): void;
     drawGlyphs(glyphs: number[], positions: SkPoint[], x: number, y: number, font: SkFont, paint: SkPaint): void;
-    drawSvg(svg: SkSVG, width?: number, height?: number): void;
+    drawSvg(svg: SkSVG, _width?: number, _height?: number): void;
     save(): number;
     saveLayer(paint?: SkPaint, bounds?: SkRect | null, backdrop?: SkImageFilter | null, flags?: SaveLayerFlag): number;
     restore(): void;

package/lib/typescript/src/specs/SkiaPictureViewNativeComponent.web.d.ts

@@ -4,5 +4,5 @@ export interface NativeProps extends ViewProps {
     opaque?: boolean;
     nativeID: string;
 }
-declare const SkiaPictureViewNativeComponent: ({ nativeID, debug, opaque, onLayout, ...viewProps }: NativeProps) => import("react").FunctionComponentElement<import("..").SkiaPictureViewNativeProps & import("react").RefAttributes<import("../views/SkiaPictureView.web").SkiaPictureViewHandle>>;
+declare const SkiaPictureViewNativeComponent: ({ nativeID, debug, opaque, onLayout, ...viewProps }: NativeProps) => import("react").FunctionComponentElement<import("../views/SkiaPictureView.web").SkiaPictureViewProps>;
 export default SkiaPictureViewNativeComponent;

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

@@ -12,4 +12,7 @@ export interface SkiaPictureViewHandle {
     measure(callback: (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void): void;
     measureInWindow(callback: (x: number, y: number, width: number, height: number) => void): void;
 }
-export declare const SkiaPictureView: React.ForwardRefExoticComponent<SkiaPictureViewNativeProps & React.RefAttributes<SkiaPictureViewHandle>>;
+export interface SkiaPictureViewProps extends SkiaPictureViewNativeProps {
+    ref?: React.Ref<SkiaPictureViewHandle>;
+}
+export declare const SkiaPictureView: (props: SkiaPictureViewProps) => React.JSX.Element;

package/package.json

@@ -8,15 +8,15 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.4.6",
+  "version": "2.4.14",
   "skia": {
-    "version": "m142",
+    "version": "m144",
     "checksums": {
-      "android-armeabi-v7a": "5ae357eb26d9ec93797bacbc865b86eff6ac54b3a9466a1b0c41c27018cc3150",
-      "android-arm64-v8a": "c310bd5261de1ab5f4afdb05aa51bf0f56d625f6285617e149af517a2d375e52",
-      "android-x86": "26a18ade07de8318be2ec82bd82a1d7f2709893462229d70f0d353c6c8691cc3",
-      "android-x86_64": "46a5576b6f8e7d1372c27576ad750384c2d6f892bfe3fc0ee260c68d08ebd844",
-      "apple-xcframeworks": "343fad71c01e1f8331d4421c7efe0ae6dff3a7d25361c466dcda7dc3737cdd5c"
+      "android-armeabi-v7a": "8f7f83a4ae210cc28007f2c226d754e9ef7c929822ef60c56a4ccc134e726148",
+      "android-arm64-v8a": "5d799d988a6cbc0cb844a92882a2458e67990314791ea38f928d83d5e01cb828",
+      "android-x86": "711fbee4a1721b92604daa78fa6f8c7ce4a6a6c901973919bd030848adc4f81d",
+      "android-x86_64": "fe068aa70b5c8bcf991cfe99e9db38617aaeaf92defd08bc4f89384b4d4dbed4",
+      "apple-xcframeworks": "63e2789bd75236b16779abc7171b351aa50cd01c13f05b3e1d83b34336ceb77c"
     }
   },
   "skia-graphite": {
@@ -26,7 +26,7 @@
       "android-arm64-v8a": "6be2711ca4c31523d381420e98cabfe7e7939e246975c7b427968d5dd3b62be9",
       "android-x86": "888934ddc34f431c7fac5628f633dc11a4e84d68c41adb33307ae7586cc7b0b5",
       "android-x86_64": "2180a5be52d51bbf1dabaf95051ed0ce422b047157bcda6e486657c2c7b87ceb",
-      "apple-xcframeworks": "cb50d9c85c9f02389ecc433912145e4a7ce2277bfe26a69dd7f7a9db74c9e276"
+      "apple-xcframeworks": "6c9e4c565977acaf9d4f4b113050cfe8f9804602fd3cd4ec982c605fa7b040e6"
     }
   },
   "description": "High-performance React Native Graphics using Skia",

package/scripts/install-skia.mjs

@@ -59,10 +59,11 @@ console.log(
   `📦 Downloading Skia prebuilt binaries for ${releaseTag}`
 );
 
-const runCommand = (command, args) => {
+const runCommand = (command, args, options = {}) => {
   return new Promise((resolve, reject) => {
     const child = spawn(command, args, {
       stdio: ["ignore", "inherit", "inherit"],
+      ...options,
     });
     child.on("error", (error) => {
       reject(error);
@@ -77,6 +78,75 @@ const runCommand = (command, args) => {
   });
 };
 
+const runCommandWithOutput = (command, args, options = {}) => {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      stdio: ["ignore", "pipe", "pipe"],
+      ...options,
+    });
+    let stdout = "";
+    let stderr = "";
+    child.stdout.on("data", (data) => {
+      stdout += data.toString();
+    });
+    child.stderr.on("data", (data) => {
+      stderr += data.toString();
+    });
+    child.on("error", (error) => {
+      reject(error);
+    });
+    child.on("close", (code) => {
+      if (code === 0) {
+        resolve(stdout.trim());
+      } else {
+        reject(new Error(`Command ${command} exited with code ${code}: ${stderr}`));
+      }
+    });
+  });
+};
+
+const skiaDir = path.resolve(__dirname, "../../../externals/skia");
+
+const checkoutSkiaBranch = async (version) => {
+  const branchName = `chrome/${version}`;
+
+  // Check if the skia directory exists and is a git repo
+  // (won't exist when installed via npm - submodule is not included in the package)
+  if (!fs.existsSync(skiaDir) || !fs.existsSync(path.join(skiaDir, ".git"))) {
+    return;
+  }
+
+  console.log(`🔀 Checking out Skia branch: ${branchName}`);
+
+  try {
+    // Get current branch/commit
+    const currentRef = await runCommandWithOutput("git", ["rev-parse", "--abbrev-ref", "HEAD"], { cwd: skiaDir });
+
+    if (currentRef === branchName) {
+      console.log(`   ✓ Already on branch ${branchName}`);
+      return;
+    }
+
+    // Fetch the branch from origin
+    console.log(`   Fetching branch ${branchName} from origin...`);
+    try {
+      await runCommand("git", ["fetch", "origin", `${branchName}:${branchName}`], { cwd: skiaDir });
+    } catch (e) {
+      // Branch might already exist locally, try to update it
+      await runCommand("git", ["fetch", "origin", branchName], { cwd: skiaDir });
+    }
+
+    // Checkout the branch (use -f to discard local changes in the submodule)
+    console.log(`   Checking out ${branchName}...`);
+    await runCommand("git", ["checkout", "-f", branchName], { cwd: skiaDir });
+
+    console.log(`   ✓ Successfully checked out ${branchName}`);
+  } catch (error) {
+    console.error(`   ⚠️  Failed to checkout branch ${branchName}: ${error.message}`);
+    console.error("   Headers may not match the prebuilt binaries!");
+  }
+};
+
 const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
 const downloadToFile = (url, destPath, maxRetries = 5) => {
@@ -359,6 +429,9 @@ const clearDirectory = (directory) => {
 };
 
 const main = async () => {
+  // Ensure the skia submodule is on the correct branch for copying headers
+  await checkoutSkiaBranch(skiaVersion);
+
   // Check if binaries are installed and checksums match
   if (areBinariesInstalled() && verifyChecksums()) {
     console.log("✅ Prebuilt binaries already installed with matching checksums, skipping download");

package/src/skia/core/Font.ts

@@ -95,10 +95,15 @@ export const matchFont = (
   return Skia.Font(typeface, fontStyle.fontSize);
 };
 
-export const listFontFamilies = (fontMgr: SkFontMgr = Skia.FontMgr.System()) =>
-  new Array(fontMgr.countFamilies())
-    .fill(0)
-    .map((_, i) => fontMgr.getFamilyName(i));
+export const listFontFamilies = (
+  fontMgr: SkFontMgr = Skia.FontMgr.System()
+) => {
+  const families = new Set<string>();
+  for (let i = 0; i < fontMgr.countFamilies(); i++) {
+    families.add(fontMgr.getFamilyName(i));
+  }
+  return Array.from(families);
+};
 
 const loadTypefaces = (typefacesToLoad: Record<string, DataModule[]>) => {
   const promises = Object.keys(typefacesToLoad).flatMap((familyName) => {

package/src/skia/web/JsiSkCanvas.ts

@@ -312,9 +312,7 @@ export class JsiSkCanvas
     );
   }
 
-  drawSvg(svg: SkSVG, width?: number, height?: number) {
-    const ctm = this.ref.getLocalToDevice();
-    console.log({ ctm, width, height });
+  drawSvg(svg: SkSVG, _width?: number, _height?: number) {
     const image = this.CanvasKit.MakeImageFromCanvasImageSource(
       (svg as JsiSkSVG).ref
     );

package/src/views/SkiaPictureView.web.tsx

@@ -4,7 +4,6 @@ import React, {
   useEffect,
   useCallback,
   useImperativeHandle,
-  forwardRef,
 } from "react";
 import type { LayoutChangeEvent } from "react-native";
 
@@ -239,10 +238,12 @@ export interface SkiaPictureViewHandle {
   ): void;
 }
 
-export const SkiaPictureView = forwardRef<
-  SkiaPictureViewHandle,
-  SkiaPictureViewNativeProps
->((props, ref) => {
+export interface SkiaPictureViewProps extends SkiaPictureViewNativeProps {
+  ref?: React.Ref<SkiaPictureViewHandle>;
+}
+
+export const SkiaPictureView = (props: SkiaPictureViewProps) => {
+  const { ref } = props;
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const renderer = useRef<Renderer | null>(null);
   const redrawRequestsRef = useRef(0);
@@ -415,10 +416,10 @@ export const SkiaPictureView = forwardRef<
     }
   }, [picture, redraw]);
 
-  const { debug = false, ...viewProps } = props;
+  const { debug = false, ref: _ref, ...viewProps } = props;
   return (
     <Platform.View {...viewProps} onLayout={onLayoutEvent}>
       <canvas ref={canvasRef} style={{ display: "flex", flex: 1 }} />
     </Platform.View>
   );
-});
+};