@shopify/react-native-skia 2.5.1 → 2.5.2

package/android/CMakeLists.txt

@@ -4,7 +4,7 @@ cmake_minimum_required(VERSION 3.4.1)
 set (CMAKE_VERBOSE_MAKEFILE ON)
 set (CMAKE_CXX_STANDARD 20)
 
-# SKIA_LIBS_PATH is passed from Gradle (resolved via Node.js package resolution)
+# SKIA_LIBS_PATH is passed from Gradle (pointing to libs/android/, populated by npm postinstall)
 # Append the ABI to get the full path
 set (SKIA_LIBS_PATH "${SKIA_LIBS_PATH}/${ANDROID_ABI}")
 
@@ -17,14 +17,12 @@ if(NOT EXISTS "${SKIA_LIBS_PATH}/libskia.a")
     message("│                                                                             │")
     message("│  Could not find libskia.a at: ${SKIA_LIBS_PATH}                             │")
     message("│                                                                             │")
-    message("│  Make sure react-native-skia-android is installed:                          │")
-    message("│    yarn add react-native-skia-android                                       │")
-    message("│                                                                             │")
-    message("│  See: https://shopify.github.io/react-native-skia/docs/getting-started/installation │")
+    message("│  Run the following command to install them:                                  │")
+    message("│    npx install-skia                                                         │")
     message("│                                                                             │")
     message("└─────────────────────────────────────────────────────────────────────────────┘")
     message("")
-    message(FATAL_ERROR "Skia prebuilt binaries not found at ${SKIA_LIBS_PATH}")
+    message(FATAL_ERROR "Skia prebuilt binaries not found. Run `npx install-skia` to fix this.")
 endif()
 
 # Import libskia

package/android/build.gradle

@@ -56,41 +56,15 @@ static def findNodeModules(baseDir) {
   throw new GradleException("React-Native-Skia: Failed to find node_modules/ path!")
 }
 
-// Resolve npm package path using Node.js resolution (handles monorepos, pnpm, etc.)
-def resolveSkiaPackage(packageName) {
-  def cmdResult = providers.exec {
-    commandLine "node", "-e", "console.log(require.resolve('${packageName}/package.json'))"
-    ignoreExitValue = true
-  }
-
-  if (cmdResult.result.get().exitValue == 0) {
-    def packageJsonPath = cmdResult.standardOutput.asText.get().trim()
-    return new File(packageJsonPath).parent
-  }
-
-  // Fallback: walk up directories looking for node_modules
-  def basePath = projectDir.toPath().normalize()
-  while (basePath) {
-    def candidate = Paths.get(basePath.toString(), "node_modules", packageName)
-    if (candidate.toFile().exists() && new File(candidate.toString(), "package.json").exists()) {
-      return candidate.toString()
-    }
-    basePath = basePath.getParent()
-  }
-
-  throw new GradleException("React-Native-Skia: Could not find ${packageName}. Make sure you have run 'yarn install' or 'npm install'.")
-}
-
 def nodeModules = findNodeModules(projectDir)
 
-// Resolve Skia Android package
-def useGraphite = System.getenv("SK_GRAPHITE") == "1" || System.getenv("SK_GRAPHITE") == "true"
-def skiaPackageName = useGraphite ? "react-native-skia-graphite-android" : "react-native-skia-android"
-def skiaAndroidPackage = resolveSkiaPackage(skiaPackageName)
-def skiaLibsPath = "${skiaAndroidPackage}/libs"
+// Skia prebuilt libs are copied into libs/android/ by the npm postinstall script
+// Graphite is detected via marker file created by install-skia-graphite
+def useGraphite = file("${projectDir}/../libs/.graphite").exists()
+def skiaLibsPath = "${projectDir}/../libs/android"
 
 logger.warn("react-native-skia: SK_GRAPHITE: ${useGraphite}")
-logger.warn("react-native-skia: Skia Android package: ${skiaAndroidPackage}")
+logger.warn("react-native-skia: Skia libs: ${skiaLibsPath}")
 logger.warn("react-native-skia: node_modules/ found at: ${nodeModules}")
 
 def sourceBuild = false
@@ -292,7 +266,6 @@ repositories {
         }
     }
     google()
-    maven { url 'https://www.jitpack.io' }
 }
 
 dependencies {

package/android/cpp/rnskia-android/OpenGLContext.h

@@ -58,7 +58,8 @@ public:
     return instance;
   }
 
