@shopify/react-native-skia 1.1.0 → 1.2.0

package/android/CMakeLists.txt

@@ -47,6 +47,7 @@ add_library(
         "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/RNSkOpenGLCanvasProvider.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/SkiaOpenGLSurfaceFactory.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/GrAHardwareBufferUtils.cpp"
+        "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/AHardwareBufferUtils.cpp"
 
         "${PROJECT_SOURCE_DIR}/../cpp/jsi/JsiHostObject.cpp"
         "${PROJECT_SOURCE_DIR}/../cpp/jsi/JsiValue.cpp"

package/android/build.gradle

@@ -137,6 +137,7 @@ android {
         targetSdkVersion safeExtGet('targetSdkVersion', DEFAULT_TARGET_SDK_VERSION)
         versionCode 1
         versionName "1.0"
+        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         externalNativeBuild {
             cmake {

package/android/cpp/rnskia-android/AHardwareBufferUtils.cpp

@@ -0,0 +1,31 @@
+#if __ANDROID_API__ >= 26
+
+#include "AHardwareBufferUtils.h"
+#include <android/hardware_buffer.h>
+
+namespace RNSkia {
+
+uint32_t GetBufferFormatFromSkColorType(SkColorType bufferFormat) {
+  switch (bufferFormat) {
+  case kRGBA_8888_SkColorType:
+    return AHARDWAREBUFFER_FORMAT_R8G8B8A8_UNORM;
+  case kRGB_888x_SkColorType:
+    return AHARDWAREBUFFER_FORMAT_R8G8B8X8_UNORM;
+  case kRGBA_F16_SkColorType:
+    return AHARDWAREBUFFER_FORMAT_R16G16B16A16_FLOAT;
+  case kRGB_565_SkColorType:
+    return AHARDWAREBUFFER_FORMAT_R5G6B5_UNORM;
+  case kRGBA_1010102_SkColorType:
+    return AHARDWAREBUFFER_FORMAT_R10G10B10A2_UNORM;
+#if __ANDROID_API__ >= 33
+  case kAlpha_8_SkColorType:
+    return AHARDWAREBUFFER_FORMAT_R8_UNORM;
+#endif
+  default:
+    return AHARDWAREBUFFER_FORMAT_R8G8B8A8_UNORM;
+  }
+}
+
+} // namespace RNSkia
+
+#endif

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

@@ -0,0 +1,13 @@
+#pragma once
+
+#include "include/core/SkColorType.h"
+
+#if __ANDROID_API__ >= 26
+
+namespace RNSkia {
+
+uint32_t GetBufferFormatFromSkColorType(SkColorType bufferFormat);
+
+} // namespace RNSkia
+
+#endif

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

@@ -1,10 +1,15 @@
 #pragma once
 
+// TODO: Add android flags
+#if __ANDROID_API__ >= 26
+#include <android/hardware_buffer.h>
+#endif
 #include <exception>
 #include <functional>
 #include <memory>
 #include <string>
 
+#include "AHardwareBufferUtils.h"
 #include "JniPlatformContext.h"
 #include "RNSkPlatformContext.h"
 #include "SkiaOpenGLSurfaceFactory.h"
@@ -48,6 +53,76 @@ public:
     return SkiaOpenGLSurfaceFactory::makeOffscreenSurface(width, height);
   }
 
+  sk_sp<SkImage> makeImageFromPlatformBuffer(void *buffer) override {
+    return SkiaOpenGLSurfaceFactory::makeImageFromHardwareBuffer(buffer);
+  }
+
+  void releasePlatformBuffer(uint64_t pointer) override {
+#if __ANDROID_API__ >= 26
+    AHardwareBuffer *buffer = reinterpret_cast<AHardwareBuffer *>(pointer);
+    AHardwareBuffer_release(buffer);
+#endif
+  }
+
+  uint64_t makePlatformBuffer(sk_sp<SkImage> image) override {
+#if __ANDROID_API__ >= 26
+    auto bytesPerPixel = image->imageInfo().bytesPerPixel();
+    int bytesPerRow = image->width() * bytesPerPixel;
+    auto buf = SkData::MakeUninitialized(image->width() * image->height() *
+                                         bytesPerPixel);
+    SkImageInfo info =
+        SkImageInfo::Make(image->width(), image->height(), image->colorType(),
+                          image->alphaType());
+    image->readPixels(nullptr, info, const_cast<void *>(buf->data()),
+                      bytesPerRow, 0, 0);
+    const void *pixelData = buf->data();
+
+    // Define the buffer description
+    AHardwareBuffer_Desc desc = {};
+    // TODO: use image info here
+    desc.width = image->width();
+    desc.height = image->height();
+    desc.layers = 1; // Single image layer
+    desc.format = GetBufferFormatFromSkColorType(
+        image->colorType()); // Assuming the image
+                             // is in this format
+    desc.usage = AHARDWAREBUFFER_USAGE_CPU_READ_OFTEN |
+                 AHARDWAREBUFFER_USAGE_CPU_WRITE_OFTEN |
+                 AHARDWAREBUFFER_USAGE_GPU_COLOR_OUTPUT |
+                 AHARDWAREBUFFER_USAGE_GPU_SAMPLED_IMAGE;
+    desc.stride = bytesPerRow; // Stride in pixels, not in bytes
+
+    // Allocate the buffer
+    AHardwareBuffer *buffer = nullptr;
+    if (AHardwareBuffer_allocate(&desc, &buffer) != 0) {
+      // Handle allocation failure
+      return 0;
+    }
+
+    // Map the buffer to gain access to its memory
+    void *mappedBuffer = nullptr;
+    AHardwareBuffer_lock(buffer, AHARDWAREBUFFER_USAGE_CPU_WRITE_OFTEN, -1,
+                         nullptr, &mappedBuffer);
+    if (mappedBuffer == nullptr) {
+      // Handle mapping failure
+      AHardwareBuffer_release(buffer);
+      return 0;
+    }
+
+    // Copy the image data to the buffer
+    memcpy(mappedBuffer, pixelData, desc.height * bytesPerRow);
+
+    // Unmap the buffer
+    AHardwareBuffer_unlock(buffer, nullptr);
+
+    // Return the buffer pointer as a uint64_t. It's the caller's responsibility
+    // to manage this buffer.
+    return reinterpret_cast<uint64_t>(buffer);
+#else
+    return 0;
+#endif
+  }
+
   sk_sp<SkFontMgr> createFontMgr() override {
     return SkFontMgr_New_Android(nullptr);
   }

package/android/cpp/rnskia-android/SkiaOpenGLSurfaceFactory.cpp

@@ -7,6 +7,7 @@
 
 #include "include/gpu/ganesh/SkImageGanesh.h"
 #include "include/gpu/ganesh/gl/GrGLBackendSurface.h"
+#include "src/gpu/ganesh/gl/GrGLDefines.h"
 
 #pragma clang diagnostic pop
 
@@ -15,30 +16,47 @@ namespace RNSkia {
 thread_local SkiaOpenGLContext ThreadContextHolder::ThreadSkiaOpenGLContext;
 
 sk_sp<SkImage>
-SkiaOpenGLSurfaceFactory::makeImageFromHardwareBuffer(const SkImageInfo &info,
-                                                      void *buffer) {
+SkiaOpenGLSurfaceFactory::makeImageFromHardwareBuffer(void *buffer) {
 #if __ANDROID_API__ >= 26
+  // Setup OpenGL and Skia:
+  if (!SkiaOpenGLHelper::createSkiaDirectContextIfNecessary(
+          &ThreadContextHolder::ThreadSkiaOpenGLContext)) {
+
+    RNSkLogger::logToConsole(
+        "Could not create Skia Surface from native window / surface. "
+        "Failed creating Skia Direct Context");
+    return nullptr;
+  }
   const AHardwareBuffer *hardwareBuffer =
       static_cast<AHardwareBuffer *>(buffer);
   DeleteImageProc deleteImageProc = nullptr;
   UpdateImageProc updateImageProc = nullptr;
   TexImageCtx deleteImageCtx = nullptr;
+
+  AHardwareBuffer_Desc description;
+  AHardwareBuffer_describe(hardwareBuffer, &description);
+  if (description.format != AHARDWAREBUFFER_FORMAT_R8G8B8A8_UNORM) {
+    throw std::runtime_error("AHardwareBuffer has unknown format (" +
+                             std::to_string(description.format) +
+                             ") - cannot convert to SkImage!");
+  }
+  GrBackendFormat format =
+      GrBackendFormats::MakeGL(GR_GL_RGBA8, GR_GL_TEXTURE_EXTERNAL);
+
   auto backendTex = MakeGLBackendTexture(
       ThreadContextHolder::ThreadSkiaOpenGLContext.directContext.get(),
-      const_cast<AHardwareBuffer *>(hardwareBuffer), info.width(),
-      info.height(), &deleteImageProc, &updateImageProc, &deleteImageCtx, false,
-      // GR_GL_RGBA8 0x8058
-      // GR_GL_TEXTURE_EXTERNAL 0x8D65
-      GrBackendFormats::MakeGL(0x8058, 0x8D65), false);
+      const_cast<AHardwareBuffer *>(hardwareBuffer), description.width,
+      description.height, &deleteImageProc, &updateImageProc, &deleteImageCtx,
+      false, format, false);
   sk_sp<SkImage> image = SkImages::BorrowTextureFrom(
       ThreadContextHolder::ThreadSkiaOpenGLContext.directContext.get(),
       backendTex, kTopLeft_GrSurfaceOrigin, kRGBA_8888_SkColorType,
-      kPremul_SkAlphaType, nullptr);
+      kOpaque_SkAlphaType, nullptr);
   return image;
 #else
-  RNSkLogger::logToConsole(
-      "Hardware buffer in only supported on Android API level 26 and above.");
-  return nullptr;
+  throw std::runtime_error(
+      "HardwareBuffers are only supported on Android API 26 or higher! Set "
+      "your minSdk to 26 (or higher) and try again.");
 #endif
 }
 

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

@@ -149,8 +149,7 @@ public:
    */
   static sk_sp<SkSurface> makeOffscreenSurface(int width, int height);
 
-  static sk_sp<SkImage> makeImageFromHardwareBuffer(const SkImageInfo &info,
-                                                    void *buffer);
+  static sk_sp<SkImage> makeImageFromHardwareBuffer(void *buffer);
 
   /**
    * Creates a windowed Skia Surface holder.

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

@@ -17,7 +17,8 @@ import android.view.ViewGroup;
 import android.widget.ScrollView;
 import androidx.annotation.NonNull;
 import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.uimanager.UIManagerModule;
+import com.facebook.react.bridge.UIManager;
+import com.facebook.react.uimanager.UIManagerHelper;
 import com.facebook.react.views.view.ReactViewGroup;
 
 import java.lang.reflect.Method;
@@ -29,7 +30,7 @@ public class ViewScreenshotService {
     private static final String TAG = "SkiaScreenshot";
 
     public static Bitmap makeViewScreenshotFromTag(ReactContext context, int tag) {
-        UIManagerModule uiManager = context.getNativeModule(UIManagerModule.class);
+        UIManager uiManager = UIManagerHelper.getUIManagerForReactTag(context, tag);
         View view = null;
         try {
             view = uiManager.resolveView(tag);

package/cpp/api/JsiPlatformBuffer.h

@@ -0,0 +1,51 @@
+#pragma once
+
+#include <memory>
+#include <utility>
+
+#include <jsi/jsi.h>
+
+#include "JsiSkImage.h"
+
+namespace RNSkia {
+
+namespace jsi = facebook::jsi;
+
+/**
+ Implementation of the ParagraphBuilderFactory for making ParagraphBuilder JSI
+ object
+ */
+class JsiPlatformBufferFactory : public JsiSkHostObject {
+public:
+  JSI_HOST_FUNCTION(MakeFromImage) {
+    auto image = JsiSkImage::fromValue(runtime, arguments[0]);
+    image->makeNonTextureImage();
+
+    uint64_t pointer = getContext()->makePlatformBuffer(image);
+    jsi::HostFunctionType deleteFunc =
+        [=](jsi::Runtime &runtime, const jsi::Value &thisArg,
+            const jsi::Value *args, size_t count) -> jsi::Value {
+      getContext()->releasePlatformBuffer(pointer);
+      return jsi::Value::undefined();
+    };
+    return jsi::BigInt::fromUint64(runtime, pointer);
+  }
+
+  JSI_HOST_FUNCTION(Release) {
+
+    jsi::BigInt pointer = arguments[0].asBigInt(runtime);
+    const uintptr_t platformBufferPointer = pointer.asUint64(runtime);
+
+    getContext()->releasePlatformBuffer(platformBufferPointer);
+    return jsi::Value::undefined();
+  }
+
+  JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiPlatformBufferFactory, Release),
+                       JSI_EXPORT_FUNC(JsiPlatformBufferFactory, MakeFromImage))
+
+  explicit JsiPlatformBufferFactory(
+      std::shared_ptr<RNSkPlatformContext> context)
+      : JsiSkHostObject(std::move(context)) {}
+};
+
+} // namespace RNSkia

