@shopify/react-native-skia 2.4.21 → 2.5.1

package/package.json

@@ -8,37 +8,13 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.4.21",
-  "skia": {
-    "version": "m144c",
-    "checksums": {
-      "android-armeabi-v7a": "e406c3e8103a2efb6a514ac91346d7f9f81adbae14dc2d0e302e84fb8c5f80f7",
-      "android-arm64-v8a": "75069b0f7c66ad3382553e947d583265de033cc856c394110243da098306955f",
-      "android-x86": "714b93a7bdf005a23699f47e6255e4e690086c52a1998c20196a46f95b709b09",
-      "android-x86_64": "5bd2972d13293b09b35e2c0149b7d103dc4fb0f2837c3dd169ce06795b812714",
-      "apple-ios-xcframeworks": "43f62ea742c55ecc57864505ff752a517fd2c31412a19914032d044ac4f987ee",
-      "apple-tvos-xcframeworks": "0f6b5c75b4e686e72f5cc8508e60074463f757ca7a0dcbd07e095c055a537c58",
-      "apple-macos-xcframeworks": "31f57bcf6caff1c268984609b0e4a2abd966bfa8ddcf074331d94e0f988f93d3"
-    }
-  },
-  "skia-graphite": {
-    "version": "m142b",
-    "checksums": {
-      "android-armeabi-v7a": "3e40f44c804194fa0983c46903f834e8f834c6dd96534c7fa1b4ebb4f409527d",
-      "android-arm64-v8a": "d6c3035449fcf7ef13369b0d6c4ef41f3177d15074eeb195201e0ba4cfb2f527",
-      "android-x86": "6dc229847420b8a43c15098cdcb4fe45b2df20a38ad69f37e0aa91c832499c2a",
-      "android-x86_64": "ecae351d98af3b175d40d894520c2e3263034276bb0b0e9d2f9c19ba7dc046fa",
-      "apple-ios-xcframeworks": "6f60f03faaeebfb798615d09715040790ff95e75bf95028893ced6f514ab5196",
-      "apple-macos-xcframeworks": "07467cd1778053537528ed91c7a35d116e1a4644819f0aad8e06e7d884591dea"
-    }
-  },
+  "version": "2.5.1",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
   "files": [
-    "scripts/install-skia.mjs",
     "scripts/setup-canvaskit.js",
     "src/**",
     "lib/**",
@@ -68,14 +44,13 @@
     "clean-skia": "yarn rimraf ./libs && yarn rimraf ../../externals/skia/out",
     "build-skia": "tsx ./scripts/build-skia.ts",
     "copy-skia-headers": "tsx ./scripts/copy-skia-headers.ts",
-    "install-skia": "node ./scripts/install-skia.mjs --force && yarn copy-skia-headers",
+    "install-skia-graphite": "tsx ./scripts/install-skia-graphite.ts",
     "clang-format": "yarn clang-format-ios && yarn clang-format-android && yarn clang-format-common",
     "clang-format-ios": "find apple/ -iname '*.h' -o -iname '*.mm' -o -iname '*.cpp' | xargs clang-format -i",
     "clang-format-android": "find android/cpp/ -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' | xargs clang-format -i",
     "clang-format-common": "find cpp/ \\( -path 'cpp//skia' -prune \\) -o \\( -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' \\) -print | xargs clang-format -i",
     "workflow-copy-libs": "tsx ./scripts/workflow-copy-libs.ts",
-    "cpplint": "cpplint --linelength=230 --filter=-legal/copyright,-whitespace/indent,-whitespace/comments,-whitespace/ending_newline,-build/include_order,-runtime/references,-readability/todo,-whitespace/blank_line,-whitespace/todo,-runtime/int,-build/c++11,-whitespace/parens --exclude=package/cpp/skia --exclude=package/ios --exclude=package/android/build --exclude=package/node_modules --recursive package",
-    "postinstall": "node ./scripts/install-skia.mjs"
+    "cpplint": "cpplint --linelength=230 --filter=-legal/copyright,-whitespace/indent,-whitespace/comments,-whitespace/ending_newline,-build/include_order,-runtime/references,-readability/todo,-whitespace/blank_line,-whitespace/todo,-runtime/int,-build/c++11,-whitespace/parens --exclude=package/cpp/skia --exclude=package/ios --exclude=package/android/build --exclude=package/node_modules --recursive package"
   },
   "repository": {
     "type": "git",
@@ -137,11 +112,12 @@
     "react": "19.0.0",
     "react-native": "0.83.1",
     "react-native-builder-bob": "0.18.2",
-    "react-native-reanimated": "4.2.1",
-    "react-native-worklets": "0.7.1",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-worklets": "^0.7.0",
     "rimraf": "3.0.2",
     "semantic-release": "^24.1.0",
     "semantic-release-yarn": "^3.0.2",
+    "tar": "^7.5.9",
     "ts-jest": "29.4.3",
     "tsx": "^4.21.0",
     "typescript": "^5.2.2",
@@ -149,6 +125,10 @@
   },
   "dependencies": {
     "canvaskit-wasm": "0.40.0",
+    "react-native-skia-android": "144.3.0",
+    "react-native-skia-apple-ios": "144.3.0",
+    "react-native-skia-apple-macos": "144.3.0",
+    "react-native-skia-apple-tvos": "144.3.0",
     "react-reconciler": "0.31.0"
   },
   "eslintIgnore": [

package/react-native-skia.podspec

@@ -4,76 +4,104 @@ require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
-# Check if Skia prebuilt binaries are installed
-# The postinstall script downloads these - if missing, the user needs to run it
-skia_libs_path = File.join(__dir__, "libs/apple/ios")
-unless File.exist?(skia_libs_path) && Dir.glob(File.join(skia_libs_path, "*.xcframework")).any?
-  Pod::UI.puts "\n"
-  Pod::UI.puts "┌─────────────────────────────────────────────────────────────────────────────┐".red
-  Pod::UI.puts "│                                                                             │".red
-  Pod::UI.puts "│  ERROR: Skia prebuilt binaries not found!                                   │".red
-  Pod::UI.puts "│                                                                             │".red
-  Pod::UI.puts "│  The postinstall script has not run. This is required to download the      │".red
-  Pod::UI.puts "│  Skia binaries. Some package managers (pnpm, bun, yarn berry) require       │".red
-  Pod::UI.puts "│  explicit trust for packages with postinstall scripts.                      │".red
-  Pod::UI.puts "│                                                                             │".red
-  Pod::UI.puts "│  To fix this:                                                               │".red
-  Pod::UI.puts "│                                                                             │".red
-  Pod::UI.puts "│  • npm/yarn classic: Run 'npm rebuild @shopify/react-native-skia' or        │".red
-  Pod::UI.puts "│                       reinstall the package                                 │".red
-  Pod::UI.puts "│                                                                             │".red
-  Pod::UI.puts "│  • bun: Run 'bun add --trust @shopify/react-native-skia'                    │".red
-  Pod::UI.puts "│                                                                             │".red
-  Pod::UI.puts "│  • pnpm: Add to package.json:                                               │".red
-  Pod::UI.puts "│          \"pnpm\": { \"onlyBuiltDependencies\": [\"@shopify/react-native-skia\"] }│".red
-  Pod::UI.puts "│          Then reinstall the package                                         │".red
-  Pod::UI.puts "│                                                                             │".red
-  Pod::UI.puts "│  See: https://shopify.github.io/react-native-skia/docs/getting-started/installation │".red
-  Pod::UI.puts "│                                                                             │".red
-  Pod::UI.puts "└─────────────────────────────────────────────────────────────────────────────┘".red
-  Pod::UI.puts "\n"
-  raise "Skia prebuilt binaries not found. Please run the postinstall script."
-end
-
-# Check if Graphite is available
-# Detection method priority:
-# 1. SK_GRAPHITE environment variable (explicit override, fastest)
-# 2. Marker file in libs directory (set during Skia build)
-# 3. Default to OFF (no slow nm symbol detection)
+# Check if Graphite is enabled
 use_graphite = false
-
 if ENV['SK_GRAPHITE']
-  # Explicit override via environment variable
   use_graphite = ENV['SK_GRAPHITE'] == '1' || ENV['SK_GRAPHITE'].downcase == 'true'
-  puts "-- SK_GRAPHITE detection: using environment variable (#{use_graphite ? 'ON' : 'OFF'})"
-elsif File.exist?(File.join(__dir__, "libs/apple/graphite.enabled"))
-  # Marker file indicates Graphite-enabled build
-  use_graphite = true
-  puts "-- SK_GRAPHITE detection: marker file found"
+  puts "-- SK_GRAPHITE: using environment variable (#{use_graphite ? 'ON' : 'OFF'})"
 else
-  puts "-- SK_GRAPHITE detection: no marker file, assuming OFF"
-end
-
-if use_graphite
-  puts "-- SK_GRAPHITE: ON"
-else
-  puts "-- SK_GRAPHITE: OFF"
+  puts "-- SK_GRAPHITE: OFF (set SK_GRAPHITE=1 to enable)"
 end
 
 # Set preprocessor definitions based on GRAPHITE flag
-preprocessor_defs = use_graphite ? 
-  '$(inherited) SK_GRAPHITE=1 SK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API=1 SK_DISABLE_LEGACY_SHAPER_FACTORY=1' : 
+preprocessor_defs = use_graphite ?
+  '$(inherited) SK_GRAPHITE=1 SK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API=1 SK_DISABLE_LEGACY_SHAPER_FACTORY=1' :
   '$(inherited) SK_METAL=1 SK_GANESH=1 SK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API=1 SK_DISABLE_LEGACY_SHAPER_FACTORY=1'
 
-# Define framework names (without paths)
+# Define framework names
 framework_names = ['libskia', 'libsvg', 'libskshaper', 'libskparagraph',
                    'libskunicode_core', 'libskunicode_libgrapheme',
                    'libskottie', 'libsksg']
 
-# Build platform-specific framework paths
-ios_frameworks = framework_names.map { |f| "libs/apple/ios/#{f}.xcframework" }
-tvos_frameworks = framework_names.map { |f| "libs/apple/tvos/#{f}.xcframework" }
-osx_frameworks = framework_names.map { |f| "libs/apple/macos/#{f}.xcframework" }
+# Build platform-specific framework paths (relative to pod's libs directory)
+ios_frameworks = framework_names.map { |f| "libs/ios/#{f}.xcframework" }
+osx_frameworks = framework_names.map { |f| "libs/macos/#{f}.xcframework" }
+# tvOS frameworks - only declare if libs/tvos/ already exists (otherwise leave empty)
+tvos_frameworks = if use_graphite || !Dir.exist?(File.join(__dir__, 'libs', 'tvos'))
+  []
+else
+  framework_names.map { |f| "libs/tvos/#{f}.xcframework" }
+end
+
+# Prepare command resolves paths at RUNTIME (not evaluation time) to ensure deterministic checksums
+# This script:
+# 1. Checks if xcframeworks are already installed (e.g., from Graphite script)
+# 2. If not, resolves npm package paths and copies xcframeworks
+# The script content is deterministic - no machine-specific paths embedded in the podspec
+prepare_command_script = <<-'SCRIPT'
+node -e "
+const path = require('path');
+const fs = require('fs');
+const { execSync } = require('child_process');
+
+const iosLibs = 'libs/ios';
+const macosLibs = 'libs/macos';
+
+// Check if xcframeworks are already installed
+const hasIos = fs.existsSync(iosLibs) && fs.readdirSync(iosLibs).some(f => f.endsWith('.xcframework'));
+const hasMacos = fs.existsSync(macosLibs) && fs.readdirSync(macosLibs).some(f => f.endsWith('.xcframework'));
+
+if (hasIos && hasMacos) {
+  console.log('-- Using pre-installed xcframeworks from libs/');
+  process.exit(0);
+}
+
+// Determine package prefix based on SK_GRAPHITE env var
+const useGraphite = process.env.SK_GRAPHITE === '1' || (process.env.SK_GRAPHITE || '').toLowerCase() === 'true';
+const prefix = useGraphite ? 'react-native-skia-graphite' : 'react-native-skia';
+
+// Resolve package paths
+let iosPackage, macosPackage, tvosPackage;
+try {
+  iosPackage = path.dirname(require.resolve(prefix + '-apple-ios/package.json'));
+  macosPackage = path.dirname(require.resolve(prefix + '-apple-macos/package.json'));
+} catch (e) {
+  console.error('ERROR: Could not find ' + prefix + '-apple-ios or ' + prefix + '-apple-macos');
+  console.error('Make sure you have run yarn install or npm install');
+  process.exit(1);
+}
+
+// Verify xcframeworks exist in the packages
+const iosXcf = path.join(iosPackage, 'libs');
+if (!fs.existsSync(iosXcf) || !fs.readdirSync(iosXcf).some(f => f.endsWith('.xcframework'))) {
+  console.error('ERROR: Skia prebuilt binaries not found in ' + prefix + '-apple-ios!');
+  process.exit(1);
+}
+
+console.log('-- Skia iOS package: ' + iosPackage);
+console.log('-- Skia macOS package: ' + macosPackage);
+
+// Clean and copy
+execSync('rm -rf libs/ios libs/macos libs/tvos', { stdio: 'inherit' });
+execSync('mkdir -p libs/ios libs/macos', { stdio: 'inherit' });
+execSync('cp -R \"' + iosPackage + '/libs/\"*.xcframework libs/ios/', { stdio: 'inherit' });
+execSync('cp -R \"' + macosPackage + '/libs/\"*.xcframework libs/macos/', { stdio: 'inherit' });
+
+// Handle tvOS (non-Graphite only)
+if (!useGraphite) {
+  try {
+    tvosPackage = path.dirname(require.resolve(prefix + '-apple-tvos/package.json'));
+    console.log('-- Skia tvOS package: ' + tvosPackage);
+    execSync('mkdir -p libs/tvos', { stdio: 'inherit' });
+    execSync('cp -R \"' + tvosPackage + '/libs/\"*.xcframework libs/tvos/', { stdio: 'inherit' });
+  } catch (e) {
+    console.log('-- tvOS package not found, skipping');
+  }
+}
+
+console.log('-- Copied xcframeworks from npm packages');
+"
+SCRIPT
 
 Pod::Spec.new do |s|
   s.name         = "react-native-skia"
@@ -85,13 +113,17 @@ Pod::Spec.new do |s|
   s.homepage     = "https://github.com/shopify/react-native-skia"
   s.license      = "MIT"
   s.license    = { :type => "MIT", :file => "LICENSE.md" }
-  s.authors      = { 
+  s.authors      = {
     "Christian Falch" => "christian.falch@gmail.com",
     "William Candillon" => "wcandillon@gmail.com"
   }
   s.platforms    = { :ios => "14.0", :tvos => "13.0", :osx => "11" }
   s.source       = { :git => "https://github.com/shopify/react-native-skia/react-native-skia.git", :tag => "#{s.version}" }
 
+  # Copy xcframeworks from npm packages into pod directory structure
+  # The script is deterministic - path resolution happens at runtime, not evaluation time
+  s.prepare_command = prepare_command_script
+
   s.requires_arc = true
   s.pod_target_xcconfig = {
     'GCC_PREPROCESSOR_DEFINITIONS' => preprocessor_defs,
@@ -102,7 +134,7 @@ Pod::Spec.new do |s|
 
   s.frameworks = ['MetalKit', 'AVFoundation', 'AVKit', 'CoreMedia']
 
-  # Platform-specific vendored frameworks
+  # Platform-specific vendored frameworks (copied into libs/)
   s.ios.vendored_frameworks = ios_frameworks
   s.osx.vendored_frameworks = osx_frameworks
 
@@ -111,9 +143,12 @@ Pod::Spec.new do |s|
     s.tvos.vendored_frameworks = tvos_frameworks
   end
 
+  # Preserve the copied libs directory
+  s.preserve_paths = ["libs/**/*"]
+
   # All iOS cpp/h files
   s.source_files = [
-    "apple/**/*.{h,c,cc,cpp,m,mm,swift}",  
+    "apple/**/*.{h,c,cc,cpp,m,mm,swift}",
     "cpp/**/*.{h,cpp}"
   ]
 
@@ -123,9 +158,10 @@ Pod::Spec.new do |s|
     'cpp/rnskia/RNDawnWindowContext.h',
     'cpp/rnskia/RNDawnWindowContext.cpp',
     'cpp/rnskia/RNImageProvider.h',
-    'cpp/rnwgpu/**/*.{h,cpp}'
+    'cpp/rnwgpu/**/*.{h,cpp}',
+    'cpp/jsi2/**/*.{h,cpp}'
   ]
-  s.exclude_files = graphite_exclusions unless use_graphite 
+  s.exclude_files = graphite_exclusions unless use_graphite
 
   if defined?(install_modules_dependencies()) != nil
     install_modules_dependencies(s)
@@ -138,4 +174,3 @@ Pod::Spec.new do |s|
     s.dependency "React-Core"
   end
 end
-

package/src/dom/types/Drawings.ts

@@ -69,6 +69,7 @@ export interface AtlasProps extends DrawingNodeProps {
   sprites: SkRect[];
   transforms: SkRSXform[];
   colors?: SkColor[];
+  colorBlendMode?: SkEnum<typeof BlendMode>;
   sampling?: SamplingOptions;
 }
 

package/src/renderer/Canvas.tsx

@@ -64,6 +64,8 @@ export const isFabric = Boolean((global as any)?.nativeFabricUIManager);
 
 export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
   debug?: boolean;
+  /** @deprecated Not supported on Fabric. Use `onSize` or `useCanvasSize()` instead. */
+  onLayout?: ViewProps["onLayout"];
   opaque?: boolean;
   onSize?: SharedValue<SkSize>;
   colorSpace?: "p3" | "srgb";
@@ -80,9 +82,6 @@ export const Canvas = ({
   colorSpace = "p3",
   androidWarmup = false,
   ref,
-  // Here know this is a type error but this is done on purpose to check it at runtime
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
   onLayout,
   ...viewProps
 }: CanvasProps) => {

package/src/sksg/Container.native.ts

@@ -44,15 +44,14 @@ class NativeReanimatedContainer extends Container {
       return;
     }
     const recorder = new ReanimatedRecorder(this.Skia);
-    const { nativeId, picture, Skia } = this;
+    const { nativeId, picture } = this;
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
     // Draw first frame
-    Rea.executeOnUIRuntimeSync(() => {
+    Rea.runOnUI(() => {
       "worklet";
-      const firstPicture = Skia.Picture.MakePicture(null)!;
-      nativeDrawOnscreen(nativeId, sharedRecorder, firstPicture);
+      nativeDrawOnscreen(nativeId, sharedRecorder, picture);
     })();
     // Animate
     if (sharedValues.length > 0) {

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

@@ -306,8 +306,9 @@ export const drawPicture = (ctx: DrawingContext, props: PictureProps) => {
 
 export const drawAtlas = (ctx: DrawingContext, props: AtlasProps) => {
   "worklet";
-  const { image, sprites, transforms, colors, blendMode, sampling } = props;
-  const blend = blendMode ? BlendMode[enumKey(blendMode)] : undefined;
+  const { image, sprites, transforms, colors, colorBlendMode, sampling } =
+    props;
+  const blend = colorBlendMode ? BlendMode[enumKey(colorBlendMode)] : undefined;
   if (image) {
     ctx.canvas.drawAtlas(
       image,