@shopify/react-native-skia 2.5.1 → 2.5.3

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
@@ -130,6 +128,7 @@ if(SK_GRAPHITE)
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUAdapter.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUBindGroup.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUBuffer.cpp"
+        "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUCanvasContext.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUCommandEncoder.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUComputePassEncoder.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUComputePipeline.cpp"
@@ -143,6 +142,9 @@ if(SK_GRAPHITE)
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUShaderModule.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUSupportedLimits.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/rnwgpu/api/GPUTexture.cpp"
+
+        # WebGPU Canvas JNI bindings
+        "${PROJECT_SOURCE_DIR}/cpp/jni/JniWebGPUView.cpp"
     )
 endif()
 

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/jni/JniWebGPUView.cpp

@@ -0,0 +1,67 @@
+#include <jni.h>
+#include <android/native_window_jni.h>
+
+#ifdef SK_GRAPHITE
+#include "webgpu/webgpu_cpp.h"
+#include "rnwgpu/SurfaceRegistry.h"
+#include "rnskia/RNDawnContext.h"
+#endif
+
+extern "C" JNIEXPORT void JNICALL
+Java_com_shopify_reactnative_skia_WebGPUView_onSurfaceCreate(
+    JNIEnv *env, jobject thiz, jobject jSurface, jint contextId, jfloat width,
+    jfloat height) {
+#ifdef SK_GRAPHITE
+  auto window = ANativeWindow_fromSurface(env, jSurface);
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto &dawnContext = RNSkia::DawnContext::getInstance();
+  auto gpu = dawnContext.getWGPUInstance();
+
+  // Create surface from ANativeWindow
+  wgpu::SurfaceDescriptorFromAndroidNativeWindow androidSurfaceDesc;
+  androidSurfaceDesc.window = window;
+  wgpu::SurfaceDescriptor surfaceDescriptor;
+  surfaceDescriptor.nextInChain = &androidSurfaceDesc;
+  auto surface = gpu.CreateSurface(&surfaceDescriptor);
+
+  registry
+      .getSurfaceInfoOrCreate(contextId, gpu, static_cast<int>(width),
+                              static_cast<int>(height))
+      ->switchToOnscreen(window, surface);
+#endif
+}
+
+extern "C" JNIEXPORT void JNICALL
+Java_com_shopify_reactnative_skia_WebGPUView_onSurfaceChanged(
+    JNIEnv *env, jobject thiz, jobject surface, jint contextId, jfloat width,
+    jfloat height) {
+#ifdef SK_GRAPHITE
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto surfaceInfo = registry.getSurfaceInfo(contextId);
+  if (surfaceInfo) {
+    surfaceInfo->resize(static_cast<int>(width), static_cast<int>(height));
+  }
+#endif
+}
+
+extern "C" JNIEXPORT void JNICALL
+Java_com_shopify_reactnative_skia_WebGPUView_switchToOffscreenSurface(
+    JNIEnv *env, jobject thiz, jint contextId) {
+#ifdef SK_GRAPHITE
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto surfaceInfo = registry.getSurfaceInfo(contextId);
+  if (surfaceInfo) {
+    surfaceInfo->switchToOffscreen();
+  }
+#endif
+}
+
+extern "C" JNIEXPORT void JNICALL
+Java_com_shopify_reactnative_skia_WebGPUView_onSurfaceDestroy(JNIEnv *env,
+                                                              jobject thiz,
+                                                              jint contextId) {
+#ifdef SK_GRAPHITE
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  registry.removeSurfaceInfo(contextId);
+#endif
+}

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/android/cpp/rnskia-android/SkiaPlatformContext.h

@@ -0,0 +1,26 @@
+#pragma once
+
+#ifdef SK_GRAPHITE
+
+#include "rnwgpu/PlatformContext.h"
+
+namespace rnwgpu {
+
+class SkiaPlatformContext : public PlatformContext {
+public:
+  SkiaPlatformContext() = default;
+  ~SkiaPlatformContext() = default;
+
+  wgpu::Surface makeSurface(wgpu::Instance instance, void *surface, int width,
+                            int height) override {
+    wgpu::SurfaceDescriptorFromAndroidNativeWindow androidSurfaceDesc;
+    androidSurfaceDesc.window = surface;
+    wgpu::SurfaceDescriptor surfaceDescriptor;
+    surfaceDescriptor.nextInChain = &androidSurfaceDesc;
+    return instance.CreateSurface(&surfaceDescriptor);
+  }
+};
+
+} // namespace rnwgpu
+
+#endif // SK_GRAPHITE

package/android/src/main/java/com/shopify/reactnative/skia/RNSkiaPackage.java

