@shopify/react-native-skia 0.1.200 → 0.1.202

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

@@ -2,14 +2,13 @@ package com.shopify.reactnative.skia;
 
 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.uimanager.PointerEvents;
 import com.facebook.react.views.view.ReactViewGroup;
-
 public abstract class SkiaBaseView extends ReactViewGroup implements TextureView.SurfaceTextureListener {
 
     @DoNotStrip
@@ -18,12 +17,43 @@ public abstract class SkiaBaseView extends ReactViewGroup implements TextureView
 
     public SkiaBaseView(Context context) {
         super(context);
+        // TODO: Remove if we find another solution for first frame rendering
+        //setWillNotDraw(!shouldRenderFirstFrameAsBitmap());
         mTexture = new TextureView(context);
         mTexture.setSurfaceTextureListener(this);
         mTexture.setOpaque(false);
         addView(mTexture);
     }
 
+    /*@Override
+    TODO: Remove if we find another solution for first frame rendering
+    protected void onDraw(Canvas canvas) {
+        super.onDraw(canvas);
+
+        // If we haven't got a surface yet, let's ask the view to
+        // draw into a bitmap and then render the bitmap. This method
+        // is typically only called once - for the first frame, and
+        // then the surface will be available and all rendering will
+        // be done directly to the surface itself.
+        if (shouldRenderFirstFrameAsBitmap() && mSurface == null) {
+            int width = getWidth();
+            int height = getHeight();
+
+            if (width > 0 && height > 0) {
+                Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
+                Bitmap result = (Bitmap) renderToBitmap(bitmap, width, height);
+
+                canvas.drawBitmap(
+                        result,
+                        new Rect(0, 0, width, height),
+                        new Rect(0, 0, width, height),
+                        null);
+
+                bitmap.recycle();
+            }
+        }
+    }*/
+
     @Override
     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
         super.onLayout(changed, left, top, right, bottom);
@@ -102,28 +132,53 @@ public abstract class SkiaBaseView extends ReactViewGroup implements TextureView
 
     @Override
     public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) {
+        Log.i("SkiaBaseView", "onSurfaceTextureAvailable " + width + "/" + height);
         mSurface = new Surface(surface);
         surfaceAvailable(mSurface, width, height);
+
+        /*
+        TODO: Remove if we find another solution for first frame rendering
+        // Clear rendered bitmap when the surface texture has rendered
+        // We'll post a message to the main loop asking to invalidate
+        if (shouldRenderFirstFrameAsBitmap()) {
+            postUpdate(new AtomicInteger());
+        }*/
     }
 
+    /**
+     * This method is a way for us to clear the bitmap rendered on the first frame
+     * after at least 16 frames have passed - to avoid seeing blinks on the screen caused by
+     * TextureView frame sync issues. This is a hack to avoid those pesky blinks. Have no
+     * idea on how to sync the TextureView OpenGL updates.
+     * @param counter
+     */
+    /*
+    TODO: Remove if we find another solution for first frame rendering
+    void postUpdate(AtomicInteger counter) {
+        counter.getAndIncrement();
+        if (counter.get() > 16) {
+            invalidate();
+        } else {
+            this.post(() -> {
+                postUpdate(counter);
+            });
+        }
+    }*/
+
     @Override
     public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {
+        Log.i("SkiaBaseView", "onSurfaceTextureSizeChanged " + width + "/" + height);
         surfaceSizeChanged(width, height);
     }
 
     @Override
     public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
-        // Notify the native side
-        surfaceDestroyed();
+        Log.i("SkiaBaseView", "onSurfaceTextureDestroyed");
         // https://developer.android.com/reference/android/view/TextureView.SurfaceTextureListener#onSurfaceTextureDestroyed(android.graphics.SurfaceTexture)
-        // Invoked when the specified SurfaceTexture is about to be destroyed. If returns true,
-        // no rendering should happen inside the surface texture after this method is invoked.
-        // We've measured this and it seems like we need to call release and return true - and
-        // then handle the issue with this being ripped out underneath the native layer in the C++
-        // code.
+        surfaceDestroyed();
         mSurface.release();
-        // Return true - we promise that no more rendering will be done now.
-        return true;
+        mSurface = null;
+        return false;
     }
 
     @Override
@@ -131,6 +186,17 @@ public abstract class SkiaBaseView extends ReactViewGroup implements TextureView
         // Nothing special to do here
     }
 
