@shopify/react-native-skia 0.1.151 → 0.1.152

package/cpp/rnskia/RNSkView.h

@@ -0,0 +1,287 @@
+
+#pragma once
+
+#include <memory>
+
+#include <RNSkPlatformContext.h>
+
+#include <JsiValueWrapper.h>
+
+#include <JsiSkRect.h>
+#include <JsiSkImage.h>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include <SkSurface.h>
+#include <SkCanvas.h>
+
+#pragma clang diagnostic pop
+
+namespace RNSkia {
+
+using namespace facebook;
+
+class RNSkCanvasProvider {
+public:
+  RNSkCanvasProvider(std::function<void()> requestRedraw): _requestRedraw(requestRedraw) {}
+  
+  /**
+   Returns the scaled width of the view
+   */
+  virtual float getScaledWidth() = 0;
+  
+  /**
+   Returns the scaled height of the view
+   */
+  virtual float getScaledHeight() = 0;
+  
+  /**
+   Render to a canvas
+   */
+  virtual void renderToCanvas(const std::function<void(SkCanvas*)>&) = 0;
+protected:
+  std::function<void()> _requestRedraw;
+};
+
+class RNSkRenderer {
+public:
+  RNSkRenderer(std::function<void()> requestRedraw): _requestRedraw(requestRedraw) {}
+  
+  /**
+   Tries to render the current set of drawing operations. If we're busy we'll return false so that the calling RNSkBaseDrawView
+   can request a new render next frame. The tryRender method is typically called on each frame if there are any redraw
+   requests. The method will be called from the main thread, so the implementor must make sure any thread requirements are
+   met before rendering. This method will also allow the rendering to be dispatched to another thread.
+   */
+  virtual bool tryRender(std::shared_ptr<RNSkCanvasProvider> canvasProvider) = 0;
+  
+  /**
+   Renders directly to the canvas in the canvas provider. This method is called from a Javascript call to render a
+   snapshot of the SkiaView to an image, and can therefore run outside the tryRender loop and directly in the
+   javascript thread.
+   */
+  virtual void renderImmediate(std::shared_ptr<RNSkCanvasProvider> canvasProvider) = 0;
+  
+  void setShowDebugOverlays(bool showDebugOverlays) { _showDebugOverlays = showDebugOverlays; }
+  bool getShowDebugOverlays() { return _showDebugOverlays; }
+  
+protected:
+  std::function<void()> _requestRedraw;
+  bool _showDebugOverlays;
+};
+
+class RNSkImageCanvasProvider: public RNSkCanvasProvider {
+public:
+  RNSkImageCanvasProvider(std::function<void()> requestRedraw,
+                          float width,
+                          float height):
+    RNSkCanvasProvider(requestRedraw),
+    _width(width),
+    _height(height) {
+    _surface = SkSurface::MakeRasterN32Premul(_width, _height);
+  }
+  
+  /**
+   Returns a snapshot of the current surface/canvas
+   */
+  sk_sp<SkImage> makeSnapshot(std::shared_ptr<SkRect> bounds) {
+    if(bounds != nullptr) {
+      SkIRect b = SkIRect::MakeXYWH(bounds->x(), bounds->y(), bounds->width(), bounds->height());
+      return _surface->makeImageSnapshot(b);
+    } else {
+      return _surface->makeImageSnapshot();
+    }
+  }
+  
+  /**
+   Returns the scaled width of the view
+   */
+  float getScaledWidth() override { return _width; };
+  
+  /**
+   Returns the scaled height of the view
+   */
+  float getScaledHeight() override { return _height; };
+  
+  /**
+   Render to a canvas
+   */
+  void renderToCanvas(const std::function<void(SkCanvas*)>& cb) override {
+    cb(_surface->getCanvas());
+  };
+  
+private:
+  float _width;
+  float _height;
+  sk_sp<SkSurface> _surface;
+};
+
+enum RNSkDrawingMode { Default, Continuous };
+
+using RNSkTouchInfo = struct {
+  enum TouchType { Start, Active, End, Cancelled };
+  double x;
+  double y;
+  double force;
+  TouchType type;
+  size_t id;
+  long timestamp;
+};
+
+class RNSkView: public std::enable_shared_from_this<RNSkView> {
+public:
+  /**
+   * Constructor
+   */
+  RNSkView(std::shared_ptr<RNSkPlatformContext> context,
+           std::shared_ptr<RNSkCanvasProvider> canvasProvider,
+           std::shared_ptr<RNSkRenderer> renderer):
+    _platformContext(context),
+    _canvasProvider(canvasProvider),
+    _renderer(renderer) {}
+
+  /**
+   Destructor
+   */
+  virtual ~RNSkView() {
+    endDrawingLoop();
+  }
+  
+  /**
+   Sets custom properties. Custom properties are properties that are set directly from Javascript without having
+   to go through the async bridge.
+   */
+  virtual void setJsiProperties(std::unordered_map<std::string, RNJsi::JsiValueWrapper> &props) {
+    throw std::runtime_error("The base Skia View does not support any custom properties.");
+  };
+  
+  /**
+   Calls a custom action.
+   */
+  virtual jsi::Value callJsiMethod(jsi::Runtime& runtime,
+                                   const std::string& name,
+                                   const jsi::Value *arguments,
+                                   size_t count) {
+    throw std::runtime_error("The base Skia View does not support any commands. Command " + name + " not found.");
+  };
+
+  /**
+   * Repaints the Skia view using the underlying context and the drawcallback.
+   * This method schedules a draw request that will be run on the correct
+   * thread and js runtime.
+   */
+  void requestRedraw() {
+    _redrawRequestCounter++;
+  }
+  
+  /**
+   Sets the native id of the view
+   */
+  virtual void setNativeId(size_t nativeId) {
+    _nativeId = nativeId;
+    beginDrawingLoop();
+  }
+  
+  /**
+   Returns the native id
+   */
+  size_t getNativeId() { return _nativeId; }
+  
+  /**
+   Sets the drawing mode for the view
+   */
+  void setDrawingMode(RNSkDrawingMode mode) {
+    _drawingMode = mode;
+    requestRedraw();
+  }
+
+  /**
+   * Set to true to show the debug overlays on render
+   */
+  void setShowDebugOverlays(bool show) {
+    _renderer->setShowDebugOverlays(show);
+    requestRedraw();
+  }
+
+  /**
+    Update touch state with new touch points
+   */
+  virtual void updateTouchState(std::vector<RNSkTouchInfo>&) {
+    requestRedraw();
+  }
+  
+  /**
+   Renders the view into an SkImage instead of the screen.
+   */
+  sk_sp<SkImage> makeImageSnapshot(std::shared_ptr<SkRect> bounds) {
+    auto provider = std::make_shared<RNSkImageCanvasProvider>(std::bind(&RNSkView::requestRedraw, this),
+                                                              _canvasProvider->getScaledWidth(),
+                                                              _canvasProvider->getScaledHeight());
+    
+    _renderer->renderImmediate(provider);
+    return provider->makeSnapshot(bounds);
+  }
+
+protected:
+  std::shared_ptr<RNSkPlatformContext> getPlatformContext() { return _platformContext; }
+  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 protected if
+   the drawing loop should be stopped before reaching the destructor (like we do for Android
+   views)
+   */
+  void endDrawingLoop() {
+    if(_drawingLoopId != 0) {
+      _drawingLoopId = 0;
+      _platformContext->endDrawLoop(_nativeId);
+    }
+  }
+
+private:
+  /**
+   Starts beginDrawCallback loop if the drawing mode is continuous
+   */
+  void beginDrawingLoop() {
+    if (_drawingLoopId != 0 || _nativeId == 0) {
+      return;
+    }
+    // Set to zero to avoid calling beginDrawLoop before we return
+    _drawingLoopId = _platformContext->beginDrawLoop(_nativeId,
+      [weakSelf = weak_from_this()](bool invalidated) {
+      auto self = weakSelf.lock();
+      if(self) {
+        self->drawLoopCallback(invalidated);
+      }
+    });
+  }
+
+  /**
+    Draw loop callback
+   */
+  void drawLoopCallback(bool invalidated) {
+    if(_redrawRequestCounter > 0 || _drawingMode == RNSkDrawingMode::Continuous) {
+        _redrawRequestCounter = 0;
+        
+      if(!_renderer->tryRender(_canvasProvider)) {
+        // The renderer could not render cause it was busy, just schedule redrawing
+        // on the next frame.
+        requestRedraw();
+      }
+    }
+  }
+  
+  std::shared_ptr<RNSkPlatformContext> _platformContext;
+  std::shared_ptr<RNSkCanvasProvider> _canvasProvider;
+  std::shared_ptr<RNSkRenderer> _renderer;
+
+  RNSkDrawingMode _drawingMode;
+  size_t _nativeId;
+  
+  size_t _drawingLoopId = 0;
+  std::atomic<int> _redrawRequestCounter = { 1 };
+};
+
+} // namespace RNSkia

