feat(🍏): add support for non p3 colors on iOS (#3253)

wcandillon · web-flow · commit 23359672e886 · 2025-08-03T09:01:46.000+02:00
diff --git a/apps/example/src/Examples/API/ColorFilter.tsx b/apps/example/src/Examples/API/ColorFilter.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { ScrollView, useWindowDimensions } from "react-native";
+import { ScrollView, useWindowDimensions, View } from "react-native";
 import {
   Skia,
   PaintStyle,
@@ -16,6 +16,7 @@ import {
   SRGBToLinearGamma,
   SkiaPictureView,
   createPicture,
+  Fill,
 } from "@shopify/react-native-skia";
 
 import { Title } from "./components/Title";
@@ -137,6 +138,10 @@ export const ColorFilter = () => {
           </LinearToSRGBGamma>
         </Image>
       </Canvas>
+      <Canvas style={{ width: 256, height: 256 }} colorSpace="srgb">
+        <Fill color="green" />
+      </Canvas>
+      <View style={{ width: 256, height: 256, backgroundColor: "green" }} />
     </ScrollView>
   );
 };
diff --git a/packages/skia/android/src/main/java/com/shopify/reactnative/skia/SkiaPictureViewManager.java b/packages/skia/android/src/main/java/com/shopify/reactnative/skia/SkiaPictureViewManager.java
@@ -5,6 +5,7 @@
 import com.facebook.react.viewmanagers.SkiaPictureViewManagerInterface;
 
 import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
 
 public class SkiaPictureViewManager extends SkiaBaseViewManager<SkiaPictureView> implements SkiaPictureViewManagerInterface<SkiaPictureView> {
 
@@ -30,4 +31,9 @@ public String getName() {
     public SkiaPictureView createViewInstance(@NonNull ThemedReactContext reactContext) {
         return new SkiaPictureView(reactContext);
     }
+
+    @Override
+    public void setColorSpace(SkiaPictureView view, @Nullable String value) {
+        // nothing to do here at the moment
+    }
 }
diff --git a/packages/skia/apple/MetalContext.h b/packages/skia/apple/MetalContext.h
@@ -113,10 +113,10 @@ class MetalContext {
   }
 
   std::unique_ptr<RNSkia::WindowContext> MakeWindow(CALayer *window, int width,
-                                                    int height) {
+                                                    int height, bool useP3ColorSpace = true) {
     auto device = MetalSharedContext::getInstance().getDevice();
     return std::make_unique<MetalWindowContext>(
-        _directContext.get(), device, _commandQueue, window, width, height);
+        _directContext.get(), device, _commandQueue, window, width, height, useP3ColorSpace);
   }
 
   GrDirectContext *getDirectContext() { return _directContext.get(); }
diff --git a/packages/skia/apple/MetalWindowContext.h b/packages/skia/apple/MetalWindowContext.h
@@ -10,7 +10,7 @@ class MetalWindowContext : public RNSkia::WindowContext {
 public:
   MetalWindowContext(GrDirectContext *directContext, id<MTLDevice> device,
                      id<MTLCommandQueue> commandQueue, CALayer *layer,
-                     int width, int height);
+                     int width, int height, bool useP3ColorSpace = true);
   ~MetalWindowContext() = default;
 
   sk_sp<SkSurface> getSurface() override;
diff --git a/packages/skia/apple/MetalWindowContext.mm b/packages/skia/apple/MetalWindowContext.mm
@@ -6,7 +6,8 @@
 MetalWindowContext::MetalWindowContext(GrDirectContext *directContext,
                                        id<MTLDevice> device,
                                        id<MTLCommandQueue> commandQueue,
-                                       CALayer *layer, int width, int height)
+                                       CALayer *layer, int width, int height,
+                                       bool useP3ColorSpace)
     : _directContext(directContext), _commandQueue(commandQueue) {
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
@@ -24,9 +25,11 @@
   _layer.contentsGravity = kCAGravityBottomLeft;
   _layer.drawableSize = CGSizeMake(width, height);
   BOOL supportsWideColor = NO;
-  if (@available(iOS 10.0, *)) {
-    supportsWideColor =
-        [UIScreen mainScreen].traitCollection.displayGamut == UIDisplayGamutP3;
+  if (useP3ColorSpace) {
+    if (@available(iOS 10.0, *)) {
+      supportsWideColor =
+          [UIScreen mainScreen].traitCollection.displayGamut == UIDisplayGamutP3;
+    }
   }
   if (supportsWideColor) {
     CGColorSpaceRef colorSpace =
diff --git a/packages/skia/apple/RNSkAppleView.h b/packages/skia/apple/RNSkAppleView.h
@@ -10,6 +10,7 @@ class RNSkBaseAppleView {
 public:
   virtual CALayer *getLayer() = 0;
   virtual void setSize(int width, int height) = 0;
+  virtual void setUseP3ColorSpace(bool useP3ColorSpace) = 0;
   virtual std::shared_ptr<RNSkia::RNSkView> getDrawView() = 0;
 };
 
@@ -18,7 +19,7 @@ template <class T> class RNSkAppleView : public RNSkBaseAppleView, public T {
   RNSkAppleView(std::shared_ptr<RNSkia::RNSkPlatformContext> context)
       : T(context,
           std::make_shared<RNSkMetalCanvasProvider>(
-              std::bind(&RNSkia::RNSkView::requestRedraw, this), context)) {}
+              std::bind(&RNSkia::RNSkView::requestRedraw, this), context, true)) {}
 
   CALayer *getLayer() override {
     return std::static_pointer_cast<RNSkMetalCanvasProvider>(
@@ -31,6 +32,11 @@ template <class T> class RNSkAppleView : public RNSkBaseAppleView, public T {
         ->setSize(width, height);
   }
 
+  void setUseP3ColorSpace(bool useP3ColorSpace) override {
+    std::static_pointer_cast<RNSkMetalCanvasProvider>(this->getCanvasProvider())
+        ->setUseP3ColorSpace(useP3ColorSpace);
+  }
+
   std::shared_ptr<RNSkia::RNSkView> getDrawView() override {
     return this->shared_from_this();
   }
diff --git a/packages/skia/apple/RNSkMetalCanvasProvider.h b/packages/skia/apple/RNSkMetalCanvasProvider.h
@@ -16,7 +16,8 @@
 class RNSkMetalCanvasProvider : public RNSkia::RNSkCanvasProvider {
 public:
   RNSkMetalCanvasProvider(std::function<void()> requestRedraw,
-                          std::shared_ptr<RNSkia::RNSkPlatformContext> context);
+                          std::shared_ptr<RNSkia::RNSkPlatformContext> context,
+                          bool useP3ColorSpace = true);
 
   ~RNSkMetalCanvasProvider();
 
@@ -26,6 +27,7 @@ class RNSkMetalCanvasProvider : public RNSkia::RNSkCanvasProvider {
   bool renderToCanvas(const std::function<void(SkCanvas *)> &cb) override;
 
   void setSize(int width, int height);
+  void setUseP3ColorSpace(bool useP3ColorSpace);
   CALayer *getLayer();
 
 private:
@@ -35,4 +37,5 @@ class RNSkMetalCanvasProvider : public RNSkia::RNSkCanvasProvider {
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
   CAMetalLayer *_layer;
 #pragma clang diagnostic pop
+  bool _useP3ColorSpace = true;
 };
diff --git a/packages/skia/apple/RNSkMetalCanvasProvider.mm b/packages/skia/apple/RNSkMetalCanvasProvider.mm
@@ -23,8 +23,9 @@
 
 RNSkMetalCanvasProvider::RNSkMetalCanvasProvider(
     std::function<void()> requestRedraw,
-    std::shared_ptr<RNSkia::RNSkPlatformContext> context)
-    : RNSkCanvasProvider(requestRedraw), _context(context) {
+    std::shared_ptr<RNSkia::RNSkPlatformContext> context,
+    bool useP3ColorSpace)
+    : RNSkCanvasProvider(requestRedraw), _context(context), _useP3ColorSpace(useP3ColorSpace) {
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
   _layer = [CAMetalLayer layer];
@@ -100,9 +101,13 @@
   _ctx = RNSkia::DawnContext::getInstance().MakeWindow((__bridge void *)_layer,
                                                        w, h);
 #else
-  _ctx = MetalContext::getInstance().MakeWindow(_layer, w, h);
+  _ctx = MetalContext::getInstance().MakeWindow(_layer, w, h, _useP3ColorSpace);
 #endif
   _requestRedraw();
 }
 
 CALayer *RNSkMetalCanvasProvider::getLayer() { return _layer; }
+
+void RNSkMetalCanvasProvider::setUseP3ColorSpace(bool useP3ColorSpace) {
+  _useP3ColorSpace = useP3ColorSpace;
+}
diff --git a/packages/skia/apple/SkiaPictureView.mm b/packages/skia/apple/SkiaPictureView.mm
@@ -55,6 +55,10 @@ - (void)updateProps:(const Props::Shared &)props
   [self setNativeId:nativeId];
   [self setDebugMode:newProps.debug];
   [self setOpaque:newProps.opaque];
+  if (newProps.colorSpace == "" || newProps.colorSpace == "srgb") {
+    bool useP3 = false;
+    [self setUseP3ColorSpace:useP3];
+  }
 }
 
 @end
diff --git a/packages/skia/apple/SkiaUIView.h b/packages/skia/apple/SkiaUIView.h
@@ -41,5 +41,6 @@
 - (void)setDebugMode:(bool)debugMode;
 - (void)setOpaque:(bool)opaque;
 - (void)setNativeId:(size_t)nativeId;
+- (void)setUseP3ColorSpace:(bool)useP3ColorSpace;
 
 @end
diff --git a/packages/skia/apple/SkiaUIView.mm b/packages/skia/apple/SkiaUIView.mm
@@ -16,6 +16,7 @@ @implementation SkiaUIView {
       _factory;
   bool _debugMode;
   bool _opaque;
+  bool _useP3ColorSpace;
   size_t _nativeId;
 }
 
@@ -73,6 +74,7 @@ - (void)viewWillMoveToSuperview:(NSView *)newSuperView {
         _manager->setSkiaView(_nativeId, _impl->getDrawView());
       }
       _impl->getDrawView()->setShowDebugOverlays(_debugMode);
+      _impl->setUseP3ColorSpace(_useP3ColorSpace);
     }
   }
 }
@@ -163,6 +165,13 @@ - (void)setNativeId:(size_t)nativeId {
   }
 }
 