package/cpp/api/JsiSkApi.h

@@ -6,6 +6,7 @@
 
 #include "JsiSkHostObjects.h"
 
+#include "JsiPlatformBuffer.h"
 #include "JsiSkAnimatedImage.h"
 #include "JsiSkAnimatedImageFactory.h"
 #include "JsiSkColor.h"
@@ -122,6 +123,9 @@ public:
     installReadonlyProperty(
         "ParagraphBuilder",
         std::make_shared<JsiSkParagraphBuilderFactory>(context));
+
+    installReadonlyProperty(
+        "PlatformBuffer", std::make_shared<JsiPlatformBufferFactory>(context));
   }
 };
 } // namespace RNSkia

package/cpp/api/JsiSkImage.h

@@ -177,7 +177,7 @@ public:
     if (!getObject()->readPixels(info, bfrPtr, bytesPerRow, srcX, srcY)) {
       return jsi::Value::null();
     }
-    return std::move(dest);
+    return dest;
   }
 
   JSI_HOST_FUNCTION(makeNonTextureImage) {

package/cpp/api/JsiSkImageFactory.h

@@ -27,6 +27,18 @@ public:
         runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image)));
   }
 
+  JSI_HOST_FUNCTION(MakeImageFromPlatformBuffer) {
+    jsi::BigInt pointer = arguments[0].asBigInt(runtime);
+    const uintptr_t platformBufferPointer = pointer.asUint64(runtime);
+    void *rawPointer = reinterpret_cast<void *>(platformBufferPointer);
+    auto image = getContext()->makeImageFromPlatformBuffer(rawPointer);
+    if (image == nullptr) {
+      throw std::runtime_error("Failed to convert PlatformBuffer to SkImage!");
+    }
+    return jsi::Object::createFromHostObject(
+        runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image)));
+  }
+
   JSI_HOST_FUNCTION(MakeImage) {
     auto imageInfo = JsiSkImageInfo::fromValue(runtime, arguments[0]);
     auto pixelData = JsiSkData::fromValue(runtime, arguments[1]);
@@ -68,7 +80,9 @@ public:
 
   JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImageFromEncoded),
                        JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImageFromViewTag),
