@shopify/react-native-skia 2.4.15 → 2.4.17

package/scripts/install-skia.mjs

@@ -8,6 +8,12 @@ import { fileURLToPath } from "url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+// Allow skipping download via environment variable (useful for CI builds)
+if (process.env.SKIP_SKIA_DOWNLOAD === '1' || process.env.SKIP_SKIA_DOWNLOAD === 'true') {
+  console.log("⏭️  Skipping Skia download (SKIP_SKIA_DOWNLOAD is set)");
+  process.exit(0);
+}
+
 const repo = "shopify/react-native-skia";
 
 const packageJsonPath = path.join(__dirname, "..", "package.json");
@@ -42,13 +48,24 @@ const updateSkiaChecksums = (checksums, graphite = false) => {
 
 const GRAPHITE = !!process.env.SK_GRAPHITE;
 const prefix = GRAPHITE ? "skia-graphite" : "skia";
+
+// Build artifact names based on platform and Graphite mode
 const names = [
   `${prefix}-android-arm`,
   `${prefix}-android-arm-64`,
   `${prefix}-android-arm-x64`,
   `${prefix}-android-arm-x86`,
-  `${prefix}-apple-xcframeworks`,
+  `${prefix}-apple-ios-xcframeworks`,
+  `${prefix}-apple-macos-xcframeworks`,
 ];
+
+// Add tvOS only for non-Graphite builds
+if (!GRAPHITE) {
+  names.push(`${prefix}-apple-tvos-xcframeworks`);
+}
+
+// Note: macCatalyst is now included in the iOS xcframeworks, no separate download needed
+
 if (GRAPHITE) {
   names.push(`${prefix}-headers`);
 }
@@ -108,7 +125,9 @@ const runCommandWithOutput = (command, args, options = {}) => {
 const skiaDir = path.resolve(__dirname, "../../../externals/skia");
 
 const checkoutSkiaBranch = async (version) => {
-  const branchName = `chrome/${version}`;
+  // Extract base version (e.g., "m144a" -> "m144", "m142" -> "m142")
+  const baseVersion = version.match(/^(m\d+)/)?.[1] || version;
+  const branchName = `chrome/${baseVersion}`;
 
   // 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)
@@ -142,8 +161,7 @@ const checkoutSkiaBranch = async (version) => {
 
     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!");
+    throw new Error(`Failed to checkout branch ${branchName}: ${error.message}`);
   }
 };
 
@@ -346,11 +364,18 @@ const calculateLibraryChecksums = () => {
     }
   }
 
-  // Apple frameworks
-  const appleDir = path.join(libsDir, "apple");
-  const appleChecksum = calculateDirectoryChecksum(appleDir);
-  if (appleChecksum) {
-    checksums["apple-xcframeworks"] = appleChecksum;
+  // Apple platforms - calculate separate checksums for each platform
+  // Note: maccatalyst is included in iOS xcframeworks, not a separate artifact
+  const applePlatforms = GRAPHITE
+    ? ["ios", "macos"]
+    : ["ios", "tvos", "macos"];
+
+  for (const platform of applePlatforms) {
+    const platformDir = path.join(libsDir, "apple", platform);
+    const checksum = calculateDirectoryChecksum(platformDir);
+    if (checksum) {
+      checksums[`apple-${platform}-xcframeworks`] = checksum;
+    }
   }
 
   return checksums;
@@ -400,10 +425,16 @@ const areBinariesInstalled = () => {
     }
   }
 
-  // Check for Apple frameworks
-  const appleDir = path.join(libsDir, "apple");
-  if (!fs.existsSync(appleDir) || fs.readdirSync(appleDir).length === 0) {
-    return false;
+  // Check for Apple platform frameworks
+  const applePlatforms = GRAPHITE
+    ? ["ios", "macos"]
+    : ["ios", "tvos", "macos", "maccatalyst"];
+
+  for (const platform of applePlatforms) {
+    const platformDir = path.join(libsDir, "apple", platform);
+    if (!fs.existsSync(platformDir) || fs.readdirSync(platformDir).length === 0) {
+      return false;
+    }
   }
 
   return true;
@@ -523,45 +554,65 @@ const main = async () => {
     }
   });
 