+- (void)setUseP3ColorSpace:(bool)useP3ColorSpace {
+  _useP3ColorSpace = useP3ColorSpace;
+  if (_impl != nullptr) {
+    _impl->setUseP3ColorSpace(_useP3ColorSpace);
+  }
+}
+
 #pragma mark External API
 
 - (std::shared_ptr<RNSkBaseAppleView>)impl {
diff --git a/packages/skia/src/renderer/Canvas.tsx b/packages/skia/src/renderer/Canvas.tsx
@@ -52,6 +52,7 @@ export interface CanvasProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
   onSize?: SharedValue<SkSize>;
+  colorSpace?: "p3" | "srgb";
   ref?: React.Ref<CanvasRef>;
 }
 
@@ -61,6 +62,7 @@ export const Canvas = ({
   children,
   onSize,
   onLayout: _onLayout,
+  colorSpace = "p3",
   ref,
   ...viewProps
 }: CanvasProps) => {
@@ -109,6 +111,7 @@ export const Canvas = ({
       nativeID={`${nativeId}`}
       debug={debug}
       opaque={opaque}
+      colorSpace={colorSpace}
       onLayout={onLayout}
       {...viewProps}
     />
diff --git a/packages/skia/src/specs/SkiaPictureViewNativeComponent.ts b/packages/skia/src/specs/SkiaPictureViewNativeComponent.ts
@@ -4,6 +4,7 @@ import type { ViewProps } from "react-native";
 export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
+  colorSpace?: string;
 }
 
 // eslint-disable-next-line import/no-default-export

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`5`	`5`	`import com.facebook.react.viewmanagers.SkiaPictureViewManagerInterface;`
`6`	`6`
`7`	`7`	`import androidx.annotation.NonNull;`
	`8`	`+import androidx.annotation.Nullable;`
`8`	`9`
`9`	`10`	`public class SkiaPictureViewManager extends SkiaBaseViewManager<SkiaPictureView> implements SkiaPictureViewManagerInterface<SkiaPictureView> {`
`10`	`11`
`@@ -30,4 +31,9 @@ public String getName() {`
`30`	`31`	`public SkiaPictureView createViewInstance(@NonNull ThemedReactContext reactContext) {`
`31`	`32`	`return new SkiaPictureView(reactContext);`
`32`	`33`	`}`
	`34`	`+`
	`35`	`+ @Override`
	`36`	`+ public void setColorSpace(SkiaPictureView view, @Nullable String value) {`
	`37`	`+ // nothing to do here at the moment`
	`38`	`+ }`
`33`	`39`	`}`
Original file line number	Diff line number	Diff line change
`@@ -113,10 +113,10 @@ class MetalContext {`
`113`	`113`	`}`
`114`	`114`
`115`	`115`	`std::unique_ptr<RNSkia::WindowContext> MakeWindow(CALayer *window, int width,`
`116`		`- int height) {`
	`116`	`+ int height, bool useP3ColorSpace = true) {`
`117`	`117`	`auto device = MetalSharedContext::getInstance().getDevice();`
`118`	`118`	`return std::make_unique<MetalWindowContext>(`
`119`		`- _directContext.get(), device, _commandQueue, window, width, height);`
	`119`	`+ _directContext.get(), device, _commandQueue, window, width, height, useP3ColorSpace);`
`120`	`120`	`}`
`121`	`121`
`122`	`122`	`GrDirectContext *getDirectContext() { return _directContext.get(); }`