@@ -42,7 +42,10 @@ public class RNSkiaPackage extends TurboReactPackage {
 
     @Override
     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-        return Arrays.<ViewManager>asList(new SkiaPictureViewManager());
+        return Arrays.<ViewManager>asList(
+            new SkiaPictureViewManager(),
+            new WebGPUViewManager()
+        );
     }
 
     @Override

package/android/src/main/java/com/shopify/reactnative/skia/WebGPUSurfaceView.java

@@ -0,0 +1,41 @@
+package com.shopify.reactnative.skia;
+
+import android.annotation.SuppressLint;
+import android.content.Context;
+import android.view.SurfaceHolder;
+import android.view.SurfaceView;
+
+import androidx.annotation.NonNull;
+
+@SuppressLint("ViewConstructor")
+public class WebGPUSurfaceView extends SurfaceView implements SurfaceHolder.Callback {
+
+  WebGPUViewAPI mApi;
+
+  public WebGPUSurfaceView(Context context, WebGPUViewAPI api) {
+    super(context);
+    mApi = api;
+    getHolder().addCallback(this);
+  }
+
+  @Override
+  protected void onDetachedFromWindow() {
+    super.onDetachedFromWindow();
+    mApi.surfaceDestroyed();
+  }
+
+  @Override
+  public void surfaceCreated(@NonNull SurfaceHolder holder) {
+    mApi.surfaceCreated(holder.getSurface());
+  }
+
+  @Override
+  public void surfaceChanged(@NonNull SurfaceHolder holder, int format, int width, int height) {
+    mApi.surfaceChanged(holder.getSurface());
+  }
+
+  @Override
+  public void surfaceDestroyed(@NonNull SurfaceHolder holder) {
+    mApi.surfaceOffscreen();
+  }
+}

package/android/src/main/java/com/shopify/reactnative/skia/WebGPUTextureView.java

@@ -0,0 +1,44 @@
+package com.shopify.reactnative.skia;
+
+import android.annotation.SuppressLint;
+import android.content.Context;
+import android.graphics.SurfaceTexture;
+import android.view.Surface;
+import android.view.TextureView;
+import androidx.annotation.NonNull;
+
+@SuppressLint("ViewConstructor")
+public class WebGPUTextureView extends TextureView implements TextureView.SurfaceTextureListener {
+
+  WebGPUViewAPI mApi;
+
+  public WebGPUTextureView(Context context, WebGPUViewAPI api) {
+    super(context);
+    mApi = api;
+    setOpaque(false);
+    setSurfaceTextureListener(this);
+  }
+
+  @Override
+  public void onSurfaceTextureAvailable(@NonNull SurfaceTexture surfaceTexture, int width, int height) {
+    Surface surface = new Surface(surfaceTexture);
+    mApi.surfaceCreated(surface);
+  }
+
+  @Override
+  public void onSurfaceTextureSizeChanged(@NonNull SurfaceTexture surfaceTexture, int width, int height) {
+    Surface surface = new Surface(surfaceTexture);
+    mApi.surfaceChanged(surface);
+  }
+
+  @Override
+  public boolean onSurfaceTextureDestroyed(@NonNull SurfaceTexture surfaceTexture) {
+    mApi.surfaceDestroyed();
+    return true;
+  }
+
+  @Override
+  public void onSurfaceTextureUpdated(@NonNull SurfaceTexture surfaceTexture) {
+    // No implementation needed
+  }
+}

package/android/src/main/java/com/shopify/reactnative/skia/WebGPUView.java

