@shopify/react-native-skia 2.4.21 → 2.5.0

package/android/CMakeLists.txt

@@ -4,73 +4,36 @@ cmake_minimum_required(VERSION 3.4.1)
 set (CMAKE_VERBOSE_MAKEFILE ON)
 set (CMAKE_CXX_STANDARD 20)
 
-# Import prebuilt SKIA libraries path
-set (SKIA_LIBS_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../libs/android/${ANDROID_ABI}")
+# SKIA_LIBS_PATH is passed from Gradle (resolved via Node.js package resolution)
+# Append the ABI to get the full path
+set (SKIA_LIBS_PATH "${SKIA_LIBS_PATH}/${ANDROID_ABI}")
 
 # Check if Skia prebuilt binaries are installed
-# The postinstall script downloads these - if missing, the user needs to run it
 if(NOT EXISTS "${SKIA_LIBS_PATH}/libskia.a")
     message("")
     message("┌─────────────────────────────────────────────────────────────────────────────┐")
     message("│                                                                             │")
     message("│  ERROR: Skia prebuilt binaries not found!                                   │")
     message("│                                                                             │")
-    message("│  The postinstall script has not run. This is required to download the      │")
-    message("│  Skia binaries. Some package managers (pnpm, bun, yarn berry) require       │")
-    message("│  explicit trust for packages with postinstall scripts.                      │")
+    message("│  Could not find libskia.a at: ${SKIA_LIBS_PATH}                             │")
     message("│                                                                             │")
-    message("│  To fix this:                                                               │")
-    message("│                                                                             │")
-    message("│  • npm/yarn classic: Run 'npm rebuild @shopify/react-native-skia' or        │")
-    message("│                       reinstall the package                                 │")
-    message("│                                                                             │")
-    message("│  • bun: Run 'bun add --trust @shopify/react-native-skia'                    │")
-    message("│                                                                             │")
-    message("│  • pnpm: Add to package.json:                                               │")
-    message("│          \"pnpm\": { \"onlyBuiltDependencies\": [\"@shopify/react-native-skia\"] }│")
-    message("│          Then reinstall the package                                         │")
+    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("│                                                                             │")
     message("└─────────────────────────────────────────────────────────────────────────────┘")
     message("")
-    message(FATAL_ERROR "Skia prebuilt binaries not found at ${SKIA_LIBS_PATH}. Please run the postinstall script.")
+    message(FATAL_ERROR "Skia prebuilt binaries not found at ${SKIA_LIBS_PATH}")
 endif()
 
-# Import libskia first so we can check for symbols
+# Import libskia
 add_library(skia STATIC IMPORTED)
 set_property(TARGET skia PROPERTY IMPORTED_LOCATION "${SKIA_LIBS_PATH}/libskia.a")
 
-# Check if Graphite is available
-# Detection method priority:
-# 1. SK_GRAPHITE environment variable (explicit override, fastest)
-# 2. Marker file in libs directory (set during Skia build)
-# 3. Fall back to nm symbol detection (slow on some CI systems)
-set(SK_GRAPHITE_AVAILABLE OFF)
-
-if(DEFINED ENV{SK_GRAPHITE})
-    # Explicit override via environment variable
-    if($ENV{SK_GRAPHITE})
-        set(SK_GRAPHITE_AVAILABLE ON)
-        message("-- SK_GRAPHITE detection: using environment variable (ON)")
-    else()
-        message("-- SK_GRAPHITE detection: using environment variable (OFF)")
-    endif()
-elseif(EXISTS "${CMAKE_CURRENT_SOURCE_DIR}/../libs/android/graphite.enabled")
-    # Marker file indicates Graphite-enabled build
-    set(SK_GRAPHITE_AVAILABLE ON)
-    message("-- SK_GRAPHITE detection: marker file found")
-else()
-    message("-- SK_GRAPHITE detection: no marker file, assuming OFF")
-endif()
-
-if(SK_GRAPHITE_AVAILABLE)
-    set(SK_GRAPHITE ON)
-    message("-- SK_GRAPHITE: ON")
-else()
-    set(SK_GRAPHITE OFF)
-    message("-- SK_GRAPHITE: OFF")
-endif()
+# SK_GRAPHITE is passed from Gradle
+message("-- SKIA_LIBS_PATH: ${SKIA_LIBS_PATH}")
+message("-- SK_GRAPHITE: ${SK_GRAPHITE}")
 
 string(APPEND CMAKE_CXX_FLAGS " -DSK_BUILD_FOR_ANDROID -DSK_DISABLE_LEGACY_SHAPER_FACTORY -DSK_IMAGE_READ_PIXELS_DISABLE_LEGACY_API -DFOLLY_NO_CONFIG=1 -DFOLLY_HAVE_CLOCK_GETTIME=1 -DFOLLY_HAVE_MEMRCHR=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_MOBILE=1 -DON_ANDROID -DONANDROID")
 
@@ -101,7 +64,7 @@ message("-- PREBUILT: " ${PREBUILT_DIR})
 message("-- BUILD   : " ${build_DIR})
 message("-- LIBRN   : " ${LIBRN_DIR})
 
-link_directories(../libs/android/${ANDROID_ABI}/)
+link_directories(${SKIA_LIBS_PATH}/)
 
 if(SK_GRAPHITE)
     add_definitions(-DSK_GRAPHITE)

package/android/build.gradle

@@ -56,7 +56,41 @@ 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"
+
+logger.warn("react-native-skia: SK_GRAPHITE: ${useGraphite}")
+logger.warn("react-native-skia: Skia Android package: ${skiaAndroidPackage}")
 logger.warn("react-native-skia: node_modules/ found at: ${nodeModules}")
 
 def sourceBuild = false
@@ -158,6 +192,8 @@ android {
                           "-DREACT_NATIVE_DIR=${defaultDir}",
                           "-DNODE_MODULES_DIR=${nodeModules}",
                           "-DPREBUILT_DIR=${prebuiltDir}",
+                          "-DSKIA_LIBS_PATH=${skiaLibsPath}",
+                          "-DSK_GRAPHITE=${useGraphite ? 'ON' : 'OFF'}",
                           "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON"
 
             }
@@ -175,7 +211,7 @@ android {
 
     sourceSets.main {
         jniLibs {
-            srcDirs += ['../libs/android']
+            srcDirs += [skiaLibsPath]
         }
         java {
             if (!isNewArchitectureEnabled()) {

package/apple/SkiaCVPixelBufferUtils.h

@@ -9,7 +9,7 @@
 
 #import <vector>
 
-#import <CoreMedia/CMSampleBuffer.h>
+#import <CoreVideo/CVPixelBuffer.h>
 #import <CoreVideo/CVMetalTextureCache.h>
 #import <MetalKit/MetalKit.h>
 
@@ -104,7 +104,11 @@ public:
   private:
     static SkYUVAInfo::PlaneConfig getPlaneConfig(OSType pixelFormat);
     static SkYUVAInfo::Subsampling getSubsampling(OSType pixelFormat);
-    static SkYUVColorSpace getColorspace(OSType pixelFormat);
+    static SkYUVColorSpace getColorspace(CVPixelBufferRef pixelBuffer);
+    static bool isFullRangeYUVFormat(OSType pixelFormat);
+    static bool isTenBitYUVFormat(OSType pixelFormat);
+    static SkYUVColorSpace getSkYUVColorSpaceFromMatrix(CFStringRef matrix,
+                                                        OSType pixelFormat);
     static SkYUVAInfo getYUVAInfoForCVPixelBuffer(CVPixelBufferRef pixelBuffer);
   };
 

package/apple/SkiaCVPixelBufferUtils.mm

@@ -13,7 +13,7 @@
 #import "include/core/SkCanvas.h"
 #import "include/core/SkColorSpace.h"
 
-#import <CoreMedia/CMSampleBuffer.h>
+#import <CoreVideo/CVImageBuffer.h>
 #import <CoreVideo/CVMetalTextureCache.h>
 
 #import <include/gpu/ganesh/GrBackendSurface.h>
@@ -28,6 +28,7 @@
 #pragma clang diagnostic pop
 
 #include <TargetConditionals.h>
+#include <cmath>
 #if TARGET_RT_BIG_ENDIAN
 #define FourCC2Str(fourcc)                                                     \
   (const char[]) {                                                             \
@@ -90,6 +91,10 @@ SkiaCVPixelBufferUtils::getCVPixelBufferBaseFormat(
   case kCVPixelFormatType_420YpCbCr8PlanarFullRange:
   case kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange:
   case kCVPixelFormatType_420YpCbCr8BiPlanarFullRange:
+  case kCVPixelFormatType_422YpCbCr8BiPlanarVideoRange:
+  case kCVPixelFormatType_422YpCbCr8BiPlanarFullRange:
+  case kCVPixelFormatType_444YpCbCr8BiPlanarVideoRange:
+  case kCVPixelFormatType_444YpCbCr8BiPlanarFullRange:
   // 10-bit YUV formats
   case kCVPixelFormatType_420YpCbCr10BiPlanarVideoRange:
   case kCVPixelFormatType_420YpCbCr10BiPlanarFullRange:
@@ -198,7 +203,7 @@ SkYUVAInfo SkiaCVPixelBufferUtils::YUV::getYUVAInfoForCVPixelBuffer(
   OSType format = CVPixelBufferGetPixelFormatType(pixelBuffer);
   SkYUVAInfo::PlaneConfig planeConfig = getPlaneConfig(format);
   SkYUVAInfo::Subsampling subsampling = getSubsampling(format);
-  SkYUVColorSpace colorspace = getColorspace(format);
+  SkYUVColorSpace colorspace = getColorspace(pixelBuffer);
 
   return SkYUVAInfo(size, planeConfig, subsampling, colorspace);
 }
@@ -210,9 +215,13 @@ SkiaCVPixelBufferUtils::YUV::getPlaneConfig(OSType pixelFormat) {
   switch (pixelFormat) {
   case kCVPixelFormatType_420YpCbCr8Planar:
   case kCVPixelFormatType_420YpCbCr8PlanarFullRange:
-    return SkYUVAInfo::PlaneConfig::kYUV;
+    return SkYUVAInfo::PlaneConfig::kY_U_V;
   case kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange:
   case kCVPixelFormatType_420YpCbCr8BiPlanarFullRange:
+  case kCVPixelFormatType_422YpCbCr8BiPlanarVideoRange:
+  case kCVPixelFormatType_422YpCbCr8BiPlanarFullRange:
+  case kCVPixelFormatType_444YpCbCr8BiPlanarVideoRange:
+  case kCVPixelFormatType_444YpCbCr8BiPlanarFullRange:
   case kCVPixelFormatType_420YpCbCr10BiPlanarVideoRange:
   case kCVPixelFormatType_420YpCbCr10BiPlanarFullRange:
   case kCVPixelFormatType_422YpCbCr10BiPlanarVideoRange:
@@ -241,9 +250,13 @@ SkiaCVPixelBufferUtils::YUV::getSubsampling(OSType pixelFormat) {
   case kCVPixelFormatType_420YpCbCr10BiPlanarVideoRange:
   case kCVPixelFormatType_420YpCbCr10BiPlanarFullRange:
     [[likely]] return SkYUVAInfo::Subsampling::k420;
+  case kCVPixelFormatType_422YpCbCr8BiPlanarVideoRange:
+  case kCVPixelFormatType_422YpCbCr8BiPlanarFullRange:
   case kCVPixelFormatType_422YpCbCr10BiPlanarVideoRange:
   case kCVPixelFormatType_422YpCbCr10BiPlanarFullRange:
     return SkYUVAInfo::Subsampling::k422;
+  case kCVPixelFormatType_444YpCbCr8BiPlanarVideoRange:
+  case kCVPixelFormatType_444YpCbCr8BiPlanarFullRange:
   case kCVPixelFormatType_444YpCbCr10BiPlanarVideoRange:
   case kCVPixelFormatType_444YpCbCr10BiPlanarFullRange:
     return SkYUVAInfo::Subsampling::k444;
@@ -257,34 +270,97 @@ SkiaCVPixelBufferUtils::YUV::getSubsampling(OSType pixelFormat) {
 
 // pragma MARK: YUV getColorspace()
 
-SkYUVColorSpace SkiaCVPixelBufferUtils::YUV::getColorspace(OSType pixelFormat) {
+SkYUVColorSpace SkiaCVPixelBufferUtils::YUV::getColorspace(
+    CVPixelBufferRef pixelBuffer) {
+  const OSType pixelFormat = CVPixelBufferGetPixelFormatType(pixelBuffer);
+
+  CFTypeRef matrixAttachment =
+      CVBufferCopyAttachment(pixelBuffer, kCVImageBufferYCbCrMatrixKey, nullptr);
+  CFStringRef matrix = nullptr;
+  if (matrixAttachment != nullptr &&
+      CFGetTypeID(matrixAttachment) == CFStringGetTypeID()) {
+    matrix = reinterpret_cast<CFStringRef>(matrixAttachment);
+  }
+
+  SkYUVColorSpace colorspace = getSkYUVColorSpaceFromMatrix(matrix, pixelFormat);
+  if (matrixAttachment != nullptr) {
+    CFRelease(matrixAttachment);
+  }
+  return colorspace;
+}
+
+// pragma MARK: YUV helpers
+
+bool SkiaCVPixelBufferUtils::YUV::isFullRangeYUVFormat(OSType pixelFormat) {
   switch (pixelFormat) {
-  case kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange:
-    [[likely]]
-    // 8-bit limited
-    return SkYUVColorSpace::kRec709_Limited_SkYUVColorSpace;
-  case kCVPixelFormatType_420YpCbCr8Planar:
   case kCVPixelFormatType_420YpCbCr8PlanarFullRange:
   case kCVPixelFormatType_420YpCbCr8BiPlanarFullRange:
-    [[likely]]
-    // 8-bit full
-    return SkYUVColorSpace::kRec709_Full_SkYUVColorSpace;
+  case kCVPixelFormatType_422YpCbCr8BiPlanarFullRange:
+  case kCVPixelFormatType_444YpCbCr8BiPlanarFullRange:
+  case kCVPixelFormatType_420YpCbCr10BiPlanarFullRange:
+  case kCVPixelFormatType_422YpCbCr10BiPlanarFullRange:
+  case kCVPixelFormatType_444YpCbCr10BiPlanarFullRange:
+    return true;
+  default:
+    return false;
+  }
+}
+
+bool SkiaCVPixelBufferUtils::YUV::isTenBitYUVFormat(OSType pixelFormat) {
+  switch (pixelFormat) {
   case kCVPixelFormatType_420YpCbCr10BiPlanarVideoRange:
-  case kCVPixelFormatType_422YpCbCr10BiPlanarVideoRange:
-  case kCVPixelFormatType_444YpCbCr10BiPlanarVideoRange:
-    // 10-bit limited
-    return SkYUVColorSpace::kBT2020_10bit_Limited_SkYUVColorSpace;
   case kCVPixelFormatType_420YpCbCr10BiPlanarFullRange:
+  case kCVPixelFormatType_422YpCbCr10BiPlanarVideoRange:
   case kCVPixelFormatType_422YpCbCr10BiPlanarFullRange:
+  case kCVPixelFormatType_444YpCbCr10BiPlanarVideoRange:
   case kCVPixelFormatType_444YpCbCr10BiPlanarFullRange:
-    // 10-bit full
-    return SkYUVColorSpace::kBT2020_10bit_Full_SkYUVColorSpace;
-  // This can be extended with branches for specific YUV formats if Apple
-  // uses new formats.
+    return true;
   default:
-    [[unlikely]] throw std::runtime_error("Invalid pixel format! " +
-                                          std::string(FourCC2Str(pixelFormat)));
+    return false;
+  }
+}
+
+SkYUVColorSpace SkiaCVPixelBufferUtils::YUV::getSkYUVColorSpaceFromMatrix(
+    CFStringRef matrix, OSType pixelFormat) {
+  const bool isFullRange = isFullRangeYUVFormat(pixelFormat);
+  const bool isTenBit = isTenBitYUVFormat(pixelFormat);
+
+  if (matrix != nullptr) {
+    if (CFEqual(matrix, kCVImageBufferYCbCrMatrix_ITU_R_2020)) {
+      if (isTenBit) {
+        return isFullRange ? kBT2020_10bit_Full_SkYUVColorSpace
+                           : kBT2020_10bit_Limited_SkYUVColorSpace;
+      }
+      return isFullRange ? kBT2020_8bit_Full_SkYUVColorSpace
+                         : kBT2020_8bit_Limited_SkYUVColorSpace;
+    }
+    if (CFEqual(matrix, kCVImageBufferYCbCrMatrix_ITU_R_601_4)) {
+      return isFullRange ? kJPEG_Full_SkYUVColorSpace
+                         : kRec601_Limited_SkYUVColorSpace;
+    }
+    if (CFEqual(matrix, kCVImageBufferYCbCrMatrix_SMPTE_240M_1995)) {
+      return isFullRange ? kSMPTE240_Full_SkYUVColorSpace
+                         : kSMPTE240_Limited_SkYUVColorSpace;
+    }
+    if (CFEqual(matrix, kCVImageBufferYCbCrMatrix_ITU_R_709_2)) {
+      return isFullRange ? kRec709_Full_SkYUVColorSpace
+                         : kRec709_Limited_SkYUVColorSpace;
+    }
+  }
+
+  if (pixelFormat == kCVPixelFormatType_422YpCbCr8BiPlanarVideoRange ||
+      pixelFormat == kCVPixelFormatType_422YpCbCr8BiPlanarFullRange) {
+    return isFullRange ? kJPEG_Full_SkYUVColorSpace
+                       : kRec601_Limited_SkYUVColorSpace;
+  }
+
+  // Fallback for buffers that don't provide matrix metadata.
+  if (isTenBit) {
+    return isFullRange ? kBT2020_10bit_Full_SkYUVColorSpace
+                       : kBT2020_10bit_Limited_SkYUVColorSpace;
   }
+  return isFullRange ? kRec709_Full_SkYUVColorSpace
+                     : kRec709_Limited_SkYUVColorSpace;
 }
 
 // pragma MARK: CVPixelBuffer -> Skia Texture
@@ -294,9 +370,22 @@ TextureHolder *SkiaCVPixelBufferUtils::getSkiaTextureForCVPixelBufferPlane(
   // 1. Get cache
   CVMetalTextureCacheRef textureCache = getTextureCache(device);
 
-  // 2. Get MetalTexture from CMSampleBuffer
-  size_t width = CVPixelBufferGetWidthOfPlane(pixelBuffer, planeIndex);
-  size_t height = CVPixelBufferGetHeightOfPlane(pixelBuffer, planeIndex);
+  // 2. Get MetalTexture from CVPixelBuffer
+  const size_t planesCount = CVPixelBufferGetPlaneCount(pixelBuffer);
+  if (planesCount == 0 && planeIndex != 0) [[unlikely]] {
+    throw std::runtime_error("Pixel buffer is not planar, but plane index " +
+                             std::to_string(planeIndex) + " was requested.");
+  }
+  if (planesCount > 0 && planeIndex >= planesCount) [[unlikely]] {
+    throw std::runtime_error(
+        "Requested out-of-bounds plane index " + std::to_string(planeIndex) +
+        " for pixel buffer with " + std::to_string(planesCount) + " planes.");
+  }
+  size_t width = planesCount > 0 ? CVPixelBufferGetWidthOfPlane(pixelBuffer, planeIndex)
+                                 : CVPixelBufferGetWidth(pixelBuffer);
+  size_t height =
+      planesCount > 0 ? CVPixelBufferGetHeightOfPlane(pixelBuffer, planeIndex)
+                      : CVPixelBufferGetHeight(pixelBuffer);
   MTLPixelFormat pixelFormat =
       getMTLPixelFormatForCVPixelBufferPlane(pixelBuffer, planeIndex);
 
@@ -307,7 +396,7 @@ TextureHolder *SkiaCVPixelBufferUtils::getSkiaTextureForCVPixelBufferPlane(
 
   if (result != kCVReturnSuccess) [[unlikely]] {
     throw std::runtime_error(
-        "Failed to create Metal Texture from CMSampleBuffer! Result: " +
+        "Failed to create Metal Texture from CVPixelBuffer! Result: " +
         std::to_string(result));
   }
 
@@ -334,19 +423,102 @@ SkiaCVPixelBufferUtils::getTextureCache(id<MTLDevice> device) {
 
 MTLPixelFormat SkiaCVPixelBufferUtils::getMTLPixelFormatForCVPixelBufferPlane(
     CVPixelBufferRef pixelBuffer, size_t planeIndex) {
-  size_t width = CVPixelBufferGetWidthOfPlane(pixelBuffer, planeIndex);
-  size_t bytesPerRow =
-      CVPixelBufferGetBytesPerRowOfPlane(pixelBuffer, planeIndex);
-  double bytesPerPixel = round(static_cast<double>(bytesPerRow) / width);
+  const OSType format = CVPixelBufferGetPixelFormatType(pixelBuffer);
+  auto throwInvalidPlaneIndexForFormat = [&](size_t expectedPlanes)
+      -> MTLPixelFormat {
+    throw std::runtime_error(
+        "Invalid plane index " + std::to_string(planeIndex) +
+        " for pixel format " + std::string(FourCC2Str(format)) + " (expected 0.." +
+        std::to_string(expectedPlanes - 1) + ").");
+  };
+
+  switch (format) {
+  case kCVPixelFormatType_32BGRA:
+    // 1 plane, 8-bit interleaved BGRA.
+    if (planeIndex != 0) {
+      return throwInvalidPlaneIndexForFormat(1);
+    }
+    return MTLPixelFormatBGRA8Unorm;
+  case kCVPixelFormatType_32RGBA:
+    // 1 plane, 8-bit interleaved RGBA.
+    if (planeIndex != 0) {
+      return throwInvalidPlaneIndexForFormat(1);
+    }
+    return MTLPixelFormatRGBA8Unorm;
+  case kCVPixelFormatType_420YpCbCr8Planar:
+  case kCVPixelFormatType_420YpCbCr8PlanarFullRange:
+    // 3 planes, 8-bit 4:2:0 planar (Y, U, V), each plane is single channel.
+    switch (planeIndex) {
+    case 0:
+    case 1:
+    case 2:
+      return MTLPixelFormatR8Unorm;
+    default:
+      return throwInvalidPlaneIndexForFormat(3);
+    }
+  case kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange:
+  case kCVPixelFormatType_420YpCbCr8BiPlanarFullRange:
+  case kCVPixelFormatType_422YpCbCr8BiPlanarVideoRange:
+  case kCVPixelFormatType_422YpCbCr8BiPlanarFullRange:
+  case kCVPixelFormatType_444YpCbCr8BiPlanarVideoRange:
+  case kCVPixelFormatType_444YpCbCr8BiPlanarFullRange:
+    // 2 planes, 8-bit bi-planar (plane 0 = Y, plane 1 = interleaved CbCr).
+    switch (planeIndex) {
+    case 0:
+      return MTLPixelFormatR8Unorm;
+    case 1:
+      return MTLPixelFormatRG8Unorm;
+    default:
+      return throwInvalidPlaneIndexForFormat(2);
+    }
+  case kCVPixelFormatType_420YpCbCr10BiPlanarVideoRange:
+  case kCVPixelFormatType_420YpCbCr10BiPlanarFullRange:
+  case kCVPixelFormatType_422YpCbCr10BiPlanarVideoRange:
+  case kCVPixelFormatType_422YpCbCr10BiPlanarFullRange:
+  case kCVPixelFormatType_444YpCbCr10BiPlanarVideoRange:
+  case kCVPixelFormatType_444YpCbCr10BiPlanarFullRange:
+    // 2 planes, 10-bit bi-planar stored in 16-bit lanes (Y + interleaved CbCr).
+    switch (planeIndex) {
+    case 0:
+      return MTLPixelFormatR16Unorm;
+    case 1:
+      return MTLPixelFormatRG16Unorm;
+    default:
+      return throwInvalidPlaneIndexForFormat(2);
+    }
+  default:
+    break;
+  }
+
+  const size_t planesCount = CVPixelBufferGetPlaneCount(pixelBuffer);
+  const size_t width =
+      planesCount > 0 ? CVPixelBufferGetWidthOfPlane(pixelBuffer, planeIndex)
+                      : CVPixelBufferGetWidth(pixelBuffer);
+  const size_t bytesPerRow =
+      planesCount > 0 ? CVPixelBufferGetBytesPerRowOfPlane(pixelBuffer, planeIndex)
+                      : CVPixelBufferGetBytesPerRow(pixelBuffer);
+  if (width == 0) [[unlikely]] {
+    throw std::runtime_error("Invalid plane width for pixel format " +
+                             std::string(FourCC2Str(format)) + "!");
+  }
+  if (bytesPerRow % width != 0) [[unlikely]] {
+    throw std::runtime_error(
+        "Invalid bytes per row! Bytes per row must be evenly divisible by width "
+        "for pixel format " +
+        std::string(FourCC2Str(format)) + "!");
+  }
+  const size_t bytesPerPixel = bytesPerRow / width;
   if (bytesPerPixel == 1) {
     return MTLPixelFormatR8Unorm;
-  } else if (bytesPerPixel == 2) {
+  }
+  if (bytesPerPixel == 2) {
     return MTLPixelFormatRG8Unorm;
-  } else if (bytesPerPixel == 4) {
+  }
+  if (bytesPerPixel == 4) {
     return MTLPixelFormatBGRA8Unorm;
-  } else [[unlikely]] {
-    throw std::runtime_error("Invalid bytes per row! Expected 1 (R), 2 (RG) or "
-                             "4 (RGBA), but received " +
-                             std::to_string(bytesPerPixel));
   }
+
+  [[unlikely]] throw std::runtime_error(
+      "Invalid bytes per row! Expected 1 (R), 2 (RG) or 4 (RGBA), but received " +
+      std::to_string(bytesPerPixel));
 }

package/apple/SkiaUIView.mm

@@ -1,4 +1,5 @@
 #import <React/RCTBridge.h>
+#import <QuartzCore/CATransaction.h>
 
 #import "RNSkiaModule.h"
 #import "SkiaUIView.h"
@@ -140,7 +141,10 @@
 - (void)layoutSubviews {
   [super layoutSubviews];
   if (_impl != nullptr) {
+    [CATransaction begin];
+    [CATransaction setDisableActions:YES];
     _impl->setSize(self.bounds.size.width, self.bounds.size.height);
+    [CATransaction commit];
   }
 }
 

package/cpp/api/JsiSkColor.h

@@ -44,6 +44,23 @@ public:
 
   static SkColor fromValue(jsi::Runtime &runtime, const jsi::Value &obj) {
     const auto &object = obj.asObject(runtime);
+
+    // Handle regular JavaScript arrays
+    if (object.isArray(runtime)) {
+      auto array = object.asArray(runtime);
+      if (array.size(runtime) != 4) {
+        throw jsi::JSError(runtime,
+                           "Expected array of length 4 for color, got " +
+                               std::to_string(array.size(runtime)));
+      }
+      auto r = array.getValueAtIndex(runtime, 0).asNumber();
+      auto g = array.getValueAtIndex(runtime, 1).asNumber();
+      auto b = array.getValueAtIndex(runtime, 2).asNumber();
+      auto a = array.getValueAtIndex(runtime, 3).asNumber();
+      return SkColorSetARGB(a * 255, r * 255, g * 255, b * 255);
+    }
+
+    // Handle Float32Array (has buffer property)
     jsi::ArrayBuffer buffer =
         object
             .getProperty(runtime, jsi::PropNameID::forAscii(runtime, "buffer"))
@@ -76,7 +93,42 @@ public:
         return JsiSkColor::toValue(
             runtime, SkColorSetARGB(color.a * 255, color.r, color.g, color.b));
       } else if (arguments[0].isObject()) {
-        return arguments[0].getObject(runtime);
+        auto obj = arguments[0].getObject(runtime);
+
+        // Check if it's a regular array - convert to Float32Array
+        if (obj.isArray(runtime)) {
+          auto arr = obj.getArray(runtime);
+          if (arr.size(runtime) != 4) {
+            throw jsi::JSError(runtime,
+                               "Expected array of length 4 for color, got " +
+                                   std::to_string(arr.size(runtime)));
+          }
+          auto r = static_cast<float>(arr.getValueAtIndex(runtime, 0).asNumber());
+          auto g = static_cast<float>(arr.getValueAtIndex(runtime, 1).asNumber());
+          auto b = static_cast<float>(arr.getValueAtIndex(runtime, 2).asNumber());
+          auto a = static_cast<float>(arr.getValueAtIndex(runtime, 3).asNumber());
+
+          // Create Float32Array and populate
+          auto result = runtime.global()
+                            .getPropertyAsFunction(runtime, "Float32Array")
+                            .callAsConstructor(runtime, 4)
+                            .getObject(runtime);
+          jsi::ArrayBuffer buffer =
+              result
+                  .getProperty(runtime,
+                               jsi::PropNameID::forAscii(runtime, "buffer"))
+                  .asObject(runtime)
+                  .getArrayBuffer(runtime);
+          auto bfrPtr = reinterpret_cast<float *>(buffer.data(runtime));
+          bfrPtr[0] = r;
+          bfrPtr[1] = g;
+          bfrPtr[2] = b;
+          bfrPtr[3] = a;
+          return result;
+        }
+
+        // Already a Float32Array or similar - return as-is
+        return obj;
       }
       return jsi::Value::undefined();
     };

package/cpp/rnwgpu/ArrayBuffer.h

@@ -49,8 +49,13 @@ template <> struct JSIConverter<std::shared_ptr<ArrayBuffer>> {
           auto buff = bufferProp.getObject(runtime);
           auto bytesPerElements =
               obj.getProperty(runtime, "BYTES_PER_ELEMENT").asNumber();
-          return createArrayBufferFromJSI(
-              runtime, buff.getArrayBuffer(runtime),
+          auto arrayBuffer = buff.getArrayBuffer(runtime);
+          auto byteOffset = static_cast<size_t>(
+              obj.getProperty(runtime, "byteOffset").asNumber());
+          auto byteLength = static_cast<size_t>(
+              obj.getProperty(runtime, "byteLength").asNumber());
+          return std::make_shared<ArrayBuffer>(
+              arrayBuffer.data(runtime) + byteOffset, byteLength,
               static_cast<size_t>(bytesPerElements));
         }
       }

package/lib/commonjs/renderer/Canvas.d.ts

@@ -19,6 +19,8 @@ export declare const useCanvasSize: (userRef?: RefObject<CanvasRef | null>) => {
 export declare const isFabric: boolean;
 export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
     debug?: boolean;
+    /** @deprecated Not supported on Fabric. Use `onSize` or `useCanvasSize()` instead. */
+    onLayout?: ViewProps["onLayout"];
     opaque?: boolean;
     onSize?: SharedValue<SkSize>;
     colorSpace?: "p3" | "srgb";

package/lib/commonjs/renderer/Canvas.js

@@ -56,9 +56,6 @@ const Canvas = ({
   colorSpace = "p3",
   androidWarmup = false,
   ref,
-  // Here know this is a type error but this is done on purpose to check it at runtime
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
   onLayout,
   ...viewProps
 }) => {