@shopify/react-native-skia 2.5.1 → 2.5.3

package/apple/SkiaPlatformContext.mm

@@ -0,0 +1,21 @@
+#ifdef SK_GRAPHITE
+
+#include "SkiaPlatformContext.h"
+
+#include <TargetConditionals.h>
+
+namespace rnwgpu {
+
+wgpu::Surface SkiaPlatformContext::makeSurface(wgpu::Instance instance,
+                                                void *surface, int width,
+                                                int height) {
+  wgpu::SurfaceSourceMetalLayer metalSurfaceDesc;
+  metalSurfaceDesc.layer = surface;
+  wgpu::SurfaceDescriptor surfaceDescriptor;
+  surfaceDescriptor.nextInChain = &metalSurfaceDesc;
+  return instance.CreateSurface(&surfaceDescriptor);
+}
+
+} // namespace rnwgpu
+
+#endif // SK_GRAPHITE

package/apple/WebGPUMetalView.h

@@ -0,0 +1,12 @@
+#pragma once
+
+#import "RNSkUIKit.h"
+
+@interface WebGPUMetalView : RNSkPlatformView
+
+@property (nonatomic, strong) NSNumber *contextId;
+
+- (void)configure;
+- (void)update;
+
+@end

package/apple/WebGPUMetalView.mm

@@ -0,0 +1,93 @@
+#import "WebGPUMetalView.h"
+
+#ifdef SK_GRAPHITE
+
+#import "webgpu/webgpu_cpp.h"
+#import <QuartzCore/CAMetalLayer.h>
+
+#import "rnwgpu/SurfaceRegistry.h"
+#import "rnskia/RNDawnContext.h"
+
+@implementation WebGPUMetalView {
+  BOOL _isConfigured;
+}
+
+#if !TARGET_OS_OSX
++ (Class)layerClass {
+  return [CAMetalLayer class];
+}
+#else  // !TARGET_OS_OSX
+- (instancetype)init {
+  self = [super init];
+  if (self) {
+    self.wantsLayer = true;
+    self.layer = [CAMetalLayer layer];
+  }
+  return self;
+}
+#endif // !TARGET_OS_OSX
+
+- (void)configure {
+  auto size = self.frame.size;
+  void *nativeSurface = (__bridge void *)self.layer;
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto &dawnContext = RNSkia::DawnContext::getInstance();
+  auto gpu = dawnContext.getWGPUInstance();
+
+  // Create the surface using Dawn's API directly
+  wgpu::SurfaceSourceMetalLayer metalSurfaceDesc;
+  metalSurfaceDesc.layer = nativeSurface;
+  wgpu::SurfaceDescriptor surfaceDescriptor;
+  surfaceDescriptor.nextInChain = &metalSurfaceDesc;
+  auto surface = gpu.CreateSurface(&surfaceDescriptor);
+
+  registry
+      .getSurfaceInfoOrCreate([_contextId intValue], gpu, size.width,
+                              size.height)
+      ->switchToOnscreen(nativeSurface, surface);
+}
+
+- (void)update {
+  auto size = self.frame.size;
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto surfaceInfo = registry.getSurfaceInfo([_contextId intValue]);
+  if (surfaceInfo) {
+    surfaceInfo->resize(size.width, size.height);
+  }
+}
+
+- (void)dealloc {
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  // Remove the surface info from the registry
+  registry.removeSurfaceInfo([_contextId intValue]);
+}
+
+@end
+
+#else // SK_GRAPHITE
+
+// Stub implementation when GRAPHITE is not enabled
+@implementation WebGPUMetalView
+
+#if !TARGET_OS_OSX
++ (Class)layerClass {
+  return [CAMetalLayer class];
+}
+#else  // !TARGET_OS_OSX
+- (instancetype)init {
+  self = [super init];
+  return self;
+}
+#endif // !TARGET_OS_OSX
+
+- (void)configure {
+  // No-op when GRAPHITE is not enabled
+}
+
+- (void)update {
+  // No-op when GRAPHITE is not enabled
+}
+
+@end
+
+#endif // SK_GRAPHITE