-  sk_sp<SkSurface> MakeOffscreen(int width, int height) {
+  sk_sp<SkSurface> MakeOffscreen(int width, int height,
+                                  bool useP3ColorSpace = false) {
     auto colorType = kRGBA_8888_SkColorType;
 
     SkSurfaceProps props(0, kUnknown_SkPixelGeometry);
@@ -89,10 +90,16 @@ public:
     auto releaseCtx = new ReleaseContext{.directContext = _directContext.get(),
                                          .texture = texture};
 
+    sk_sp<SkColorSpace> colorSpace =
+        useP3ColorSpace
+            ? SkColorSpace::MakeRGB(SkNamedTransferFn::kSRGB,
+                                    SkNamedGamut::kDisplayP3)
+            : nullptr;
+
     // Create a SkSurface from the GrBackendTexture
     return SkSurfaces::WrapBackendTexture(
         _directContext.get(), texture, kTopLeft_GrSurfaceOrigin, 0, colorType,
-        nullptr, &props,
+        colorSpace, &props,
         [](void *addr) {
           auto releaseCtx = reinterpret_cast<ReleaseContext *>(addr);
           releaseCtx->directContext->deleteBackendTexture(releaseCtx->texture);

package/android/cpp/rnskia-android/RNSkAndroidPlatformContext.h

@@ -50,11 +50,14 @@ public:
     _jniPlatformContext->raiseError(err);
   }
 
-  sk_sp<SkSurface> makeOffscreenSurface(int width, int height) override {
+  sk_sp<SkSurface> makeOffscreenSurface(int width, int height,
+                                         bool useP3ColorSpace = false) override {
 #if defined(SK_GRAPHITE)
-    return DawnContext::getInstance().MakeOffscreen(width, height);
+    return DawnContext::getInstance().MakeOffscreen(width, height,
+                                                    useP3ColorSpace);
 #else
-    return OpenGLContext::getInstance().MakeOffscreen(width, height);
+    return OpenGLContext::getInstance().MakeOffscreen(width, height,
+                                                      useP3ColorSpace);
 #endif
   }
 

package/apple/MetalContext.h

@@ -13,6 +13,7 @@
 #import <include/gpu/ganesh/mtl/GrMtlBackendSurface.h>
 #import <include/gpu/ganesh/mtl/GrMtlDirectContext.h>
 #import <include/gpu/ganesh/mtl/SkSurfaceMetal.h>
+#include "include/core/SkColorSpace.h"
 
 struct OffscreenRenderContext {
   id<MTLTexture> texture;
@@ -44,7 +45,8 @@ public:
     return instance;
   }
 
-  sk_sp<SkSurface> MakeOffscreen(int width, int height) {
+  sk_sp<SkSurface> MakeOffscreen(int width, int height,
+                                  bool useP3ColorSpace = false) {
     auto device = _device;
     auto ctx = new OffscreenRenderContext(device, _directContext, _commandQueue,
                                           width, height);
@@ -55,10 +57,16 @@ public:
     GrBackendTexture backendTexture =
         GrBackendTextures::MakeMtl(width, height, skgpu::Mipmapped::kNo, info);
 
+    sk_sp<SkColorSpace> colorSpace =
+        useP3ColorSpace
+            ? SkColorSpace::MakeRGB(SkNamedTransferFn::kSRGB,
+                                    SkNamedGamut::kDisplayP3)
+            : nullptr;
+
     // Create a SkSurface from the GrBackendTexture
     auto surface = SkSurfaces::WrapBackendTexture(
         _directContext.get(), backendTexture, kTopLeft_GrSurfaceOrigin, 0,
-        kBGRA_8888_SkColorType, nullptr, nullptr,
+        kBGRA_8888_SkColorType, colorSpace, nullptr,
         [](void *addr) { delete (OffscreenRenderContext *)addr; }, ctx);
 
     return surface;

package/apple/MetalWindowContext.h

@@ -36,4 +36,5 @@ private:
   CAMetalLayer *_layer;
 #pragma clang diagnostic pop
   id<CAMetalDrawable> _currentDrawable = nil;
+  bool _useP3ColorSpace = false;
 };

package/apple/MetalWindowContext.mm

@@ -2,6 +2,7 @@
 
 #include "MetalContext.h"
 #include "RNSkLog.h"
+#include "include/core/SkColorSpace.h"
 
 MetalWindowContext::MetalWindowContext(GrDirectContext *directContext,
                                        id<MTLDevice> device,
@@ -46,6 +47,7 @@ MetalWindowContext::MetalWindowContext(GrDirectContext *directContext,
         CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3);
     _layer.colorspace = colorSpace;
     CGColorSpaceRelease(colorSpace);
+    _useP3ColorSpace = true;
   }
 }
 
@@ -69,9 +71,14 @@ sk_sp<SkSurface> MetalWindowContext::getSurface() {
   GrBackendRenderTarget backendRT = GrBackendRenderTargets::MakeMtl(
       _layer.drawableSize.width, _layer.drawableSize.height, fbInfo);
 
+  sk_sp<SkColorSpace> skColorSpace =
+      _useP3ColorSpace
+          ? SkColorSpace::MakeRGB(SkNamedTransferFn::kSRGB,
+                                  SkNamedGamut::kDisplayP3)
+          : nullptr;
   _skSurface = SkSurfaces::WrapBackendRenderTarget(
       _directContext, backendRT, kTopLeft_GrSurfaceOrigin,
-      kBGRA_8888_SkColorType, nullptr, nullptr);
+      kBGRA_8888_SkColorType, skColorSpace, nullptr);
 
   return _skSurface;
 }

package/apple/RNSkApplePlatformContext.h

@@ -69,7 +69,8 @@ public:
       const std::function<void(std::unique_ptr<SkStreamAsset>)> &op) override;
 
   void raiseError(const std::exception &err) override;
-  sk_sp<SkSurface> makeOffscreenSurface(int width, int height) override;
+  sk_sp<SkSurface> makeOffscreenSurface(int width, int height,
+                                         bool useP3ColorSpace = false) override;
 
   sk_sp<SkFontMgr> createFontMgr() override;
 

package/apple/RNSkApplePlatformContext.mm

@@ -251,12 +251,14 @@ void RNSkApplePlatformContext::raiseError(const std::exception &err) {
   RCTFatal(RCTErrorWithMessage([NSString stringWithUTF8String:err.what()]));
 }
 
-sk_sp<SkSurface> RNSkApplePlatformContext::makeOffscreenSurface(int width,
-                                                                int height) {
+sk_sp<SkSurface> RNSkApplePlatformContext::makeOffscreenSurface(
+    int width, int height, bool useP3ColorSpace) {
 #if defined(SK_GRAPHITE)
-  return DawnContext::getInstance().MakeOffscreen(width, height);
+  return DawnContext::getInstance().MakeOffscreen(width, height,
+                                                   useP3ColorSpace);
 #else
-  return MetalContext::getInstance().MakeOffscreen(width, height);
+  return MetalContext::getInstance().MakeOffscreen(width, height,
+                                                   useP3ColorSpace);
 #endif
 }
 

package/apple/SkiaPictureView.mm

@@ -58,6 +58,9 @@ using namespace facebook::react;
   if (newProps.colorSpace == "" || newProps.colorSpace == "srgb") {
     bool useP3 = false;
     [self setUseP3ColorSpace:useP3];
+  } else if (newProps.colorSpace == "p3") {
+    bool useP3 = true;
+    [self setUseP3ColorSpace:useP3];
   }
 }
 

package/cpp/api/JsiSkImage.h

@@ -35,6 +35,75 @@
 
 #include <jsi/jsi.h>
 
+#ifdef __APPLE__
+#include <CoreFoundation/CoreFoundation.h>
+#include <CoreGraphics/CoreGraphics.h>
+#include <cstring>
+
+// Replaces Skia's generated "Display P3 Gamut with sRGB Transfer" (Google/Skia
+// copyright) ICC profile in a JPEG with Apple's canonical Display P3 ICC bytes
+// from CGColorSpace.displayP3. This is needed because apps like Instagram only
+// recognise the canonical Apple profile, not Skia's mathematically equivalent
+// but non-standard one. Pixel values are untouched — zero quality loss.
+static sk_sp<SkData> replaceJpegICCWithAppleP3(sk_sp<SkData> jpegData) {
+  if (!jpegData || jpegData->size() < 4) return jpegData;
+
+  const uint8_t *src = jpegData->bytes();
+  size_t srcLen = jpegData->size();
+  if (src[0] != 0xFF || src[1] != 0xD8) return jpegData; // not a JPEG
+
+  CGColorSpaceRef p3 = CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3);
+  if (!p3) return jpegData;
+  CFDataRef cfICC = CGColorSpaceCopyICCData(p3);
+  CGColorSpaceRelease(p3);
+  if (!cfICC) return jpegData;
+
+  const uint8_t *iccBytes = CFDataGetBytePtr(cfICC);
+  size_t iccLen = (size_t)CFDataGetLength(cfICC);
+
+  // "ICC_PROFILE\0" APP2 marker signature (12 bytes)
+  static const uint8_t iccSig[] = {0x49, 0x43, 0x43, 0x5F, 0x50, 0x52,
+                                    0x4F, 0x46, 0x49, 0x4C, 0x45, 0x00};
+
+  SkDynamicMemoryWStream out;
+
+  out.write(src, 2); // SOI
+
+  // Structure: marker(2) + length(2) + "ICC_PROFILE\0"(12) + chunk[1,1](2) + profile
+  size_t iccContentLen = sizeof(iccSig) + 2 + iccLen;
+  size_t segLen = iccContentLen + 2; // length field includes itself
+  uint8_t app2hdr[4] = {0xFF, 0xE2, (uint8_t)(segLen >> 8),
+                        (uint8_t)(segLen & 0xFF)};
+  uint8_t chunkInfo[2] = {0x01, 0x01}; // chunk 1 of 1
+  out.write(app2hdr, 4);
+  out.write(iccSig, sizeof(iccSig));
+  out.write(chunkInfo, 2);
+  out.write(iccBytes, iccLen);
+
+  // Copy all header segments except any existing ICC APP2
+  size_t i = 2;
+  while (i + 3 < srcLen) {
+    if (src[i] != 0xFF) break;
+    uint8_t marker = src[i + 1];
+    if (marker == 0xDA || marker == 0xD9) break; // SOS / EOI
+    size_t segLenVal = (size_t(src[i + 2]) << 8) | src[i + 3];
+    size_t end = i + 2 + segLenVal;
+    if (end > srcLen) break;
+    bool isICC = marker == 0xE2 && end > i + 4 + sizeof(iccSig) &&
+                 memcmp(src + i + 4, iccSig, sizeof(iccSig)) == 0;
+    if (!isICC) {
+      out.write(src + i, end - i);
+    }
+    i = end;
+  }
+
+  out.write(src + i, srcLen - i);
+
+  CFRelease(cfICC);
+  return out.detachAsData();
+}
+#endif // __APPLE__
+
 namespace RNSkia {
 
 namespace jsi = facebook::jsi;
@@ -138,6 +207,13 @@ public:
       SkJpegEncoder::Options options;
       options.fQuality = quality;
       data = SkJpegEncoder::Encode(nullptr, image.get(), options);
+#ifdef __APPLE__
+      // Replace Skia's generated ICC with Apple's canonical Display P3 profile
+      // so apps like Instagram recognise the wide-gamut colour space.
+      if (data && image->colorSpace() && !image->colorSpace()->isSRGB()) {
+        data = replaceJpegICCWithAppleP3(data);
+      }
+#endif
     } else if (format == SkEncodedImageFormat::kWEBP) {
       SkWebpEncoder::Options options;
       if (quality >= 100) {

package/cpp/api/JsiSkSurfaceFactory.h

@@ -39,8 +39,19 @@ public:
   JSI_HOST_FUNCTION(MakeOffscreen) {
     auto width = static_cast<int>(arguments[0].asNumber());
     auto height = static_cast<int>(arguments[1].asNumber());
+    bool useP3ColorSpace = false;
+    if (count >= 3 && arguments[2].isObject()) {
+      auto opts = arguments[2].asObject(runtime);
+      if (opts.hasProperty(runtime, "colorSpace")) {
+        auto colorSpaceVal = opts.getProperty(runtime, "colorSpace");
+        if (colorSpaceVal.isString()) {
+          useP3ColorSpace =
+              colorSpaceVal.asString(runtime).utf8(runtime) == "display-p3";
+        }
+      }
+    }
     auto context = getContext();
-    auto surface = context->makeOffscreenSurface(width, height);
+    auto surface = context->makeOffscreenSurface(width, height, useP3ColorSpace);
     if (surface == nullptr) {
       return jsi::Value::null();
     }

package/cpp/rnskia/RNDawnContext.h

@@ -7,6 +7,7 @@
 #include "RNDawnWindowContext.h"
 #include "RNImageProvider.h"
 
+#include "include/core/SkColorSpace.h"
 #include "include/core/SkData.h"
 #include "include/gpu/graphite/BackendTexture.h"
 #include "include/gpu/graphite/Context.h"
@@ -162,9 +163,16 @@ public:
   }
 
   // Create offscreen surface
-  sk_sp<SkSurface> MakeOffscreen(int width, int height) {
+  sk_sp<SkSurface> MakeOffscreen(int width, int height,
+                                  bool useP3ColorSpace = false) {
+    sk_sp<SkColorSpace> colorSpace =
+        useP3ColorSpace
+            ? SkColorSpace::MakeRGB(SkNamedTransferFn::kSRGB,
+                                    SkNamedGamut::kDisplayP3)
+            : nullptr;
     SkImageInfo info = SkImageInfo::Make(
-        width, height, DawnUtils::PreferedColorType, kPremul_SkAlphaType);
+        width, height, DawnUtils::PreferedColorType, kPremul_SkAlphaType,
+        colorSpace);
     sk_sp<SkSurface> surface = SkSurfaces::RenderTarget(getRecorder(), info);
 
     if (!surface) {
@@ -303,6 +311,20 @@ public:
         getRecorder(), backendContext.fDevice, surface, width, height);
   }
 
+  skgpu::graphite::Recorder *getRecorder() {
+    static thread_local skgpu::graphite::RecorderOptions recorderOptions;
+    if (!recorderOptions.fImageProvider) {
+      auto imageProvider = ImageProvider::Make();
+      recorderOptions.fImageProvider = imageProvider;
+    }
+    static thread_local auto recorder =
+        fGraphiteContext->makeRecorder(recorderOptions);
+    if (!recorder) {
+      throw std::runtime_error("Failed to create graphite context");
+    }
+    return recorder.get();
+  }
+
 private:
   std::unique_ptr<dawn::native::Instance> instance;
   std::unique_ptr<skgpu::graphite::Context> fGraphiteContext;
@@ -346,20 +368,6 @@ private:
       backendContext.fTick(backendContext.fInstance);
     }
   }
-
-  skgpu::graphite::Recorder *getRecorder() {
-    static thread_local skgpu::graphite::RecorderOptions recorderOptions;
-    if (!recorderOptions.fImageProvider) {
-      auto imageProvider = ImageProvider::Make();
-      recorderOptions.fImageProvider = imageProvider;
-    }
-    static thread_local auto recorder =
-        fGraphiteContext->makeRecorder(recorderOptions);
-    if (!recorder) {
-      throw std::runtime_error("Failed to create graphite context");
-    }
-    return recorder.get();
-  }
 };
 
 } // namespace RNSkia

