@shopify/react-native-skia 0.1.160 → 0.1.163

package/cpp/rnskia/RNSkPictureView.h

@@ -21,9 +21,9 @@
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
-#include <SkBBHFactory.h>
-#include <SkCanvas.h>
-#include <SkPictureRecorder.h>
+#include "SkBBHFactory.h"
+#include "SkCanvas.h"
+#include "SkPictureRecorder.h"
 
 #pragma clang diagnostic pop
 

package/cpp/rnskia/RNSkPlatformContext.h

@@ -14,7 +14,7 @@
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
-#include <SkStream.h>
+#include "SkStream.h"
 
 #pragma clang diagnostic pop
 
@@ -188,8 +188,10 @@ public:
     }
   }
 
-  virtual void startDrawLoop() = 0;
-  virtual void stopDrawLoop() = 0;
+  // default implementation does nothing, so it can be called from virtual
+  // destructor.
+  virtual void startDrawLoop() {}
+  virtual void stopDrawLoop() {}
 
 private:
   float _pixelDensity;

package/cpp/rnskia/RNSkView.h

@@ -17,8 +17,8 @@
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
-#include <SkCanvas.h>
-#include <SkSurface.h>
+#include "SkCanvas.h"
+#include "SkSurface.h"
 
 #pragma clang diagnostic pop
 

package/cpp/rnskia/dom/nodes/JsiBlendNode.h

@@ -41,19 +41,18 @@ protected:
         auto maybeImageFilter =
             std::dynamic_pointer_cast<JsiBaseImageFilterNode>(child);
 