@@ -0,0 +1,95 @@
+package com.shopify.reactnative.skia;
+
+import android.content.Context;
+import android.view.Surface;
+import android.view.View;
+
+import com.facebook.proguard.annotations.DoNotStrip;
+import com.facebook.react.views.view.ReactViewGroup;
+
+public class WebGPUView extends ReactViewGroup implements WebGPUViewAPI {
+
+  private int mContextId;
+  private boolean mTransparent = false;
+  private View mView = null;
+
+  WebGPUView(Context context) {
+    super(context);
+  }
+
+  public void setContextId(int contextId) {
+    mContextId = contextId;
+  }
+
+  public void setTransparent(boolean value) {
+    Context ctx = getContext();
+    if (value != mTransparent || mView == null) {
+      if (mView != null) {
+        removeView(mView);
+      }
+      mTransparent = value;
+      if (mTransparent) {
+        mView = new WebGPUTextureView(ctx, this);
+      } else {
+        mView = new WebGPUSurfaceView(ctx, this);
+      }
+      addView(mView);
+    }
+  }
+
+  @Override
+  protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
+    super.onLayout(changed, left, top, right, bottom);
+    if (mView != null) {
+      mView.layout(0, 0, this.getMeasuredWidth(), this.getMeasuredHeight());
+    }
+  }
+
+  @Override
+  public void surfaceCreated(Surface surface) {
+    float density = getResources().getDisplayMetrics().density;
+    float width = getWidth() / density;
+    float height = getHeight() / density;
+    onSurfaceCreate(surface, mContextId, width, height);
+  }
+
+  @Override
+  public void surfaceChanged(Surface surface) {
+    float density = getResources().getDisplayMetrics().density;
+    float width = getWidth() / density;
+    float height = getHeight() / density;
+    onSurfaceChanged(surface, mContextId, width, height);
+  }
+
+  @Override
+  public void surfaceDestroyed() {
+    onSurfaceDestroy(mContextId);
+  }
+
+  @Override
+  public void surfaceOffscreen() {
+    switchToOffscreenSurface(mContextId);
+  }
+
+  @DoNotStrip
+  private native void onSurfaceCreate(
+    Surface surface,
+    int contextId,
+    float width,
+    float height
+  );
+
+  @DoNotStrip
+  private native void onSurfaceChanged(
+    Surface surface,
+    int contextId,
+    float width,
+    float height
+  );
+
+  @DoNotStrip
+  private native void onSurfaceDestroy(int contextId);
+
+  @DoNotStrip
+  private native void switchToOffscreenSurface(int contextId);
+}

package/android/src/main/java/com/shopify/reactnative/skia/WebGPUViewAPI.java

@@ -0,0 +1,14 @@
+package com.shopify.reactnative.skia;
+
+import android.view.Surface;
+
+public interface WebGPUViewAPI {
+
+  void surfaceCreated(Surface surface);
+
+  void surfaceChanged(Surface surface);
+
+  void surfaceDestroyed();
+
+  void surfaceOffscreen();
+}

package/android/src/main/java/com/shopify/reactnative/skia/WebGPUViewManager.java

@@ -0,0 +1,58 @@
+package com.shopify.reactnative.skia;
+
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.views.view.ReactViewGroup;
+import com.facebook.react.views.view.ReactViewManager;
+import com.facebook.react.viewmanagers.WebGPUViewManagerDelegate;
+import com.facebook.react.viewmanagers.WebGPUViewManagerInterface;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+@ReactModule(name = WebGPUViewManager.NAME)
+public class WebGPUViewManager extends ReactViewManager implements WebGPUViewManagerInterface<WebGPUView> {
+
+  public static final String NAME = "WebGPUView";
+
+  protected WebGPUViewManagerDelegate mDelegate;
+
+  public WebGPUViewManager() {
+    mDelegate = new WebGPUViewManagerDelegate(this);
+  }
+
+  protected WebGPUViewManagerDelegate getDelegate() {
+    return mDelegate;
+  }
+
+  @NonNull
+  @Override
+  public String getName() {
+    return NAME;
+  }
+
+  @NonNull
+  @Override
+  public WebGPUView createViewInstance(@NonNull ThemedReactContext context) {
+    return new WebGPUView(context);
+  }
+
+  @Override
+  @ReactProp(name = "transparent")
+  public void setTransparent(WebGPUView view, boolean value) {
+    view.setTransparent(value);
+  }
+
+  @Override
+  @ReactProp(name = "contextId")
+  public void setContextId(WebGPUView view, int value) {
+    view.setContextId(value);
+  }
+
+  @Override
+  public void onDropViewInstance(@NonNull ReactViewGroup view) {
+    super.onDropViewInstance(view);
+    ((WebGPUView) view).surfaceDestroyed();
+  }
+}

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/RNSkUIKit.h

@@ -0,0 +1,13 @@
+#pragma once
+
+#if !TARGET_OS_OSX
+#import <UIKit/UIKit.h>
+#else
+#import <Appkit/Appkit.h>
+#endif
+
+#if !TARGET_OS_OSX
+typedef UIView RNSkPlatformView;
+#else
+typedef NSView RNSkPlatformView;
+#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/apple/SkiaPlatformContext.h

@@ -0,0 +1,20 @@
+#pragma once
+
+#ifdef SK_GRAPHITE
+
+#include "rnwgpu/PlatformContext.h"
+
+namespace rnwgpu {
+
+class SkiaPlatformContext : public PlatformContext {
+public:
+  SkiaPlatformContext() = default;
+  ~SkiaPlatformContext() = default;
+
+  wgpu::Surface makeSurface(wgpu::Instance instance, void *surface, int width,
+                            int height) override;
+};
+
+} // namespace rnwgpu
+
+#endif // SK_GRAPHITE