-                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImage), )
+                       JSI_EXPORT_FUNC(JsiSkImageFactory,
+                                       MakeImageFromPlatformBuffer),
+                       JSI_EXPORT_FUNC(JsiSkImageFactory, MakeImage))
 
   explicit JsiSkImageFactory(std::shared_ptr<RNSkPlatformContext> context)
       : JsiSkHostObject(std::move(context)) {}

package/cpp/api/JsiSkSurface.h

@@ -31,6 +31,12 @@ public:
 
   EXPORT_JSI_API_TYPENAME(JsiSkSurface, Surface)
 
+  // TODO-API: Properties?
+  JSI_HOST_FUNCTION(width) { return static_cast<double>(getObject()->width()); }
+  JSI_HOST_FUNCTION(height) {
+    return static_cast<double>(getObject()->height());
+  }
+
   JSI_HOST_FUNCTION(getCanvas) {
     return jsi::Object::createFromHostObject(
         runtime,
@@ -57,7 +63,9 @@ public:
         runtime, std::make_shared<JsiSkImage>(getContext(), std::move(image)));
   }
 
-  JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkSurface, getCanvas),
+  JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkSurface, width),
+                       JSI_EXPORT_FUNC(JsiSkSurface, height),
+                       JSI_EXPORT_FUNC(JsiSkSurface, getCanvas),
                        JSI_EXPORT_FUNC(JsiSkSurface, makeImageSnapshot),
                        JSI_EXPORT_FUNC(JsiSkSurface, flush),
                        JSI_EXPORT_FUNC(JsiSkSurface, dispose))

