react-native-skia 3.0.2 → 3.0.4

package/README.md

@@ -4,6 +4,23 @@ High-performance 2d Graphics for React Native using Skia
 
 <img width="400" alt="skia" src="https://user-images.githubusercontent.com/306134/146549218-b7959ad9-0107-4c1c-b439-b96c780f5230.png">
 
-Checkout the full documentation [here](https://shopify.github.io/react-native-skia).
+React Native Skia brings the Skia Graphics Library to React Native. Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Flutter, Mozilla Firefox and Firefox OS, and many other products.
 
-Documentation on the library development is available [here](https://github.com/Shopify/react-native-skia#library-development).
+## Getting Started
+
+```sh
+yarn add react-native-skia
+```
+
+Checkout the full documentation [here](https://wcandillon.github.io/react-native-skia).
+
+## v3 and v2
+
+React Native Skia v3 renders with [Graphite](https://skia.org/docs/user/graphite/), Skia's new GPU backend, on iOS, Android (API level 26 and above), and macOS.
+
+- To upgrade from v2 or from `@shopify/react-native-skia`, follow the [migration guide](https://wcandillon.github.io/react-native-skia/docs/getting-started/migration).
+- v2 keeps the Ganesh backend and is still maintained. Install it with `yarn add react-native-skia@2`. Its documentation is available at [wcandillon.github.io/react-native-skia/v2](https://wcandillon.github.io/react-native-skia/v2/).
+
+## Contributing
+
+Documentation on the library development is available [here](https://github.com/wcandillon/react-native-skia/blob/main/packages/skia/CONTRIBUTING.md).

package/android/build.gradle

@@ -147,7 +147,7 @@ logger.warn("react-native-skia: buildDir: ${buildDir}")
 logger.warn("react-native-skia: node_modules: ${nodeModules}")
 
 android {
-    namespace "com.reactnative.skia"
+    namespace = "com.reactnative.skia"
 
     compileSdkVersion safeExtGet('compileSdkVersion', DEFAULT_COMPILE_SDK_VERSION)
     buildToolsVersion safeExtGet('buildToolsVersion', DEFAULT_BUILD_TOOLS_VERSION)
@@ -155,10 +155,10 @@ android {
     // Used to override the NDK path/version on internal CI or by allowing
     // users to customize the NDK path/version from their root project.
     if (rootProject.hasProperty("ndkPath")) {
-        ndkPath rootProject.ext.ndkPath
+        ndkPath = rootProject.ext.ndkPath
     }
     if (rootProject.hasProperty("ndkVersion")) {
-        ndkVersion rootProject.ext.ndkVersion
+        ndkVersion = rootProject.ext.ndkVersion
     }
 
     defaultConfig {
@@ -181,8 +181,15 @@ android {
             }
         }
     }
+    // The Java sources use switch expressions (Java 14+). React Native's Gradle
+    // plugin aligns every module on 17 from the app's plugin block, but a host
+    // that opts out of that alignment must still compile this library.
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_17
+        targetCompatibility = JavaVersion.VERSION_17
+    }
     lintOptions {
-        abortOnError false
+        abortOnError = false
     }
 
     publishing {
@@ -214,12 +221,12 @@ android {
     }
 
     buildFeatures {
-        prefab true
-        prefabPublishing true
+        prefab = true
+        prefabPublishing = true
     }
     prefab {
         rnskia {
-            headers "${project.buildDir}/headers/rnskia/"
+            headers = "${project.buildDir}/headers/rnskia/"
         }
     }
 }
@@ -238,6 +245,7 @@ repositories {
 dependencies {
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+'  // From node_modules
+    testImplementation 'junit:junit:4.13.2'
 }
 
 // Package all the cpp code in a flattened directory structure

package/android/src/main/java/com/reactnative/skia/BackingViewKind.java

@@ -0,0 +1,24 @@
+package com.reactnative.skia;
+
+import androidx.annotation.Nullable;
+
+/** The Android view a SkiaView draws into, see SkiaView.updateView(). */
+enum BackingViewKind {
+    SURFACE_VIEW,
+    TEXTURE_VIEW;
+
+    /**
+     * The kind the androidSurfaceType prop asks for, or null for "auto", which
+     * leaves the choice to the opaque prop.
+     */
+    @Nullable
+    static BackingViewKind fromSurfaceType(@Nullable String surfaceType) {
+        if ("SurfaceView".equals(surfaceType)) {
+            return SURFACE_VIEW;
+        }
+        if ("TextureView".equals(surfaceType)) {
+            return TEXTURE_VIEW;
+        }
+        return null;
+    }
+}

package/android/src/main/java/com/reactnative/skia/FrameScheduler.java

@@ -0,0 +1,104 @@
+package com.reactnative.skia;
+
+import androidx.annotation.Nullable;
+
+/**
+ * Decides when a SkiaView presents the recordings queued for it: a SurfaceView
+ * on the next vsync, a TextureView behind the draw its window has pending, so
+ * that the window has taken the previous frame by then. Keeps at most one
+ * frame callback and one posted present outstanding. Main thread.
+ */
+final class FrameScheduler {
+    /** What the scheduler asks of the view. */
+    interface Host {
+        /** Calls onFrame() on the next Choreographer frame. */
+        void postFrameCallback();
+
+        /** Calls onPosted() from the main looper, behind any draw the window has pending. */
+        void postBehindPendingDraw();
+
+        /** Presents the queued recordings, returning whether any are left. */
+        boolean presentFrame();
+    }
+
+    private final Host mHost;
+    private boolean mFrameCallbackPosted = false;
+    private boolean mPresentPosted = false;
+
+    FrameScheduler(Host host) {
+        mHost = host;
+    }
+
+    /** A recording was submitted. Without a backing view there is no surface to present on yet. */
+    void requestFrame(@Nullable BackingViewKind kind) {
+        if (kind == null) {
+            return;
+        }
+        // A frame callback still outstanding (a retry, see presentOrRetry) presents
+        // the new recording along with the leftovers on that vsync.
+        if (mFrameCallbackPosted) {
+            return;
+        }
+        if (presentsOnVsync(kind)) {
+            postFrameCallback();
+        } else {
+            postBehindPendingDraw();
+        }
+    }
+
+    /** The Choreographer frame asked for with Host.postFrameCallback(). */
+    void onFrame(@Nullable BackingViewKind kind) {
+        mFrameCallbackPosted = false;
+        if (kind == null) {
+            return;
+        }
+        if (presentsOnVsync(kind)) {
+            presentOrRetry();
+        } else {
+            postBehindPendingDraw();
+        }
+    }
+
+    /** The message posted with Host.postBehindPendingDraw(). */
+    void onPosted() {
+        mPresentPosted = false;
+        presentOrRetry();
+    }
+
+    /** The view left its window, and the host removed both callbacks. */
+    void cancel() {
+        mFrameCallbackPosted = false;
+        mPresentPosted = false;
+    }
+
+    // The compositor takes a SurfaceView's buffer at the vsync. A TextureView's frame
+    // shows when its window draws, and its buffer queue replaces a frame not drawn yet.
+    private static boolean presentsOnVsync(BackingViewKind kind) {
+        return switch (kind) {
+            case SURFACE_VIEW -> true;
+            case TEXTURE_VIEW -> false;
+        };
+    }
+
+    // Recordings left over (the present failed, or more were submitted meanwhile)
+    // are tried again on the next vsync, never straight away.
+    private void presentOrRetry() {
+        if (mHost.presentFrame()) {
+            postFrameCallback();
+        }
+    }
+
+    private void postFrameCallback() {
+        if (!mFrameCallbackPosted) {
+            mFrameCallbackPosted = true;
+            mHost.postFrameCallback();
+        }
+    }
+
+    private void postBehindPendingDraw() {
+        if (!mPresentPosted) {
+            mPresentPosted = true;
+            mHost.postBehindPendingDraw();
+        }
+    }
+}

package/android/src/main/java/com/reactnative/skia/SkiaView.java

@@ -8,6 +8,8 @@ import android.view.MotionEvent;
 import android.view.Surface;
 import android.view.View;
 
+import androidx.annotation.Nullable;
+
 import com.facebook.jni.HybridData;
 import com.facebook.jni.annotations.DoNotStrip;
 import com.facebook.react.bridge.ReactContext;
@@ -17,14 +19,10 @@ import com.facebook.react.views.view.ReactViewGroup;
 /**
  * The Android view behind <Canvas>, <SkiaPictureView> and <SkiaGraphiteView>.
  * It is backed by a SurfaceView or a TextureView (see updateView()) that the
- * native side draws into with Graphite, presenting the queued recordings on
- * the Choreographer.
+ * native side draws into with Graphite, presenting the queued recordings when
+ * the backing view can show them (see FrameScheduler).
  */
 public class SkiaView extends ReactViewGroup implements SkiaViewAPI, Choreographer.FrameCallback {
-    // Backing view kinds, see updateView().
-    private static final int KIND_SURFACE_VIEW = 0;
-    private static final int KIND_TEXTURE_VIEW = 1;
-
     private static final String TAG = "SkiaView";
 
     @DoNotStrip
@@ -32,18 +30,36 @@ public class SkiaView extends ReactViewGroup implements SkiaViewAPI, Choreograph
 
     private View mView;
 
-    // Props, applied together in updateView().
+    // Props, applied together in updateView(). A null kind is "auto".
     private boolean mOpaque = false;
-    private String mSurfaceType = "auto";
+    @Nullable
+    private BackingViewKind mRequestedKind = null;
     private boolean mZOrderOnTop = false;
     private boolean mHighBitDepth = false;
 
-    // What the current backing view was created with.
-    private int mAppliedKind = -1;
+    // What the current backing view was created with; no kind before the first one.
+    @Nullable
+    private BackingViewKind mAppliedKind = null;
     private boolean mAppliedZOrderOnTop;
     private boolean mAppliedHighBitDepth;
 
-    private boolean mFramePending = false;
+    private final Runnable mPostedPresent = this::onPostedPresent;
+    private final FrameScheduler mFrameScheduler = new FrameScheduler(new FrameScheduler.Host() {
+        @Override
+        public void postFrameCallback() {
+            Choreographer.getInstance().postFrameCallback(SkiaView.this);
+        }
+
+        @Override
+        public void postBehindPendingDraw() {
+            post(mPostedPresent);
+        }
+
+        @Override
+        public boolean presentFrame() {
+            return SkiaView.this.presentFrame();
+        }
+    });
 
     public SkiaView(Context context) {
         super(context);
@@ -65,8 +81,8 @@ public class SkiaView extends ReactViewGroup implements SkiaViewAPI, Choreograph
         mOpaque = value;
     }
 
-    public void setSurfaceType(String value) {
-        mSurfaceType = value == null ? "auto" : value;
+    public void setSurfaceType(@Nullable String value) {
+        mRequestedKind = BackingViewKind.fromSurfaceType(value);
     }
 
     public void setZOrderOnTop(boolean value) {
@@ -79,25 +95,22 @@ public class SkiaView extends ReactViewGroup implements SkiaViewAPI, Choreograph
 
     // Resolve the backing view from the props. "auto" picks SurfaceView for an
     // opaque canvas and TextureView for a non-opaque one.
-    private int resolveKind() {
-        if ("SurfaceView".equals(mSurfaceType)) {
-            return KIND_SURFACE_VIEW;
+    private BackingViewKind resolveKind() {
+        if (mRequestedKind != null) {
+            return mRequestedKind;
         }
-        if ("TextureView".equals(mSurfaceType)) {
-            return KIND_TEXTURE_VIEW;
-        }
-        return mOpaque ? KIND_SURFACE_VIEW : KIND_TEXTURE_VIEW;
+        return mOpaque ? BackingViewKind.SURFACE_VIEW : BackingViewKind.TEXTURE_VIEW;
     }
 
     // The 10-bit buffer format only has 2 bits of alpha, which would visibly
     // break translucency, and the extra precision would be lost in the 8-bit
     // composition pass of a TextureView anyway. So the flag only applies to an
     // opaque SurfaceView.
-    private boolean resolveHighBitDepth(int kind) {
+    private boolean resolveHighBitDepth(BackingViewKind kind) {
         if (!mHighBitDepth) {
             return false;
         }
-        if (kind != KIND_SURFACE_VIEW || !mOpaque) {
+        if (kind != BackingViewKind.SURFACE_VIEW || !mOpaque) {
             Log.w(TAG, "highBitDepth requires an opaque SurfaceView on Android, falling back to the 8-bit format");
             return false;
         }
@@ -109,8 +122,8 @@ public class SkiaView extends ReactViewGroup implements SkiaViewAPI, Choreograph
     // it attaches (zOrderOnTop, the buffer format), replaces the child; opacity
     // is applied in place.
     void updateView() {
-        int kind = resolveKind();
-        boolean zOrderOnTop = kind == KIND_SURFACE_VIEW && mZOrderOnTop;
+        BackingViewKind kind = resolveKind();
+        boolean zOrderOnTop = kind == BackingViewKind.SURFACE_VIEW && mZOrderOnTop;
         boolean highBitDepth = resolveHighBitDepth(kind);
         if (mView == null
                 || kind != mAppliedKind
@@ -122,9 +135,10 @@ public class SkiaView extends ReactViewGroup implements SkiaViewAPI, Choreograph
             mAppliedKind = kind;
             mAppliedZOrderOnTop = zOrderOnTop;
             mAppliedHighBitDepth = highBitDepth;
-            mView = kind == KIND_SURFACE_VIEW
-                    ? new SkiaSurfaceView(getContext(), this, zOrderOnTop, mOpaque)
-                    : new SkiaTextureView(getContext(), this, mOpaque);
+            mView = switch (kind) {
+                case SURFACE_VIEW -> new SkiaSurfaceView(getContext(), this, zOrderOnTop, mOpaque);
+                case TEXTURE_VIEW -> new SkiaTextureView(getContext(), this, mOpaque);
+            };
             addView(mView);
             // React Native sizes native children explicitly through onLayout, so
             // the requestLayout triggered by addView is ignored; size the new
@@ -132,10 +146,11 @@ public class SkiaView extends ReactViewGroup implements SkiaViewAPI, Choreograph
             if (getWidth() > 0 || getHeight() > 0) {
                 mView.layout(0, 0, getWidth(), getHeight());
             }
-        } else if (kind == KIND_SURFACE_VIEW) {
-            ((SkiaSurfaceView) mView).setOpaque(mOpaque);
         } else {
-            ((SkiaTextureView) mView).setOpaque(mOpaque);
+            switch (kind) {
+                case SURFACE_VIEW -> ((SkiaSurfaceView) mView).setOpaque(mOpaque);
+                case TEXTURE_VIEW -> ((SkiaTextureView) mView).setOpaque(mOpaque);
+            }
         }
     }
 
@@ -157,31 +172,27 @@ public class SkiaView extends ReactViewGroup implements SkiaViewAPI, Choreograph
 
     // Frames --------------------------------------------------------------
 
-    /**
-     * Presents the queued recordings on the next vsync. Main thread; called
-     * from native when a recording is submitted.
-     */
+    /** A recording was submitted. Main thread; called from native. */
     @DoNotStrip
     public void scheduleFrame() {
-        if (!mFramePending) {
-            mFramePending = true;
-            Choreographer.getInstance().postFrameCallback(this);
-        }
+        mFrameScheduler.requestFrame(mAppliedKind);
     }
 
     @Override
     public void doFrame(long frameTimeNanos) {
-        mFramePending = false;
-        if (presentFrame()) {
-            scheduleFrame();
-        }
+        mFrameScheduler.onFrame(mAppliedKind);
+    }
+
+    private void onPostedPresent() {
+        mFrameScheduler.onPosted();
     }
 
     @Override
     protected void onDetachedFromWindow() {
         super.onDetachedFromWindow();
         Choreographer.getInstance().removeFrameCallback(this);
-        mFramePending = false;
+        removeCallbacks(mPostedPresent);
+        mFrameScheduler.cancel();
     }
 
     @Override
@@ -242,6 +253,6 @@ public class SkiaView extends ReactViewGroup implements SkiaViewAPI, Choreograph
 
     private native void unregisterView();
 
-    /** Choreographer tick: returns whether more recordings are waiting. */
+    /** Presents the queued recordings, returning whether any are left. */
     private native boolean presentFrame();
 }

package/android/src/test/java/com/reactnative/skia/FrameSchedulerTest.java

@@ -0,0 +1,186 @@
+package com.reactnative.skia;
+
+import static org.junit.Assert.assertEquals;
+
+import java.util.ArrayDeque;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Deque;
+import java.util.List;
+
+import org.junit.Test;
+
+public class FrameSchedulerTest {
+    private enum Call {
+        POST_FRAME_CALLBACK,
+        POST_BEHIND_PENDING_DRAW,
+        PRESENT
+    }
+
+    private static final class RecordingHost implements FrameScheduler.Host {
+        final List<Call> calls = new ArrayList<>();
+        final Deque<Boolean> leftOverAfterPresent = new ArrayDeque<>();
+
+        @Override
+        public void postFrameCallback() {
+            calls.add(Call.POST_FRAME_CALLBACK);
+        }
+
+        @Override
+        public void postBehindPendingDraw() {
+            calls.add(Call.POST_BEHIND_PENDING_DRAW);
+        }
+
+        @Override
+        public boolean presentFrame() {
+            calls.add(Call.PRESENT);
+            return !leftOverAfterPresent.isEmpty() && leftOverAfterPresent.removeFirst();
+        }
+
+        List<Call> takeCalls() {
+            List<Call> taken = new ArrayList<>(calls);
+            calls.clear();
+            return taken;
+        }
+    }
+
+    private final RecordingHost mHost = new RecordingHost();
+    private final FrameScheduler mScheduler = new FrameScheduler(mHost);
+
+    @Test
+    public void surfaceViewFrameIsPresentedOnTheNextVsync() {
+        mScheduler.requestFrame(BackingViewKind.SURFACE_VIEW);
+        assertEquals(Arrays.asList(Call.POST_FRAME_CALLBACK), mHost.takeCalls());
+
+        mScheduler.onFrame(BackingViewKind.SURFACE_VIEW);
+        assertEquals(Arrays.asList(Call.PRESENT), mHost.takeCalls());
+    }
+
+    @Test
+    public void textureViewFrameIsPresentedBehindThePendingDraw() {
+        mScheduler.requestFrame(BackingViewKind.TEXTURE_VIEW);
+        assertEquals(Arrays.asList(Call.POST_BEHIND_PENDING_DRAW), mHost.takeCalls());
+
+        mScheduler.onPosted();
+        assertEquals(Arrays.asList(Call.PRESENT), mHost.takeCalls());
+    }
+
+    @Test
+    public void textureViewIsNeverPresentedInsideAChoreographerFrame() {
+        mScheduler.onFrame(BackingViewKind.TEXTURE_VIEW);
+        assertEquals(Arrays.asList(Call.POST_BEHIND_PENDING_DRAW), mHost.takeCalls());
+    }
+
+    @Test
+    public void textureViewLeftoverIsPresentedBehindTheDrawOfTheNextVsync() {
+        mHost.leftOverAfterPresent.add(true);
+        mScheduler.requestFrame(BackingViewKind.TEXTURE_VIEW);
+        mScheduler.onPosted();
+        assertEquals(
+                Arrays.asList(Call.POST_BEHIND_PENDING_DRAW, Call.PRESENT, Call.POST_FRAME_CALLBACK),
+                mHost.takeCalls());
+
+        mScheduler.onFrame(BackingViewKind.TEXTURE_VIEW);
+        mScheduler.onPosted();
+        assertEquals(Arrays.asList(Call.POST_BEHIND_PENDING_DRAW, Call.PRESENT), mHost.takeCalls());
+    }
+
+    @Test
+    public void textureViewRequestWhileARetryIsOutstandingWaitsForThatVsync() {
+        mHost.leftOverAfterPresent.add(true);
+        mScheduler.requestFrame(BackingViewKind.TEXTURE_VIEW);
+        mScheduler.onPosted();
+        assertEquals(
+                Arrays.asList(Call.POST_BEHIND_PENDING_DRAW, Call.PRESENT, Call.POST_FRAME_CALLBACK),
+                mHost.takeCalls());
+
+        mScheduler.requestFrame(BackingViewKind.TEXTURE_VIEW);
+        assertEquals(Arrays.asList(), mHost.takeCalls());
+
+        mScheduler.onFrame(BackingViewKind.TEXTURE_VIEW);
+        mScheduler.onPosted();
+        assertEquals(Arrays.asList(Call.POST_BEHIND_PENDING_DRAW, Call.PRESENT), mHost.takeCalls());
+    }
+
+    @Test
+    public void surfaceViewLeftoverIsPresentedOnTheNextVsync() {
+        mHost.leftOverAfterPresent.add(true);
+        mScheduler.requestFrame(BackingViewKind.SURFACE_VIEW);
+        mScheduler.onFrame(BackingViewKind.SURFACE_VIEW);
+        assertEquals(
+                Arrays.asList(Call.POST_FRAME_CALLBACK, Call.PRESENT, Call.POST_FRAME_CALLBACK),
+                mHost.takeCalls());
+
+        mScheduler.onFrame(BackingViewKind.SURFACE_VIEW);
+        assertEquals(Arrays.asList(Call.PRESENT), mHost.takeCalls());
+    }
+
+    @Test
+    public void requestsWaitingForTheSameFrameArePostedOnce() {
+        mScheduler.requestFrame(BackingViewKind.SURFACE_VIEW);
+        mScheduler.requestFrame(BackingViewKind.SURFACE_VIEW);
+        mScheduler.onFrame(BackingViewKind.SURFACE_VIEW);
+        mScheduler.requestFrame(BackingViewKind.TEXTURE_VIEW);
+        mScheduler.requestFrame(BackingViewKind.TEXTURE_VIEW);
+        assertEquals(
+                Arrays.asList(Call.POST_FRAME_CALLBACK, Call.PRESENT, Call.POST_BEHIND_PENDING_DRAW),
+                mHost.takeCalls());
+    }
+
+    @Test
+    public void requestAfterTheFrameRanIsPostedAgain() {
+        mScheduler.requestFrame(BackingViewKind.SURFACE_VIEW);
+        mScheduler.onFrame(BackingViewKind.SURFACE_VIEW);
+        mScheduler.requestFrame(BackingViewKind.SURFACE_VIEW);
+        mScheduler.onFrame(BackingViewKind.SURFACE_VIEW);
+        mScheduler.requestFrame(BackingViewKind.TEXTURE_VIEW);
+        mScheduler.onPosted();
+        mScheduler.requestFrame(BackingViewKind.TEXTURE_VIEW);
+        assertEquals(
+                Arrays.asList(
+                        Call.POST_FRAME_CALLBACK,
+                        Call.PRESENT,
+                        Call.POST_FRAME_CALLBACK,
+                        Call.PRESENT,
+                        Call.POST_BEHIND_PENDING_DRAW,
+                        Call.PRESENT,
+                        Call.POST_BEHIND_PENDING_DRAW),
+                mHost.takeCalls());
+    }
+
+    @Test
+    public void kindSwitchWhileAFrameCallbackIsOutstandingPresentsBehindThePendingDraw() {
+        mScheduler.requestFrame(BackingViewKind.SURFACE_VIEW);
+        // updateView() replaced the SurfaceView with a TextureView meanwhile.
+        mScheduler.requestFrame(BackingViewKind.TEXTURE_VIEW);
+        mScheduler.onFrame(BackingViewKind.TEXTURE_VIEW);
+        mScheduler.onPosted();
+        assertEquals(
+                Arrays.asList(Call.POST_FRAME_CALLBACK, Call.POST_BEHIND_PENDING_DRAW, Call.PRESENT),
+                mHost.takeCalls());
+    }
+
+    @Test
+    public void withoutABackingViewNothingIsPostedOrPresented() {
+        mScheduler.requestFrame(null);
+        mScheduler.onFrame(null);
+        assertEquals(Arrays.asList(), mHost.takeCalls());
+    }
+
+    @Test
+    public void cancelDropsOutstandingRequests() {
+        for (BackingViewKind kind : BackingViewKind.values()) {
+            mScheduler.requestFrame(kind);
+            mScheduler.cancel();
+            mScheduler.requestFrame(kind);
+            mScheduler.cancel();
+        }
+        assertEquals(
+                Arrays.asList(
+                        Call.POST_FRAME_CALLBACK,
+                        Call.POST_FRAME_CALLBACK,
+                        Call.POST_BEHIND_PENDING_DRAW,
+                        Call.POST_BEHIND_PENDING_DRAW),
+                mHost.takeCalls());
+    }
+}

package/apple/MetalLayerColorSpace.mm

@@ -8,20 +8,22 @@
 
 namespace RNSkia {
 
-// WebGPU canvas values are sRGB-encoded regardless of the texture format
-// (GPUCanvasConfiguration.colorSpace defaults to "srgb"), so the same shader
-// output must display identically on bgra8unorm and rgba16float surfaces.
-// Tagging the float layer as (gamma-encoded) extended sRGB matches the
-// browser behavior: identical colors, with the extra precision of float16.
+// The surface holds gamma-encoded values in the gamut the view renders in
+// (sRGB or Display P3, see DawnUtils::viewColorSpace) regardless of the
+// texture format, so the same content must display identically on bgra8unorm
+// and rgba16float surfaces. Tagging the float layer with the gamma-encoded
+// extended colorspace of that gamut gives identical colors, with the extra
+// precision of float16.
 void applyCAMetalLayerColorSpace(void *nativeSurface,
-                                 wgpu::TextureFormat format) {
+                                 wgpu::TextureFormat format,
+                                 bool useP3ColorSpace) {
   CALayer *layer = (__bridge CALayer *)nativeSurface;
   if (![layer isKindOfClass:[CAMetalLayer class]]) {
     return;
   }
   auto metalLayer = static_cast<CAMetalLayer *>(layer);
-  setCAMetalLayerColorSpace(metalLayer,
-                            format == wgpu::TextureFormat::RGBA16Float, false);
+  setCAMetalLayerColorSpace(
+      metalLayer, format == wgpu::TextureFormat::RGBA16Float, useP3ColorSpace);
   // The change must be set synchronously so the first present already sees
   // it, and it must reach the render server. On a non-main thread (RN JS or
   // worklet runtime) the property lands in that thread's implicit

package/apple/RNSkApplePlatformContext.h

@@ -32,10 +32,21 @@ public:
     // Create screenshot manager
     _screenshotService =
         [[ViewScreenshotService alloc] initWithViewRegistry:viewRegistry];
+    _prefersP3ColorSpace = mainScreenSupportsP3();
   }
 
   ~RNSkApplePlatformContext() = default;
 
+  /**
+   Whether the main screen has a wide color gamut (Display P3). The screen is
+   asked once and the answer is kept: RNSkiaModule asks first, on the main
+   queue it is created on, so that the context (created on the JS thread)
+   only reads the answer.
+   */
+  static bool mainScreenSupportsP3();
+
+  bool prefersP3ColorSpace() override { return _prefersP3ColorSpace; }
+
   void runOnMainThread(std::function<void()>) override;
 
   sk_sp<SkImage> takeScreenshotFromViewTag(size_t tag) override;
@@ -66,6 +77,7 @@ public:
 
 private:
   ViewScreenshotService *_screenshotService;
+  bool _prefersP3ColorSpace = false;
 };
 
 } // namespace RNSkia