package/ios/RNSkia-iOS/RNSkMetalCanvasProvider.h

@@ -0,0 +1,38 @@
+#pragma once
+
+#import "RNSkPlatformContext.h"
+#import "RNSkView.h"
+
+#import <MetalKit/MetalKit.h>
+#import <QuartzCore/CAMetalLayer.h>
+
+class RNSkMetalCanvasProvider: public RNSkia::RNSkCanvasProvider {
+public:
+  RNSkMetalCanvasProvider(std::function<void()> requestRedraw,
+                          std::shared_ptr<RNSkia::RNSkPlatformContext> context);
+  
+  ~RNSkMetalCanvasProvider();
+
+  float getScaledWidth() override;
+  float getScaledHeight() override;
+  
+  void renderToCanvas(const std::function<void(SkCanvas*)>& cb) override;
+  
+  void setSize(int width, int height);
+  
+  CALayer* getLayer();
+  
+private:
+  std::shared_ptr<RNSkia::RNSkPlatformContext> _context;
+  float _width = -1;
+  float _height = -1;
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wunguarded-availability-new"
+  CAMetalLayer *_layer;
+#pragma clang diagnostic pop
+
+  static id<MTLCommandQueue> _commandQueue;
+  static id<MTLDevice> _device;
+  static sk_sp<GrDirectContext> _skContext;
+
+};