package/cpp/rnskia/RNSkPlatformContext.h

@@ -133,6 +133,19 @@ public:
    */
   virtual sk_sp<SkSurface> makeOffscreenSurface(int width, int height) = 0;
 
+  /**
+   * Creates an image from a native platform buffer.
+   * - On iOS, this is a `CMSampleBuffer`
+   * - On Android, this is a `AHardwareBuffer*`
+   * @param buffer The native platform buffer.
+   * @return sk_sp<SkImage>
+   */
+  virtual sk_sp<SkImage> makeImageFromPlatformBuffer(void *buffer) = 0;
+
+  virtual void releasePlatformBuffer(uint64_t pointer) = 0;
+
+  virtual uint64_t makePlatformBuffer(sk_sp<SkImage> image) = 0;
+
   /**
    * Return the Platform specific font manager
    */

package/ios/RNSkia-iOS/RNSkiOSPlatformContext.h

@@ -59,6 +59,12 @@ public:
 
   sk_sp<SkImage> takeScreenshotFromViewTag(size_t tag) override;
 
+  sk_sp<SkImage> makeImageFromPlatformBuffer(void *buffer) override;
+
+  uint64_t makePlatformBuffer(sk_sp<SkImage> image) override;
+
+  void releasePlatformBuffer(uint64_t pointer) override;
+
   virtual void performStreamOperation(
       const std::string &sourceUri,
       const std::function<void(std::unique_ptr<SkStreamAsset>)> &op) override;

