@shopify/react-native-skia 0.1.220 → 0.1.222

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

@@ -56,6 +56,9 @@ public:
   void surfaceSizeChanged(int width, int height) override {
     std::static_pointer_cast<RNSkOpenGLCanvasProvider>(T::getCanvasProvider())
         ->surfaceSizeChanged(width, height);
+    // This is only need for the first time to frame, this renderImmediate call
+    // will invoke updateTexImage for the previous frame
+    RNSkView::renderImmediate();
   }
 
   float getPixelDensity() override {

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

@@ -39,6 +39,7 @@ bool RNSkOpenGLCanvasProvider::renderToCanvas(
       if (!_surfaceHolder->makeCurrent()) {
         return false;
       }
+      _surfaceHolder->updateTexImage();
 
       // Draw into canvas using callback
       cb(surface->getCanvas());

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

@@ -187,7 +187,6 @@ public:
         RNSkLogger::logToConsole("eglMakeCurrent failed: %d\n", eglGetError());
         return false;
       }
-      return true;
     }
     return true;
   }

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

@@ -6,6 +6,8 @@
 #include <jni.h>
 
 #include <android/native_window_jni.h>
+#include <android/surface_texture.h>
+#include <android/surface_texture_jni.h>
 #include <condition_variable>
 #include <memory>
 #include <thread>