package/ios/RNSkia-iOS/{RNSkDrawViewImpl.mm → RNSkMetalCanvasProvider.mm}

@@ -1,4 +1,5 @@
-#import <RNSkDrawViewImpl.h>
+#import <RNSkMetalCanvasProvider.h>
+#import <RNSkLog.h>
 
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
@@ -7,23 +8,24 @@
 #import <SkSurface.h>
 #import <SkCanvas.h>
 
-#pragma clang diagnostic pop
+#import <include/gpu/GrDirectContext.h>
 
-#import <SkiaDrawView.h>
-#import <RNSkLog.h>
+#pragma clang diagnostic pop
 
 // These static class members are used by all Skia Views
-id<MTLDevice> RNSkDrawViewImpl::_device = MTLCreateSystemDefaultDevice();
-id<MTLCommandQueue> RNSkDrawViewImpl::_commandQueue = id<MTLCommandQueue>(CFRetain((GrMTLHandle)[_device newCommandQueue]));
+id<MTLDevice> RNSkMetalCanvasProvider::_device = MTLCreateSystemDefaultDevice();
+id<MTLCommandQueue> RNSkMetalCanvasProvider::_commandQueue = id<MTLCommandQueue>(CFRetain((GrMTLHandle)[_device newCommandQueue]));
 
-sk_sp<GrDirectContext> RNSkDrawViewImpl::_skContext = nullptr;
+sk_sp<GrDirectContext> RNSkMetalCanvasProvider::_skContext = nullptr;
 