+    /**
+     * Returns true if the view is able to directly render on the
+     * main thread. This can f.ex then be used to create a first frame
+     * render of the view. Returns true by default - override if not.
+     */
+    /*
+    TODO: Remove if we find another solution for first frame rendering
+    protected boolean shouldRenderFirstFrameAsBitmap() {
+        return false;
+    }*/
+
     protected abstract void surfaceAvailable(Object surface, int width, int height);
 
     protected abstract void surfaceSizeChanged(int width, int height);
@@ -146,4 +212,7 @@ public abstract class SkiaBaseView extends ReactViewGroup implements TextureView
     protected abstract void registerView(int nativeId);
 
     protected abstract void unregisterView();
+
+    // TODO: Remove if we find another solution for first frame rendering
+    // protected native Object renderToBitmap(Object bitmap, int width, int height);
 }

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

@@ -42,4 +42,6 @@ public class SkiaDomView extends SkiaBaseView {
 
     protected native void unregisterView();
 
+    // TODO: Remove if we find another solution for first frame rendering
+    // protected native Object renderToBitmap(Object bitmap, int width, int height);
 }

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

@@ -42,4 +42,6 @@ public class SkiaDrawView extends SkiaBaseView {
 
     protected native void unregisterView();
 
+    // TODO: Remove if we find another solution for first frame rendering
+    // protected native Object renderToBitmap(Object bitmap, int width, int height);
 }

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

@@ -42,4 +42,7 @@ public class SkiaPictureView extends SkiaBaseView {
 
     protected native void unregisterView();
 
+    // TODO: Remove if we find another solution for first frame rendering
+    // protected native Object renderToBitmap(Object bitmap, int width, int height);
+
 }

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

@@ -22,22 +22,24 @@ import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.UIManagerModule;
 
 import java.util.ArrayList;
-import java.util.Collections;
-import java.util.LinkedList;
 import java.util.List;
 import java.util.concurrent.CountDownLatch;
 import java.util.concurrent.TimeUnit;
 
