@shopify/react-native-skia 2.6.9 → 2.8.0

package/android/cpp/jni/include/JniSkiaBaseView.h

@@ -31,13 +31,15 @@ public:
 
 protected:
   virtual void surfaceAvailable(jobject surface, int width, int height,
-                                bool opaque) {
-    _skiaAndroidView->surfaceAvailable(surface, width, height, opaque);
+                                bool opaque, bool highBitDepth) {
+    _skiaAndroidView->surfaceAvailable(surface, width, height, opaque,
+                                       highBitDepth);
   }
 
   virtual void surfaceSizeChanged(jobject surface, int width, int height,
-                                  bool opaque) {
-    _skiaAndroidView->surfaceSizeChanged(surface, width, height, opaque);
+                                  bool opaque, bool highBitDepth) {
+    _skiaAndroidView->surfaceSizeChanged(surface, width, height, opaque,
+                                         highBitDepth);
   }
 
   virtual void surfaceDestroyed() { _skiaAndroidView->surfaceDestroyed(); }

package/android/cpp/jni/include/JniSkiaPictureView.h

@@ -63,14 +63,16 @@ public:
   }
 
 protected:
-  void surfaceAvailable(jobject surface, int width, int height,
-                        bool opaque) override {
-    JniSkiaBaseView::surfaceAvailable(surface, width, height, opaque);
+  void surfaceAvailable(jobject surface, int width, int height, bool opaque,
+                        bool highBitDepth) override {
+    JniSkiaBaseView::surfaceAvailable(surface, width, height, opaque,
+                                      highBitDepth);
   }
 
-  void surfaceSizeChanged(jobject surface, int width, int height,
-                          bool opaque) override {
-    JniSkiaBaseView::surfaceSizeChanged(surface, width, height, opaque);
+  void surfaceSizeChanged(jobject surface, int width, int height, bool opaque,
+                          bool highBitDepth) override {
+    JniSkiaBaseView::surfaceSizeChanged(surface, width, height, opaque,
+                                        highBitDepth);
   }
 
   void surfaceDestroyed() override { JniSkiaBaseView::surfaceDestroyed(); }

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

@@ -179,8 +179,17 @@ public:
   }
 
   // TODO: remove width, height
-  std::unique_ptr<WindowContext> MakeWindow(ANativeWindow *window) {
+  std::unique_ptr<WindowContext> MakeWindow(ANativeWindow *window,
+                                            bool highBitDepth = false) {
     auto display = OpenGLSharedContext::getInstance().getDisplay();
+    if (highBitDepth) {
+      // A 10-bit window surface would require the shared EGL context to be
+      // created without a config (EGL_KHR_no_config_context) for every app,
+      // which is too risky for existing 8-bit clients on brittle drivers.
+      RNSkLogger::logToConsole(
+          "highBitDepth is not supported on the OpenGL backend, falling back "
+          "to the 8-bit format (the Graphite backend supports it)");
+    }
     return std::make_unique<OpenGLWindowContext>(
         _directContext.get(), display, _glContext.get(), window,
         OpenGLSharedContext::getInstance().getConfig());

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

@@ -12,12 +12,12 @@ namespace RNSkia {
 class RNSkBaseAndroidView {
 public:
   virtual void surfaceAvailable(jobject surface, int width, int height,
-                                bool opaque) = 0;
+                                bool opaque, bool highBitDepth) = 0;
 
   virtual void surfaceDestroyed() = 0;
 
   virtual void surfaceSizeChanged(jobject surface, int width, int height,
-                                  bool opaque) = 0;
+                                  bool opaque, bool highBitDepth) = 0;
 
   virtual float getPixelDensity() = 0;
 
@@ -34,10 +34,10 @@ public:
           std::make_shared<RNSkOpenGLCanvasProvider>(
               std::bind(&RNSkia::RNSkView::requestRedraw, this), context)) {}
 
-  void surfaceAvailable(jobject surface, int width, int height,
-                        bool opaque) override {
+  void surfaceAvailable(jobject surface, int width, int height, bool opaque,
+                        bool highBitDepth) override {
     std::static_pointer_cast<RNSkOpenGLCanvasProvider>(T::getCanvasProvider())
-        ->surfaceAvailable(surface, width, height, opaque);
+        ->surfaceAvailable(surface, width, height, opaque, highBitDepth);
     RNSkView::redraw();
   }
 
@@ -46,10 +46,10 @@ public:
         ->surfaceDestroyed();
   }
 
-  void surfaceSizeChanged(jobject surface, int width, int height,
-                          bool opaque) override {
+  void surfaceSizeChanged(jobject surface, int width, int height, bool opaque,
+                          bool highBitDepth) override {
     std::static_pointer_cast<RNSkOpenGLCanvasProvider>(T::getCanvasProvider())
-        ->surfaceSizeChanged(surface, width, height, opaque);
+        ->surfaceSizeChanged(surface, width, height, opaque, highBitDepth);
     // This is only need for the first time to frame, this renderImmediate call
     // will invoke updateTexImage for the previous frame
     RNSkView::redraw();

package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.cpp

@@ -78,7 +78,8 @@ bool RNSkOpenGLCanvasProvider::renderToCanvas(
 
 void RNSkOpenGLCanvasProvider::surfaceAvailable(jobject jSurfaceTexture,
                                                 int width, int height,
-                                                bool opaque) {
+                                                bool opaque,
+                                                bool highBitDepth) {
   // Release the old surface
   _surfaceHolder = nullptr;
 
@@ -108,9 +109,11 @@ void RNSkOpenGLCanvasProvider::surfaceAvailable(jobject jSurfaceTexture,
     window = ANativeWindow_fromSurface(env, jSurfaceTexture);
   }
 #if defined(SK_GRAPHITE)
-  _surfaceHolder = DawnContext::getInstance().MakeWindow(window, width, height);
+  _surfaceHolder = DawnContext::getInstance().MakeWindow(window, width, height,
+                                                         highBitDepth);
 #else
-  _surfaceHolder = OpenGLContext::getInstance().MakeWindow(window);
+  _surfaceHolder =
+      OpenGLContext::getInstance().MakeWindow(window, highBitDepth);
 #endif
 
   // Post redraw request to ensure we paint in the next draw cycle.
@@ -128,7 +131,8 @@ void RNSkOpenGLCanvasProvider::surfaceDestroyed() {
 }
 
 void RNSkOpenGLCanvasProvider::surfaceSizeChanged(jobject jSurface, int width,
-                                                  int height, bool opaque) {
+                                                  int height, bool opaque,
+                                                  bool highBitDepth) {
   if (width == 0 && height == 0) {
     // Setting width/height to zero is nothing we need to care about when
     // it comes to invalidating the surface.
@@ -137,7 +141,7 @@ void RNSkOpenGLCanvasProvider::surfaceSizeChanged(jobject jSurface, int width,
 
   if (_surfaceHolder == nullptr) {
     _surfaceHolder = nullptr;
-    surfaceAvailable(jSurface, width, height, opaque);
+    surfaceAvailable(jSurface, width, height, opaque, highBitDepth);
   } else {
     _surfaceHolder->resize(width, height);
   }

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

@@ -27,11 +27,13 @@ public:
 
   bool renderToCanvas(const std::function<void(SkCanvas *)> &cb) override;
 
-  void surfaceAvailable(jobject surface, int width, int height, bool opaque);
+  void surfaceAvailable(jobject surface, int width, int height, bool opaque,
+                        bool highBitDepth);
 
   void surfaceDestroyed();
 
-  void surfaceSizeChanged(jobject jSurface, int width, int height, bool opaque);
+  void surfaceSizeChanged(jobject jSurface, int width, int height, bool opaque,
+                          bool highBitDepth);
 
 private:
   std::unique_ptr<WindowContext> _surfaceHolder = nullptr;

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

@@ -13,6 +13,8 @@ import com.facebook.react.views.view.ReactViewGroup;
 public abstract class SkiaBaseView extends ReactViewGroup implements SkiaViewAPI {
     private View mView;
 
+    private boolean mHighBitDepth = false;
+
     private final boolean debug = false;
     private final String tag = "SkiaView";
 
@@ -34,14 +36,48 @@ public abstract class SkiaBaseView extends ReactViewGroup implements SkiaViewAPI
 
     public void setOpaque(boolean value) {
         if (value && mView instanceof SkiaTextureView) {
-            removeView(mView);
-            mView = new SkiaSurfaceView(getContext(), this, debug);
-            addView(mView);
+            recreateView(true);
         } else if (!value && mView instanceof SkiaSurfaceView) {
-            removeView(mView);
-            mView = new SkiaTextureView(getContext(), this, debug);
-            addView(mView);
+            recreateView(false);
+        }
+    }
+
+    public void setHighBitDepth(boolean value) {
+        if (mHighBitDepth == value) {
+            return;
+        }
+        mHighBitDepth = value;
+        // The flag only affects the opaque SurfaceView path (see
+        // highBitDepthIfOpaque), so only that surface needs to be recreated
+        // with the new buffer format.
+        if (mView instanceof SkiaSurfaceView) {
+            recreateView(true);
+        }
+    }
+
+    private void recreateView(boolean useSurfaceView) {
+        removeView(mView);
+        mView = useSurfaceView
+                ? new SkiaSurfaceView(getContext(), this, debug)
+                : new SkiaTextureView(getContext(), this, debug);
+        addView(mView);
+        // React Native sizes native children explicitly through onLayout, so
+        // the requestLayout triggered by addView is ignored; size the new
+        // child ourselves or it stays 0x0 and never gets a surface.
+        if (getWidth() > 0 || getHeight() > 0) {
+            mView.layout(0, 0, getWidth(), getHeight());
+        }
+    }
+
+    private boolean highBitDepthIfOpaque(boolean opaque) {
+        if (mHighBitDepth && !opaque) {
+            // The 10-bit buffer format only has 2 bits of alpha, which would
+            // visibly break translucency; the extra precision would also be
+            // lost in the 8-bit composition pass.
+            Log.w(tag, "highBitDepth requires the opaque prop on Android, falling back to the 8-bit format");
+            return false;
         }
+        return mHighBitDepth;
     }
 
     void dropInstance() {
@@ -59,24 +95,24 @@ public abstract class SkiaBaseView extends ReactViewGroup implements SkiaViewAPI
 
     @Override
     public void onSurfaceCreated(Surface surface, int width, int height) {
-        surfaceAvailable(surface, width, height, true);
+        surfaceAvailable(surface, width, height, true, mHighBitDepth);
     }
 
     @Override
     public void onSurfaceChanged(Surface surface, int width, int height) {
         Log.i(tag, "onSurfaceTextureSizeChanged " + width + "/" + height);
-        surfaceSizeChanged(surface, width, height, true);
+        surfaceSizeChanged(surface, width, height, true, mHighBitDepth);
     }
 
     @Override
     public void onSurfaceTextureCreated(SurfaceTexture surface, int width, int height) {
-        surfaceAvailable(surface, width, height, false);
+        surfaceAvailable(surface, width, height, false, highBitDepthIfOpaque(false));
     }
 
     @Override
     public void onSurfaceTextureChanged(SurfaceTexture surface, int width, int height) {
         Log.i(tag, "onSurfaceTextureSizeChanged " + width + "/" + height);
-        surfaceSizeChanged(surface, width, height, false);
+        surfaceSizeChanged(surface, width, height, false, highBitDepthIfOpaque(false));
     }
 
     @Override
@@ -84,9 +120,9 @@ public abstract class SkiaBaseView extends ReactViewGroup implements SkiaViewAPI
         surfaceDestroyed();
     }
 
-    protected abstract void surfaceAvailable(Object surface, int width, int height, boolean opaque);
+    protected abstract void surfaceAvailable(Object surface, int width, int height, boolean opaque, boolean highBitDepth);
 
-    protected abstract void surfaceSizeChanged(Object surface, int width, int height, boolean opaque);
+    protected abstract void surfaceSizeChanged(Object surface, int width, int height, boolean opaque, boolean highBitDepth);
 
     protected abstract void surfaceDestroyed();
 

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

@@ -28,6 +28,11 @@ public abstract class SkiaBaseViewManager<T extends SkiaBaseView> extends ReactV
         ((SkiaBaseView)view).setOpaque(value);
     }
 
+    @ReactProp(name = "highBitDepth")
+    public void setHighBitDepth(T view, boolean value) {
+        ((SkiaBaseView)view).setHighBitDepth(value);
+    }
+
     @ReactProp(name = ViewProps.POINTER_EVENTS)
     public void setPointerEvents(T view, @Nullable String pointerEventsStr) {
         view.setPointerEvents(PointerEvents.parsePointerEvents(pointerEventsStr));

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

@@ -67,9 +67,9 @@ public class SkiaPictureView extends SkiaBaseView {
 
     private native HybridData initHybrid(SkiaManager skiaManager);
 
-    protected native void surfaceAvailable(Object surface, int width, int height, boolean opaque);
+    protected native void surfaceAvailable(Object surface, int width, int height, boolean opaque, boolean highBitDepth);
 
-    protected native void surfaceSizeChanged(Object surface, int width, int height, boolean opaque);
+    protected native void surfaceSizeChanged(Object surface, int width, int height, boolean opaque, boolean highBitDepth);
 
     protected native void surfaceDestroyed();
 

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

@@ -14,6 +14,7 @@ import android.view.SurfaceView;
 import android.view.TextureView;
 import android.view.View;
 import android.view.ViewGroup;
+import android.widget.HorizontalScrollView;
 import android.widget.ScrollView;
 import androidx.annotation.NonNull;
 import com.facebook.react.bridge.ReactContext;
@@ -82,13 +83,16 @@ public class ViewScreenshotService {
         canvas.save();
         applyTransformations(canvas, view);
 
-        // If the view is a ScrollView or similar, clip to its bounds
-        if (view instanceof ScrollView) {
-            ScrollView scrollView = (ScrollView) view;
-            int clipLeft = scrollView.getScrollX();
-            int clipTop = scrollView.getScrollY();
-            int clipRight = clipLeft + scrollView.getWidth();
-            int clipBottom = clipTop + scrollView.getHeight();
+        // If the view is a scroll container, clip to its viewport bounds.
+        // HorizontalScrollView does NOT extend ScrollView (both extend
+        // FrameLayout), so it must be checked explicitly — otherwise an
+        // oversized child (e.g. a wide Skia <Canvas> TextureView) bleeds past
+        // a horizontal ScrollView's viewport in the screenshot.
+        if (view instanceof ScrollView || view instanceof HorizontalScrollView) {
+            int clipLeft = view.getScrollX();
+            int clipTop = view.getScrollY();
+            int clipRight = clipLeft + view.getWidth();
+            int clipBottom = clipTop + view.getHeight();
 
             canvas.clipRect(clipLeft, clipTop, clipRight, clipBottom);
         }

package/apple/MetalContext.h

@@ -95,13 +95,14 @@ public:
     }
   }
 
-  std::unique_ptr<RNSkia::WindowContext>
-  MakeWindow(CALayer *window, int width, int height,
-             bool useP3ColorSpace = true) {
+  std::unique_ptr<RNSkia::WindowContext> MakeWindow(CALayer *window, int width,
+                                                    int height,
+                                                    bool useP3ColorSpace = true,
+                                                    bool highBitDepth = false) {
     auto device = _device;
-    return std::make_unique<MetalWindowContext>(_directContext.get(), device,
-                                                _commandQueue, window, width,
-                                                height, useP3ColorSpace);
+    return std::make_unique<MetalWindowContext>(
+        _directContext.get(), device, _commandQueue, window, width, height,
+        useP3ColorSpace, highBitDepth);
   }
 
   GrDirectContext *getDirectContext() { return _directContext.get(); }

package/apple/MetalLayerColorSpace.mm

@@ -0,0 +1,39 @@
+#ifdef SK_GRAPHITE
+
+#import <CoreGraphics/CoreGraphics.h>
+#import <Foundation/Foundation.h>
+#import <QuartzCore/CAMetalLayer.h>
+#import <QuartzCore/CATransaction.h>
+
+#include "MetalLayerColorSpaceUtils.h"
+#include "rnskia/RNMetalLayerColorSpace.h"
+
+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.
+void applyCAMetalLayerColorSpace(void *nativeSurface,
+                                 wgpu::TextureFormat format) {
+  CALayer *layer = (__bridge CALayer *)nativeSurface;
+  if (![layer isKindOfClass:[CAMetalLayer class]]) {
+    return;
+  }
+  auto metalLayer = static_cast<CAMetalLayer *>(layer);
+  setCAMetalLayerColorSpace(metalLayer,
+                            format == wgpu::TextureFormat::RGBA16Float, false);
+  // 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
+  // CATransaction, which may never commit on threads without a spinning
+  // runloop, so flush it now. On the main thread the runloop commits it.
+  if (!NSThread.isMainThread) {
+    [CATransaction flush];
+  }
+}
+
+} // namespace RNSkia
+
+#endif // SK_GRAPHITE

package/apple/MetalLayerColorSpaceUtils.h

@@ -0,0 +1,34 @@
+#pragma once
+
+#import <CoreGraphics/CoreGraphics.h>
+#import <QuartzCore/CAMetalLayer.h>
+
+namespace RNSkia {
+
+// The surface writes sRGB-encoded (SDR) values regardless of the texture
+// format. With an 8-bit format a nil colorspace displays them as-is, but Core
+// Animation interprets a float-format layer with a nil colorspace as extended
+// linear sRGB, which displays the same values noticeably brighter. Tag the
+// float layer with the matching gamma-encoded (extended) colorspace so colors
+// are identical to the 8-bit path, only with more precision.
+inline void setCAMetalLayerColorSpace(CAMetalLayer *layer, bool isFloatFormat,
+                                      bool useP3ColorSpace) {
+  if (isFloatFormat) {
+    CGColorSpaceRef colorSpace = CGColorSpaceCreateWithName(
+        useP3ColorSpace ? kCGColorSpaceExtendedDisplayP3
+                        : kCGColorSpaceExtendedSRGB);
+    layer.colorspace = colorSpace;
+    CGColorSpaceRelease(colorSpace);
+  } else if (useP3ColorSpace) {
+    CGColorSpaceRef colorSpace =
+        CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3);
+    layer.colorspace = colorSpace;
+    CGColorSpaceRelease(colorSpace);
+  } else if (layer.colorspace != nil) {
+    // Restore the default (no color matching) when reconfiguring a layer
+    // back to an 8-bit format.
+    layer.colorspace = nil;
+  }
+}
+
+} // namespace RNSkia

package/apple/MetalWindowContext.h

@@ -10,7 +10,8 @@ class MetalWindowContext : public RNSkia::WindowContext {
 public:
   MetalWindowContext(GrDirectContext *directContext, id<MTLDevice> device,
                      id<MTLCommandQueue> commandQueue, CALayer *layer,
-                     int width, int height, bool useP3ColorSpace = true);
+                     int width, int height, bool useP3ColorSpace = true,
+                     bool highBitDepth = false);
   ~MetalWindowContext() = default;
 
   sk_sp<SkSurface> getSurface() override;
@@ -37,4 +38,5 @@ private:
 #pragma clang diagnostic pop
   id<CAMetalDrawable> _currentDrawable = nil;
   bool _useP3ColorSpace = false;
+  bool _highBitDepth = false;
 };

package/apple/MetalWindowContext.mm

@@ -1,6 +1,7 @@
 #include "MetalWindowContext.h"
 
 #include "MetalContext.h"
+#include "MetalLayerColorSpaceUtils.h"
 #include "RNSkLog.h"
 #include "include/core/SkColorSpace.h"
 
@@ -8,8 +9,9 @@ MetalWindowContext::MetalWindowContext(GrDirectContext *directContext,
                                        id<MTLDevice> device,
                                        id<MTLCommandQueue> commandQueue,
                                        CALayer *layer, int width, int height,
-                                       bool useP3ColorSpace)
-    : _directContext(directContext), _commandQueue(commandQueue) {
+                                       bool useP3ColorSpace, bool highBitDepth)
+    : _directContext(directContext), _commandQueue(commandQueue),
+      _highBitDepth(highBitDepth) {
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
   _layer = (CAMetalLayer *)layer;
@@ -22,7 +24,8 @@ MetalWindowContext::MetalWindowContext(GrDirectContext *directContext,
 #else
   _layer.contentsScale = [NSScreen mainScreen].backingScaleFactor;
 #endif // !TARGET_OS_OSX
-  _layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
+  _layer.pixelFormat =
+      _highBitDepth ? MTLPixelFormatRGBA16Float : MTLPixelFormatBGRA8Unorm;
   _layer.contentsGravity = kCAGravityBottomLeft;
   _layer.drawableSize = CGSizeMake(width, height);
   BOOL supportsWideColor = NO;
@@ -43,12 +46,9 @@ MetalWindowContext::MetalWindowContext(GrDirectContext *directContext,
 #endif // !TARGET_OS_OSX
   }
   if (supportsWideColor) {
-    CGColorSpaceRef colorSpace =
-        CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3);
-    _layer.colorspace = colorSpace;
-    CGColorSpaceRelease(colorSpace);
     _useP3ColorSpace = true;
   }
+  RNSkia::setCAMetalLayerColorSpace(_layer, _highBitDepth, _useP3ColorSpace);
 }
 
 sk_sp<SkSurface> MetalWindowContext::getSurface() {
@@ -77,7 +77,8 @@ sk_sp<SkSurface> MetalWindowContext::getSurface() {
                        : nullptr;
   _skSurface = SkSurfaces::WrapBackendRenderTarget(
       _directContext, backendRT, kTopLeft_GrSurfaceOrigin,
-      kBGRA_8888_SkColorType, skColorSpace, nullptr);
+      _highBitDepth ? kRGBA_F16_SkColorType : kBGRA_8888_SkColorType,
+      skColorSpace, nullptr);
 
   return _skSurface;
 }

package/apple/RNSkAppleView.h

@@ -11,6 +11,7 @@ public:
   virtual CALayer *getLayer() = 0;
   virtual void setSize(int width, int height) = 0;
   virtual void setUseP3ColorSpace(bool useP3ColorSpace) = 0;
+  virtual void setHighBitDepth(bool highBitDepth) = 0;
   virtual std::shared_ptr<RNSkia::RNSkView> getDrawView() = 0;
 };
 
@@ -37,6 +38,11 @@ public:
         ->setUseP3ColorSpace(useP3ColorSpace);
   }
 
+  void setHighBitDepth(bool highBitDepth) override {
+    std::static_pointer_cast<RNSkMetalCanvasProvider>(this->getCanvasProvider())
+        ->setHighBitDepth(highBitDepth);
+  }
+
   std::shared_ptr<RNSkia::RNSkView> getDrawView() override {
     return this->shared_from_this();
   }

package/apple/RNSkMetalCanvasProvider.h

@@ -28,6 +28,7 @@ public:
 
   void setSize(int width, int height);
   void setUseP3ColorSpace(bool useP3ColorSpace);
+  void setHighBitDepth(bool highBitDepth);
   CALayer *getLayer();
 
 private:
@@ -38,4 +39,5 @@ private:
   CAMetalLayer *_layer;
 #pragma clang diagnostic pop
   bool _useP3ColorSpace = true;
+  bool _highBitDepth = false;
 };

package/apple/RNSkMetalCanvasProvider.mm

@@ -96,9 +96,10 @@ void RNSkMetalCanvasProvider::setSize(int width, int height) {
   auto h = height * _context->getPixelDensity();
 #if defined(SK_GRAPHITE)
   _ctx = RNSkia::DawnContext::getInstance().MakeWindow((__bridge void *)_layer,
-                                                       w, h);
+                                                       w, h, _highBitDepth);
 #else
-  _ctx = MetalContext::getInstance().MakeWindow(_layer, w, h, _useP3ColorSpace);
+  _ctx = MetalContext::getInstance().MakeWindow(_layer, w, h, _useP3ColorSpace,
+                                                _highBitDepth);
 #endif
   _requestRedraw();
 }
@@ -108,3 +109,15 @@ CALayer *RNSkMetalCanvasProvider::getLayer() { return _layer; }
 void RNSkMetalCanvasProvider::setUseP3ColorSpace(bool useP3ColorSpace) {
   _useP3ColorSpace = useP3ColorSpace;
 }
+
+void RNSkMetalCanvasProvider::setHighBitDepth(bool highBitDepth) {
+  if (_highBitDepth == highBitDepth) {
+    return;
+  }
+  _highBitDepth = highBitDepth;
+  if (_ctx) {
+    // Recreate the window context so the layer's pixel format matches the
+    // new bit depth.
+    setSize(_layer.frame.size.width, _layer.frame.size.height);
+  }
+}

package/apple/SkiaPictureView.mm

@@ -55,6 +55,7 @@ using namespace facebook::react;
   [self setNativeId:nativeId];
   [self setDebugMode:newProps.debug];
   [self setOpaque:newProps.opaque];
+  [self setHighBitDepth:newProps.highBitDepth];
   if (newProps.colorSpace == "" || newProps.colorSpace == "srgb") {
     bool useP3 = false;
     [self setUseP3ColorSpace:useP3];

package/apple/SkiaPictureViewManager.mm

@@ -37,6 +37,11 @@ RCT_CUSTOM_VIEW_PROPERTY(opaque, BOOL, SkiaUIView) {
   [(SkiaUIView *)view setOpaque:opaque];
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(highBitDepth, BOOL, SkiaUIView) {
+  bool highBitDepth = json != NULL ? [RCTConvert BOOL:json] : false;
+  [(SkiaUIView *)view setHighBitDepth:highBitDepth];
+}
+
 #if !TARGET_OS_OSX
 - (UIView *)view {
 #else

package/apple/SkiaUIView.h

@@ -42,5 +42,6 @@
 - (void)setOpaque:(bool)opaque;
 - (void)setNativeId:(size_t)nativeId;
 - (void)setUseP3ColorSpace:(bool)useP3ColorSpace;
+- (void)setHighBitDepth:(bool)highBitDepth;
 
 @end

package/apple/SkiaUIView.mm

@@ -18,6 +18,7 @@
   bool _debugMode;
   bool _opaque;
   bool _useP3ColorSpace;
+  bool _highBitDepth;
   size_t _nativeId;
 }
 
@@ -76,6 +77,7 @@
       }
       _impl->getDrawView()->setShowDebugOverlays(_debugMode);
       _impl->setUseP3ColorSpace(_useP3ColorSpace);
+      _impl->setHighBitDepth(_highBitDepth);
     }
   }
 }
@@ -176,6 +178,13 @@
   }
 }
 
+- (void)setHighBitDepth:(bool)highBitDepth {
+  _highBitDepth = highBitDepth;
+  if (_impl != nullptr) {
+    _impl->setHighBitDepth(_highBitDepth);
+  }
+}
+
 #pragma mark External API
 
 - (std::shared_ptr<RNSkBaseAppleView>)impl {