package/cpp/rnskia/RNDawnUtils.h

@@ -177,6 +177,18 @@ createDawnBackendContext(dawn::native::Instance *instance) {
   if (adapter.HasFeature(wgpu::FeatureName::SharedTextureMemoryIOSurface)) {
     features.push_back(wgpu::FeatureName::SharedTextureMemoryIOSurface);
   }
+  if (adapter.HasFeature(wgpu::FeatureName::DawnMultiPlanarFormats)) {
+    features.push_back(wgpu::FeatureName::DawnMultiPlanarFormats);
+  }
+  if (adapter.HasFeature(wgpu::FeatureName::MultiPlanarFormatP010)) {
+    features.push_back(wgpu::FeatureName::MultiPlanarFormatP010);
+  }
+  if (adapter.HasFeature(wgpu::FeatureName::MultiPlanarFormatP210)) {
+    features.push_back(wgpu::FeatureName::MultiPlanarFormatP210);
+  }
+  if (adapter.HasFeature(wgpu::FeatureName::MultiPlanarFormatExtendedUsages)) {
+    features.push_back(wgpu::FeatureName::MultiPlanarFormatExtendedUsages);
+  }
 #else
   if (adapter.HasFeature(
           wgpu::FeatureName::SharedTextureMemoryAHardwareBuffer)) {

package/cpp/rnskia/RNSkPlatformContext.h

@@ -90,9 +90,11 @@ public:
    * Creates an offscreen surface
    * @param width Width of the offscreen surface
    * @param height Height of the offscreen surface
+   * @param useP3ColorSpace If true, surface will use Display P3 color space
    * @return sk_sp<SkSurface>
    */
-  virtual sk_sp<SkSurface> makeOffscreenSurface(int width, int height) = 0;
+  virtual sk_sp<SkSurface> makeOffscreenSurface(int width, int height,
+                                                 bool useP3ColorSpace = false) = 0;
 
   virtual std::shared_ptr<WindowContext>
   makeContextFromNativeSurface(void *surface, int width, int height) = 0;

package/lib/commonjs/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/commonjs/skia/types/Surface/SurfaceFactory.js

@@ -3,4 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ColorSpace = void 0;
+const ColorSpace = exports.ColorSpace = {
+  SRGB: "srgb",
+  DisplayP3: "display-p3"
+};
 //# sourceMappingURL=SurfaceFactory.js.map

package/lib/commonjs/skia/types/Surface/SurfaceFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["SurfaceFactory.ts"],"sourcesContent":["import type { SkSurface } from \"./Surface\";\n\nexport interface SurfaceFactory {\n  /**\n   * Returns a CPU backed surface with the given dimensions, an SRGB colorspace, Unpremul\n   * alphaType and 8888 color type. The pixels belonging to this surface  will be in memory and\n   * not visible.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   */\n  Make: (width: number, height: number) => SkSurface | null;\n\n  /**\n   * Creates a GPU backed surface.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   */\n  MakeOffscreen: (width: number, height: number) => SkSurface | null;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":["ColorSpace","exports","SRGB","DisplayP3"],"sources":["SurfaceFactory.ts"],"sourcesContent":["import type { SkSurface } from \"./Surface\";\n\nexport const ColorSpace = {\n  SRGB: \"srgb\",\n  DisplayP3: \"display-p3\",\n} as const;\n\nexport type ColorSpaceValue = (typeof ColorSpace)[keyof typeof ColorSpace];\n\nexport interface SurfaceOptions {\n  colorSpace: ColorSpaceValue;\n}\n\nexport interface SurfaceFactory {\n  /**\n   * Returns a CPU backed surface with the given dimensions, an SRGB colorspace, Unpremul\n   * alphaType and 8888 color type. The pixels belonging to this surface  will be in memory and\n   * not visible.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   */\n  Make: (width: number, height: number) => SkSurface | null;\n\n  /**\n   * Creates a GPU backed surface.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   * @param opts - optional surface options (e.g. colorSpace: \"display-p3\" | \"srgb\").\n   */\n  MakeOffscreen: (width: number, height: number, opts?: SurfaceOptions) => SkSurface | null;\n}\n"],"mappings":";;;;;;AAEO,MAAMA,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG;EACxBE,IAAI,EAAE,MAAM;EACZC,SAAS,EAAE;AACb,CAAU","ignoreList":[]}

package/lib/module/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/module/skia/types/Surface/SurfaceFactory.js

@@ -1,2 +1,5 @@
-export {};
+export const ColorSpace = {
+  SRGB: "srgb",
+  DisplayP3: "display-p3"
+};
 //# sourceMappingURL=SurfaceFactory.js.map

package/lib/module/skia/types/Surface/SurfaceFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["SurfaceFactory.ts"],"sourcesContent":["import type { SkSurface } from \"./Surface\";\n\nexport interface SurfaceFactory {\n  /**\n   * Returns a CPU backed surface with the given dimensions, an SRGB colorspace, Unpremul\n   * alphaType and 8888 color type. The pixels belonging to this surface  will be in memory and\n   * not visible.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   */\n  Make: (width: number, height: number) => SkSurface | null;\n\n  /**\n   * Creates a GPU backed surface.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   */\n  MakeOffscreen: (width: number, height: number) => SkSurface | null;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":["ColorSpace","SRGB","DisplayP3"],"sources":["SurfaceFactory.ts"],"sourcesContent":["import type { SkSurface } from \"./Surface\";\n\nexport const ColorSpace = {\n  SRGB: \"srgb\",\n  DisplayP3: \"display-p3\",\n} as const;\n\nexport type ColorSpaceValue = (typeof ColorSpace)[keyof typeof ColorSpace];\n\nexport interface SurfaceOptions {\n  colorSpace: ColorSpaceValue;\n}\n\nexport interface SurfaceFactory {\n  /**\n   * Returns a CPU backed surface with the given dimensions, an SRGB colorspace, Unpremul\n   * alphaType and 8888 color type. The pixels belonging to this surface  will be in memory and\n   * not visible.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   */\n  Make: (width: number, height: number) => SkSurface | null;\n\n  /**\n   * Creates a GPU backed surface.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   * @param opts - optional surface options (e.g. colorSpace: \"display-p3\" | \"srgb\").\n   */\n  MakeOffscreen: (width: number, height: number, opts?: SurfaceOptions) => SkSurface | null;\n}\n"],"mappings":"AAEA,OAAO,MAAMA,UAAU,GAAG;EACxBC,IAAI,EAAE,MAAM;EACZC,SAAS,EAAE;AACb,CAAU","ignoreList":[]}

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/module/mock/index.d.ts

@@ -193,6 +193,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/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/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.2",
   "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",

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/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,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;
 }