package/apple/WebGPUView.h

@@ -0,0 +1,20 @@
+#pragma once
+
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import "WebGPUMetalView.h"
+#import <React/RCTViewComponentView.h>
+#if !TARGET_OS_OSX
+#import <UIKit/UIKit.h>
+#else
+#import <AppKit/AppKit.h>
+#endif
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface WebGPUView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif // RCT_NEW_ARCH_ENABLED

package/apple/WebGPUView.mm

@@ -0,0 +1,77 @@
+#ifdef RCT_NEW_ARCH_ENABLED
+
+#import "WebGPUView.h"
+
+#import <react/renderer/components/rnskia/ComponentDescriptors.h>
+#import <react/renderer/components/rnskia/EventEmitters.h>
+#import <react/renderer/components/rnskia/Props.h>
+#import <react/renderer/components/rnskia/RCTComponentViewHelpers.h>
+
+#import "WebGPUMetalView.h"
+#import "RCTFabricComponentsPlugins.h"
+
+using namespace facebook::react;
+
+@implementation WebGPUView
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const WebGPUViewProps>();
+    _props = defaultProps;
+  }
+  return self;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<WebGPUViewComponentDescriptor>();
+}
+
+- (void)prepareForRecycle {
+  [super prepareForRecycle];
+  /*
+    It's important to destroy the Metal Layer before releasing a view
+    to the recycled pool to prevent displaying outdated content from
+    the last usage in the new context.
+  */
+  self.contentView = nil;
+}
+
+- (WebGPUMetalView *)getContentView {
+  if (!self.contentView) {
+    self.contentView = [WebGPUMetalView new];
+  }
+  return (WebGPUMetalView *)self.contentView;
+}
+
+- (void)updateProps:(const Props::Shared &)props
+           oldProps:(const Props::Shared &)oldProps {
+  const auto &oldViewProps =
+      *std::static_pointer_cast<const WebGPUViewProps>(_props);
+  const auto &newViewProps =
+      *std::static_pointer_cast<const WebGPUViewProps>(props);
+
+  if (newViewProps.contextId != oldViewProps.contextId) {
+    /*
+      The context is set only once during mounting the component
+      and never changes because it isn't available for users to modify.
+    */
+    WebGPUMetalView *metalView = [WebGPUMetalView new];
+    self.contentView = metalView;
+    [metalView setContextId:@(newViewProps.contextId)];
+    [metalView configure];
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
+           oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics {
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+  [(WebGPUMetalView *)self.contentView update];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> WebGPUViewCls(void) { return WebGPUView.class; }
+
+#endif // RCT_NEW_ARCH_ENABLED

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/jsi2/JSIConverter.h

@@ -238,6 +238,17 @@ template <> struct JSIConverter<rnwgpu::async::AsyncTaskHandle> {
 };
 #endif
 
+// jsi::Function <> Function
+template <> struct JSIConverter<jsi::Function> {
+  static jsi::Function fromJSI(jsi::Runtime &runtime, const jsi::Value &arg,
+                                bool outOfBound) {
+    return arg.asObject(runtime).asFunction(runtime);
+  }
+  static jsi::Value toJSI(jsi::Runtime &runtime, jsi::Function &&arg) {
+    return std::move(arg);
+  }
+};
+
 // std::map<std::string, T> <> Record<string, T>
 template <typename ValueType>
 struct JSIConverter<std::map<std::string, ValueType>> {

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/RNSkManager.cpp

@@ -14,6 +14,8 @@
 #ifdef SK_GRAPHITE
 #include "RNDawnContext.h"
 #include "rnwgpu/api/GPU.h"
+#include "rnwgpu/api/GPUUncapturedErrorEvent.h"
+#include "rnwgpu/api/RNWebGPU.h"
 #include "rnwgpu/api/descriptors/GPUBufferUsage.h"
 #include "rnwgpu/api/descriptors/GPUColorWrite.h"
 #include "rnwgpu/api/descriptors/GPUMapMode.h"
@@ -73,8 +75,9 @@ void RNSkManager::installBindings() {
       jsi::Object::createFromHostObject(*_jsRuntime, _viewApi));
 
 #ifdef SK_GRAPHITE
-  // Install WebGPU GPU constructor
+  // Install WebGPU constructors
   rnwgpu::GPU::installConstructor(*_jsRuntime);
+  rnwgpu::GPUUncapturedErrorEvent::installConstructor(*_jsRuntime);
   // Create and expose navigator.gpu using DawnContext's instance
   auto &dawnContext = DawnContext::getInstance();
   auto gpu =
@@ -103,9 +106,13 @@ void RNSkManager::installBindings() {
                                    rnwgpu::GPUMapMode::create(*_jsRuntime));
   _jsRuntime->global().setProperty(*_jsRuntime, "GPUShaderStage",
                                    rnwgpu::GPUShaderStage::create(*_jsRuntime));
-  _jsRuntime->global().setProperty(
-      *_jsRuntime, "GPUTextureUsage",
-      rnwgpu::GPUTextureUsage::create(*_jsRuntime));
+  _jsRuntime->global().setProperty(*_jsRuntime, "GPUTextureUsage",
+                                   rnwgpu::GPUTextureUsage::create(*_jsRuntime));
+
+  // Install RNWebGPU global object for WebGPU Canvas support
+  auto rnWebGPU = std::make_shared<rnwgpu::RNWebGPU>(gpu, nullptr);
+  _jsRuntime->global().setProperty(*_jsRuntime, "RNWebGPU",
+                                   rnwgpu::RNWebGPU::create(*_jsRuntime, rnWebGPU));
 #endif
 }
 } // namespace RNSkia

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/cpp/rnwgpu/Canvas.h

@@ -0,0 +1,45 @@
+#pragma once
+
+#include <memory>
+
+#include "jsi2/NativeObject.h"
+
+namespace rnwgpu {
+
+namespace jsi = facebook::jsi;
+
+class Canvas : public NativeObject<Canvas> {
+public:
+  static constexpr const char *CLASS_NAME = "Canvas";
+
+  Canvas(void *nativeSurface, int width, int height)
+      : NativeObject(CLASS_NAME), _nativeSurface(nativeSurface), _width(width),
+        _height(height), _clientWidth(width), _clientHeight(height) {}
+
+  void *getNativeSurface() { return _nativeSurface; }
+
+  int getWidth() { return _width; }
+  int getHeight() { return _height; }
+
+  int getClientWidth() { return _clientWidth; }
+  int getClientHeight() { return _clientHeight; }
+
+  void setClientWidth(int width) { _clientWidth = width; }
+  void setClientHeight(int height) { _clientHeight = height; }
+
+  static void definePrototype(jsi::Runtime &runtime, jsi::Object &prototype) {
+    installGetter(runtime, prototype, "width", &Canvas::getWidth);
+    installGetter(runtime, prototype, "height", &Canvas::getHeight);
+    installGetter(runtime, prototype, "clientWidth", &Canvas::getClientWidth);
+    installGetter(runtime, prototype, "clientHeight", &Canvas::getClientHeight);
+  }
+
+private:
+  void *_nativeSurface;
+  int _width;
+  int _height;
+  int _clientWidth;
+  int _clientHeight;
+};
+
+} // namespace rnwgpu

package/cpp/rnwgpu/PlatformContext.h

@@ -0,0 +1,18 @@
+#pragma once
+
+#include <memory>
+
+#include "webgpu/webgpu_cpp.h"
+
+namespace rnwgpu {
+
+class PlatformContext {
+public:
+  PlatformContext() = default;
+  virtual ~PlatformContext() = default;
+
+  virtual wgpu::Surface makeSurface(wgpu::Instance instance, void *surface,
+                                    int width, int height) = 0;
+};
+
+} // namespace rnwgpu