-  // Create apple directory structure
+  // Create apple directory structure - now per-platform
   const appleDir = path.join(libsDir, "apple");
-  // The tar file extracts to skia-apple-xcframeworks/apple
-  const appleSrcDir = path.join(
-    artifactsDir,
-    `${prefix}-apple-xcframeworks`,
-    "apple"
-  );
-  if (fs.existsSync(appleSrcDir)) {
-    fs.mkdirSync(appleDir, { recursive: true });
-
-    // Copy all xcframeworks
-    fs.readdirSync(appleSrcDir).forEach((item) => {
-      const srcPath = path.join(appleSrcDir, item);
-      const destPath = path.join(appleDir, item);
-
-      if (fs.lstatSync(srcPath).isDirectory()) {
-        // Copy directory recursively
-        const copyDir = (src, dest) => {
-          fs.mkdirSync(dest, { recursive: true });
-          fs.readdirSync(src).forEach((file) => {
-            const srcFile = path.join(src, file);
-            const destFile = path.join(dest, file);
-            if (fs.lstatSync(srcFile).isDirectory()) {
-              copyDir(srcFile, destFile);
-            } else {
-              fs.copyFileSync(srcFile, destFile);
-            }
-          });
-        };
-        copyDir(srcPath, destPath);
-      } else {
-        fs.copyFileSync(srcPath, destPath);
-      }
-    });
-  }
+  fs.mkdirSync(appleDir, { recursive: true });
+
+  // Define the platform artifacts to process
+  // Note: maccatalyst is included in iOS xcframeworks, not a separate artifact
+  const applePlatformArtifacts = GRAPHITE
+    ? [
+        { artifact: `${prefix}-apple-ios-xcframeworks`, srcSubdir: "ios", dest: "ios" },
+        { artifact: `${prefix}-apple-macos-xcframeworks`, srcSubdir: "macos", dest: "macos" },
+      ]
+    : [
+        { artifact: `${prefix}-apple-ios-xcframeworks`, srcSubdir: "ios", dest: "ios" },
+        { artifact: `${prefix}-apple-tvos-xcframeworks`, srcSubdir: "tvos", dest: "tvos" },
+        { artifact: `${prefix}-apple-macos-xcframeworks`, srcSubdir: "macos", dest: "macos" },
+      ];
+
+  applePlatformArtifacts.forEach(({ artifact, srcSubdir, dest }) => {
+    // The tar file extracts to artifact_name/srcSubdir (e.g., skia-apple-ios-xcframeworks/ios)
+    const appleSrcDir = path.join(artifactsDir, artifact, srcSubdir);
+    const destDir = path.join(appleDir, dest);
+
+    console.log(`   Checking ${appleSrcDir} -> ${destDir}`);
+    if (fs.existsSync(appleSrcDir)) {
+      console.log(`   ✓ Copying ${artifact}/${srcSubdir}`);
+      fs.mkdirSync(destDir, { recursive: true });
+
+      // Copy all xcframeworks
+      fs.readdirSync(appleSrcDir).forEach((item) => {
+        const srcPath = path.join(appleSrcDir, item);
+        const destPath = path.join(destDir, item);
+
+        if (fs.lstatSync(srcPath).isDirectory()) {
+          // Copy directory recursively
+          const copyDir = (src, dest) => {
+            fs.mkdirSync(dest, { recursive: true });
+            fs.readdirSync(src).forEach((file) => {
+              const srcFile = path.join(src, file);
+              const destFile = path.join(dest, file);
+              if (fs.lstatSync(srcFile).isDirectory()) {
+                copyDir(srcFile, destFile);
+              } else {
+                fs.copyFileSync(srcFile, destFile);
+              }
+            });
+          };
+          copyDir(srcPath, destPath);
+        } else {
+          fs.copyFileSync(srcPath, destPath);
+        }
+      });
+    } else {
+      console.log(`   ✗ Source directory not found: ${appleSrcDir}`);
+    }
+  });
 
   // Create or remove Graphite marker files based on build type
   const androidMarkerFile = path.join(androidDir, "graphite.enabled");
