@shopify/react-native-skia 2.5.1 → 2.5.3

package/lib/module/views/WebGPUCanvas.web.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { ViewProps } from "react-native";
+export interface NativeCanvas {
+    surface: bigint;
+    width: number;
+    height: number;
+    clientWidth: number;
+    clientHeight: number;
+}
+export type RNCanvasContext = GPUCanvasContext & {
+    present: () => void;
+};
+export interface WebGPUCanvasRef {
+    getContextId: () => number;
+    getContext(contextName: "webgpu"): RNCanvasContext | null;
+    getNativeSurface: () => NativeCanvas;
+}
+interface WebGPUCanvasProps extends ViewProps {
+    transparent?: boolean;
+    ref?: React.Ref<WebGPUCanvasRef>;
+}
+export declare const WebGPUCanvas: ({ transparent: _transparent, ref: _ref, ...props }: WebGPUCanvasProps) => React.JSX.Element;
+export {};

package/lib/module/views/WebGPUCanvas.web.js

@@ -0,0 +1,12 @@
+import React from "react";
+// WebGPU Canvas is not supported on web
+export const WebGPUCanvas = ({
+  transparent: _transparent,
+  ref: _ref,
+  ...props
+}) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  return /*#__PURE__*/React.createElement("div", props);
+};
+//# sourceMappingURL=WebGPUCanvas.web.js.map

package/lib/module/views/WebGPUCanvas.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","WebGPUCanvas","transparent","_transparent","ref","_ref","props","createElement"],"sources":["WebGPUCanvas.web.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ViewProps } from \"react-native\";\n\nexport interface NativeCanvas {\n  surface: bigint;\n  width: number;\n  height: number;\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport type RNCanvasContext = GPUCanvasContext & {\n  present: () => void;\n};\n\nexport interface WebGPUCanvasRef {\n  getContextId: () => number;\n  getContext(contextName: \"webgpu\"): RNCanvasContext | null;\n  getNativeSurface: () => NativeCanvas;\n}\n\ninterface WebGPUCanvasProps extends ViewProps {\n  transparent?: boolean;\n  ref?: React.Ref<WebGPUCanvasRef>;\n}\n\n// WebGPU Canvas is not supported on web\nexport const WebGPUCanvas = ({\n  transparent: _transparent,\n  ref: _ref,\n  ...props\n}: WebGPUCanvasProps) => {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  return <div {...props} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AA0BzB;AACA,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAC3BC,WAAW,EAAEC,YAAY;EACzBC,GAAG,EAAEC,IAAI;EACT,GAAGC;AACc,CAAC,KAAK;EACvB;EACA;EACA,oBAAON,KAAA,CAAAO,aAAA,QAASD,KAAQ,CAAC;AAC3B,CAAC","ignoreList":[]}

package/lib/module/views/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./SkiaPictureView";
 export * from "./types";
+export * from "./WebGPUCanvas";

package/lib/module/views/index.js

@@ -1,3 +1,4 @@
 export * from "./SkiaPictureView";
 export * from "./types";
+export * from "./WebGPUCanvas";
 //# sourceMappingURL=index.js.map

package/lib/module/views/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SkiaPictureView\";\nexport * from \"./types\";\n"],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,SAAS","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SkiaPictureView\";\nexport * from \"./types\";\nexport * from \"./WebGPUCanvas\";\n"],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,SAAS;AACvB,cAAc,gBAAgB","ignoreList":[]}

package/lib/typescript/lib/commonjs/mock/index.d.ts