-RNSkDrawViewImpl::RNSkDrawViewImpl(std::shared_ptr<RNSkia::RNSkPlatformContext> context):
-  _context(context), RNSkia::RNSkDrawView(context) {
-#pragma clang diagnostic push
-#pragma clang diagnostic ignored "-Wunguarded-availability-new"
+RNSkMetalCanvasProvider::RNSkMetalCanvasProvider(std::function<void()> requestRedraw,
+                        std::shared_ptr<RNSkia::RNSkPlatformContext> context):
+RNSkCanvasProvider(requestRedraw),
+  _context(context) {
+  #pragma clang diagnostic push
+  #pragma clang diagnostic ignored "-Wunguarded-availability-new"
   _layer = [CAMetalLayer layer];
-#pragma clang diagnostic pop
+  #pragma clang diagnostic pop
     
   _layer.framebufferOnly = NO;
   _layer.device = _device;
@@ -32,7 +34,7 @@ RNSkDrawViewImpl::RNSkDrawViewImpl(std::shared_ptr<RNSkia::RNSkPlatformContext>
   _layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
 }
 
-RNSkDrawViewImpl::~RNSkDrawViewImpl() {
+RNSkMetalCanvasProvider::~RNSkMetalCanvasProvider() {
   if([[NSThread currentThread] isMainThread]) {
     _layer = NULL;
   } else {
@@ -50,17 +52,20 @@ RNSkDrawViewImpl::~RNSkDrawViewImpl() {
   }
 }
 
-void RNSkDrawViewImpl::setSize(int width, int height) {
-  _width = width;
-  _height = height;
-  _layer.frame = CGRectMake(0, 0, width, height);
-  _layer.drawableSize = CGSizeMake(width * _context->getPixelDensity(),
-                                   height* _context->getPixelDensity());
-  
-  requestRedraw();
-}
+/**
+ Returns the scaled width of the view
+ */
+float RNSkMetalCanvasProvider::getScaledWidth() { return _width * _context->getPixelDensity(); };
+
+/**
+ Returns the scaled height of the view
+ */
+float RNSkMetalCanvasProvider::getScaledHeight() { return _height * _context->getPixelDensity(); };
 
-void RNSkDrawViewImpl::renderToSkiaCanvas(const std::function<void(SkCanvas*)>& cb) {
+/**
+ Render to a canvas
+ */
+void RNSkMetalCanvasProvider::renderToCanvas(const std::function<void(SkCanvas*)>& cb) {
   if(_width == -1 && _height == -1) {
     return;
   }
@@ -109,4 +114,16 @@ void RNSkDrawViewImpl::renderToSkiaCanvas(const std::function<void(SkCanvas*)>&
     [commandBuffer presentDrawable:currentDrawable];
     [commandBuffer commit];
   }
+};
+
+void RNSkMetalCanvasProvider::setSize(int width, int height) {
+  _width = width;
+  _height = height;
+  _layer.frame = CGRectMake(0, 0, width, height);
+  _layer.drawableSize = CGSizeMake(width * _context->getPixelDensity(),
+                                   height* _context->getPixelDensity());
+  
+  _requestRedraw();
 }
+
+CALayer* RNSkMetalCanvasProvider::getLayer() { return _layer; }

package/ios/RNSkia-iOS/{PlatformContext.h → RNSkiOSPlatformContext.h}

@@ -30,9 +30,9 @@ using namespace facebook;
 
 static void handleNotification(CFNotificationCenterRef center, void *observer, CFStringRef name, const void *object, CFDictionaryRef userInfo);
 
-class PlatformContext : public RNSkPlatformContext {
+class RNSkiOSPlatformContext : public RNSkPlatformContext {
 public:
-  PlatformContext(jsi::Runtime *runtime,
+  RNSkiOSPlatformContext(jsi::Runtime *runtime,
                   std::shared_ptr<react::CallInvoker> callInvoker)
       : RNSkPlatformContext(runtime, callInvoker, [[UIScreen mainScreen] scale]) {
         // We need to make sure we invalidate when modules are freed
@@ -46,7 +46,7 @@ public:
           );
       }
 
-  ~PlatformContext() {
+  ~RNSkiOSPlatformContext() {
     CFNotificationCenterRemoveEveryObserver(CFNotificationCenterGetLocalCenter(), this);
   }
 
@@ -70,7 +70,7 @@ private:
 
 static void handleNotification(CFNotificationCenterRef center, void *observer, CFStringRef name,
                                const void *object, CFDictionaryRef userInfo) {
-  (static_cast<PlatformContext*>(observer))->willInvalidateModules();
+  (static_cast<RNSkiOSPlatformContext*>(observer))->willInvalidateModules();
 }
 
 } // namespace RNSkia

package/ios/RNSkia-iOS/{PlatformContext.mm → RNSkiOSPlatformContext.mm}

@@ -1,4 +1,4 @@
-#include "PlatformContext.h"
+#include "RNSkiOSPlatformContext.h"
 
 #import <React/RCTUtils.h>
 #include <thread>
@@ -8,7 +8,7 @@
 
 namespace RNSkia {
 
-  void PlatformContext::performStreamOperation(const std::string &sourceUri,
+  void RNSkiOSPlatformContext::performStreamOperation(const std::string &sourceUri,
                                               const std::function<void(std::unique_ptr<SkStreamAsset>)> &op) {
   
     RNSkMeasureTime("PlatformContext::performStreamOperation");
@@ -28,11 +28,11 @@ namespace RNSkia {
     std::thread(loader).detach();
   }
 
-void PlatformContext::raiseError(const std::exception &err) {
+void RNSkiOSPlatformContext::raiseError(const std::exception &err) {
     RCTFatal(RCTErrorWithMessage([NSString stringWithUTF8String:err.what()]));
 }
 
-void PlatformContext::startDrawLoop() {
+void RNSkiOSPlatformContext::startDrawLoop() {
   if(_displayLink == nullptr) {
     _displayLink = [[DisplayLink alloc] init];
     [_displayLink start:^(double time) {
@@ -41,7 +41,7 @@ void PlatformContext::startDrawLoop() {
   }
 }
 
-void PlatformContext::stopDrawLoop() {
+void RNSkiOSPlatformContext::stopDrawLoop() {
   if(_displayLink != nullptr) {
     [_displayLink stop];
     _displayLink = nullptr;

package/ios/RNSkia-iOS/RNSkiOSView.h

@@ -0,0 +1,34 @@
+#pragma once
+
+#import <memory>
+
+#import "RNSkView.h"
+#import "RNSkiOSPlatformContext.h"
+#import "RNSkMetalCanvasProvider.h"
+
+class RNSkBaseiOSView {
+public:
+  virtual CALayer* getLayer() = 0;
+  virtual void setSize(int width, int height) = 0;
+  virtual std::shared_ptr<RNSkia::RNSkView> getDrawView() = 0;
+};
+
+template <class T>
+class RNSkiOSView: public RNSkBaseiOSView, public T {
+public:
+  RNSkiOSView(std::shared_ptr<RNSkia::RNSkPlatformContext> context):
+    T(context, std::make_shared<RNSkMetalCanvasProvider>(std::bind(&RNSkia::RNSkView::requestRedraw, this), context)) {}
+  
+  CALayer* getLayer() override {
+    return std::static_pointer_cast<RNSkMetalCanvasProvider>(this->getCanvasProvider())->getLayer();
+  }
+  
+  void setSize(int width, int height) override {
+    std::static_pointer_cast<RNSkMetalCanvasProvider>(this->getCanvasProvider())->setSize(width, height);
+  }
+  
+  std::shared_ptr<RNSkia::RNSkView> getDrawView() override {
+    return this->shared_from_this();
+  }
+
+};

package/ios/RNSkia-iOS/SkiaDrawViewManager.mm

@@ -1,42 +1,50 @@
 #include <SkiaDrawViewManager.h>
 #include <React/RCTBridge+Private.h>
 
+#include <RNSkPlatformContext.h>
+#include <RNSkJsView.h>
+#include <RNSkIOSView.h>
+
 #include <SkiaManager.h>
 #include <RNSkiaModule.h>
-#include <RNSkDrawViewImpl.h>
-#include <SkiaDrawView.h>
+#include <SkiaUIView.h>
+
+
 
 @implementation SkiaDrawViewManager
 
+RCT_EXPORT_MODULE(SkiaDrawView)
+
 - (SkiaManager*) skiaManager {
   auto bridge = [RCTBridge currentBridge];
   auto skiaModule = (RNSkiaModule*)[bridge moduleForName:@"RNSkia"];
   return [skiaModule manager];
 }
 
-RCT_CUSTOM_VIEW_PROPERTY(nativeID, NSNumber, SkiaDrawView) {
+RCT_CUSTOM_VIEW_PROPERTY(nativeID, NSNumber, SkiaUIView) {
   // Get parameter
   int nativeId = [[RCTConvert NSString:json] intValue];
-  [(SkiaDrawView*)view setNativeId:nativeId];            
+  [(SkiaUIView*)view setNativeId:nativeId];            
 }
 
-RCT_CUSTOM_VIEW_PROPERTY(mode, NSString, SkiaDrawView) {
+RCT_CUSTOM_VIEW_PROPERTY(mode, NSString, SkiaUIView) {
   std::string mode = json != NULL ? [[RCTConvert NSString:json] UTF8String] : "default";
-  [(SkiaDrawView*)view setDrawingMode: mode];
+  [(SkiaUIView*)view setDrawingMode: mode];
 }
 
-RCT_CUSTOM_VIEW_PROPERTY(debug, BOOL, SkiaDrawView) {
+RCT_CUSTOM_VIEW_PROPERTY(debug, BOOL, SkiaUIView) {
   bool debug = json != NULL ? [RCTConvert BOOL:json] : false;
-  [(SkiaDrawView*)view setDebugMode: debug];
+  [(SkiaUIView*)view setDebugMode: debug];
 }
 
-RCT_EXPORT_MODULE(ReactNativeSkiaView)
-
 - (UIView *)view
 {
   auto skManager = [[self skiaManager] skManager];
   // Pass SkManager as a raw pointer to avoid circular dependenciesr
-  return [[SkiaDrawView alloc] initWithManager:skManager.get()];
+  return [[SkiaUIView alloc] initWithManager: skManager.get()
+                                     factory: [](std::shared_ptr<RNSkia::RNSkPlatformContext> context) {
+    return std::make_shared<RNSkiOSView<RNSkia::RNSkJsView>>(context);
+  }];
 }
 
 @end

package/ios/RNSkia-iOS/SkiaManager.mm

@@ -7,11 +7,11 @@
 
 #import <ReactCommon/RCTTurboModule.h>
 
-#import "PlatformContext.h"
+#import "RNSkiOSPlatformContext.h"
 
 @implementation SkiaManager {
   std::shared_ptr<RNSkia::RNSkManager> _skManager;
-  std::shared_ptr<RNSkia::PlatformContext> _platformContext;
+  std::shared_ptr<RNSkia::RNSkiOSPlatformContext> _platformContext;
   __weak RCTBridge* weakBridge;
 }
 
@@ -37,7 +37,7 @@
       facebook::jsi::Runtime* jsRuntime = (facebook::jsi::Runtime*)cxxBridge.runtime;
       
       // Create platform context
-      _platformContext = std::make_shared<RNSkia::PlatformContext>(jsRuntime, callInvoker);
+      _platformContext = std::make_shared<RNSkia::RNSkiOSPlatformContext>(jsRuntime, callInvoker);
             
       // Create the RNSkiaManager (cross platform)
       _skManager = std::make_shared<RNSkia::RNSkManager>(jsRuntime, callInvoker, _platformContext);

package/ios/RNSkia-iOS/SkiaPictureViewManager.h

@@ -0,0 +1,8 @@
+
+#pragma once
+
+#import <React/RCTViewManager.h>
+
+@interface SkiaPictureViewManager : RCTViewManager
+
+@end

package/ios/RNSkia-iOS/SkiaPictureViewManager.mm

@@ -0,0 +1,51 @@
+
+#include <SkiaPictureViewManager.h>
+#include <React/RCTBridge+Private.h>
+
+#include <RNSkPlatformContext.h>
+#include <RNSkPictureView.h>
+#include <RNSkIOSView.h>
+
+#include <SkiaManager.h>
+#include <RNSkiaModule.h>
+#include <SkiaUIView.h>
+
+
+
+@implementation SkiaPictureViewManager
+
+RCT_EXPORT_MODULE(SkiaPictureView)
+
+- (SkiaManager*) skiaManager {
+  auto bridge = [RCTBridge currentBridge];
+  auto skiaModule = (RNSkiaModule*)[bridge moduleForName:@"RNSkia"];
+  return [skiaModule manager];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(nativeID, NSNumber, SkiaUIView) {
+  // Get parameter
+  int nativeId = [[RCTConvert NSString:json] intValue];
+  [(SkiaUIView*)view setNativeId:nativeId];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(mode, NSString, SkiaUIView) {
+  std::string mode = json != NULL ? [[RCTConvert NSString:json] UTF8String] : "default";
+  [(SkiaUIView*)view setDrawingMode: mode];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(debug, BOOL, SkiaUIView) {
+  bool debug = json != NULL ? [RCTConvert BOOL:json] : false;
+  [(SkiaUIView*)view setDebugMode: debug];
+}
+
+- (UIView *)view
+{
+  auto skManager = [[self skiaManager] skManager];
+  // Pass SkManager as a raw pointer to avoid circular dependenciesr
+  return [[SkiaUIView alloc] initWithManager: skManager.get()
+                                     factory: [](std::shared_ptr<RNSkia::RNSkPlatformContext> context) {
+    return std::make_shared<RNSkiOSView<RNSkia::RNSkPictureView>>(context);
+  }];
+}
+
+@end