package/ios/RNSkia-iOS/RNSkiOSPlatformContext.mm

@@ -1,5 +1,6 @@
 #include "RNSkiOSPlatformContext.h"
 
+#import <CoreMedia/CMSampleBuffer.h>
 #import <React/RCTUtils.h>
 #include <thread>
 #include <utility>
@@ -56,6 +57,89 @@ void RNSkiOSPlatformContext::performStreamOperation(
   std::thread(loader).detach();
 }
 
+void RNSkiOSPlatformContext::releasePlatformBuffer(uint64_t pointer) {
+  CMSampleBufferRef sampleBuffer = reinterpret_cast<CMSampleBufferRef>(pointer);
+  CVPixelBufferRef pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
+  if (sampleBuffer) {
+    CFRelease(sampleBuffer);
+  }
+  if (pixelBuffer) {
+    CFRelease(pixelBuffer);
+  }
+}
+
+uint64_t RNSkiOSPlatformContext::makePlatformBuffer(sk_sp<SkImage> image) {
+  auto bytesPerPixel = image->imageInfo().bytesPerPixel();
+  int bytesPerRow = image->width() * bytesPerPixel;
+  auto buf = SkData::MakeUninitialized(image->width() * image->height() *
+                                       bytesPerPixel);
+  SkImageInfo info = SkImageInfo::Make(image->width(), image->height(),
+                                       image->colorType(), image->alphaType());
+  image->readPixels(nullptr, info, const_cast<void *>(buf->data()), bytesPerRow,
+                    0, 0);
+  auto pixelData = const_cast<void *>(buf->data());
+
+  // Create a CVPixelBuffer from the raw pixel data
+  CVPixelBufferRef pixelBuffer = nullptr;
+  // OSType pixelFormatType = MapSkColorTypeToOSType(image->colorType());
+
+  // You will need to fill in the details for creating the pixel buffer
+  // CVPixelBufferCreateWithBytes or CVPixelBufferCreateWithPlanarBytes
+  // Create the CVPixelBuffer with the image data
+  void *context = static_cast<void *>(
+      new sk_sp<SkData>(buf)); // Create a copy for the context
+  CVReturn r = CVPixelBufferCreateWithBytes(
+      nullptr, // allocator
+      image->width(), image->height(), kCVPixelFormatType_32BGRA,
+      pixelData,                                         // pixel data
+      bytesPerRow,                                       // bytes per row
+      [](void *releaseRefCon, const void *baseAddress) { // release callback
+        auto buf = static_cast<sk_sp<SkData> *>(releaseRefCon);
+        buf->reset(); // This effectively calls unref on the SkData object
+        delete buf;   // Cleanup the dynamically allocated context
+      },
+      context,     // release callback context
+      nullptr,     // pixel buffer attributes
+      &pixelBuffer // the newly created pixel buffer
+  );
+
+  if (r != kCVReturnSuccess) {
+    return 0; // or handle error appropriately
+  }
+
+  // Wrap the CVPixelBuffer in a CMSampleBuffer
+  CMSampleBufferRef sampleBuffer = nullptr;
+
+  CMFormatDescriptionRef formatDescription = nullptr;
+  CMVideoFormatDescriptionCreateForImageBuffer(kCFAllocatorDefault, pixelBuffer,
+                                               &formatDescription);
+
+  // Assuming no specific timing is required, we initialize the timing info to
+  // zero.
+  CMSampleTimingInfo timingInfo = {0};
+  timingInfo.duration = kCMTimeInvalid; // Indicate an unknown duration.
+  timingInfo.presentationTimeStamp = kCMTimeZero; // Start at time zero.
+  timingInfo.decodeTimeStamp = kCMTimeInvalid;    // No specific decode time.
+
+  // Create the sample buffer.
+  OSStatus status = CMSampleBufferCreateReadyWithImageBuffer(
+      kCFAllocatorDefault, pixelBuffer, formatDescription, &timingInfo,
+      &sampleBuffer);
+
+  if (status != noErr) {
+    if (formatDescription) {
+      CFRelease(formatDescription);
+    }
+    if (pixelBuffer) {
+      CFRelease(pixelBuffer);
+    }
+    return 0;
+  }
+
+  // Return sampleBuffer casted to uint64_t
+  return reinterpret_cast<uint64_t>(sampleBuffer);
+}
+
 void RNSkiOSPlatformContext::raiseError(const std::exception &err) {
   RCTFatal(RCTErrorWithMessage([NSString stringWithUTF8String:err.what()]));
 }