+  // Apple marker file stays at the apple root level (libs/apple/graphite.enabled)
   const appleMarkerFile = path.join(appleDir, "graphite.enabled");
 
   if (GRAPHITE) {

package/src/external/reanimated/buffers.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from "react";
-import type { WorkletFunction } from "react-native-reanimated/lib/typescript/commonTypes";
+import type { WorkletFunction } from "react-native-worklets";
 
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
 import { Skia } from "../../skia";

package/src/renderer/Canvas.tsx

@@ -15,7 +15,7 @@ import type {
   View,
   ViewProps,
 } from "react-native";
-import type { AnimatedRef, SharedValue } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
 
 import Rea from "../external/reanimated/ReanimatedProxy";
 import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
@@ -113,7 +113,8 @@ export const Canvas = ({
               // @ts-expect-error
               measure(viewRef.current.canvasRef)
             : { width: 0, height: 0 }
-          : measure(viewRef as AnimatedRef<View>);
+          : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            measure(viewRef as any);
       if (result) {
         const { width, height } = result;
         if (onSize.value.width !== width || onSize.value.height !== height) {

package/src/skia/types/ContourMeasure.tsx

@@ -36,8 +36,7 @@ export interface SkContourMeasure extends SkJSIInstance<"ContourMeasure"> {
   length(): number;
 }
 
-export interface SkContourMeasureIter
-  extends SkJSIInstance<"ContourMeasureIter"> {
+export interface SkContourMeasureIter extends SkJSIInstance<"ContourMeasureIter"> {
   /**
    *  Iterates through contours in path, returning a contour-measure object for each contour
    *  in the path. Returns null when it is done.

package/src/skia/types/Image/ImageFactory.ts

@@ -94,4 +94,26 @@ export interface ImageFactory {
    * @param bytesPerRow
    */
   MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number): SkImage | null;
+
+  /**
+   * Creates an SkImage from a WebGPU texture.
+   * This allows using textures rendered by WebGPU in Skia drawings.
+   *
+   * Note: This method is only available when the Graphite backend is enabled.
+   *
+   * @param texture - A GPUTexture object from the WebGPU API
+   * @returns An SkImage wrapping the texture, or throws if the texture is invalid
+   */
+  MakeImageFromTexture(texture: GPUTexture): SkImage;
+
+  /**
+   * Creates a WebGPU texture from an SkImage.
+   * This allows using Skia images in WebGPU rendering pipelines.
+   *
+   * Note: This method is only available when the Graphite backend is enabled.
+   *
+   * @param image - An SkImage to convert to a texture
+   * @returns A GPUTexture containing the image data, or throws if conversion fails
+   */
+  MakeTextureFromImage(image: SkImage): GPUTexture;
 }

package/src/skia/types/RuntimeEffect/RuntimeEffect.ts

@@ -10,8 +10,7 @@ export interface SkSLUniform {
   isInteger: boolean;
 }
 
-export interface SkRuntimeShaderBuilder
-  extends SkJSIInstance<"RuntimeShaderBuilder"> {
+export interface SkRuntimeShaderBuilder extends SkJSIInstance<"RuntimeShaderBuilder"> {
   setUniform(name: string, value: readonly number[]): void;
 }
 

package/src/skia/types/Skia.ts

@@ -108,4 +108,21 @@ export interface Skia {
   Context(surface: bigint, width: number, height: number): SkiaContext;
   NativeBuffer: NativeBufferFactory;
   Recorder(): JsiRecorder;
+  /**
+   * Returns whether the Graphite backend is enabled and WebGPU is available.
+   *
+   * @returns true if Graphite/WebGPU is available, false otherwise
+   */
+  hasDevice(): boolean;
+  /**
+   * Returns the shared WebGPU device used by Skia's Graphite backend.
+   * This allows direct access to the GPU device for WebGPU operations.
+   *
+   * Note: This method is only available when the Graphite backend is enabled.
+   * Use hasDevice() to check availability before calling this method.
+   *
+   * @returns The GPUDevice used by Skia
+   * @throws Error if Graphite backend is not enabled
+   */
+  getDevice(): GPUDevice;
 }

package/src/skia/web/JsiSkImageFactory.ts

@@ -101,4 +101,12 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
     }
     return new JsiSkImage(this.CanvasKit, image);
   }
+
+  MakeImageFromTexture(_texture: GPUTexture): SkImage {
+    return throwNotImplementedOnRNWeb<SkImage>();
+  }
+
+  MakeTextureFromImage(_image: SkImage): GPUTexture {
+    return throwNotImplementedOnRNWeb<GPUTexture>();
+  }
 }

package/src/skia/web/JsiSkia.ts

@@ -140,4 +140,10 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Recorder: () => {
     return throwNotImplementedOnRNWeb<JsiRecorder>();
   },
+  getDevice: () => {
+    return throwNotImplementedOnRNWeb<GPUDevice>();
+  },
+  hasDevice: () => {
+    return false;
+  },
 });

package/src/sksg/Recorder/commands/ColorFilters.ts

@@ -27,8 +27,9 @@ type Props = {
   [NodeType.SRGBToLinearGammaColorFilter]: Record<string, never>;
 };
 
-interface PushColorFilter<T extends keyof Props>
-  extends Command<CommandType.PushColorFilter> {
+interface PushColorFilter<
+  T extends keyof Props,
+> extends Command<CommandType.PushColorFilter> {
   colorFilterType: T;
   props: Props[T];
 }

package/src/sksg/Recorder/commands/ImageFilters.ts

@@ -224,8 +224,9 @@ type Props = {
   [NodeType.RuntimeShaderImageFilter]: RuntimeShaderImageFilterProps;
 };
 
-interface PushImageFilter<T extends keyof Props>
-  extends Command<CommandType.PushImageFilter> {
+interface PushImageFilter<
+  T extends keyof Props,
+> extends Command<CommandType.PushImageFilter> {
   imageFilterType: T;
   props: Props[T];
 }

package/src/sksg/Recorder/commands/PathEffects.ts

@@ -121,8 +121,9 @@ type Props = {
   [NodeType.Line2DPathEffect]: Line2DPathEffectProps;
 };
 
-interface PushPathEffect<T extends keyof Props>
-  extends Command<CommandType.PushPathEffect> {
+interface PushPathEffect<
+  T extends keyof Props,
+> extends Command<CommandType.PushPathEffect> {
   pathEffectType: T;
   props: Props[T];
 }

package/src/sksg/Recorder/commands/Shaders.ts

@@ -257,8 +257,9 @@ type Props = {
   [NodeType.Blend]: BlendProps;
 };
 
-interface PushShader<T extends keyof Props>
-  extends Command<CommandType.PushShader> {
+interface PushShader<
+  T extends keyof Props,
+> extends Command<CommandType.PushShader> {
   shaderType: T;
   props: Props[T];
   children: number;

package/src/specs/SkiaPictureViewNativeComponent.ts

@@ -1,11 +1,18 @@
 import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
 import type { ViewProps } from "react-native";
+import type { WithDefault } from "react-native/Libraries/Types/CodegenTypes";
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - pointerEvents needs to be redeclared for codegen to generate native bindings
 export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
   colorSpace?: string;
   androidWarmup?: boolean;
+  pointerEvents?: WithDefault<
+    "auto" | "none" | "box-none" | "box-only",
+    "auto"
+  >;
 }
 
 // eslint-disable-next-line import/no-default-export

package/src/views/SkiaPictureView.web.tsx

@@ -419,7 +419,10 @@ export const SkiaPictureView = (props: SkiaPictureViewProps) => {
   const { debug = false, ref: _ref, ...viewProps } = props;
   return (
     <Platform.View {...viewProps} onLayout={onLayoutEvent}>
-      <canvas ref={canvasRef} style={{ display: "flex", flex: 1 }} />
+      <canvas
+        ref={canvasRef}
+        style={{ display: "block", width: "100%", height: "100%" }}
+      />
     </Platform.View>
   );
 };