@shopify/react-native-skia 2.4.16 → 2.4.18

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`);
 }
@@ -347,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;
@@ -401,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;
@@ -524,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/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/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/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>
   );
 };