@@ -65,6 +149,37 @@ sk_sp<SkSurface> RNSkiOSPlatformContext::makeOffscreenSurface(int width,
   return SkiaMetalSurfaceFactory::makeOffscreenSurface(width, height);
 }
 
+sk_sp<SkImage>
+RNSkiOSPlatformContext::makeImageFromPlatformBuffer(void *buffer) {
+  CMSampleBufferRef sampleBuffer = (CMSampleBufferRef)buffer;
+  // DO the CPU transfer (debugging only)
+  //  Step 1: Extract the CVPixelBufferRef from the CMSampleBufferRef
+  CVPixelBufferRef pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
+
+  // Step 2: Lock the pixel buffer to access the raw pixel data
+  CVPixelBufferLockBaseAddress(pixelBuffer, 0);
+
+  // Step 3: Get information about the image
+  void *baseAddress = CVPixelBufferGetBaseAddress(pixelBuffer);
+  size_t width = CVPixelBufferGetWidth(pixelBuffer);
+  size_t height = CVPixelBufferGetHeight(pixelBuffer);
+  size_t bytesPerRow = CVPixelBufferGetBytesPerRow(pixelBuffer);
+
+  // Assuming the pixel format is 32BGRA, which is common for iOS video frames.
+  // You might need to adjust this based on the actual pixel format.
+  SkImageInfo info = SkImageInfo::Make(width, height, kRGBA_8888_SkColorType,
+                                       kUnpremul_SkAlphaType);
+
+  // Step 4: Create an SkImage from the pixel buffer
+  sk_sp<SkData> data =
+      SkData::MakeWithoutCopy(baseAddress, height * bytesPerRow);
+  sk_sp<SkImage> image = SkImages::RasterFromData(info, data, bytesPerRow);
+  auto texture = SkiaMetalSurfaceFactory::makeTextureFromImage(image);
+  // Step 5: Unlock the pixel buffer
+  CVPixelBufferUnlockBaseAddress(pixelBuffer, 0);
+  return texture;
+}
+
 sk_sp<SkFontMgr> RNSkiOSPlatformContext::createFontMgr() {
   return SkFontMgr_New_CoreText(nullptr);
 }

package/ios/RNSkia-iOS/SkiaMetalSurfaceFactory.h

@@ -4,6 +4,8 @@
 #pragma clang diagnostic ignored "-Wdocumentation"
 
 #import "include/core/SkCanvas.h"
+#import <CoreMedia/CMSampleBuffer.h>
+#import <CoreVideo/CVMetalTextureCache.h>
 #import <include/gpu/GrDirectContext.h>
 
 #pragma clang diagnostic pop
@@ -24,6 +26,8 @@ public:
                                               int height);
   static sk_sp<SkSurface> makeOffscreenSurface(int width, int height);
 
+  static sk_sp<SkImage> makeTextureFromImage(sk_sp<SkImage> image);
+
 private:
   static id<MTLDevice> device;
   static bool