@@ -42,12 +44,34 @@ public:
  */
 class WindowSurfaceHolder {
 public:
-  WindowSurfaceHolder(jobject surface, int width, int height)
-      : _width(width), _height(height),
-        _window(ANativeWindow_fromSurface(facebook::jni::Environment::current(),
-                                          surface)) {}
+  WindowSurfaceHolder(jobject jSurfaceTexture, int width, int height)
+      : _width(width), _height(height) {
+    JNIEnv *env = facebook::jni::Environment::current();
+    _jSurfaceTexture = env->NewGlobalRef(jSurfaceTexture);
+    jclass surfaceClass = env->FindClass("android/view/Surface");
+    jmethodID surfaceConstructor = env->GetMethodID(
+        surfaceClass, "<init>", "(Landroid/graphics/SurfaceTexture;)V");
+    // Create a new Surface instance
+    jobject jSurface =
+        env->NewObject(surfaceClass, surfaceConstructor, jSurfaceTexture);
+
+    jclass surfaceTextureClass = env->GetObjectClass(_jSurfaceTexture);
+    _updateTexImageMethod =
+        env->GetMethodID(surfaceTextureClass, "updateTexImage", "()V");
+
+    // Acquire the native window from the Surface
+    _window = ANativeWindow_fromSurface(env, jSurface);
+    // Clean up local references
+    env->DeleteLocalRef(jSurface);
+    env->DeleteLocalRef(surfaceClass);
+    env->DeleteLocalRef(surfaceTextureClass);
+  }
 
-  ~WindowSurfaceHolder() { ANativeWindow_release(_window); }
+  ~WindowSurfaceHolder() {
+    JNIEnv *env = facebook::jni::Environment::current();
+    env->DeleteGlobalRef(_jSurfaceTexture);
+    ANativeWindow_release(_window);
+  }
 
   int getWidth() { return _width; }
   int getHeight() { return _height; }
@@ -57,6 +81,20 @@ public:
    */
   sk_sp<SkSurface> getSurface();
 
+  void updateTexImage() {
+    JNIEnv *env = facebook::jni::Environment::current();
+
+    // Call updateTexImage on the SurfaceTexture object
+    env->CallVoidMethod(_jSurfaceTexture, _updateTexImageMethod);
+
+    // Check for exceptions
+    if (env->ExceptionCheck()) {
+      RNSkLogger::logToConsole(
+          "updateTexImage() failed. The exception above can safely be ignored");
+      env->ExceptionClear();
+    }
+  }
+
   /**
    * Resizes the surface
    * @param width
@@ -92,9 +130,11 @@ public:
   }
 
 private:
-  ANativeWindow *_window = nullptr;
+  ANativeWindow *_window;
   sk_sp<SkSurface> _skSurface = nullptr;
+  jobject _jSurfaceTexture = nullptr;
   EGLSurface _glSurface = EGL_NO_SURFACE;
+  jmethodID _updateTexImageMethod = nullptr;
   int _width = 0;
   int _height = 0;
 };

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

@@ -52,13 +52,13 @@ public class PlatformContext {
         Choreographer.FrameCallback frameCallback = new Choreographer.FrameCallback() {
             @Override
             public void doFrame(long frameTimeNanos) {
+                if (_drawLoopActive) {
+                    Choreographer.getInstance().postFrameCallback(this);
+                }
                 if (_isPaused) {
                     return;
                 }
                 notifyDrawLoop();
-                if (_drawLoopActive) {
-                    postFrameLoop();
-                }
             }
         };
         Choreographer.getInstance().postFrameCallback(frameCallback);

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

@@ -4,16 +4,11 @@ import android.content.Context;
 import android.graphics.SurfaceTexture;
 import android.util.Log;
 import android.view.MotionEvent;
-import android.view.Surface;
 import android.view.TextureView;
 
-import com.facebook.jni.annotations.DoNotStrip;
 import com.facebook.react.views.view.ReactViewGroup;
 
 public abstract class SkiaBaseView extends ReactViewGroup implements TextureView.SurfaceTextureListener {
-
-    @DoNotStrip
-    private Surface mSurface;
     private TextureView mTexture;
 
     private String tag = "SkiaView";
@@ -30,12 +25,8 @@ public abstract class SkiaBaseView extends ReactViewGroup implements TextureView
     }
 
     public void destroySurface() {
-        if (mSurface != null) {
-            Log.i(tag, "destroySurface");
-            surfaceDestroyed();
-            mSurface.release();
-            mSurface = null;
-        }
+        Log.i(tag, "destroySurface");
+        surfaceDestroyed();
     }
 
     private void createSurfaceTexture() {
@@ -138,8 +129,7 @@ public abstract class SkiaBaseView extends ReactViewGroup implements TextureView
     @Override
     public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) {
         Log.i(tag, "onSurfaceTextureAvailable " + width + "/" + height);
-        mSurface = new Surface(surface);
-        surfaceAvailable(mSurface, width, height);
+        surfaceAvailable(surface, width, height);
     }
 
     @Override
@@ -153,6 +143,10 @@ public abstract class SkiaBaseView extends ReactViewGroup implements TextureView
         Log.i(tag, "onSurfaceTextureDestroyed");
         // https://developer.android.com/reference/android/view/TextureView.SurfaceTextureListener#onSurfaceTextureDestroyed(android.graphics.SurfaceTexture)
         destroySurface();
+        // Because of React Native Screens (which dettach the view), we always keep the surface alive.
+        // If not, Texture view will recreate the texture surface by itself and
+        // we will lose the fast first time to frame.
+        // We only delete the surface when the view is dropped (destroySurface invoked by SkiaBaseViewManager);
         createSurfaceTexture();
         return false;
     }
@@ -181,4 +175,4 @@ public abstract class SkiaBaseView extends ReactViewGroup implements TextureView
     protected abstract void registerView(int nativeId);
 
     protected abstract void unregisterView();
-}
+}

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

@@ -1,11 +1,10 @@
 package com.shopify.reactnative.skia;
 
-import static android.view.View.VISIBLE;
-
 import android.graphics.Bitmap;
 import android.graphics.Canvas;
 import android.graphics.Matrix;
 import android.graphics.Paint;
+import android.graphics.drawable.Drawable;
 import android.os.Build;
 import android.os.Handler;
 import android.os.Looper;
@@ -15,14 +14,12 @@ import android.view.SurfaceView;
 import android.view.TextureView;
 import android.view.View;
 import android.view.ViewGroup;
-
 import androidx.annotation.NonNull;
-
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.UIManagerModule;
+import com.facebook.react.views.view.ReactViewGroup;
 
-import java.util.ArrayList;
-import java.util.List;
+import java.lang.reflect.Method;
 import java.util.concurrent.CountDownLatch;
 import java.util.concurrent.TimeUnit;
 
@@ -42,143 +39,134 @@ public class ViewScreenshotService {
             return null;
         }
 
-        // Measure and get size of view
         int width = view.getWidth();
         int height = view.getHeight();
-
         if (width <= 0 || height <= 0) {
             return null;
         }
 
-        // The following code is taken from react-native-view-shot to be able to handle and
-        // correctly render all kinds of views, also including TextureViews and SurfaceViews
         Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
+        final Canvas canvas = new Canvas(bitmap);
+        final Paint paint = createPaint();
+
+        canvas.save();
+        canvas.translate(-view.getLeft(), -view.getTop());
+        renderViewToCanvas(canvas, view, paint, 1.0f); // Initial opacity
+        canvas.restore();
+
+        return bitmap;
+    }
 
+    private static Paint createPaint() {
         final Paint paint = new Paint();
         paint.setAntiAlias(true);
         paint.setFilterBitmap(true);
         paint.setDither(true);
-
-        // Render the main view and its children
-        final Canvas canvas = new Canvas(bitmap);
-
-        // Renders view with child views to canvas
-        renderViewToCanvas(canvas, view, paint);
-
-        return bitmap;
+        return paint;
     }
 
-    private static void renderViewToCanvas(Canvas canvas, View view, Paint paint) {
-        // Apply transformations for the current view
+    private static void renderViewToCanvas(Canvas canvas, View view, Paint paint, float parentOpacity) {
+        float combinedOpacity = parentOpacity * view.getAlpha();
         canvas.save();
         applyTransformations(canvas, view);
 
-        // Draw children if the view has children
-        if ((view instanceof ViewGroup)) {
-            // Draw children
+        if (view instanceof ViewGroup) {
             ViewGroup group = (ViewGroup) view;
+            drawBackgroundIfPresent(canvas, view, combinedOpacity);
+            drawChildren(canvas, group, paint, combinedOpacity);
+        } else {
+            drawView(canvas, view, paint, combinedOpacity);
+        }
 
-            // Hide visible children - this needs to be done because view.draw(canvas)
-            // will render all visible non-texture/surface views directly - causing
-            // views to be rendered twice - once by view.draw() and once when we
-            // enumerate children. We therefore need to turn off rendering of visible
-            // children before we call view.draw:
-            List<View> visibleChildren = new ArrayList<>();
-            for (int i = 0; i < group.getChildCount(); i++) {
-                View child = group.getChildAt(i);
-                if (child.getVisibility() == VISIBLE) {
-                    visibleChildren.add(child);
-                    child.setVisibility(View.INVISIBLE);
-                }
-            }
+        canvas.restore();
+    }
 
-            // Draw ourselves
-            canvas.saveLayerAlpha(null, Math.round(view.getAlpha() * 255));
-            view.draw(canvas);
+    private static void drawBackgroundIfPresent(Canvas canvas, View view, float opacity) {
+        Drawable bg = view.getBackground();
+        if (bg != null) {
+            canvas.saveLayerAlpha(null, Math.round(opacity * 255));
+            bg.draw(canvas);
             canvas.restore();
+        }
+    }
 
-            // Enable children again
-            for (int i = 0; i < visibleChildren.size(); i++) {
-                View child = visibleChildren.get(i);
-                child.setVisibility(VISIBLE);
+    private static void drawChildren(Canvas canvas, ViewGroup group, Paint paint, float parentOpacity) {
+        // Handle clipping for ReactViewGroup
+        if (group instanceof ReactViewGroup) {
+            try {
+                Class[] cArg = new Class[1];
+                cArg[0] = Canvas.class;
+                Method method = ReactViewGroup.class.getDeclaredMethod("dispatchOverflowDraw", cArg);
+                method.setAccessible(true);
+                method.invoke(group, canvas);
+            } catch (Exception e) {
+                Log.e(TAG, "couldn't invoke dispatchOverflowDraw() on ReactViewGroup", e);
             }
+        }
+        for (int i = 0; i < group.getChildCount(); i++) {
+            View child = group.getChildAt(i);
+            if (child.getVisibility() != View.VISIBLE) continue;
+
+            if (child instanceof TextureView) {
+                drawTextureView(canvas, (TextureView) child, paint, parentOpacity);
+            } else if (child instanceof SurfaceView) {
+                drawSurfaceView(canvas, (SurfaceView) child, paint, parentOpacity);
+            } else {
+                renderViewToCanvas(canvas, child, paint, parentOpacity);
+            }
+        }
+    }
 
-            // Draw children
-            for (int i = 0; i < group.getChildCount(); i++) {
-                View child = group.getChildAt(i);
-
-                // skip all invisible to user child views
-                if (child.getVisibility() != VISIBLE) continue;
+    private static void drawView(Canvas canvas, View view, Paint paint, float opacity) {
+        canvas.saveLayerAlpha(null, Math.round(opacity * 255));
+        view.draw(canvas);
+        canvas.restore();
+    }
 
-                // skip any child that we don't know how to process
-                if (child instanceof TextureView) {
-                    final TextureView tvChild = (TextureView) child;
-                    tvChild.setOpaque(false); // <-- switch off background fill
+    private static void drawTextureView(Canvas canvas, TextureView tv, Paint paint, float opacity) {
+        tv.setOpaque(false);
+        Bitmap childBitmapBuffer = tv.getBitmap(Bitmap.createBitmap(tv.getWidth(), tv.getHeight(), Bitmap.Config.ARGB_8888));
+        canvas.save();
+        applyTransformations(canvas, tv);
+        paint.setAlpha(Math.round(opacity * 255)); // Set paint alpha based on opacity
+        canvas.drawBitmap(childBitmapBuffer, 0, 0, paint);
+        canvas.restore();
+    }
 
+    private static void drawSurfaceView(Canvas canvas, SurfaceView sv, Paint paint, float opacity) {
+        final CountDownLatch latch = new CountDownLatch(1);
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
+            Bitmap childBitmapBuffer = Bitmap.createBitmap(sv.getWidth(), sv.getHeight(), Bitmap.Config.ARGB_8888);
+            try {
+                PixelCopy.request(sv, childBitmapBuffer, copyResult -> {
                     canvas.save();
-                    applyTransformations(canvas, child);
-
-                    // TextureView should use bitmaps with matching size,
-                    // otherwise content of the TextureView will be scaled to provided bitmap dimensions
-                    final Bitmap childBitmapBuffer = tvChild.getBitmap(Bitmap.createBitmap(child.getWidth(), child.getHeight(), Bitmap.Config.ARGB_8888));
+                    applyTransformations(canvas, sv);
+                    paint.setAlpha(Math.round(opacity * 255)); // Set paint alpha based on opacity
                     canvas.drawBitmap(childBitmapBuffer, 0, 0, paint);
-
                     canvas.restore();
-
-                } else if (child instanceof SurfaceView) {
-                    final SurfaceView svChild = (SurfaceView) child;
-                    final CountDownLatch latch = new CountDownLatch(1);
-
-                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
-                        final Bitmap childBitmapBuffer = Bitmap.createBitmap(child.getWidth(), child.getHeight(), Bitmap.Config.ARGB_8888);
-                        try {
-                            PixelCopy.request(svChild, childBitmapBuffer, copyResult -> {
-                                canvas.save();
-                                applyTransformations(canvas, child);
-                                canvas.drawBitmap(childBitmapBuffer, 0, 0, paint);
-                                canvas.restore();
-                                latch.countDown();
-                            }, new Handler(Looper.getMainLooper()));
-                            latch.await(SURFACE_VIEW_READ_PIXELS_TIMEOUT, TimeUnit.SECONDS);
-                        } catch (Exception e) {
-                            Log.e(TAG, "Cannot PixelCopy for " + svChild, e);
-                        }
-                    } else {
-                        Bitmap cache = svChild.getDrawingCache();
-                        if (cache != null) {
-                            canvas.save();
-                            applyTransformations(canvas, child);
-                            canvas.drawBitmap(svChild.getDrawingCache(), 0, 0, paint);
-                            canvas.restore();
-                        }
-                    }
-                } else {
-                    // Regular views needs to be rendered again to ensure correct z-index
-                    // order with texture views and surface views.
-                    renderViewToCanvas(canvas, child, paint);
-                }
+                    latch.countDown();
+                }, new Handler(Looper.getMainLooper()));
+                latch.await(SURFACE_VIEW_READ_PIXELS_TIMEOUT, TimeUnit.SECONDS);
+            } catch (Exception e) {
+                Log.e(TAG, "Cannot PixelCopy for " + sv, e);
             }
         } else {
-            // Draw ourselves
-            view.draw(canvas);
+            Bitmap cache = sv.getDrawingCache();
+            if (cache != null) {
+                canvas.save();
+                applyTransformations(canvas, sv);
+                paint.setAlpha(Math.round(opacity * 255)); // Set paint alpha based on opacity
+                canvas.drawBitmap(cache, 0, 0, paint);
+                canvas.restore();
+            }
         }
-
-        // Restore canvas
-        canvas.restore();
     }
 
     @NonNull
     private static void applyTransformations(final Canvas c, @NonNull final View view) {
-        // Get the transformation matrix of the view
         final Matrix matrix = view.getMatrix();
-
-        // Create a new matrix for translation
         final Matrix translateMatrix = new Matrix();
-        final float dx = view.getLeft() + view.getPaddingLeft();
-        final float dy = view.getTop() + view.getPaddingTop();
-        translateMatrix.setTranslate(dx, dy);
-
-        // Pre-concatenate the current matrix of the canvas with the translation and transformation matrices of the view
+        translateMatrix.setTranslate(view.getLeft() + view.getPaddingLeft(), view.getTop() + view.getPaddingTop());
         c.concat(translateMatrix);
         c.concat(matrix);
     }

package/cpp/api/JsiSkCanvas.h

@@ -7,6 +7,7 @@
 #include "JsiSkFont.h"
 #include "JsiSkHostObjects.h"
 #include "JsiSkImage.h"
+#include "JsiSkImageInfo.h"
 #include "JsiSkMatrix.h"
 #include "JsiSkPaint.h"
 #include "JsiSkPath.h"
@@ -17,6 +18,8 @@
 #include "JsiSkTextBlob.h"
 #include "JsiSkVertices.h"
 
+#include "RNSkTypedArray.h"
+
 #include <jsi/jsi.h>
 
 #pragma clang diagnostic push
@@ -491,6 +494,39 @@ public:
     return jsi::Value::undefined();
   }
 
+  JSI_HOST_FUNCTION(readPixels) {
+    auto srcX = static_cast<int>(arguments[0].asNumber());
+    auto srcY = static_cast<int>(arguments[1].asNumber());
+    auto info = JsiSkImageInfo::fromValue(runtime, arguments[2]);
+    if (!info) {
+      return jsi::Value::null();
+    }
+    size_t bytesPerRow = 0;
+    if (count > 4 && !arguments[4].isUndefined()) {
+      bytesPerRow = static_cast<size_t>(arguments[4].asNumber());
+    } else {
+      bytesPerRow = info->minRowBytes();
+    }
+    auto dest =
+        count > 3
+            ? RNSkTypedArray::getTypedArray(runtime, arguments[3], *info)
+            : RNSkTypedArray::getTypedArray(runtime, jsi::Value::null(), *info);
+    if (!dest.isObject()) {
+      return jsi::Value::null();
+    }
+    jsi::ArrayBuffer buffer =
+        dest.asObject(runtime)
+            .getProperty(runtime, jsi::PropNameID::forAscii(runtime, "buffer"))
+            .asObject(runtime)
+            .getArrayBuffer(runtime);
+    auto bfrPtr = reinterpret_cast<void *>(buffer.data(runtime));
+
+    if (!_canvas->readPixels(*info, bfrPtr, bytesPerRow, srcX, srcY)) {
+      return jsi::Value::null();
+    }
+    return std::move(dest);
+  }
+
   JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkCanvas, drawPaint),
                        JSI_EXPORT_FUNC(JsiSkCanvas, drawLine),
                        JSI_EXPORT_FUNC(JsiSkCanvas, drawRect),
@@ -529,7 +565,8 @@ public:
                        JSI_EXPORT_FUNC(JsiSkCanvas, drawColor),
                        JSI_EXPORT_FUNC(JsiSkCanvas, clear),
                        JSI_EXPORT_FUNC(JsiSkCanvas, concat),
-                       JSI_EXPORT_FUNC(JsiSkCanvas, drawPicture))
+                       JSI_EXPORT_FUNC(JsiSkCanvas, drawPicture),
+                       JSI_EXPORT_FUNC(JsiSkCanvas, readPixels))
 
   explicit JsiSkCanvas(std::shared_ptr<RNSkPlatformContext> context)
       : JsiSkHostObject(std::move(context)) {}

package/cpp/api/JsiSkImage.h

@@ -5,9 +5,12 @@
 #include <utility>
 
 #include "JsiSkHostObjects.h"
+#include "JsiSkImageInfo.h"
 #include "JsiSkMatrix.h"
 #include "JsiSkShader.h"
 
+#include "RNSkTypedArray.h"
+
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
@@ -17,6 +20,7 @@
 #include "include/codec/SkEncodedImageFormat.h"
 #include "include/encode/SkJpegEncoder.h"
 #include "include/encode/SkPngEncoder.h"
+#include "include/encode/SkWebpEncoder.h"
 
 #pragma clang diagnostic pop
 
@@ -34,6 +38,11 @@ public:
     return static_cast<double>(getObject()->height());
   }
 
+  JSI_HOST_FUNCTION(getImageInfo) {
+    return JsiSkImageInfo::toValue(runtime, getContext(),
+                                   getObject()->imageInfo());
+  }
+
   JSI_HOST_FUNCTION(makeShaderOptions) {
     auto tmx = (SkTileMode)arguments[0].asNumber();
     auto tmy = (SkTileMode)arguments[1].asNumber();
@@ -70,20 +79,34 @@ public:
         count >= 1 ? static_cast<SkEncodedImageFormat>(arguments[0].asNumber())
                    : SkEncodedImageFormat::kPNG;
 
-    auto quality = count == 2 ? arguments[1].asNumber() : 100.0;
+    auto quality = (count >= 2 && arguments[1].isNumber())
+                       ? arguments[1].asNumber()
+                       : 100.0;
     auto image = getObject();
     if (image->isTextureBacked()) {
       image = image->makeNonTextureImage();
     }
     sk_sp<SkData> data;
+
     if (format == SkEncodedImageFormat::kJPEG) {
       SkJpegEncoder::Options options;
       options.fQuality = quality;
       data = SkJpegEncoder::Encode(nullptr, image.get(), options);
+    } else if (format == SkEncodedImageFormat::kWEBP) {
+      SkWebpEncoder::Options options;
+      if (quality >= 100) {
+        options.fCompression = SkWebpEncoder::Compression::kLossless;
+        options.fQuality = 75; // This is effort to compress
+      } else {
+        options.fCompression = SkWebpEncoder::Compression::kLossy;
+        options.fQuality = quality;
+      }
+      data = SkWebpEncoder::Encode(nullptr, image.get(), options);
     } else {
       SkPngEncoder::Options options;
       data = SkPngEncoder::Encode(nullptr, image.get(), options);
     }
+
     return data;
   }
 
@@ -117,6 +140,46 @@ public:
     return jsi::String::createFromAscii(runtime, buffer);
   }
 
+  JSI_HOST_FUNCTION(readPixels) {
+    int srcX = 0;
+    int srcY = 0;
+    if (count > 0 && !arguments[0].isUndefined()) {
+      srcX = static_cast<int>(arguments[0].asNumber());
+    }
+    if (count > 1 && !arguments[1].isUndefined()) {
+      srcY = static_cast<int>(arguments[1].asNumber());
+    }
+    SkImageInfo info =
+        (count > 2 && !arguments[2].isUndefined())
+            ? *JsiSkImageInfo::fromValue(runtime, arguments[2])
+            : SkImageInfo::MakeN32(getObject()->width(), getObject()->height(),
+                                   getObject()->imageInfo().alphaType());
+    size_t bytesPerRow = 0;
+    if (count > 4 && !arguments[4].isUndefined()) {
+      bytesPerRow = static_cast<size_t>(arguments[4].asNumber());
+    } else {
+      bytesPerRow = info.minRowBytes();
+    }
+    auto dest =
+        count > 3
+            ? RNSkTypedArray::getTypedArray(runtime, arguments[3], info)
+            : RNSkTypedArray::getTypedArray(runtime, jsi::Value::null(), info);
+    if (!dest.isObject()) {
+      return jsi::Value::null();
+    }
+    jsi::ArrayBuffer buffer =
+        dest.asObject(runtime)
+            .getProperty(runtime, jsi::PropNameID::forAscii(runtime, "buffer"))
+            .asObject(runtime)
+            .getArrayBuffer(runtime);
+    auto bfrPtr = reinterpret_cast<void *>(buffer.data(runtime));
+
+    if (!getObject()->readPixels(info, bfrPtr, bytesPerRow, srcX, srcY)) {
+      return jsi::Value::null();
+    }
+    return std::move(dest);
+  }
+
   JSI_HOST_FUNCTION(makeNonTextureImage) {
     auto image = getObject()->makeNonTextureImage();
     return jsi::Object::createFromHostObject(
@@ -127,10 +190,12 @@ public:
 
   JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkImage, width),
                        JSI_EXPORT_FUNC(JsiSkImage, height),
+                       JSI_EXPORT_FUNC(JsiSkImage, getImageInfo),
                        JSI_EXPORT_FUNC(JsiSkImage, makeShaderOptions),
                        JSI_EXPORT_FUNC(JsiSkImage, makeShaderCubic),
                        JSI_EXPORT_FUNC(JsiSkImage, encodeToBytes),
                        JSI_EXPORT_FUNC(JsiSkImage, encodeToBase64),
+                       JSI_EXPORT_FUNC(JsiSkImage, readPixels),
                        JSI_EXPORT_FUNC(JsiSkImage, makeNonTextureImage),
                        JSI_EXPORT_FUNC(JsiSkImage, dispose))
 

package/cpp/api/JsiSkImageInfo.h

@@ -56,5 +56,24 @@ public:
         runtime,
         std::make_shared<JsiSkImageInfo>(std::move(context), imageInfo));
   }
+
+  JSI_PROPERTY_GET(width) { return static_cast<double>(getObject()->width()); }
+  JSI_PROPERTY_GET(height) {
+    return static_cast<double>(getObject()->height());
+  }
+  JSI_PROPERTY_GET(colorType) {
+    return static_cast<double>(getObject()->colorType());
+  }
+  JSI_PROPERTY_GET(alphaType) {
+    return static_cast<double>(getObject()->alphaType());
+  }
+
+  JSI_API_TYPENAME(ImageInfo);
+
+  JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(JsiSkImageInfo, width),
+                              JSI_EXPORT_PROP_GET(JsiSkImageInfo, height),
+                              JSI_EXPORT_PROP_GET(JsiSkImageInfo, colorType),
+                              JSI_EXPORT_PROP_GET(JsiSkImageInfo, alphaType),
+                              JSI_EXPORT_PROP_GET(JsiSkImageInfo, __typename__))
 };
 } // namespace RNSkia