-        if (asShader) {
+        if (maybeShader) {
           sk_sp<SkShader> outer = maybeShader->getCurrent();
           if (innerShader != nullptr) {
-            innerShader = SkShaders::Blend(blendMode, innerShader, outer);
+            innerShader = SkShaders::Blend(blendMode, outer, innerShader);
           } else {
             innerShader = outer;
           }
-
-        } else {
+        } else if (maybeImageFilter) {
           sk_sp<SkImageFilter> outer = maybeImageFilter->getCurrent();
-          if (innerImageFilter != nullptr) {
-            innerImageFilter = SkImageFilters::Blend(
-                blendMode, innerImageFilter, outer, nullptr);
+          if (outer != nullptr) {
+            innerImageFilter = SkImageFilters::Blend(blendMode, outer,
+                                                     innerImageFilter, nullptr);
           } else {
             innerImageFilter = outer;
           }

package/cpp/rnskia/dom/nodes/JsiColorFilterNodes.h

@@ -44,7 +44,7 @@ protected:
     if (paint->getColorFilter() != nullptr &&
         paint->getColorFilter() != getCurrent().get()) {
       paint->setColorFilter(
-          SkColorFilters::Compose(paint->refColorFilter(), ColorFilter));
+          SkColorFilters::Compose(ColorFilter, paint->refColorFilter()));
     } else {
       paint->setColorFilter(ColorFilter);
     }

package/cpp/rnskia/dom/nodes/JsiPathNode.h

@@ -43,25 +43,27 @@ protected:
           _strokeOptsProp->isSet() &&
           _strokeOptsProp->value().getType() == PropType::Object;
 
-      auto willMutatePath =
-          hasStartOffset || hasEndOffset || hasFillStyle || hasStrokeOptions;
+      auto willMutatePath = hasStartOffset == true || hasEndOffset == true ||
+                            hasFillStyle == true || hasStrokeOptions == true;
 
       if (willMutatePath) {
         // We'll trim the path
         SkPath filteredPath(*_pathProp->getDerivedValue());
-        auto pe = SkTrimPathEffect::Make(_startProp->value().getAsNumber(),
-                                         _endProp->value().getAsNumber(),
-                                         SkTrimPathEffect::Mode::kNormal);
+        auto start =
+            _startProp->isSet() ? _startProp->value().getAsNumber() : 0.0;
+        auto end = _endProp->isSet() ? _endProp->value().getAsNumber() : 1.0;
+        auto pe =
+            SkTrimPathEffect::Make(start, end, SkTrimPathEffect::Mode::kNormal);
 
         if (pe != nullptr) {
           SkStrokeRec rec(SkStrokeRec::InitStyle::kHairline_InitStyle);
-          if (!pe->filterPath(_pathProp->getDerivedValue().get(), filteredPath,
-                              &rec, nullptr)) {
+          if (!pe->filterPath(&filteredPath, filteredPath, &rec, nullptr)) {
             throw std::runtime_error(
                 "Failed trimming path with parameters start: " +
                 std::to_string(_startProp->value().getAsNumber()) +
                 ", end: " + std::to_string(_endProp->value().getAsNumber()));
           }
+          filteredPath.swap(filteredPath);
           _path = std::make_shared<SkPath>(filteredPath);
         } else if (hasStartOffset || hasEndOffset) {
           throw std::runtime_error(
@@ -69,7 +71,7 @@ protected:
               std::to_string(_startProp->value().getAsNumber()) +
               ", end: " + std::to_string(_endProp->value().getAsNumber()));
         } else {
-          _path = std::make_shared<SkPath>(*_pathProp->getDerivedValue());
+          _path = std::make_shared<SkPath>(filteredPath);
         }
 
         // Set fill style

package/cpp/rnskia/dom/props/BlendModeProp.h

@@ -43,11 +43,11 @@ private:
       return SkBlendMode::kDstOver;
     } else if (value == "srcIn") {
       return SkBlendMode::kSrcIn;
-    } else if (value == "kDstIn") {
+    } else if (value == "dstIn") {
       return SkBlendMode::kDstIn;
     } else if (value == "srcOut") {
       return SkBlendMode::kSrcOut;
-    } else if (value == "dtsOut") {
+    } else if (value == "dstOut") {
       return SkBlendMode::kDstOut;
     } else if (value == "srcATop") {
       return SkBlendMode::kSrcATop;

package/cpp/rnskia/dom/props/PaintProps.h

@@ -93,7 +93,8 @@ public:
     // Opacity
     if (_opacity->isChanged() || context->isChanged()) {
       if (_opacity->isSet()) {
-        context->setOpacity(_opacity->value().getAsNumber());
+        context->setOpacity(context->getOpacity() *
+                            _opacity->value().getAsNumber());
       } else {
         context->clearOpacity();
       }
@@ -105,6 +106,9 @@ public:
       paint->setShader(nullptr);
       paint->setColor(*_color->getDerivedValue());
       paint->setAlphaf(context->getOpacity() * paint->getColor4f().fA);
+    } else if (context->isChanged()) {
+      auto paint = context->getMutablePaint();
+      paint->setAlphaf(context->getOpacity());
     }
 
     // Style

package/ios/RNSkia-iOS/RNSkMetalCanvasProvider.mm

@@ -4,9 +4,9 @@
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
-#import <SkColorSpace.h>
-#import <SkSurface.h>
-#import <SkCanvas.h>
+#import "SkColorSpace.h"
+#import "SkSurface.h"
+#import "SkCanvas.h"
 
 #import <include/gpu/GrDirectContext.h>
 
@@ -33,9 +33,9 @@ RNSkCanvasProvider(requestRedraw),
   #pragma clang diagnostic ignored "-Wunguarded-availability-new"
   _layer = [CAMetalLayer layer];
   #pragma clang diagnostic pop
-    
+
   auto device = MTLCreateSystemDefaultDevice();
-    
+
   _layer.framebufferOnly = NO;
   _layer.device = device;
   _layer.opaque = false;
@@ -74,12 +74,13 @@ void RNSkMetalCanvasProvider::renderToCanvas(const std::function<void(SkCanvas*)
     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
   {
+
     GrMTLHandle drawableHandle;
     auto skSurface = SkSurface::MakeFromCAMetalLayer(renderContext->skContext.get(),
                                                      (__bridge GrMTLHandle)_layer,
@@ -114,7 +115,7 @@ void RNSkMetalCanvasProvider::setSize(int width, int height) {
   _layer.frame = CGRectMake(0, 0, width, height);
   _layer.drawableSize = CGSizeMake(width * _context->getPixelDensity(),
                                    height* _context->getPixelDensity());
-  
+
   _requestRedraw();
 }
 

package/ios/RNSkia-iOS/RNSkiOSPlatformContext.h

@@ -12,7 +12,7 @@
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
-#include <SkStream.h>
+#include "SkStream.h"
 
 #pragma clang diagnostic pop
 
@@ -48,6 +48,7 @@ public:
   ~RNSkiOSPlatformContext() {
     CFNotificationCenterRemoveEveryObserver(
         CFNotificationCenterGetLocalCenter(), this);
+    stopDrawLoop();
   }
 
   void startDrawLoop() override;

package/ios/RNSkia-iOS/SkiaDrawViewManager.mm

@@ -1,13 +1,13 @@
-#include <SkiaDrawViewManager.h>
+#include "SkiaDrawViewManager.h"
 #include <React/RCTBridge+Private.h>
 
 #include <RNSkPlatformContext.h>
 #include <RNSkJsView.h>
 #include <RNSkIOSView.h>
 
-#include <SkiaManager.h>
+#include "SkiaManager.h"
 #include <RNSkiaModule.h>
-#include <SkiaUIView.h>
+#include "SkiaUIView.h"
 
 
 
@@ -24,7 +24,7 @@ RCT_EXPORT_MODULE(SkiaDrawView)
 RCT_CUSTOM_VIEW_PROPERTY(nativeID, NSNumber, SkiaUIView) {
   // Get parameter
   int nativeId = [[RCTConvert NSString:json] intValue];
-  [(SkiaUIView*)view setNativeId:nativeId];            
+  [(SkiaUIView*)view setNativeId:nativeId];
 }
 
 RCT_CUSTOM_VIEW_PROPERTY(mode, NSString, SkiaUIView) {

package/ios/RNSkia-iOS/SkiaManager.mm

@@ -1,4 +1,4 @@
-#import <SkiaManager.h>
+#import "SkiaManager.h"
 
 #import <Foundation/Foundation.h>
 
@@ -32,16 +32,16 @@
   if (self) {
     RCTCxxBridge *cxxBridge = (RCTCxxBridge *)bridge;
     if (cxxBridge.runtime) {
-      
+
       auto callInvoker = bridge.jsCallInvoker;
       facebook::jsi::Runtime* jsRuntime = (facebook::jsi::Runtime*)cxxBridge.runtime;
-      
+
       // Create platform context
       _platformContext = std::make_shared<RNSkia::RNSkiOSPlatformContext>(jsRuntime, callInvoker);
-            
+
       // Create the RNSkiaManager (cross platform)
       _skManager = std::make_shared<RNSkia::RNSkManager>(jsRuntime, callInvoker, _platformContext);
-          
+
     }
   }
   return self;

package/ios/RNSkia-iOS/SkiaPictureViewManager.mm

@@ -1,14 +1,14 @@
 
-#include <SkiaPictureViewManager.h>
+#include "SkiaPictureViewManager.h"
 #include <React/RCTBridge+Private.h>
 
 #include <RNSkPlatformContext.h>
 #include <RNSkPictureView.h>
 #include <RNSkIOSView.h>
 
-#include <SkiaManager.h>
+#include "SkiaManager.h"
 #include <RNSkiaModule.h>
-#include <SkiaUIView.h>
+#include "SkiaUIView.h"
 
 
 

package/ios/RNSkia-iOS/SkiaUIView.mm

@@ -1,6 +1,6 @@
 #import <React/RCTBridge.h>
 
-#import <SkiaUIView.h>
+#import "SkiaUIView.h"
 
 #include <utility>
 #include <vector>
@@ -29,7 +29,7 @@
     _debugMode = false;
     _drawingMode = RNSkia::RNSkDrawingMode::Default;
     _factory = factory;
-    
+
     // Listen to notifications about module invalidation
     [[NSNotificationCenter defaultCenter] addObserver:self
                                              selector:@selector(willInvalidateModules)
@@ -51,11 +51,11 @@
     // Remove implementation view when the parent view is not set
     if(_impl != nullptr) {
       [_impl->getLayer() removeFromSuperlayer];
-      
+
       if(_nativeId != 0 && _manager != nullptr) {
         _manager->setSkiaView(_nativeId, nullptr);
       }
-      
+
       _impl = nullptr;
     }
   } else {
@@ -79,9 +79,9 @@
   if(_manager != nullptr && _nativeId != 0) {
     _manager->unregisterSkiaView(_nativeId);
   }
-  
+
   [[NSNotificationCenter defaultCenter] removeObserver:self name:RCTBridgeWillInvalidateModulesNotification object:nil];
-    
+
   assert(_impl == nullptr);
 }
 
@@ -98,7 +98,7 @@
 
 -(void) setDrawingMode:(std::string) mode {
   _drawingMode = mode.compare("continuous") == 0 ? RNSkia::RNSkDrawingMode::Continuous : RNSkia::RNSkDrawingMode::Default;
-  
+
   if(_impl != nullptr) {
     _impl->getDrawView()->setDrawingMode(_drawingMode);
   }
@@ -113,7 +113,7 @@
 
 - (void) setNativeId:(size_t) nativeId {
   _nativeId = nativeId;
-  
+
   if(_impl != nullptr) {
     _manager->registerSkiaView(nativeId, _impl->getDrawView());
   }
@@ -147,7 +147,7 @@
       RNSkia::RNSkTouchInfo nextTouch;
       nextTouch.x = position.x;
       nextTouch.y = position.y;
-      nextTouch.force = [touch force];    
+      nextTouch.force = [touch force];
       nextTouch.id = [touch hash];
       auto phase = [touch phase];
       switch(phase) {
@@ -167,7 +167,7 @@
           nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::Active;
           break;
       }
-      
+
       nextTouches.push_back(nextTouch);
     }
     if(_impl != nullptr) {

package/lib/commonjs/renderer/Canvas.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactReconciler = _interopRequireDefault(require("react-reconciler"));
 
-var _reactNative = require("react-native");
-
 var _views = require("../views");
 
 var _Skia = require("../skia/Skia");
@@ -21,8 +19,6 @@ var _Container = require("./Container");
 
 var _DependencyManager = require("./DependencyManager");
 
-var _useCanvas = require("./useCanvas");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -64,11 +60,10 @@ const Canvas = /*#__PURE__*/(0, _react.forwardRef)((_ref, forwardedRef) => {
   } = _ref;
   const innerRef = useCanvasRef();
   const ref = useCombinedRefs(forwardedRef, innerRef);
-  const [, setTick] = (0, _react.useState)(0);
   const redraw = (0, _react.useCallback)(() => {
     var _innerRef$current;
 
-    _reactNative.Platform.OS === "web" ? setTick(tick => tick + 1) : (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.redraw();
+    (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.redraw();
   }, [innerRef]);
   const registerValues = (0, _react.useCallback)(values => {
     if (ref.current === null) {
@@ -83,11 +78,7 @@ const Canvas = /*#__PURE__*/(0, _react.forwardRef)((_ref, forwardedRef) => {
   const root = (0, _react.useMemo)(() => skiaReconciler.createContainer(container, 0, null, true, null, "", console.error, null), [container]); // Render effect
 
   (0, _react.useEffect)(() => {
-    render( /*#__PURE__*/_react.default.createElement(_useCanvas.CanvasProvider, {
-      value: {
-        Skia: _Skia.Skia
-      }
-    }, children), root, container);
+    render(children, root, container);
   }, [children, root, redraw, container]);
   (0, _react.useEffect)(() => {
     return () => {

package/lib/commonjs/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["skiaReconciler","ReactReconciler","skHostConfig","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","hostDebug","depMgr","update","useCanvasRef","useRef","createDependencyManager","registerValues","global","SkiaDomApi","DependencyManager","Canvas","forwardRef","forwardedRef","children","style","debug","mode","onTouch","onSize","props","innerRef","ref","useCombinedRefs","setTick","useState","redraw","useCallback","Platform","OS","tick","current","values","Error","useMemo","Container","Skia","createContainer","console","error","useEffect","remove","refs","targetRef","React","forEach"],"sources":["Canvas.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\nimport { Platform } from \"react-native\";\n\nimport { SkiaDomView } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { Skia } from \"../skia/Skia\";\nimport type { SkiaValue } from \"../values\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { Container } from \"./Container\";\nimport { DependencyManager } from \"./DependencyManager\";\nimport { CanvasProvider } from \"./useCanvas\";\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n    container.depMgr.update();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nconst createDependencyManager = (\n  registerValues: (values: Array<SkiaValue<unknown>>) => () => void\n) =>\n  global.SkiaDomApi && global.SkiaDomApi.DependencyManager\n    ? global.SkiaDomApi.DependencyManager(registerValues)\n    : new DependencyManager(registerValues);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaDomView> {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nexport const Canvas = forwardRef<SkiaDomView, CanvasProps>(\n  (\n    { children, style, debug, mode, onTouch, onSize, ...props },\n    forwardedRef\n  ) => {\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [, setTick] = useState(0);\n    const redraw = useCallback(() => {\n      Platform.OS === \"web\"\n        ? setTick((tick) => tick + 1)\n        : innerRef.current?.redraw();\n    }, [innerRef]);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current === null) {\n          throw new Error(\"Canvas ref is not set\");\n        }\n        return ref.current.registerValues(values);\n      },\n      [ref]\n    );\n\n    const container = useMemo(() => {\n      return new Container(\n        Skia,\n        createDependencyManager(registerValues),\n        redraw\n      );\n    }, [redraw, registerValues]);\n\n    const root = useMemo(\n      () =>\n        skiaReconciler.createContainer(\n          container,\n          0,\n          null,\n          true,\n          null,\n          \"\",\n          console.error,\n          null\n        ),\n      [container]\n    );\n\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasProvider value={{ Skia }}>{children}</CanvasProvider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container]);\n\n    useEffect(() => {\n      return () => {\n        skiaReconciler.updateContainer(null, root, null, () => {\n          container.depMgr.remove();\n        });\n      };\n    }, [container, root]);\n\n    return (\n      <SkiaDomView\n        ref={ref}\n        style={style}\n        root={container.root}\n        onTouch={onTouch}\n        onSize={onSize}\n        mode={mode}\n        debug={debug}\n        {...props}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":"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"}
+{"version":3,"names":["skiaReconciler","ReactReconciler","skHostConfig","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","hostDebug","depMgr","update","useCanvasRef","useRef","createDependencyManager","registerValues","global","SkiaDomApi","DependencyManager","Canvas","forwardRef","forwardedRef","children","style","debug","mode","onTouch","onSize","props","innerRef","ref","useCombinedRefs","redraw","useCallback","current","values","Error","useMemo","Container","Skia","createContainer","console","error","useEffect","remove","refs","targetRef","React","forEach"],"sources":["Canvas.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaDomView } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { Skia } from \"../skia/Skia\";\nimport type { SkiaValue } from \"../values\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { Container } from \"./Container\";\nimport { DependencyManager } from \"./DependencyManager\";\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n    container.depMgr.update();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nconst createDependencyManager = (\n  registerValues: (values: Array<SkiaValue<unknown>>) => () => void\n) =>\n  global.SkiaDomApi && global.SkiaDomApi.DependencyManager\n    ? global.SkiaDomApi.DependencyManager(registerValues)\n    : new DependencyManager(registerValues);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaDomView> {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nexport const Canvas = forwardRef<SkiaDomView, CanvasProps>(\n  (\n    { children, style, debug, mode, onTouch, onSize, ...props },\n    forwardedRef\n  ) => {\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const redraw = useCallback(() => {\n      innerRef.current?.redraw();\n    }, [innerRef]);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current === null) {\n          throw new Error(\"Canvas ref is not set\");\n        }\n        return ref.current.registerValues(values);\n      },\n      [ref]\n    );\n\n    const container = useMemo(() => {\n      return new Container(\n        Skia,\n        createDependencyManager(registerValues),\n        redraw\n      );\n    }, [redraw, registerValues]);\n\n    const root = useMemo(\n      () =>\n        skiaReconciler.createContainer(\n          container,\n          0,\n          null,\n          true,\n          null,\n          \"\",\n          console.error,\n          null\n        ),\n      [container]\n    );\n\n    // Render effect\n    useEffect(() => {\n      render(children, root, container);\n    }, [children, root, redraw, container]);\n\n    useEffect(() => {\n      return () => {\n        skiaReconciler.updateContainer(null, root, null, () => {\n          container.depMgr.remove();\n        });\n      };\n    }, [container, root]);\n\n    return (\n      <SkiaDomView\n        ref={ref}\n        style={style}\n        root={container.root}\n        onTouch={onTouch}\n        onSize={onSize}\n        mode={mode}\n        debug={debug}\n        {...props}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":";;;;;;;AAAA;;AAeA;;AAEA;;AAEA;;AAGA;;AAEA;;AACA;;;;;;;;;;AAEO,MAAMA,cAAc,GAAG,IAAAC,wBAAA,EAAgBC,wBAAhB,CAAvB;;AAEPF,cAAc,CAACG,kBAAf,CAAkC;EAChCC,UAAU,EAAE,CADoB;EAEhCC,OAAO,EAAE,OAFuB;EAGhCC,mBAAmB,EAAE;AAHW,CAAlC;;AAMA,MAAMC,MAAM,GAAG,CAACC,OAAD,EAAqBC,IAArB,EAAuCC,SAAvC,KAAgE;EAC7EV,cAAc,CAACW,eAAf,CAA+BH,OAA/B,EAAwCC,IAAxC,EAA8C,IAA9C,EAAoD,MAAM;IACxD,IAAAG,iBAAA,EAAU,iBAAV;IACAF,SAAS,CAACG,MAAV,CAAiBC,MAAjB;EACD,CAHD;AAID,CALD;;AAOO,MAAMC,YAAY,GAAG,MAAM,IAAAC,aAAA,EAAoB,IAApB,CAA3B;;;;AAEP,MAAMC,uBAAuB,GAC3BC,cAD8B,IAG9BC,MAAM,CAACC,UAAP,IAAqBD,MAAM,CAACC,UAAP,CAAkBC,iBAAvC,GACIF,MAAM,CAACC,UAAP,CAAkBC,iBAAlB,CAAoCH,cAApC,CADJ,GAEI,IAAIG,oCAAJ,CAAsBH,cAAtB,CALN;;AAaO,MAAMI,MAAM,gBAAG,IAAAC,iBAAA,EACpB,OAEEC,YAFF,KAGK;EAAA,IAFH;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0BC,IAA1B;IAAgCC,OAAhC;IAAyCC,MAAzC;IAAiD,GAAGC;EAApD,CAEG;EACH,MAAMC,QAAQ,GAAGjB,YAAY,EAA7B;EACA,MAAMkB,GAAG,GAAGC,eAAe,CAACV,YAAD,EAAeQ,QAAf,CAA3B;EACA,MAAMG,MAAM,GAAG,IAAAC,kBAAA,EAAY,MAAM;IAAA;;IAC/B,qBAAAJ,QAAQ,CAACK,OAAT,wEAAkBF,MAAlB;EACD,CAFc,EAEZ,CAACH,QAAD,CAFY,CAAf;EAIA,MAAMd,cAAc,GAAG,IAAAkB,kBAAA,EACpBE,MAAD,IAAuC;IACrC,IAAIL,GAAG,CAACI,OAAJ,KAAgB,IAApB,EAA0B;MACxB,MAAM,IAAIE,KAAJ,CAAU,uBAAV,CAAN;IACD;;IACD,OAAON,GAAG,CAACI,OAAJ,CAAYnB,cAAZ,CAA2BoB,MAA3B,CAAP;EACD,CANoB,EAOrB,CAACL,GAAD,CAPqB,CAAvB;EAUA,MAAMvB,SAAS,GAAG,IAAA8B,cAAA,EAAQ,MAAM;IAC9B,OAAO,IAAIC,oBAAJ,CACLC,UADK,EAELzB,uBAAuB,CAACC,cAAD,CAFlB,EAGLiB,MAHK,CAAP;EAKD,CANiB,EAMf,CAACA,MAAD,EAASjB,cAAT,CANe,CAAlB;EAQA,MAAMT,IAAI,GAAG,IAAA+B,cAAA,EACX,MACExC,cAAc,CAAC2C,eAAf,CACEjC,SADF,EAEE,CAFF,EAGE,IAHF,EAIE,IAJF,EAKE,IALF,EAME,EANF,EAOEkC,OAAO,CAACC,KAPV,EAQE,IARF,CAFS,EAYX,CAACnC,SAAD,CAZW,CAAb,CAzBG,CAwCH;;EACA,IAAAoC,gBAAA,EAAU,MAAM;IACdvC,MAAM,CAACkB,QAAD,EAAWhB,IAAX,EAAiBC,SAAjB,CAAN;EACD,CAFD,EAEG,CAACe,QAAD,EAAWhB,IAAX,EAAiB0B,MAAjB,EAAyBzB,SAAzB,CAFH;EAIA,IAAAoC,gBAAA,EAAU,MAAM;IACd,OAAO,MAAM;MACX9C,cAAc,CAACW,eAAf,CAA+B,IAA/B,EAAqCF,IAArC,EAA2C,IAA3C,EAAiD,MAAM;QACrDC,SAAS,CAACG,MAAV,CAAiBkC,MAAjB;MACD,CAFD;IAGD,CAJD;EAKD,CAND,EAMG,CAACrC,SAAD,EAAYD,IAAZ,CANH;EAQA,oBACE,6BAAC,kBAAD;IACE,GAAG,EAAEwB,GADP;IAEE,KAAK,EAAEP,KAFT;IAGE,IAAI,EAAEhB,SAAS,CAACD,IAHlB;IAIE,OAAO,EAAEoB,OAJX;IAKE,MAAM,EAAEC,MALV;IAME,IAAI,EAAEF,IANR;IAOE,KAAK,EAAED;EAPT,GAQMI,KARN,EADF;AAYD,CArEmB,CAAf;AAwEP;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACA,MAAMG,eAAe,GAAG,YAEnB;EAAA,kCADAc,IACA;IADAA,IACA;EAAA;;EACH,MAAMC,SAAS,GAAGC,cAAA,CAAMlC,MAAN,CAAgB,IAAhB,CAAlB;;EACAkC,cAAA,CAAMJ,SAAN,CAAgB,MAAM;IACpBE,IAAI,CAACG,OAAL,CAAclB,GAAD,IAAS;MACpB,IAAIA,GAAJ,EAAS;QACP,IAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;UAC7BA,GAAG,CAACgB,SAAS,CAACZ,OAAX,CAAH;QACD,CAFD,MAEO;UACLJ,GAAG,CAACI,OAAJ,GAAcY,SAAS,CAACZ,OAAxB;QACD;MACF;IACF,CARD;EASD,CAVD,EAUG,CAACW,IAAD,CAVH;;EAWA,OAAOC,SAAP;AACD,CAhBD"}

package/lib/commonjs/renderer/Container.js

@@ -10,7 +10,8 @@ var _nodes = require("../dom/nodes");
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 class Container {
-  constructor(Skia, depMgr, redraw) {
+  constructor(Skia, depMgr) {
+    let redraw = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => {};
     this.depMgr = depMgr;
     this.redraw = redraw;
 

package/lib/commonjs/renderer/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["Container","constructor","Skia","depMgr","redraw","Sk","JsiSkDOM","_root","Group","draw","ctx","render","root"],"sources":["Container.tsx"],"sourcesContent":["import { JsiSkDOM } from \"../dom/nodes\";\nimport type {\n  GroupProps,\n  DrawingContext,\n  RenderNode,\n  SkDOM,\n} from \"../dom/types\";\nimport type { Skia } from \"../skia/types\";\n\nimport type { DependencyManager } from \"./DependencyManager\";\n\nexport class Container {\n  private _root: RenderNode<GroupProps>;\n  public Sk: SkDOM;\n  constructor(\n    Skia: Skia,\n    public depMgr: DependencyManager,\n    public redraw: () => void\n  ) {\n    this.Sk = new JsiSkDOM({ Skia, depMgr });\n    this._root = this.Sk.Group();\n  }\n\n  draw(ctx: DrawingContext) {\n    this._root.render(ctx);\n  }\n\n  get root() {\n    return this._root;\n  }\n}\n"],"mappings":";;;;;;;AAAA;;;;AAWO,MAAMA,SAAN,CAAgB;EAGrBC,WAAW,CACTC,IADS,EAEFC,MAFE,EAGFC,MAHE,EAIT;IAAA,KAFOD,MAEP,GAFOA,MAEP;IAAA,KADOC,MACP,GADOA,MACP;;IAAA;;IAAA;;IACA,KAAKC,EAAL,GAAU,IAAIC,eAAJ,CAAa;MAAEJ,IAAF;MAAQC;IAAR,CAAb,CAAV;IACA,KAAKI,KAAL,GAAa,KAAKF,EAAL,CAAQG,KAAR,EAAb;EACD;;EAEDC,IAAI,CAACC,GAAD,EAAsB;IACxB,KAAKH,KAAL,CAAWI,MAAX,CAAkBD,GAAlB;EACD;;EAEO,IAAJE,IAAI,GAAG;IACT,OAAO,KAAKL,KAAZ;EACD;;AAlBoB"}
+{"version":3,"names":["Container","constructor","Skia","depMgr","redraw","Sk","JsiSkDOM","_root","Group","draw","ctx","render","root"],"sources":["Container.tsx"],"sourcesContent":["import { JsiSkDOM } from \"../dom/nodes\";\nimport type {\n  GroupProps,\n  DrawingContext,\n  RenderNode,\n  SkDOM,\n} from \"../dom/types\";\nimport type { Skia } from \"../skia/types\";\n\nimport type { DependencyManager } from \"./DependencyManager\";\n\nexport class Container {\n  private _root: RenderNode<GroupProps>;\n  public Sk: SkDOM;\n  constructor(\n    Skia: Skia,\n    public depMgr: DependencyManager,\n    public redraw: () => void = () => {}\n  ) {\n    this.Sk = new JsiSkDOM({ Skia, depMgr });\n    this._root = this.Sk.Group();\n  }\n\n  draw(ctx: DrawingContext) {\n    this._root.render(ctx);\n  }\n\n  get root() {\n    return this._root;\n  }\n}\n"],"mappings":";;;;;;;AAAA;;;;AAWO,MAAMA,SAAN,CAAgB;EAGrBC,WAAW,CACTC,IADS,EAEFC,MAFE,EAIT;IAAA,IADOC,MACP,uEAD4B,MAAM,CAAE,CACpC;IAAA,KAFOD,MAEP,GAFOA,MAEP;IAAA,KADOC,MACP,GADOA,MACP;;IAAA;;IAAA;;IACA,KAAKC,EAAL,GAAU,IAAIC,eAAJ,CAAa;MAAEJ,IAAF;MAAQC;IAAR,CAAb,CAAV;IACA,KAAKI,KAAL,GAAa,KAAKF,EAAL,CAAQG,KAAR,EAAb;EACD;;EAEDC,IAAI,CAACC,GAAD,EAAsB;IACxB,KAAKH,KAAL,CAAWI,MAAX,CAAkBD,GAAlB;EACD;;EAEO,IAAJE,IAAI,GAAG;IACT,OAAO,KAAKL,KAAZ;EACD;;AAlBoB"}

package/lib/commonjs/renderer/components/Mask.js

@@ -5,17 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Mask = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _types = require("../../skia/types");
-
-var _useCanvas = require("../useCanvas");
+var _react = _interopRequireDefault(require("react"));
 
 var _Group = require("./Group");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _LumaColorFilter = require("./colorFilters/LumaColorFilter");
+
+var _Paint = require("./Paint");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Mask = _ref => {
   let {
@@ -24,28 +22,16 @@ const Mask = _ref => {
     mode,
     clip
   } = _ref;
-  const Skia = (0, _useCanvas.useSkiaPrivate)();
-  const maskPaint = (0, _react.useMemo)(() => {
-    const paint = Skia.Paint();
-    paint.setBlendMode(_types.BlendMode.Src);
-
-    if (mode === "luminance") {
-      paint.setColorFilter(Skia.ColorFilter.MakeLumaColorFilter());
-    }
-
-    return paint;
-  }, [Skia, mode]);
-  const clippingPaint = (0, _react.useMemo)(() => {
-    const paint = Skia.Paint();
-    paint.setBlendMode(_types.BlendMode.DstIn);
-    return paint;
-  }, [Skia]);
   return /*#__PURE__*/_react.default.createElement(_Group.Group, {
     layer: true
   }, /*#__PURE__*/_react.default.createElement(_Group.Group, {
-    layer: maskPaint
+    layer: /*#__PURE__*/_react.default.createElement(_Paint.Paint, {
+      blendMode: "src"
+    }, mode === "luminance" && /*#__PURE__*/_react.default.createElement(_LumaColorFilter.LumaColorFilter, null))
   }, mask, clip && /*#__PURE__*/_react.default.createElement(_Group.Group, {
-    layer: clippingPaint
+    layer: /*#__PURE__*/_react.default.createElement(_Paint.Paint, {
+      blendMode: "dstIn"
+    })
   }, children)), /*#__PURE__*/_react.default.createElement(_Group.Group, {
     blendMode: "srcIn"
   }, children));

package/lib/commonjs/renderer/components/Mask.js.map

@@ -1 +1 @@
-{"version":3,"names":["Mask","children","mask","mode","clip","Skia","useSkiaPrivate","maskPaint","useMemo","paint","Paint","setBlendMode","BlendMode","Src","setColorFilter","ColorFilter","MakeLumaColorFilter","clippingPaint","DstIn","defaultProps"],"sources":["Mask.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport { BlendMode } from \"../../skia/types\";\nimport { useSkiaPrivate } from \"../useCanvas\";\n\nimport { Group } from \"./Group\";\n\ninterface MaskProps {\n  mode: \"luminance\" | \"alpha\";\n  clip: boolean;\n  mask: ReactNode | ReactNode[];\n  children: ReactNode | ReactNode[];\n}\n\nexport const Mask = ({ children, mask, mode, clip }: MaskProps) => {\n  const Skia = useSkiaPrivate();\n  const maskPaint = useMemo(() => {\n    const paint = Skia.Paint();\n    paint.setBlendMode(BlendMode.Src);\n    if (mode === \"luminance\") {\n      paint.setColorFilter(Skia.ColorFilter.MakeLumaColorFilter());\n    }\n    return paint;\n  }, [Skia, mode]);\n  const clippingPaint = useMemo(() => {\n    const paint = Skia.Paint();\n    paint.setBlendMode(BlendMode.DstIn);\n    return paint;\n  }, [Skia]);\n  return (\n    <Group layer>\n      <Group layer={maskPaint}>\n        {mask}\n        {clip && <Group layer={clippingPaint}>{children}</Group>}\n      </Group>\n      <Group blendMode=\"srcIn\">{children}</Group>\n    </Group>\n  );\n};\n\nMask.defaultProps = {\n  mode: \"alpha\",\n  clip: true,\n};\n"],"mappings":";;;;;;;AACA;;AAEA;;AACA;;AAEA;;;;;;AASO,MAAMA,IAAI,GAAG,QAA+C;EAAA,IAA9C;IAAEC,QAAF;IAAYC,IAAZ;IAAkBC,IAAlB;IAAwBC;EAAxB,CAA8C;EACjE,MAAMC,IAAI,GAAG,IAAAC,yBAAA,GAAb;EACA,MAAMC,SAAS,GAAG,IAAAC,cAAA,EAAQ,MAAM;IAC9B,MAAMC,KAAK,GAAGJ,IAAI,CAACK,KAAL,EAAd;IACAD,KAAK,CAACE,YAAN,CAAmBC,gBAAA,CAAUC,GAA7B;;IACA,IAAIV,IAAI,KAAK,WAAb,EAA0B;MACxBM,KAAK,CAACK,cAAN,CAAqBT,IAAI,CAACU,WAAL,CAAiBC,mBAAjB,EAArB;IACD;;IACD,OAAOP,KAAP;EACD,CAPiB,EAOf,CAACJ,IAAD,EAAOF,IAAP,CAPe,CAAlB;EAQA,MAAMc,aAAa,GAAG,IAAAT,cAAA,EAAQ,MAAM;IAClC,MAAMC,KAAK,GAAGJ,IAAI,CAACK,KAAL,EAAd;IACAD,KAAK,CAACE,YAAN,CAAmBC,gBAAA,CAAUM,KAA7B;IACA,OAAOT,KAAP;EACD,CAJqB,EAInB,CAACJ,IAAD,CAJmB,CAAtB;EAKA,oBACE,6BAAC,YAAD;IAAO,KAAK;EAAZ,gBACE,6BAAC,YAAD;IAAO,KAAK,EAAEE;EAAd,GACGL,IADH,EAEGE,IAAI,iBAAI,6BAAC,YAAD;IAAO,KAAK,EAAEa;EAAd,GAA8BhB,QAA9B,CAFX,CADF,eAKE,6BAAC,YAAD;IAAO,SAAS,EAAC;EAAjB,GAA0BA,QAA1B,CALF,CADF;AASD,CAxBM;;;AA0BPD,IAAI,CAACmB,YAAL,GAAoB;EAClBhB,IAAI,EAAE,OADY;EAElBC,IAAI,EAAE;AAFY,CAApB"}
+{"version":3,"names":["Mask","children","mask","mode","clip","defaultProps"],"sources":["Mask.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\n\nimport { Group } from \"./Group\";\nimport { LumaColorFilter } from \"./colorFilters/LumaColorFilter\";\nimport { Paint } from \"./Paint\";\n\ninterface MaskProps {\n  mode: \"luminance\" | \"alpha\";\n  clip: boolean;\n  mask: ReactNode | ReactNode[];\n  children: ReactNode | ReactNode[];\n}\n\nexport const Mask = ({ children, mask, mode, clip }: MaskProps) => {\n  return (\n    <Group layer>\n      <Group\n        layer={\n          <Paint blendMode=\"src\">\n            {mode === \"luminance\" && <LumaColorFilter />}\n          </Paint>\n        }\n      >\n        {mask}\n        {clip && <Group layer={<Paint blendMode=\"dstIn\" />}>{children}</Group>}\n      </Group>\n      <Group blendMode=\"srcIn\">{children}</Group>\n    </Group>\n  );\n};\n\nMask.defaultProps = {\n  mode: \"alpha\",\n  clip: true,\n};\n"],"mappings":";;;;;;;AACA;;AAEA;;AACA;;AACA;;;;AASO,MAAMA,IAAI,GAAG,QAA+C;EAAA,IAA9C;IAAEC,QAAF;IAAYC,IAAZ;IAAkBC,IAAlB;IAAwBC;EAAxB,CAA8C;EACjE,oBACE,6BAAC,YAAD;IAAO,KAAK;EAAZ,gBACE,6BAAC,YAAD;IACE,KAAK,eACH,6BAAC,YAAD;MAAO,SAAS,EAAC;IAAjB,GACGD,IAAI,KAAK,WAAT,iBAAwB,6BAAC,gCAAD,OAD3B;EAFJ,GAOGD,IAPH,EAQGE,IAAI,iBAAI,6BAAC,YAAD;IAAO,KAAK,eAAE,6BAAC,YAAD;MAAO,SAAS,EAAC;IAAjB;EAAd,GAA4CH,QAA5C,CARX,CADF,eAWE,6BAAC,YAAD;IAAO,SAAS,EAAC;EAAjB,GAA0BA,QAA1B,CAXF,CADF;AAeD,CAhBM;;;AAkBPD,IAAI,CAACK,YAAL,GAAoB;EAClBF,IAAI,EAAE,OADY;EAElBC,IAAI,EAAE;AAFY,CAApB"}

package/lib/commonjs/renderer/index.js

@@ -42,17 +42,4 @@ Object.keys(_DependencyManager).forEach(function (key) {
     }
   });
 });
-
-var _useCanvas = require("./useCanvas");
-
-Object.keys(_useCanvas).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useCanvas[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useCanvas[key];
-    }
-  });
-});
 //# sourceMappingURL=index.js.map

package/lib/commonjs/renderer/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./components\";\nexport * from \"./useContextBridge\";\nexport * from \"./DependencyManager\";\nexport * from \"./useCanvas\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./components\";\nexport * from \"./useContextBridge\";\nexport * from \"./DependencyManager\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/lib/module/renderer/Canvas.js

@@ -1,15 +1,13 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useEffect, useCallback, useMemo, forwardRef, useRef, useState } from "react";
+import React, { useEffect, useCallback, useMemo, forwardRef, useRef } from "react";
 import ReactReconciler from "react-reconciler";
-import { Platform } from "react-native";
 import { SkiaDomView } from "../views";
 import { Skia } from "../skia/Skia";
 import { debug as hostDebug, skHostConfig } from "./HostConfig"; // import { debugTree } from "./nodes";
 
 import { Container } from "./Container";
 import { DependencyManager } from "./DependencyManager";
-import { CanvasProvider } from "./useCanvas";
 export const skiaReconciler = ReactReconciler(skHostConfig);
 skiaReconciler.injectIntoDevTools({
   bundleType: 1,
@@ -40,11 +38,10 @@ export const Canvas = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   } = _ref;
   const innerRef = useCanvasRef();
   const ref = useCombinedRefs(forwardedRef, innerRef);
-  const [, setTick] = useState(0);
   const redraw = useCallback(() => {
     var _innerRef$current;
 
-    Platform.OS === "web" ? setTick(tick => tick + 1) : (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.redraw();
+    (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.redraw();
   }, [innerRef]);
   const registerValues = useCallback(values => {
     if (ref.current === null) {
@@ -59,11 +56,7 @@ export const Canvas = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   const root = useMemo(() => skiaReconciler.createContainer(container, 0, null, true, null, "", console.error, null), [container]); // Render effect
 
   useEffect(() => {
-    render( /*#__PURE__*/React.createElement(CanvasProvider, {
-      value: {
-        Skia
-      }
-    }, children), root, container);
+    render(children, root, container);
   }, [children, root, redraw, container]);
   useEffect(() => {
     return () => {