package/ios/RNSkia-iOS/SkiaMetalSurfaceFactory.mm

@@ -11,7 +11,9 @@
 
 #import <include/gpu/GrBackendSurface.h>
 #import <include/gpu/GrDirectContext.h>
+#import <include/gpu/ganesh/SkImageGanesh.h>
 #import <include/gpu/ganesh/SkSurfaceGanesh.h>
+#import <include/gpu/ganesh/mtl/SkSurfaceMetal.h>
 
 #pragma clang diagnostic pop
 
@@ -103,3 +105,13 @@ sk_sp<SkSurface> SkiaMetalSurfaceFactory::makeOffscreenSurface(int width,
 
   return surface;
 }
+
+sk_sp<SkImage>
+SkiaMetalSurfaceFactory::makeTextureFromImage(sk_sp<SkImage> image) {
+  if (!SkiaMetalSurfaceFactory::createSkiaDirectContextIfNecessary(
+          &ThreadContextHolder::ThreadSkiaMetalContext)) {
+    throw std::runtime_error("Failed to create Skia Context for this Thread!");
+  }
+  return SkImages::TextureFromImage(
+      ThreadContextHolder::ThreadSkiaMetalContext.skContext.get(), image);
+}

package/lib/commonjs/external/reanimated/textures.js

@@ -14,9 +14,18 @@ const createTexture = (texture, picture, size) => {
   texture.value = (0, _Offscreen.drawAsImageFromPicture)(picture, size);
 };
 const useTexture = (element, size) => {
+  const {
+    width,
+    height
+  } = size;
   const picture = (0, _react.useMemo)(() => {
-    return (0, _Offscreen.drawAsPicture)(element);
-  }, [element]);
+    return (0, _Offscreen.drawAsPicture)(element, {
+      x: 0,
+      y: 0,
+      width,
+      height
+    });
+  }, [element, width, height]);
   return usePictureAsTexture(picture, size);
 };
 exports.useTexture = useTexture;