@@ -1,6 +1,7 @@
 export const __esModule: boolean;
 export function Mock(CanvasKit: any): {
     Canvas: typeof import("react-native").View;
+    WebGPUCanvas: typeof import("react-native").View;
     SkiaPictureView: typeof import("react-native").View;
     JsiSkImage: typeof _JsiSkImage.JsiSkImage;
     drawAsPicture: () => undefined;

package/lib/typescript/lib/commonjs/skia/types/Surface/SurfaceFactory.d.ts

@@ -1 +1,5 @@
 export const __esModule: boolean;
+export namespace ColorSpace {
+    let SRGB: string;
+    let DisplayP3: string;
+}

package/lib/typescript/lib/commonjs/specs/WebGPUViewNativeComponent.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: boolean;
+declare const _default: any;
+export default _default;

package/lib/typescript/lib/commonjs/specs/WebGPUViewNativeComponent.web.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: boolean;
+export default WebGPUViewNativeComponent;
+declare function WebGPUViewNativeComponent(props: any): any;

package/lib/typescript/lib/commonjs/specs/utils.d.ts

@@ -0,0 +1,2 @@
+export const __esModule: boolean;
+export function contextIdToId(contextId: any): string;

package/lib/typescript/lib/commonjs/views/WebGPUCanvas.d.ts

@@ -0,0 +1,6 @@
+export const __esModule: boolean;
+export function WebGPUCanvas({ transparent, ref, ...props }: {
+    [x: string]: any;
+    transparent: any;
+    ref: any;
+}): any;

package/lib/typescript/lib/commonjs/views/WebGPUCanvas.web.d.ts

@@ -0,0 +1,6 @@
+export const __esModule: boolean;
+export function WebGPUCanvas({ transparent: _transparent, ref: _ref, ...props }: {
+    [x: string]: any;
+    transparent: any;
+    ref: any;
+}): any;

package/lib/typescript/lib/module/mock/index.d.ts

@@ -1,5 +1,6 @@
 export function Mock(CanvasKit: any): {
     Canvas: typeof import("react-native").View;
+    WebGPUCanvas: typeof import("react-native").View;
     SkiaPictureView: typeof import("react-native").View;
     JsiSkImage: typeof JsiSkImage;
     drawAsPicture: () => undefined;
@@ -128,7 +129,8 @@ export function Mock(CanvasKit: any): {
     isEdge: (pos: any, b: any) => boolean;
     processRect: (Skia: any, def: any) => any;
     processRRect: (Skia: any, def: any) => any;
-    inflate: (Skia: any, box: any, dx: any, dy: any, tx?: number, ty?: number) => any;
+    inflate: (Skia: any, box: any, dx: any, dy: any, tx?: number, // Reanimated hooks
+    ty?: number) => any;
     deflate: (Skia: any, box: any, dx: any, dy: any, tx?: number, ty?: number) => any;
     processRadius: (Skia: any, radius: any) => any;
     isCircleScalarDef: (def: any) => boolean;
@@ -193,6 +195,10 @@ export function Mock(CanvasKit: any): {
     rrect: (r: any, rx: any, ry: any) => import("../../..").SkRRect;
     processTransform2d: (transforms: any) => any;
     isRNModule: (mod: any) => mod is number;
+    ColorSpace: {
+        SRGB: string;
+        DisplayP3: string;
+    };
     VertexMode: {};
     isShader: (obj: any) => boolean;
     processUniforms: (source: any, uniforms: any, builder: any) => any[];

package/lib/typescript/lib/module/skia/types/Surface/SurfaceFactory.d.ts

@@ -1 +1,4 @@
-export {};
+export namespace ColorSpace {
+    let SRGB: string;
+    let DisplayP3: string;
+}

package/lib/typescript/lib/module/specs/WebGPUViewNativeComponent.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<object>;
+export default _default;

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

@@ -0,0 +1,2 @@
+export default function WebGPUViewNativeComponent(props: any): React.DetailedReactHTMLElement<any, HTMLElement>;
+import React from "react";

package/lib/typescript/lib/module/specs/utils.d.ts

@@ -0,0 +1 @@
+export function contextIdToId(contextId: any): string;

package/lib/typescript/lib/module/views/WebGPUCanvas.d.ts

@@ -0,0 +1,7 @@
+export function WebGPUCanvas({ transparent, ref, ...props }: {
+    [x: string]: any;
+    transparent: any;
+    ref: any;
+}): React.CElement<import("react-native").ViewProps, View>;
+import { View } from "react-native";
+import React from "react";

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

@@ -0,0 +1,8 @@
+export function WebGPUCanvas({ transparent: _transparent, ref: _ref, ...props }: {
+    [x: string]: any;
+    transparent: any;
+    ref: any;
+}): React.DetailedReactHTMLElement<{
+    [x: string]: any;
+}, HTMLElement>;
+import React from "react";

package/lib/typescript/lib/module/views/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./SkiaPictureView";
 export * from "./types";
+export * from "./WebGPUCanvas";

package/lib/typescript/src/skia/types/Surface/SurfaceFactory.d.ts

@@ -1,4 +1,12 @@
 import type { SkSurface } from "./Surface";
+export declare const ColorSpace: {
+    readonly SRGB: "srgb";
+    readonly DisplayP3: "display-p3";
+};
+export type ColorSpaceValue = (typeof ColorSpace)[keyof typeof ColorSpace];
+export interface SurfaceOptions {
+    colorSpace: ColorSpaceValue;
+}
 export interface SurfaceFactory {
     /**
      * Returns a CPU backed surface with the given dimensions, an SRGB colorspace, Unpremul
@@ -12,6 +20,7 @@ export interface SurfaceFactory {
      * Creates a GPU backed surface.
      * @param width - number of pixels of the width of the drawable area.
      * @param height - number of pixels of the height of the drawable area.
+     * @param opts - optional surface options (e.g. colorSpace: "display-p3" | "srgb").
      */
-    MakeOffscreen: (width: number, height: number) => SkSurface | null;
+    MakeOffscreen: (width: number, height: number, opts?: SurfaceOptions) => SkSurface | null;
 }

package/lib/typescript/src/specs/WebGPUViewNativeComponent.d.ts

@@ -0,0 +1,8 @@
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+export interface NativeProps extends ViewProps {
+    contextId: Int32;
+    transparent: boolean;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import type { Int32 } from "react-native/Libraries/Types/CodegenTypes";
+import type { ViewProps } from "react-native";
+export interface NativeProps extends ViewProps {
+    contextId: Int32;
+    transparent: boolean;
+}
+export default function WebGPUViewNativeComponent(props: NativeProps): React.JSX.Element;

package/lib/typescript/src/specs/utils.d.ts

@@ -0,0 +1 @@
+export declare function contextIdToId(contextId: number): string;

package/lib/typescript/src/views/WebGPUCanvas.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { ViewProps } from "react-native";
+declare global {
+    var RNWebGPU: {
+        gpu: GPU;
+        fabric: boolean;
+        getNativeSurface: (contextId: number) => NativeCanvas;
+        MakeWebGPUCanvasContext: (contextId: number, width: number, height: number) => RNCanvasContext;
+    };
+}
+type SurfacePointer = bigint;
+export interface NativeCanvas {
+    surface: SurfacePointer;
+    width: number;
+    height: number;
+    clientWidth: number;
+    clientHeight: number;
+}
+export type RNCanvasContext = GPUCanvasContext & {
+    present: () => void;
+};
+export interface WebGPUCanvasRef {
+    getContextId: () => number;
+    getContext(contextName: "webgpu"): RNCanvasContext | null;
+    getNativeSurface: () => NativeCanvas;
+}
+interface WebGPUCanvasProps extends ViewProps {
+    transparent?: boolean;
+    ref?: React.Ref<WebGPUCanvasRef>;
+}
+export declare const WebGPUCanvas: ({ transparent, ref, ...props }: WebGPUCanvasProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import React from "react";
+import type { ViewProps } from "react-native";
+export interface NativeCanvas {
+    surface: bigint;
+    width: number;
+    height: number;
+    clientWidth: number;
+    clientHeight: number;
+}
+export type RNCanvasContext = GPUCanvasContext & {
+    present: () => void;
+};
+export interface WebGPUCanvasRef {
+    getContextId: () => number;
+    getContext(contextName: "webgpu"): RNCanvasContext | null;
+    getNativeSurface: () => NativeCanvas;
+}
+interface WebGPUCanvasProps extends ViewProps {
+    transparent?: boolean;
+    ref?: React.Ref<WebGPUCanvasRef>;
+}
+export declare const WebGPUCanvas: ({ transparent: _transparent, ref: _ref, ...props }: WebGPUCanvasProps) => React.JSX.Element;
+export {};

package/lib/typescript/src/views/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./SkiaPictureView";
 export * from "./types";
+export * from "./WebGPUCanvas";

package/package.json

@@ -5,10 +5,11 @@
     "provenance": true
   },
   "bin": {
+    "install-skia": "scripts/install-libs.js",
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.5.1",
+  "version": "2.5.3",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -16,6 +17,7 @@
   "types": "lib/typescript/index.d.ts",
   "files": [
     "scripts/setup-canvaskit.js",
+    "scripts/install-libs.js",
     "src/**",
     "lib/**",
     "!**/__tests__/**",
@@ -35,6 +37,7 @@
     "dist/**"
   ],
   "scripts": {
+    "postinstall": "node scripts/install-libs.js",
     "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache --fix",
     "tsc": "tsc --noEmit",
     "test": "jest",
@@ -117,7 +120,7 @@
     "rimraf": "3.0.2",
     "semantic-release": "^24.1.0",
     "semantic-release-yarn": "^3.0.2",
-    "tar": "^7.5.9",
+    "tar": "^7.5.11",
     "ts-jest": "29.4.3",
     "tsx": "^4.21.0",
     "typescript": "^5.2.2",
@@ -144,7 +147,8 @@
     },
     "ios": {
       "componentProvider": {
-        "SkiaPictureView": "SkiaPictureView"
+        "SkiaPictureView": "SkiaPictureView",
+        "WebGPUView": "WebGPUView"
       }
     }
   },

package/react-native-skia.podspec

@@ -4,14 +4,9 @@ require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
 
-# Check if Graphite is enabled
-use_graphite = false
-if ENV['SK_GRAPHITE']
-  use_graphite = ENV['SK_GRAPHITE'] == '1' || ENV['SK_GRAPHITE'].downcase == 'true'
-  puts "-- SK_GRAPHITE: using environment variable (#{use_graphite ? 'ON' : 'OFF'})"
-else
-  puts "-- SK_GRAPHITE: OFF (set SK_GRAPHITE=1 to enable)"
-end
+# Check if Graphite is enabled via marker file (created by install-skia-graphite)
+use_graphite = File.exist?(File.join(__dir__, 'libs', '.graphite'))
+puts "-- SK_GRAPHITE: #{use_graphite ? 'ON' : 'OFF'} (detected via libs/.graphite marker file)"
 
 # Set preprocessor definitions based on GRAPHITE flag
 preprocessor_defs = use_graphite ?
@@ -23,86 +18,28 @@ framework_names = ['libskia', 'libsvg', 'libskshaper', 'libskparagraph',
                    'libskunicode_core', 'libskunicode_libgrapheme',
                    'libskottie', 'libsksg']
 
+# Verify that prebuilt binaries have been installed by the postinstall script
+unless Dir.exist?(File.join(__dir__, 'libs', 'ios')) && Dir.exist?(File.join(__dir__, 'libs', 'macos'))
+  Pod::UI.warn "#{'-' * 72}"
+  Pod::UI.warn "react-native-skia: Skia prebuilt binaries not found in libs/!"
+  Pod::UI.warn ""
+  Pod::UI.warn "Run the following command to install them:"
+  Pod::UI.warn "  npx install-skia"
+  Pod::UI.warn "#{'-' * 72}"
+  raise "react-native-skia: Skia prebuilt binaries not found. Run `npx install-skia` to fix this."
+end
+
 # Build platform-specific framework paths (relative to pod's libs directory)
+# xcframeworks are copied into libs/ by the npm postinstall script (scripts/install-libs.js)
 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 - check if libs/tvos/ exists (populated by postinstall before pod install runs)
 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"
   s.version      = package["version"]
@@ -120,10 +57,6 @@ Pod::Spec.new do |s|
   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,

package/scripts/install-libs.js

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+"use strict";
+
+const path = require("path");
+const fs = require("fs");
+const { execSync } = require("child_process");
+
+const useGraphite =
+  process.env.SK_GRAPHITE === "1" ||
+  (process.env.SK_GRAPHITE || "").toLowerCase() === "true";
+const prefix = useGraphite ? "react-native-skia-graphite" : "react-native-skia";
+const libsDir = path.join(__dirname, "..", "libs");
+
+// --- Apple platforms ---
+
+let iosPackage, macosPackage;
+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 iOS package
+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 Apple frameworks
+execSync(
+  "rm -rf " +
+    path.join(libsDir, "ios") +
+    " " +
+    path.join(libsDir, "macos") +
+    " " +
+    path.join(libsDir, "tvos")
+);
+fs.mkdirSync(path.join(libsDir, "ios"), { recursive: true });
+fs.mkdirSync(path.join(libsDir, "macos"), { recursive: true });
+execSync(
+  'cp -R "' +
+    iosPackage +
+    '/libs/"*.xcframework "' +
+    path.join(libsDir, "ios") +
+    '/"'
+);
+execSync(
+  'cp -R "' +
+    macosPackage +
+    '/libs/"*.xcframework "' +
+    path.join(libsDir, "macos") +
+    '/"'
+);
+
+// Handle tvOS (non-Graphite only)
+if (!useGraphite) {
+  try {
+    const tvosPackage = path.dirname(
+      require.resolve(prefix + "-apple-tvos/package.json")
+    );
+    console.log("-- Skia tvOS package: " + tvosPackage);
+    fs.mkdirSync(path.join(libsDir, "tvos"), { recursive: true });
+    execSync(
+      'cp -R "' +
+        tvosPackage +
+        '/libs/"*.xcframework "' +
+        path.join(libsDir, "tvos") +
+        '/"'
+    );
+  } catch (e) {
+    console.log("-- tvOS package not found, skipping");
+  }
+}
+
+console.log("-- Copied Apple xcframeworks to libs/");
+
+// --- Android ---
+
+const androidPackageName = useGraphite
+  ? "react-native-skia-graphite-android"
+  : "react-native-skia-android";
+
+let androidPackage;
+try {
+  androidPackage = path.dirname(
+    require.resolve(androidPackageName + "/package.json")
+  );
+} catch (e) {
+  console.error("ERROR: Could not find " + androidPackageName);
+  console.error("Make sure you have run yarn install or npm install");
+  process.exit(1);
+}
+
+const androidSrcLibs = path.join(androidPackage, "libs");
+if (!fs.existsSync(androidSrcLibs)) {
+  console.error(
+    "ERROR: Skia prebuilt binaries not found in " + androidPackageName + "!"
+  );
+  process.exit(1);
+}
+
+console.log("-- Skia Android package: " + androidPackage);
+
+// Copy Android libs (per-ABI static libraries)
+const androidDest = path.join(libsDir, "android");
+execSync("rm -rf " + androidDest);
+execSync('cp -R "' + androidSrcLibs + '" "' + androidDest + '"');
+
+console.log("-- Copied Android libs to libs/android/");

package/src/external/reanimated/useVideo.ts

@@ -22,7 +22,7 @@ const copyFrameOnAndroid = (currentFrame: SharedValue<SkImage | null>) => {
   if (Platform.OS === "android") {
     const tex = currentFrame.value;
     if (tex) {
-      currentFrame.value = tex.makeNonTextureImage();
+      currentFrame.value = tex; //.makeNonTextureImage();
       tex.dispose();
     }
   }
@@ -32,9 +32,6 @@ const setFrame = (video: Video, currentFrame: SharedValue<SkImage | null>) => {
   "worklet";
   const img = video.nextImage();
   if (img) {
-    if (currentFrame.value) {
-      currentFrame.value.dispose();
-    }
     currentFrame.value = img;
     copyFrameOnAndroid(currentFrame);
   }

package/src/mock/index.ts

@@ -23,6 +23,7 @@ export const Mock = (CanvasKit: CanvasKit) => {
     ...require("../dom/types"),
     ...require("../dom/nodes"),
     Canvas: require("react-native").View,
+    WebGPUCanvas: require("react-native").View,
     SkiaPictureView: require("react-native").View,
     JsiSkImage: JsiSkImage,
     drawAsPicture: Noop,

package/src/skia/types/Surface/SurfaceFactory.ts

@@ -1,5 +1,16 @@
 import type { SkSurface } from "./Surface";
 
+export const ColorSpace = {
+  SRGB: "srgb",
+  DisplayP3: "display-p3",
+} as const;
+
+export type ColorSpaceValue = (typeof ColorSpace)[keyof typeof ColorSpace];
+
+export interface SurfaceOptions {
+  colorSpace: ColorSpaceValue;
+}
+
 export interface SurfaceFactory {
   /**
    * Returns a CPU backed surface with the given dimensions, an SRGB colorspace, Unpremul
@@ -14,6 +25,11 @@ export interface SurfaceFactory {
    * Creates a GPU backed surface.
    * @param width - number of pixels of the width of the drawable area.
    * @param height - number of pixels of the height of the drawable area.
+   * @param opts - optional surface options (e.g. colorSpace: "display-p3" | "srgb").
    */
-  MakeOffscreen: (width: number, height: number) => SkSurface | null;
+  MakeOffscreen: (
+    width: number,
+    height: number,
+    opts?: SurfaceOptions
+  ) => SkSurface | null;
 }