-
 public class ViewScreenshotService {
     private static final long SURFACE_VIEW_READ_PIXELS_TIMEOUT = 5;
     private static final String TAG = "SkiaScreenshot";
 
     public static Bitmap makeViewScreenshotFromTag(ReactContext context, int tag) {
         UIManagerModule uiManager = context.getNativeModule(UIManagerModule.class);
-        View view = uiManager.resolveView(tag);
+        View view = null;
+        try {
+            view = uiManager.resolveView(tag);
+        } catch (RuntimeException e) {
+            context.handleException(e);
+        }
         if (view == null) {
-            throw new RuntimeException("Could not resolve view from view tag " + tag);
+            return null;
         }
 
         // Measure and get size of view

package/cpp/api/JsiSkHostObjects.h

@@ -81,16 +81,6 @@ protected:
    */
   virtual void releaseResources() = 0;
 
-  /**
-   Throws a runtime error if this method is called after the object has been
-   disposed.
-   */
-  void ensureNotDisposed() {
-    if (_isDisposed) {
-      throw std::runtime_error("API Object accessed after it was disposed");
-    }
-  }
-
 private:
   void safeDispose() {
     if (!_isDisposed) {

package/cpp/rnskia/RNSkJsView.cpp

@@ -36,17 +36,41 @@ bool RNSkJsRenderer::tryRender(
 
 void RNSkJsRenderer::renderImmediate(
     std::shared_ptr<RNSkCanvasProvider> canvasProvider) {
+  // Get start time to be able to calculate animations etc.
   std::chrono::milliseconds ms =
       std::chrono::duration_cast<std::chrono::milliseconds>(
           std::chrono::system_clock::now().time_since_epoch());
-  canvasProvider->renderToCanvas([&](SkCanvas *canvas) {
-    // Create jsi canvas
-    auto jsiCanvas = std::make_shared<JsiSkCanvas>(_platformContext);
-    jsiCanvas->setCanvas(canvas);
 
-    drawInJsiCanvas(std::move(jsiCanvas), canvasProvider->getScaledWidth(),
-                    canvasProvider->getScaledHeight(), ms.count() / 1000);
+  std::condition_variable cv;
+  std::mutex m;
+  std::unique_lock<std::mutex> lock(m);
+
+  // We need to render on the javascript thread but block
+  // until we're done rendering. Render immediate is used
+  // to make images from the canvas.
+  _platformContext->runOnJavascriptThread([canvasProvider, ms, &cv, &m,
+                                           weakSelf = weak_from_this()]() {
+    // Lock
+    std::unique_lock<std::mutex> lock(m);
+
+    auto self = weakSelf.lock();
+    if (self) {
+      canvasProvider->renderToCanvas([self, ms,
+                                      canvasProvider](SkCanvas *canvas) {
+        // Create jsi canvas
+        auto jsiCanvas = std::make_shared<JsiSkCanvas>(self->_platformContext);
+        jsiCanvas->setCanvas(canvas);
+
+        self->drawInJsiCanvas(
+            std::move(jsiCanvas), canvasProvider->getScaledWidth(),
+            canvasProvider->getScaledHeight(), ms.count() / 1000);
+      });
+    }
+
+    cv.notify_one();
   });
+
+  cv.wait(lock);
 }
 
 void RNSkJsRenderer::setDrawCallback(
@@ -99,12 +123,13 @@ void RNSkJsRenderer::performDraw(
 
   if (_gpuDrawingLock->try_lock()) {
 
-    // Post drawing message to the render thread where the picture recorded
+    // Post drawing message to the main thread where the picture recorded
     // will be sent to the GPU/backend for rendering to screen.
+    // TODO: Which thread should we render on? I think it should be main thread!
     auto gpuLock = _gpuDrawingLock;
-    _platformContext->runOnRenderThread([weakSelf = weak_from_this(),
-                                         p = std::move(p), gpuLock,
-                                         canvasProvider]() {
+    _platformContext->runOnMainThread([weakSelf = weak_from_this(),
+                                       p = std::move(p), gpuLock,
+                                       canvasProvider]() {
       auto self = weakSelf.lock();
       if (self) {
         // Draw the picture recorded on the real GPU canvas

package/cpp/rnskia/RNSkJsiViewApi.h

@@ -162,7 +162,7 @@ public:
     if (info->view != nullptr) {
       if (count > 1 && !arguments[1].isUndefined() && !arguments[1].isNull()) {
         auto rect = JsiSkRect::fromValue(runtime, arguments[1]);
-        image = info->view->makeImageSnapshot(rect);
+        image = info->view->makeImageSnapshot(rect.get());
       } else {
         image = info->view->makeImageSnapshot(nullptr);
       }

package/cpp/rnskia/RNSkView.h

@@ -86,23 +86,25 @@ protected:
   bool _showDebugOverlays;
 };
 
-class RNSkImageCanvasProvider : public RNSkCanvasProvider {
+class RNSkOffscreenCanvasProvider : public RNSkCanvasProvider {
 public:
-  RNSkImageCanvasProvider(std::shared_ptr<RNSkPlatformContext> context,
-                          std::function<void()> requestRedraw, float width,
-                          float height)
+  RNSkOffscreenCanvasProvider(std::shared_ptr<RNSkPlatformContext> context,
+                              std::function<void()> requestRedraw, float width,
+                              float height)
       : RNSkCanvasProvider(requestRedraw), _width(width), _height(height) {
     _surface = context->makeOffscreenSurface(_width, _height);
+    _pd = context->getPixelDensity();
   }
 
   /**
    Returns a snapshot of the current surface/canvas
    */
-  sk_sp<SkImage> makeSnapshot(std::shared_ptr<SkRect> bounds) {
+  sk_sp<SkImage> makeSnapshot(SkRect *bounds) {
     sk_sp<SkImage> image;
     if (bounds != nullptr) {
-      SkIRect b = SkIRect::MakeXYWH(bounds->x(), bounds->y(), bounds->width(),
-                                    bounds->height());
+      SkIRect b =
+          SkIRect::MakeXYWH(bounds->x() * _pd, bounds->y() * _pd,
+                            bounds->width() * _pd, bounds->height() * _pd);
       image = _surface->makeImageSnapshot(b);
     } else {
       image = _surface->makeImageSnapshot();
@@ -131,6 +133,7 @@ public:
 private:
   float _width;
   float _height;
+  float _pd = 1.0f;
   sk_sp<SkSurface> _surface;
 };
 
@@ -273,9 +276,9 @@ public:
   /**
    Renders the view into an SkImage instead of the screen.
    */
-  sk_sp<SkImage> makeImageSnapshot(std::shared_ptr<SkRect> bounds) {
+  sk_sp<SkImage> makeImageSnapshot(SkRect *bounds) {
 
-    auto provider = std::make_shared<RNSkImageCanvasProvider>(
+    auto provider = std::make_shared<RNSkOffscreenCanvasProvider>(
         getPlatformContext(), std::bind(&RNSkView::requestRedraw, this),
         _canvasProvider->getScaledWidth(), _canvasProvider->getScaledHeight());
 
@@ -283,6 +286,8 @@ public:
     return provider->makeSnapshot(bounds);
   }
 
+  std::shared_ptr<RNSkRenderer> getRenderer() { return _renderer; }
+
 protected:
   std::shared_ptr<RNSkPlatformContext> getPlatformContext() {
     return _platformContext;
@@ -290,7 +295,6 @@ protected:
   std::shared_ptr<RNSkCanvasProvider> getCanvasProvider() {
     return _canvasProvider;
   }
-  std::shared_ptr<RNSkRenderer> getRenderer() { return _renderer; }
 
   /**
    Ends an ongoing beginDrawCallback loop for this view. This method is made
@@ -399,7 +403,6 @@ private:
 
   size_t _drawingLoopId = 0;
   std::atomic<int> _redrawRequestCounter = {1};
-  bool _initialDrawingDone = false;
 };
 
 } // namespace RNSkia

package/ios/RNSkia-iOS/RNSkMetalCanvasProvider.h

@@ -6,13 +6,12 @@
 #import <MetalKit/MetalKit.h>
 #import <QuartzCore/CAMetalLayer.h>
 
-using MetalRenderContext = struct {
-  id<MTLCommandQueue> commandQueue;
-  sk_sp<GrDirectContext> skContext;
-};
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#import <include/gpu/GrDirectContext.h>
 
-static std::unordered_map<std::thread::id, std::shared_ptr<MetalRenderContext>>
-    renderContexts;
+#pragma clang diagnostic pop
 
 class RNSkMetalCanvasProvider : public RNSkia::RNSkCanvasProvider {
 public:
@@ -27,17 +26,9 @@ public:
   bool renderToCanvas(const std::function<void(SkCanvas *)> &cb) override;
 
   void setSize(int width, int height);
-
   CALayer *getLayer();
 
 private:
-  /**
-   * To be able to use static contexts (and avoid reloading the skia context for
-   * each new view, we track the Skia drawing context per thread.
-   * @return The drawing context for the current thread
-   */
-  static std::shared_ptr<MetalRenderContext> getMetalRenderContext();
-
   std::shared_ptr<RNSkia::RNSkPlatformContext> _context;
   float _width = -1;
   float _height = -1;

package/ios/RNSkia-iOS/RNSkMetalCanvasProvider.mm

@@ -1,5 +1,6 @@
 #import <RNSkLog.h>
 #import <RNSkMetalCanvasProvider.h>
+#import <SkiaMetalSurfaceFactory.h>
 
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
@@ -14,19 +15,6 @@
 
 #pragma clang diagnostic pop
 
-/** Static members */
-std::shared_ptr<MetalRenderContext>
-RNSkMetalCanvasProvider::getMetalRenderContext() {
-  auto threadId = std::this_thread::get_id();
-  if (renderContexts.count(threadId) == 0) {
-    auto drawingContext = std::make_shared<MetalRenderContext>();
-    drawingContext->commandQueue = nullptr;
-    drawingContext->skContext = nullptr;
-    renderContexts.emplace(threadId, drawingContext);
-  }
-  return renderContexts.at(threadId);
-}
-
 RNSkMetalCanvasProvider::RNSkMetalCanvasProvider(
     std::function<void()> requestRedraw,
     std::shared_ptr<RNSkia::RNSkPlatformContext> context)
@@ -35,11 +23,8 @@ RNSkMetalCanvasProvider::RNSkMetalCanvasProvider(
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
   _layer = [CAMetalLayer layer];
 #pragma clang diagnostic pop
-
-  auto device = MTLCreateSystemDefaultDevice();
-
   _layer.framebufferOnly = NO;
-  _layer.device = device;
+  _layer.device = MTLCreateSystemDefaultDevice();
   _layer.opaque = false;
   _layer.contentsScale = _context->getPixelDensity();
   _layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
@@ -87,52 +72,18 @@ bool RNSkMetalCanvasProvider::renderToCanvas(
       return false;
     }
   }
-
-  // Get render context for current thread
-  auto renderContext = getMetalRenderContext();
-
-  if (renderContext->skContext == nullptr) {
-    auto device = MTLCreateSystemDefaultDevice();
-    renderContext->commandQueue =
-        id<MTLCommandQueue>(CFRetain((GrMTLHandle)[device newCommandQueue]));
-    renderContext->skContext = GrDirectContext::MakeMetal(
-        (__bridge void *)device, (__bridge void *)renderContext->commandQueue);
-  }
-
   // Wrap in auto release pool since we want the system to clean up after
   // rendering and not wait until later - we've seen some example of memory
   // usage growing very fast in the simulator without this.
   @autoreleasepool {
-
-    /* It is super important that we use the pattern of calling nextDrawable
-     inside this autoreleasepool and not depend on Skia's
-     SkSurface::MakeFromCAMetalLayer to encapsulate since we're seeing a lot of
-     drawables leaking if they're not done this way.
-
-     This is now reverted from:
-     (https://github.com/Shopify/react-native-skia/commit/2e2290f8e6dfc6921f97b79f779d920fbc1acceb)
-     back to the original implementation.
-     */
     id<CAMetalDrawable> currentDrawable = [_layer nextDrawable];
     if (currentDrawable == nullptr) {
       return false;
     }
 
-    GrMtlTextureInfo fbInfo;
-    fbInfo.fTexture.retain((__bridge void *)currentDrawable.texture);
-
-    GrBackendRenderTarget backendRT(_layer.drawableSize.width,
-                                    _layer.drawableSize.height, 1, fbInfo);
-
-    auto skSurface = SkSurfaces::WrapBackendRenderTarget(
-        renderContext->skContext.get(), backendRT, kTopLeft_GrSurfaceOrigin,
-        kBGRA_8888_SkColorType, nullptr, nullptr);
-
-    if (skSurface == nullptr || skSurface->getCanvas() == nullptr) {
-      RNSkia::RNSkLogger::logToConsole(
-          "Skia surface could not be created from parameters.");
-      return false;
-    }
+    auto skSurface = SkiaMetalSurfaceFactory::makeWindowedSurface(
+        currentDrawable.texture, _layer.drawableSize.width,
+        _layer.drawableSize.height);
 
     SkCanvas *canvas = skSurface->getCanvas();
     cb(canvas);
@@ -140,11 +91,11 @@ bool RNSkMetalCanvasProvider::renderToCanvas(
     skSurface->flushAndSubmit();
 
     id<MTLCommandBuffer> commandBuffer(
-        [renderContext->commandQueue commandBuffer]);
+        [ThreadContextHolder::ThreadSkiaMetalContext
+                .commandQueue commandBuffer]);
     [commandBuffer presentDrawable:currentDrawable];
     [commandBuffer commit];
   }
-
   return true;
 };
 

package/ios/RNSkia-iOS/RNSkiOSPlatformContext.mm

@@ -4,7 +4,7 @@
 #include <thread>
 #include <utility>
 
-#include <SkiaMetalRenderer.h>
+#include <SkiaMetalSurfaceFactory.h>
 
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
@@ -59,7 +59,7 @@ void RNSkiOSPlatformContext::raiseError(const std::exception &err) {
 
 sk_sp<SkSurface> RNSkiOSPlatformContext::makeOffscreenSurface(int width,
                                                               int height) {
-  return MakeOffscreenMetalSurface(width, height);
+  return SkiaMetalSurfaceFactory::makeOffscreenSurface(width, height);
 }
 
 void RNSkiOSPlatformContext::runOnMainThread(std::function<void()> func) {

package/ios/RNSkia-iOS/SkiaMetalSurfaceFactory.h

@@ -0,0 +1,31 @@
+#import <MetalKit/MetalKit.h>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#import "SkCanvas.h"
+#import <include/gpu/GrDirectContext.h>
+
+#pragma clang diagnostic pop
+
+using SkiaMetalContext = struct SkiaMetalContext {
+  id<MTLCommandQueue> commandQueue = nullptr;
+  sk_sp<GrDirectContext> skContext = nullptr;
+};
+
+class ThreadContextHolder {
+public:
+  static thread_local SkiaMetalContext ThreadSkiaMetalContext;
+};
+
+class SkiaMetalSurfaceFactory {
+public:
+  static sk_sp<SkSurface> makeWindowedSurface(id<MTLTexture> texture, int width,
+                                              int height);
+  static sk_sp<SkSurface> makeOffscreenSurface(int width, int height);
+
+private:
+  static id<MTLDevice> device;
+  static bool
+  createSkiaDirectContextIfNecessary(SkiaMetalContext *threadContext);
+};

package/ios/RNSkia-iOS/SkiaMetalSurfaceFactory.mm

@@ -0,0 +1,105 @@
+#import <RNSkLog.h>
+
+#include <SkiaMetalSurfaceFactory.h>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#import "SkCanvas.h"
+#import "SkColorSpace.h"
+#import "SkSurface.h"
+
+#import <include/gpu/GrBackendSurface.h>
+#import <include/gpu/GrDirectContext.h>
+#import <include/gpu/ganesh/SkSurfaceGanesh.h>
+
+#pragma clang diagnostic pop
+
+thread_local SkiaMetalContext ThreadContextHolder::ThreadSkiaMetalContext;
+
+struct OffscreenRenderContext {
+  id<MTLTexture> texture;
+
+  OffscreenRenderContext(id<MTLDevice> device,
+                         sk_sp<GrDirectContext> skiaContext,
+                         id<MTLCommandQueue> commandQueue, int width,
+                         int height) {
+    // Create a Metal texture descriptor
+    MTLTextureDescriptor *textureDescriptor = [MTLTextureDescriptor
+        texture2DDescriptorWithPixelFormat:MTLPixelFormatBGRA8Unorm
+                                     width:width
+                                    height:height
+                                 mipmapped:NO];
+    textureDescriptor.usage =
+        MTLTextureUsageRenderTarget | MTLTextureUsageShaderRead;
+    texture = [device newTextureWithDescriptor:textureDescriptor];
+  }
+};
+
+id<MTLDevice> SkiaMetalSurfaceFactory::device = MTLCreateSystemDefaultDevice();
+
+bool SkiaMetalSurfaceFactory::createSkiaDirectContextIfNecessary(
+    SkiaMetalContext *skiaMetalContext) {
+  if (skiaMetalContext->skContext == nullptr) {
+    skiaMetalContext->commandQueue =
+        id<MTLCommandQueue>(CFRetain((GrMTLHandle)[device newCommandQueue]));
+    skiaMetalContext->skContext = GrDirectContext::MakeMetal(
+        (__bridge void *)device,
+        (__bridge void *)skiaMetalContext->commandQueue);
+    if (skiaMetalContext->skContext == nullptr) {
+      RNSkia::RNSkLogger::logToConsole("Couldn't create a Skia Metal Context");
+      return false;
+    }
+  }
+  return true;
+}
+
+sk_sp<SkSurface>
+SkiaMetalSurfaceFactory::makeWindowedSurface(id<MTLTexture> texture, int width,
+                                             int height) {
+  // Get render context for current thread
+  if (!SkiaMetalSurfaceFactory::createSkiaDirectContextIfNecessary(
+          &ThreadContextHolder::ThreadSkiaMetalContext)) {
+    return nullptr;
+  }
+  GrMtlTextureInfo fbInfo;
+  fbInfo.fTexture.retain((__bridge void *)texture);
+
+  GrBackendRenderTarget backendRT(width, height, 1, fbInfo);
+
+  auto skSurface = SkSurfaces::WrapBackendRenderTarget(
+      ThreadContextHolder::ThreadSkiaMetalContext.skContext.get(), backendRT,
+      kTopLeft_GrSurfaceOrigin, kBGRA_8888_SkColorType, nullptr, nullptr);
+
+  if (skSurface == nullptr || skSurface->getCanvas() == nullptr) {
+    RNSkia::RNSkLogger::logToConsole(
+        "Skia surface could not be created from parameters.");
+    return nullptr;
+  }
+  return skSurface;
+}
+
+sk_sp<SkSurface> SkiaMetalSurfaceFactory::makeOffscreenSurface(int width,
+                                                               int height) {
+  if (!SkiaMetalSurfaceFactory::createSkiaDirectContextIfNecessary(
+          &ThreadContextHolder::ThreadSkiaMetalContext)) {
+    return nullptr;
+  }
+  auto ctx = new OffscreenRenderContext(
+      device, ThreadContextHolder::ThreadSkiaMetalContext.skContext,
+      ThreadContextHolder::ThreadSkiaMetalContext.commandQueue, width, height);
+
+  // Create a GrBackendTexture from the Metal texture
+  GrMtlTextureInfo info;
+  info.fTexture.retain((__bridge void *)ctx->texture);
+  GrBackendTexture backendTexture(width, height, GrMipMapped::kNo, info);
+
+  // Create a SkSurface from the GrBackendTexture
+  auto surface = SkSurfaces::WrapBackendTexture(
+      ThreadContextHolder::ThreadSkiaMetalContext.skContext.get(),
+      backendTexture, kTopLeft_GrSurfaceOrigin, 0, kBGRA_8888_SkColorType,
+      nullptr, nullptr,
+      [](void *addr) { delete (OffscreenRenderContext *)addr; }, ctx);
+
+  return surface;
+}