package/lib/commonjs/external/reanimated/textures.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_Offscreen","_skia","_moduleWrapper","createTexture","texture","picture","size","value","drawAsImageFromPicture","useTexture","element","useMemo","drawAsPicture","usePictureAsTexture","exports","useTextureAsValue","console","warn","useTextureValueFromPicture","useSharedValue","useEffect","runOnUI","useImageAsTexture","source","image","useImage","width","height","recorder","Skia","PictureRecorder","canvas","beginRecording","x","y","drawImage","finishRecordingAsPicture"],"sources":["textures.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ReactElement } from \"react\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n  DataSourceParam,\n  SkImage,\n  SkPicture,\n  SkSize,\n} from \"../../skia/types\";\nimport {\n  drawAsImageFromPicture,\n  drawAsPicture,\n} from \"../../renderer/Offscreen\";\nimport { Skia, useImage } from \"../../skia\";\n\nimport { runOnUI, useSharedValue } from \"./moduleWrapper\";\n\nconst createTexture = (\n  texture: SharedValue<SkImage | null>,\n  picture: SkPicture,\n  size: SkSize\n) => {\n  \"worklet\";\n  texture.value = drawAsImageFromPicture(picture, size);\n};\n\nexport const useTexture = (element: ReactElement, size: SkSize) => {\n  const picture = useMemo(() => {\n    return drawAsPicture(element);\n  }, [element]);\n  return usePictureAsTexture(picture, size);\n};\n\nexport const useTextureAsValue = (element: ReactElement, size: SkSize) => {\n  console.warn(\"useTextureAsValue has been renamed to use useTexture\");\n  return useTexture(element, size);\n};\n\nexport const useTextureValueFromPicture = (\n  picture: SkPicture | null,\n  size: SkSize\n) => {\n  console.warn(\n    \"useTextureValueFromPicture has been renamed to use usePictureAsTexture\"\n  );\n  return usePictureAsTexture(picture, size);\n};\n\nexport const usePictureAsTexture = (\n  picture: SkPicture | null,\n  size: SkSize\n) => {\n  const texture = useSharedValue<SkImage | null>(null);\n  useEffect(() => {\n    if (picture !== null) {\n      runOnUI(createTexture)(texture, picture, size);\n    }\n  }, [texture, picture, size]);\n  return texture;\n};\n\nexport const useImageAsTexture = (source: DataSourceParam) => {\n  const image = useImage(source);\n  const size = useMemo(() => {\n    if (image) {\n      return { width: image.width(), height: image.height() };\n    }\n    return { width: 0, height: 0 };\n  }, [image]);\n  const picture = useMemo(() => {\n    if (image) {\n      const recorder = Skia.PictureRecorder();\n      const canvas = recorder.beginRecording({\n        x: 0,\n        y: 0,\n        width: size.width,\n        height: size.height,\n      });\n      canvas.drawImage(image, 0, 0);\n      return recorder.finishRecordingAsPicture();\n    } else {\n      return null;\n    }\n  }, [size, image]);\n  return usePictureAsTexture(picture, size);\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","require","_Offscreen","_skia","_moduleWrapper","createTexture","texture","picture","size","value","drawAsImageFromPicture","useTexture","element","width","height","useMemo","drawAsPicture","x","y","usePictureAsTexture","exports","useTextureAsValue","console","warn","useTextureValueFromPicture","useSharedValue","useEffect","runOnUI","useImageAsTexture","source","image","useImage","recorder","Skia","PictureRecorder","canvas","beginRecording","drawImage","finishRecordingAsPicture"],"sources":["textures.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ReactElement } from \"react\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n  DataSourceParam,\n  SkImage,\n  SkPicture,\n  SkSize,\n} from \"../../skia/types\";\nimport {\n  drawAsImageFromPicture,\n  drawAsPicture,\n} from \"../../renderer/Offscreen\";\nimport { Skia, useImage } from \"../../skia\";\n\nimport { runOnUI, useSharedValue } from \"./moduleWrapper\";\n\nconst createTexture = (\n  texture: SharedValue<SkImage | null>,\n  picture: SkPicture,\n  size: SkSize\n) => {\n  \"worklet\";\n  texture.value = drawAsImageFromPicture(picture, size);\n};\n\nexport const useTexture = (element: ReactElement, size: SkSize) => {\n  const { width, height } = size;\n  const picture = useMemo(() => {\n    return drawAsPicture(element, {\n      x: 0,\n      y: 0,\n      width,\n      height,\n    });\n  }, [element, width, height]);\n  return usePictureAsTexture(picture, size);\n};\n\nexport const useTextureAsValue = (element: ReactElement, size: SkSize) => {\n  console.warn(\"useTextureAsValue has been renamed to use useTexture\");\n  return useTexture(element, size);\n};\n\nexport const useTextureValueFromPicture = (\n  picture: SkPicture | null,\n  size: SkSize\n) => {\n  console.warn(\n    \"useTextureValueFromPicture has been renamed to use usePictureAsTexture\"\n  );\n  return usePictureAsTexture(picture, size);\n};\n\nexport const usePictureAsTexture = (\n  picture: SkPicture | null,\n  size: SkSize\n) => {\n  const texture = useSharedValue<SkImage | null>(null);\n  useEffect(() => {\n    if (picture !== null) {\n      runOnUI(createTexture)(texture, picture, size);\n    }\n  }, [texture, picture, size]);\n  return texture;\n};\n\nexport const useImageAsTexture = (source: DataSourceParam) => {\n  const image = useImage(source);\n  const size = useMemo(() => {\n    if (image) {\n      return { width: image.width(), height: image.height() };\n    }\n    return { width: 0, height: 0 };\n  }, [image]);\n  const picture = useMemo(() => {\n    if (image) {\n      const recorder = Skia.PictureRecorder();\n      const canvas = recorder.beginRecording({\n        x: 0,\n        y: 0,\n        width: size.width,\n        height: size.height,\n      });\n      canvas.drawImage(image, 0, 0);\n      return recorder.finishRecordingAsPicture();\n    } else {\n      return null;\n    }\n  }, [size, image]);\n  return usePictureAsTexture(picture, size);\n};\n"],"mappings":"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"}

package/lib/commonjs/external/reanimated/useAnimatedImageValue.d.ts

@@ -1,2 +1,3 @@
+import { type SharedValue } from "react-native-reanimated";
 import type { DataSourceParam, SkImage } from "../../skia/types";
-export declare const useAnimatedImageValue: (source: DataSourceParam) => import("react-native-reanimated").SharedValue<SkImage | null>;
+export declare const useAnimatedImageValue: (source: DataSourceParam, paused?: SharedValue<boolean>) => SharedValue<SkImage | null>;