@shopify/react-native-skia 0.1.119 → 0.1.122

package/cpp/api/third_party/CSSColorParser.h

@@ -0,0 +1,324 @@
+// (c) Dean McNamee <dean@gmail.com>, 2012.
+// C++ port by Mapbox, Konstantin Käfer <mail@kkaefer.com>, 2014-2017.
+//
+// https://github.com/deanm/css-color-parser-js
+// https://github.com/kkaefer/css-color-parser-cpp
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to
+// deal in the Software without restriction, including without limitation the
+// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+// sell copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+// IN THE SOFTWARE.
+
+#pragma once
+
+#include <cstdint>
+#include <vector>
+#include <sstream>
+#include <algorithm>
+#include <string>
+#include <cmath>
+
+namespace CSSColorParser {
+
+    struct Color {
+        inline Color() {
+        }
+        inline Color(unsigned char r_, unsigned char g_, unsigned char b_, float a_)
+                : r(r_), g(g_), b(b_), a(a_ > 1 ? 1 : a_ < 0 ? 0 : a_) {
+        }
+        unsigned char r = 0, g = 0, b = 0;
+        float a = -1.0f;
+    };
+
+    struct NamedColor { const char *const name; const Color color; };
+
+    const NamedColor namedColors[] = {
+            { "transparent", { 0, 0, 0, 0 } }, { "aliceblue", { 240, 248, 255, 1 } },
+            { "antiquewhite", { 250, 235, 215, 1 } }, { "aqua", { 0, 255, 255, 1 } },
+            { "aquamarine", { 127, 255, 212, 1 } }, { "azure", { 240, 255, 255, 1 } },
+            { "beige", { 245, 245, 220, 1 } }, { "bisque", { 255, 228, 196, 1 } },
+            { "black", { 0, 0, 0, 1 } }, { "blanchedalmond", { 255, 235, 205, 1 } },
+            { "blue", { 0, 0, 255, 1 } }, { "blueviolet", { 138, 43, 226, 1 } },
+            { "brown", { 165, 42, 42, 1 } }, { "burlywood", { 222, 184, 135, 1 } },
+            { "cadetblue", { 95, 158, 160, 1 } }, { "chartreuse", { 127, 255, 0, 1 } },
+            { "chocolate", { 210, 105, 30, 1 } }, { "coral", { 255, 127, 80, 1 } },
+            { "cornflowerblue", { 100, 149, 237, 1 } }, { "cornsilk", { 255, 248, 220, 1 } },
+            { "crimson", { 220, 20, 60, 1 } }, { "cyan", { 0, 255, 255, 1 } },
+            { "darkblue", { 0, 0, 139, 1 } }, { "darkcyan", { 0, 139, 139, 1 } },
+            { "darkgoldenrod", { 184, 134, 11, 1 } }, { "darkgray", { 169, 169, 169, 1 } },
+            { "darkgreen", { 0, 100, 0, 1 } }, { "darkgrey", { 169, 169, 169, 1 } },
+            { "darkkhaki", { 189, 183, 107, 1 } }, { "darkmagenta", { 139, 0, 139, 1 } },
+            { "darkolivegreen", { 85, 107, 47, 1 } }, { "darkorange", { 255, 140, 0, 1 } },
+            { "darkorchid", { 153, 50, 204, 1 } }, { "darkred", { 139, 0, 0, 1 } },
+            { "darksalmon", { 233, 150, 122, 1 } }, { "darkseagreen", { 143, 188, 143, 1 } },
+            { "darkslateblue", { 72, 61, 139, 1 } }, { "darkslategray", { 47, 79, 79, 1 } },
+            { "darkslategrey", { 47, 79, 79, 1 } }, { "darkturquoise", { 0, 206, 209, 1 } },
+            { "darkviolet", { 148, 0, 211, 1 } }, { "deeppink", { 255, 20, 147, 1 } },
+            { "deepskyblue", { 0, 191, 255, 1 } }, { "dimgray", { 105, 105, 105, 1 } },
+            { "dimgrey", { 105, 105, 105, 1 } }, { "dodgerblue", { 30, 144, 255, 1 } },
+            { "firebrick", { 178, 34, 34, 1 } }, { "floralwhite", { 255, 250, 240, 1 } },
+            { "forestgreen", { 34, 139, 34, 1 } }, { "fuchsia", { 255, 0, 255, 1 } },
+            { "gainsboro", { 220, 220, 220, 1 } }, { "ghostwhite", { 248, 248, 255, 1 } },
+            { "gold", { 255, 215, 0, 1 } }, { "goldenrod", { 218, 165, 32, 1 } },
+            { "gray", { 128, 128, 128, 1 } }, { "green", { 0, 128, 0, 1 } },
+            { "greenyellow", { 173, 255, 47, 1 } }, { "grey", { 128, 128, 128, 1 } },
+            { "honeydew", { 240, 255, 240, 1 } }, { "hotpink", { 255, 105, 180, 1 } },
+            { "indianred", { 205, 92, 92, 1 } }, { "indigo", { 75, 0, 130, 1 } },
+            { "ivory", { 255, 255, 240, 1 } }, { "khaki", { 240, 230, 140, 1 } },
+            { "lavender", { 230, 230, 250, 1 } }, { "lavenderblush", { 255, 240, 245, 1 } },
+            { "lawngreen", { 124, 252, 0, 1 } }, { "lemonchiffon", { 255, 250, 205, 1 } },
+            { "lightblue", { 173, 216, 230, 1 } }, { "lightcoral", { 240, 128, 128, 1 } },
+            { "lightcyan", { 224, 255, 255, 1 } }, { "lightgoldenrodyellow", { 250, 250, 210, 1 } },
+            { "lightgray", { 211, 211, 211, 1 } }, { "lightgreen", { 144, 238, 144, 1 } },
+            { "lightgrey", { 211, 211, 211, 1 } }, { "lightpink", { 255, 182, 193, 1 } },
+            { "lightsalmon", { 255, 160, 122, 1 } }, { "lightseagreen", { 32, 178, 170, 1 } },
+            { "lightskyblue", { 135, 206, 250, 1 } }, { "lightslategray", { 119, 136, 153, 1 } },
+            { "lightslategrey", { 119, 136, 153, 1 } }, { "lightsteelblue", { 176, 196, 222, 1 } },
+            { "lightyellow", { 255, 255, 224, 1 } }, { "lime", { 0, 255, 0, 1 } },
+            { "limegreen", { 50, 205, 50, 1 } }, { "linen", { 250, 240, 230, 1 } },
+            { "magenta", { 255, 0, 255, 1 } }, { "maroon", { 128, 0, 0, 1 } },
+            { "mediumaquamarine", { 102, 205, 170, 1 } }, { "mediumblue", { 0, 0, 205, 1 } },
+            { "mediumorchid", { 186, 85, 211, 1 } }, { "mediumpurple", { 147, 112, 219, 1 } },
+            { "mediumseagreen", { 60, 179, 113, 1 } }, { "mediumslateblue", { 123, 104, 238, 1 } },
+            { "mediumspringgreen", { 0, 250, 154, 1 } }, { "mediumturquoise", { 72, 209, 204, 1 } },
+            { "mediumvioletred", { 199, 21, 133, 1 } }, { "midnightblue", { 25, 25, 112, 1 } },
+            { "mintcream", { 245, 255, 250, 1 } }, { "mistyrose", { 255, 228, 225, 1 } },
+            { "moccasin", { 255, 228, 181, 1 } }, { "navajowhite", { 255, 222, 173, 1 } },
+            { "navy", { 0, 0, 128, 1 } }, { "oldlace", { 253, 245, 230, 1 } },
+            { "olive", { 128, 128, 0, 1 } }, { "olivedrab", { 107, 142, 35, 1 } },
+            { "orange", { 255, 165, 0, 1 } }, { "orangered", { 255, 69, 0, 1 } },
+            { "orchid", { 218, 112, 214, 1 } }, { "palegoldenrod", { 238, 232, 170, 1 } },
+            { "palegreen", { 152, 251, 152, 1 } }, { "paleturquoise", { 175, 238, 238, 1 } },
+            { "palevioletred", { 219, 112, 147, 1 } }, { "papayawhip", { 255, 239, 213, 1 } },
+            { "peachpuff", { 255, 218, 185, 1 } }, { "peru", { 205, 133, 63, 1 } },
+            { "pink", { 255, 192, 203, 1 } }, { "plum", { 221, 160, 221, 1 } },
+            { "powderblue", { 176, 224, 230, 1 } }, { "purple", { 128, 0, 128, 1 } },
+            { "red", { 255, 0, 0, 1 } }, { "rosybrown", { 188, 143, 143, 1 } },
+            { "royalblue", { 65, 105, 225, 1 } }, { "saddlebrown", { 139, 69, 19, 1 } },
+            { "salmon", { 250, 128, 114, 1 } }, { "sandybrown", { 244, 164, 96, 1 } },
+            { "seagreen", { 46, 139, 87, 1 } }, { "seashell", { 255, 245, 238, 1 } },
+            { "sienna", { 160, 82, 45, 1 } }, { "silver", { 192, 192, 192, 1 } },
+            { "skyblue", { 135, 206, 235, 1 } }, { "slateblue", { 106, 90, 205, 1 } },
+            { "slategray", { 112, 128, 144, 1 } }, { "slategrey", { 112, 128, 144, 1 } },
+            { "snow", { 255, 250, 250, 1 } }, { "springgreen", { 0, 255, 127, 1 } },
+            { "steelblue", { 70, 130, 180, 1 } }, { "tan", { 210, 180, 140, 1 } },
+            { "teal", { 0, 128, 128, 1 } }, { "thistle", { 216, 191, 216, 1 } },
+            { "tomato", { 255, 99, 71, 1 } }, { "turquoise", { 64, 224, 208, 1 } },
+            { "violet", { 238, 130, 238, 1 } }, { "wheat", { 245, 222, 179, 1 } },
+            { "white", { 255, 255, 255, 1 } }, { "whitesmoke", { 245, 245, 245, 1 } },
+            { "yellow", { 255, 255, 0, 1 } }, { "yellowgreen", { 154, 205, 50, 1 } }
+    };
+
+    template <typename T>
+    uint8_t clamp_css_byte(T i) {  // Clamp to integer 0 .. 255.
+        i = ::round(i);  // Seems to be what Chrome does (vs truncation).
+        return i < 0 ? 0 : i > 255 ? 255 : uint8_t(i);
+    }
+
+    template <typename T>
+    float clamp_css_float(T f) {  // Clamp to float 0.0 .. 1.0.
+        return f < 0 ? 0 : f > 1 ? 1 : float(f);
+    }
+
+    float parseFloat(const std::string& str) {
+        return strtof(str.c_str(), nullptr);
+    }
+
+    int64_t parseInt(const std::string& str, uint8_t base = 10) {
+        return strtoll(str.c_str(), nullptr, base);
+    }
+
+    uint8_t parse_css_int(const std::string& str) {  // int or percentage.
+        if (str.length() && str.back() == '%') {
+            return clamp_css_byte(parseFloat(str) / 100.0f * 255.0f);
+        } else {
+            return clamp_css_byte(parseInt(str));
+        }
+    }
+
+    float parse_css_float(const std::string& str) {  // float or percentage.
+        if (str.length() && str.back() == '%') {
+            return clamp_css_float(parseFloat(str) / 100.0f);
+        } else {
+            return clamp_css_float(parseFloat(str));
+        }
+    }
+
+    float css_hue_to_rgb(float m1, float m2, float h) {
+        if (h < 0.0f) {
+            h += 1.0f;
+        } else if (h > 1.0f) {
+            h -= 1.0f;
+        }
+
+        if (h * 6.0f < 1.0f) {
+            return m1 + (m2 - m1) * h * 6.0f;
+        }
+        if (h * 2.0f < 1.0f) {
+            return m2;
+        }
+        if (h * 3.0f < 2.0f) {
+            return m1 + (m2 - m1) * (2.0f / 3.0f - h) * 6.0f;
+        }
+        return m1;
+    }
+
+    std::vector<std::string> split(const std::string& s, char delim) {
+        std::vector<std::string> elems;
+        std::stringstream ss(s);
+        std::string item;
+        while (std::getline(ss, item, delim)) {
+            elems.push_back(item);
+        }
+        return elems;
+    }
+
+
+    inline bool operator==(const Color& lhs, const Color& rhs) {
+        return lhs.r == rhs.r && lhs.g == rhs.g && lhs.b == rhs.b && ::fabs(lhs.a - rhs.a) < 0.0001f;
+    }
+
+    inline bool operator!=(const Color& lhs, const Color& rhs) {
+        return !(lhs == rhs);
+    }
+
+    Color parse(const std::string& css_str)  {
+        std::string str = css_str;
+
+        // Remove all whitespace, not compliant, but should just be more accepting.
+        str.erase(std::remove(str.begin(), str.end(), ' '), str.end());
+
+        // Convert to lowercase.
+        std::transform(str.begin(), str.end(), str.begin(), ::tolower);
+
+        for (const auto& namedColor : namedColors) {
+            if (str == namedColor.name) {
+                return { namedColor.color };
+            }
+        }
+
+        // #abc and #abc123 syntax.
+        if (str.length() && str.front() == '#') {
+            auto iv = parseInt(str.substr(1), 16);  // TODO(deanm): Stricter parsing.
+            if (str.length() == 4) {
+                if (!(iv >= 0 && iv <= 0xfff)) {
+                    return {};
+                } else {
+                    return {
+                    static_cast<uint8_t>(((iv & 0xf00) >> 4) | ((iv & 0xf00) >> 8)),
+                    static_cast<uint8_t>((iv & 0xf0) | ((iv & 0xf0) >> 4)),
+                    static_cast<uint8_t>((iv & 0xf) | ((iv & 0xf) << 4)),
+                    1
+                    };
+                }
+            } else if (str.length() == 7) {
+                if (!(iv >= 0 && iv <= 0xffffff)) {
+                    return {};  // Covers NaN.
+                } else {
+                    return {
+                    static_cast<uint8_t>((iv & 0xff0000) >> 16),
+                    static_cast<uint8_t>((iv & 0xff00) >> 8),
+                    static_cast<uint8_t>(iv & 0xff),
+                    1
+                    };
+                }
+            }else if (str.length() == 5) {
+                // #rgba
+                if (!(iv >= 0 && iv <= 0xffff)) return {};  // Covers NaN.
+                return {
+                static_cast<uint8_t>(((iv & 0xf000) >> 8) | ((iv & 0xf000) >> 12)),
+                static_cast<uint8_t>(((iv & 0x0f00) >> 4) | ((iv & 0x0f00) >> 8)),
+                static_cast<uint8_t>((iv & 0x00f0)       | ((iv & 0x00f0) >> 4)),
+                static_cast<uint8_t>(((iv & 0x000f) << 4  |  (iv & 0x000f))) / 255.0f
+                };
+            } else if (str.length() == 9) {
+                // #rrggbbaa
+                if (!(iv >= 0 && iv <= 0xffffffff)) return {};  // Covers NaN.
+                return {
+                static_cast<uint8_t>(((iv & 0xff000000) >> 24) & 0xff),
+                static_cast<uint8_t>((iv & 0x00ff0000) >> 16),
+                static_cast<uint8_t>((iv & 0x0000ff00) >> 8),
+                static_cast<uint8_t>((iv & 0x000000ff)) / 255.0f
+                };
+            }
+
+            return {};
+        }
+
+        size_t op = str.find_first_of('('), ep = str.find_first_of(')');
+        if (op != std::string::npos && ep + 1 == str.length()) {
+            const std::string fname = str.substr(0, op);
+            const std::vector<std::string> params = split(str.substr(op + 1, ep - (op + 1)), ',');
+
+            float alpha = 1.0f;
+
+            if (fname == "rgba" || fname == "rgb") {
+                if (fname == "rgba") {
+                    if (params.size() != 4) {
+                        return { };
+                    }
+                    alpha = parse_css_float(params.back());
+                } else {
+                    if (params.size() != 3) {
+                        return { };
+                    }
+                }
+
+                return {
+                        parse_css_int(params[0]),
+                        parse_css_int(params[1]),
+                        parse_css_int(params[2]),
+                        alpha
+                };
+
+            } else if (fname == "hsla" || fname == "hsl") {
+                if (fname == "hsla") {
+                    if (params.size() != 4) {
+                        return { };
+                    }
+                    alpha = parse_css_float(params.back());
+                } else {
+                    if (params.size() != 3) {
+                        return { };
+                    }
+                }
+
+                float h = parseFloat(params[0]) / 360.0f;
+                float i;
+                // Normalize the hue to [0..1[
+                h = std::modf(h, &i);
+
+                // NOTE(deanm): According to the CSS spec s/l should only be
+                // percentages, but we don't bother and let float or percentage.
+                float s = parse_css_float(params[1]);
+                float l = parse_css_float(params[2]);
+
+                float m2 = l <= 0.5f ? l * (s + 1.0f) : l + s - l * s;
+                float m1 = l * 2.0f - m2;
+
+                return {
+                        clamp_css_byte(css_hue_to_rgb(m1, m2, h + 1.0f / 3.0f) * 255.0f),
+                        clamp_css_byte(css_hue_to_rgb(m1, m2, h) * 255.0f),
+                        clamp_css_byte(css_hue_to_rgb(m1, m2, h - 1.0f / 3.0f) * 255.0f),
+                        alpha
+                };
+            }
+        }
+
+        return { };
+    }
+
+} // namespace CSSColorParser

package/cpp/rnskia/RNSkAnimation.h

@@ -15,7 +15,7 @@ using namespace facebook;
 /**
  Implements an animation that can be used to drive other values
  */
-class RNSkAnimation : public RNSkClockValue, public std::enable_shared_from_this<RNSkAnimation>
+class RNSkAnimation : public RNSkClockValue
 {
   
 public:
@@ -23,8 +23,8 @@ public:
                      size_t identifier,
                      jsi::Runtime& runtime,
                      const jsi::Value *arguments,
-                     size_t count)
-      : RNSkClockValue(platformContext, identifier, runtime, arguments, count) {
+                     size_t count) :
+    RNSkClockValue(platformContext, identifier, runtime, arguments, count) {
     // Save the update function
     _updateFunction = std::make_shared<jsi::Function>(arguments[0].asObject(runtime).asFunction(runtime));
         
@@ -32,10 +32,7 @@ public:
     _args[1] = jsi::Value::undefined();
   }
   
-  ~RNSkAnimation() {
-    // We need to stop/unsubscribe
-    stopClock();
-  }
+  virtual ~RNSkAnimation() {}
   
   JSI_HOST_FUNCTION(cancel) {
     stopClock();

package/cpp/rnskia/values/RNSkClockValue.h

@@ -8,7 +8,6 @@
 #include <algorithm>
 #include <functional>
 #include <chrono>
-#include <mutex>
 
 namespace RNSkia
 {
@@ -38,7 +37,7 @@ public:
     update(_runtime, static_cast<double>(0));
   }
   
-  ~RNSkClockValue() {
+  virtual ~RNSkClockValue() {
     stopClock();
   }
   
@@ -100,10 +99,11 @@ protected:
       return;
     }
     
-    // Avoid moving on if we are being called after the dtor was started
     // Ensure we call any updates from the draw loop on the javascript thread
     getContext()->runOnJavascriptThread(
-      [this]() {
+      // To ensure that this shared_ptr instance is not deallocated before we are done
+      // running the update lambda we pass a shared from this to the lambda scope.
+      [self = shared_from_this(), this]() {
       if(_state == RNSkClockState::Running) {
         auto now = std::chrono::high_resolution_clock::now();
         auto deltaFromStart = std::chrono::duration_cast<std::chrono::milliseconds>(now - _start).count();

package/cpp/rnskia/values/RNSkDerivedValue.h

@@ -73,7 +73,7 @@ public:
     dependencyUpdated(runtime);
   }
   
-  ~RNSkDerivedValue() {
+  virtual ~RNSkDerivedValue() {
     // Unregister listeners
     for(const auto &unsubscribe: _unsubscribers) {
       unsubscribe();

package/cpp/rnskia/values/RNSkReadonlyValue.h

@@ -4,9 +4,7 @@
 #include <algorithm>
 #include <functional>
 #include <chrono>
-#include <mutex>
 #include <unordered_map>
-#include <utility>
 #include <memory>
 
 #include <jsi/jsi.h>
@@ -22,16 +20,15 @@ using namespace facebook;
  Implements a readonly Value that is updated every time the screen is redrawn. Its value will be the
  number of milliseconds since the animation value was started.
  */
-class RNSkReadonlyValue : public JsiSkHostObject
+class RNSkReadonlyValue : public JsiSkHostObject,
+                          public std::enable_shared_from_this<RNSkReadonlyValue>
 {
 public:
   RNSkReadonlyValue(std::shared_ptr<RNSkPlatformContext> platformContext)
       : JsiSkHostObject(platformContext),
     _propNameId(jsi::PropNameID::forUtf8(*platformContext->getJsRuntime(), "value")) {}
   
-  ~RNSkReadonlyValue() {
-    _invalidated = true;
-  }
+  virtual ~RNSkReadonlyValue() { }
 
   JSI_PROPERTY_GET(__typename__) {
     return jsi::String::createFromUtf8(runtime, "RNSkValue");
@@ -43,8 +40,7 @@ public:
   
   JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(RNSkReadonlyValue, __typename__),
                               JSI_EXPORT_PROP_GET(RNSkReadonlyValue, current))
-    
-  
+      
   JSI_HOST_FUNCTION(addListener) {
     if(!arguments[0].isObject() || !arguments[0].asObject(runtime).isFunction(runtime)) {
       jsi::detail::throwJSError(runtime, "Expected function as first parameter.");
@@ -52,7 +48,9 @@ public:
     }
     auto callback = std::make_shared<jsi::Function>(arguments[0].asObject(runtime).asFunction(runtime));
     
-    auto unsubscribe = addListener([this, callback = std::move(callback)](jsi::Runtime& runtime){
+    auto unsubscribe = addListener([self = shared_from_this(),
+                                    this,
+                                    callback = std::move(callback)](jsi::Runtime& runtime){
       callback->call(runtime, get_current(runtime));
     });
     
@@ -76,10 +74,8 @@ public:
     std::lock_guard<std::mutex> lock(_mutex);
     auto listenerId = _listenerId++;
     _listeners.emplace(listenerId, cb);
-    return [this, listenerId]() {
-      if(!_invalidated) {
-        removeListener(listenerId);
-      }
+    return [self = shared_from_this(), this, listenerId]() {
+      removeListener(listenerId);
     };
   }
   
@@ -128,8 +124,6 @@ protected:
     _listeners.erase(listenerId);
   }
 
-  std::atomic<bool> _invalidated = { false };
-
 private:
   jsi::PropNameID _propNameId;
   std::shared_ptr<jsi::Object> _valueHolder;

package/ios/RNSkia-iOS/RNSkDrawViewImpl.h

@@ -18,14 +18,13 @@
 
 #pragma clang diagnostic pop
 
-@class SkiaDrawView;
-
 class RNSkDrawViewImpl : public RNSkia::RNSkDrawView {
 public:
-  RNSkDrawViewImpl(SkiaDrawView *view,
-                   std::shared_ptr<RNSkia::RNSkPlatformContext> context);
+  RNSkDrawViewImpl(std::shared_ptr<RNSkia::RNSkPlatformContext> context);
   
   void setSize(int width, int height);
+  
+  CALayer* getLayer() { return _layer; };
 
 protected:
   int getWidth() override { return _width * _context->getPixelDensity(); };
@@ -42,8 +41,6 @@ private:
   int _width = -1;
   int _height = -1;
 
-  SkiaDrawView *_view;
-
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
   CAMetalLayer *_layer;

package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm

@@ -17,8 +17,8 @@ id<MTLCommandQueue> RNSkDrawViewImpl::_commandQueue = id<MTLCommandQueue>(CFReta
 
 sk_sp<GrDirectContext> RNSkDrawViewImpl::_skContext = nullptr;
 
-RNSkDrawViewImpl::RNSkDrawViewImpl(SkiaDrawView* view, std::shared_ptr<RNSkia::RNSkPlatformContext> context):
-  _view(view), _context(context), RNSkia::RNSkDrawView(context) {
+RNSkDrawViewImpl::RNSkDrawViewImpl(std::shared_ptr<RNSkia::RNSkPlatformContext> context):
+  _context(context), RNSkia::RNSkDrawView(context) {
     
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
@@ -30,8 +30,6 @@ RNSkDrawViewImpl::RNSkDrawViewImpl(SkiaDrawView* view, std::shared_ptr<RNSkia::R
     _layer.opaque = false;
     _layer.contentsScale = _context->getPixelDensity();
     _layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
-    _layer.frame = _view.bounds;
-    [_view.layer addSublayer:_layer];
     
     setNativeDrawFunc(std::bind(&RNSkDrawViewImpl::drawFrame, this, std::placeholders::_1));
 }

package/ios/RNSkia-iOS/SkiaDrawView.mm

@@ -56,13 +56,14 @@
       if(_nativeId != 0 && _manager != nullptr) {
         _manager->setSkiaDrawView(_nativeId, nullptr);
       }
+      [_impl->getLayer() removeFromSuperlayer];
       _impl = nullptr;
     }
   } else {
     // Create implementation view when the parent view is set
     if(_impl == nullptr && _manager != nullptr) {
-      __weak decltype(self) weakSelf = self;
-      _impl = std::make_shared<RNSkDrawViewImpl>(weakSelf, _manager->getPlatformContext());
+      _impl = std::make_shared<RNSkDrawViewImpl>(_manager->getPlatformContext());
+      [self.layer addSublayer:_impl->getLayer()];
       if(_nativeId != 0) {
         _manager->setSkiaDrawView(_nativeId, _impl.get());
       }

package/lib/commonjs/renderer/components/shapes/Path.js

@@ -27,7 +27,7 @@ const onDraw = (0, _nodes.createDrawing)((_ref, _ref2) => {
     ...pathProps
   } = _ref2;
   const hasStartOffset = start !== 0;
-  const hasEndOffset = start !== 1;
+  const hasEndOffset = end !== 1;
   const hasStrokeOptions = stroke !== undefined;
   const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;
   const pristinePath = (0, _processors.processPath)(pathProps.path);

package/lib/commonjs/renderer/components/shapes/Path.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Path.tsx"],"names":["onDraw","canvas","paint","start","end","stroke","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","willMutatePath","pristinePath","path","copy","trim","drawPath","Path","props","defaultProps"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;;;;;AAeA,MAAMA,MAAM,GAAG,0BACb,iBAA6D;AAAA,MAA5D;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAA4D;AAAA,MAAzC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,GAAT;AAAcC,IAAAA,MAAd;AAAsB,OAAGC;AAAzB,GAAyC;AAC3D,QAAMC,cAAc,GAAGJ,KAAK,KAAK,CAAjC;AACA,QAAMK,YAAY,GAAGL,KAAK,KAAK,CAA/B;AACA,QAAMM,gBAAgB,GAAGJ,MAAM,KAAKK,SAApC;AACA,QAAMC,cAAc,GAAGJ,cAAc,IAAIC,YAAlB,IAAkCC,gBAAzD;AACA,QAAMG,YAAY,GAAG,6BAAYN,SAAS,CAACO,IAAtB,CAArB;AACA,QAAMA,IAAI,GAAGF,cAAc,GAAGC,YAAY,CAACE,IAAb,EAAH,GAAyBF,YAApD;;AACA,MAAIH,gBAAJ,EAAsB;AACpBI,IAAAA,IAAI,CAACR,MAAL,CAAYA,MAAZ;AACD;;AACD,MAAIE,cAAc,IAAIC,YAAtB,EAAoC;AAClCK,IAAAA,IAAI,CAACE,IAAL,CAAUZ,KAAV,EAAiBC,GAAjB,EAAsB,KAAtB;AACD;;AACDH,EAAAA,MAAM,CAACe,QAAP,CAAgBH,IAAhB,EAAsBX,KAAtB;AACD,CAfY,CAAf;;AAkBO,MAAMe,IAAI,GAAIC,KAAD,IAAqC;AACvD,sBAAO;AAAW,IAAA,MAAM,EAAElB;AAAnB,KAA+BkB,KAA/B,EAAP;AACD,CAFM;;;AAIPD,IAAI,CAACE,YAAL,GAAoB;AAClBhB,EAAAA,KAAK,EAAE,CADW;AAElBC,EAAAA,GAAG,EAAE;AAFa,CAApB","sourcesContent":["import React from \"react\";\n\nimport type {\n  CustomPaintProps,\n  AnimatedProps,\n  PathDef,\n} from \"../../processors\";\nimport { createDrawing } from \"../../nodes\";\nimport { processPath } from \"../../processors\";\n\ninterface StrokeOpts {\n  width?: number;\n  strokeMiterlimit?: number;\n  precision?: number;\n}\n\nexport interface PathProps extends CustomPaintProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n}\n\nconst onDraw = createDrawing<PathProps>(\n  ({ canvas, paint }, { start, end, stroke, ...pathProps }) => {\n    const hasStartOffset = start !== 0;\n    const hasEndOffset = start !== 1;\n    const hasStrokeOptions = stroke !== undefined;\n    const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;\n    const pristinePath = processPath(pathProps.path);\n    const path = willMutatePath ? pristinePath.copy() : pristinePath;\n    if (hasStrokeOptions) {\n      path.stroke(stroke);\n    }\n    if (hasStartOffset || hasEndOffset) {\n      path.trim(start, end, false);\n    }\n    canvas.drawPath(path, paint);\n  }\n);\n\nexport const Path = (props: AnimatedProps<PathProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} />;\n};\n\nPath.defaultProps = {\n  start: 0,\n  end: 1,\n};\n"]}
+{"version":3,"sources":["Path.tsx"],"names":["onDraw","canvas","paint","start","end","stroke","pathProps","hasStartOffset","hasEndOffset","hasStrokeOptions","undefined","willMutatePath","pristinePath","path","copy","trim","drawPath","Path","props","defaultProps"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;;;;;AAeA,MAAMA,MAAM,GAAG,0BACb,iBAA6D;AAAA,MAA5D;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAA4D;AAAA,MAAzC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,GAAT;AAAcC,IAAAA,MAAd;AAAsB,OAAGC;AAAzB,GAAyC;AAC3D,QAAMC,cAAc,GAAGJ,KAAK,KAAK,CAAjC;AACA,QAAMK,YAAY,GAAGJ,GAAG,KAAK,CAA7B;AACA,QAAMK,gBAAgB,GAAGJ,MAAM,KAAKK,SAApC;AACA,QAAMC,cAAc,GAAGJ,cAAc,IAAIC,YAAlB,IAAkCC,gBAAzD;AACA,QAAMG,YAAY,GAAG,6BAAYN,SAAS,CAACO,IAAtB,CAArB;AACA,QAAMA,IAAI,GAAGF,cAAc,GAAGC,YAAY,CAACE,IAAb,EAAH,GAAyBF,YAApD;;AACA,MAAIH,gBAAJ,EAAsB;AACpBI,IAAAA,IAAI,CAACR,MAAL,CAAYA,MAAZ;AACD;;AACD,MAAIE,cAAc,IAAIC,YAAtB,EAAoC;AAClCK,IAAAA,IAAI,CAACE,IAAL,CAAUZ,KAAV,EAAiBC,GAAjB,EAAsB,KAAtB;AACD;;AACDH,EAAAA,MAAM,CAACe,QAAP,CAAgBH,IAAhB,EAAsBX,KAAtB;AACD,CAfY,CAAf;;AAkBO,MAAMe,IAAI,GAAIC,KAAD,IAAqC;AACvD,sBAAO;AAAW,IAAA,MAAM,EAAElB;AAAnB,KAA+BkB,KAA/B,EAAP;AACD,CAFM;;;AAIPD,IAAI,CAACE,YAAL,GAAoB;AAClBhB,EAAAA,KAAK,EAAE,CADW;AAElBC,EAAAA,GAAG,EAAE;AAFa,CAApB","sourcesContent":["import React from \"react\";\n\nimport type {\n  CustomPaintProps,\n  AnimatedProps,\n  PathDef,\n} from \"../../processors\";\nimport { createDrawing } from \"../../nodes\";\nimport { processPath } from \"../../processors\";\n\ninterface StrokeOpts {\n  width?: number;\n  strokeMiterlimit?: number;\n  precision?: number;\n}\n\nexport interface PathProps extends CustomPaintProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n}\n\nconst onDraw = createDrawing<PathProps>(\n  ({ canvas, paint }, { start, end, stroke, ...pathProps }) => {\n    const hasStartOffset = start !== 0;\n    const hasEndOffset = end !== 1;\n    const hasStrokeOptions = stroke !== undefined;\n    const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;\n    const pristinePath = processPath(pathProps.path);\n    const path = willMutatePath ? pristinePath.copy() : pristinePath;\n    if (hasStrokeOptions) {\n      path.stroke(stroke);\n    }\n    if (hasStartOffset || hasEndOffset) {\n      path.trim(start, end, false);\n    }\n    canvas.drawPath(path, paint);\n  }\n);\n\nexport const Path = (props: AnimatedProps<PathProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} />;\n};\n\nPath.defaultProps = {\n  start: 0,\n  end: 1,\n};\n"]}

package/lib/commonjs/renderer/nodes/Node.js

@@ -48,7 +48,9 @@ class Node {
   visit(ctx, children) {
     const returnedValues = [];
     (children !== null && children !== void 0 ? children : this.children).forEach(child => {
-      if (!child.memoized) {
+      if (child.memoized && child.memoizable) {
+        returnedValues.push(child.memoized);
+      } else {
         const ret = child.draw(ctx);
 
         if (ret) {
@@ -58,8 +60,6 @@ class Node {
             child.memoized = ret;
           }
         }
-      } else {
-        returnedValues.push(child.memoized);
       }
     });
     return returnedValues;

package/lib/commonjs/renderer/nodes/Node.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Node.ts"],"names":["NodeType","Node","constructor","depMgr","props","_props","unSubscribeNode","subscribeNode","visit","ctx","children","returnedValues","forEach","child","memoized","ret","draw","push","memoizable"],"mappings":";;;;;;;;;IAKYA,Q;;;WAAAA,Q;AAAAA,EAAAA,Q;AAAAA,EAAAA,Q;GAAAA,Q,wBAAAA,Q;;AAOL,MAAeC,IAAf,CAAiC;AAQtCC,EAAAA,WAAW,CAACC,MAAD,EAA4BC,KAA5B,EAAqD;AAAA,sCAPpC,EAOoC;;AAAA;;AAAA,wCALnD,KAKmD;;AAAA,sCAJ3B,IAI2B;;AAAA;;AAAA;;AAC9D,SAAKC,MAAL,GAAcD,KAAd;AACA,SAAKD,MAAL,GAAcA,MAAd;AACA,SAAKA,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACD;;AAIQ,MAALA,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKD,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACA,SAAKC,MAAL,GAAcD,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAG;AACV,WAAO,KAAKC,MAAZ;AACD;;AAEDG,EAAAA,KAAK,CAACC,GAAD,EAAsBC,QAAtB,EAAyC;AAC5C,UAAMC,cAAkD,GAAG,EAA3D;AACA,KAACD,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,KAAKA,QAAlB,EAA4BE,OAA5B,CAAqCC,KAAD,IAAW;AAC7C,UAAI,CAACA,KAAK,CAACC,QAAX,EAAqB;AACnB,cAAMC,GAAG,GAAGF,KAAK,CAACG,IAAN,CAAWP,GAAX,CAAZ;;AACA,YAAIM,GAAJ,EAAS;AACPJ,UAAAA,cAAc,CAACM,IAAf,CAAoBF,GAApB;;AACA,cAAIF,KAAK,CAACK,UAAV,EAAsB;AACpBL,YAAAA,KAAK,CAACC,QAAN,GAAiBC,GAAjB;AACD;AACF;AACF,OARD,MAQO;AACLJ,QAAAA,cAAc,CAACM,IAAf,CAAoBJ,KAAK,CAACC,QAA1B;AACD;AACF,KAZD;AAaA,WAAOH,cAAP;AACD;;AA3CqC","sourcesContent":["import type { SkJSIInstance } from \"../../skia/JsiInstance\";\nimport type { DependencyManager } from \"../DependencyManager\";\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { AnimatedProps } from \"../processors\";\n\nexport enum NodeType {\n  Declaration = \"skDeclaration\",\n  Drawing = \"skDrawing\",\n}\n\ntype DeclarationResult = SkJSIInstance<string> | null;\n\nexport abstract class Node<P = unknown> {\n  readonly children: Node[] = [];\n  _props: AnimatedProps<P>;\n  memoizable = false;\n  memoized: DeclarationResult | null = null;\n  parent?: Node;\n  depMgr: DependencyManager;\n\n  constructor(depMgr: DependencyManager, props: AnimatedProps<P>) {\n    this._props = props;\n    this.depMgr = depMgr;\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n  }\n\n  abstract draw(ctx: DrawingContext): void | DeclarationResult;\n\n  set props(props: AnimatedProps<P>) {\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n    this._props = props;\n  }\n\n  get props() {\n    return this._props;\n  }\n\n  visit(ctx: DrawingContext, children?: Node[]) {\n    const returnedValues: Exclude<DeclarationResult, null>[] = [];\n    (children ?? this.children).forEach((child) => {\n      if (!child.memoized) {\n        const ret = child.draw(ctx);\n        if (ret) {\n          returnedValues.push(ret);\n          if (child.memoizable) {\n            child.memoized = ret;\n          }\n        }\n      } else {\n        returnedValues.push(child.memoized);\n      }\n    });\n    return returnedValues;\n  }\n}\n"]}
+{"version":3,"sources":["Node.ts"],"names":["NodeType","Node","constructor","depMgr","props","_props","unSubscribeNode","subscribeNode","visit","ctx","children","returnedValues","forEach","child","memoized","memoizable","push","ret","draw"],"mappings":";;;;;;;;;IAKYA,Q;;;WAAAA,Q;AAAAA,EAAAA,Q;AAAAA,EAAAA,Q;GAAAA,Q,wBAAAA,Q;;AAOL,MAAeC,IAAf,CAAiC;AAQtCC,EAAAA,WAAW,CAACC,MAAD,EAA4BC,KAA5B,EAAqD;AAAA,sCAPpC,EAOoC;;AAAA;;AAAA,wCALnD,KAKmD;;AAAA,sCAJ3B,IAI2B;;AAAA;;AAAA;;AAC9D,SAAKC,MAAL,GAAcD,KAAd;AACA,SAAKD,MAAL,GAAcA,MAAd;AACA,SAAKA,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACD;;AAIQ,MAALA,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKD,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACA,SAAKC,MAAL,GAAcD,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAG;AACV,WAAO,KAAKC,MAAZ;AACD;;AAEDG,EAAAA,KAAK,CAACC,GAAD,EAAsBC,QAAtB,EAAyC;AAC5C,UAAMC,cAAkD,GAAG,EAA3D;AACA,KAACD,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,KAAKA,QAAlB,EAA4BE,OAA5B,CAAqCC,KAAD,IAAW;AAC7C,UAAIA,KAAK,CAACC,QAAN,IAAkBD,KAAK,CAACE,UAA5B,EAAwC;AACtCJ,QAAAA,cAAc,CAACK,IAAf,CAAoBH,KAAK,CAACC,QAA1B;AACD,OAFD,MAEO;AACL,cAAMG,GAAG,GAAGJ,KAAK,CAACK,IAAN,CAAWT,GAAX,CAAZ;;AACA,YAAIQ,GAAJ,EAAS;AACPN,UAAAA,cAAc,CAACK,IAAf,CAAoBC,GAApB;;AACA,cAAIJ,KAAK,CAACE,UAAV,EAAsB;AACpBF,YAAAA,KAAK,CAACC,QAAN,GAAiBG,GAAjB;AACD;AACF;AACF;AACF,KAZD;AAaA,WAAON,cAAP;AACD;;AA3CqC","sourcesContent":["import type { SkJSIInstance } from \"../../skia/JsiInstance\";\nimport type { DependencyManager } from \"../DependencyManager\";\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { AnimatedProps } from \"../processors\";\n\nexport enum NodeType {\n  Declaration = \"skDeclaration\",\n  Drawing = \"skDrawing\",\n}\n\ntype DeclarationResult = SkJSIInstance<string> | null;\n\nexport abstract class Node<P = unknown> {\n  readonly children: Node[] = [];\n  _props: AnimatedProps<P>;\n  memoizable = false;\n  memoized: DeclarationResult | null = null;\n  parent?: Node;\n  depMgr: DependencyManager;\n\n  constructor(depMgr: DependencyManager, props: AnimatedProps<P>) {\n    this._props = props;\n    this.depMgr = depMgr;\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n  }\n\n  abstract draw(ctx: DrawingContext): void | DeclarationResult;\n\n  set props(props: AnimatedProps<P>) {\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n    this._props = props;\n  }\n\n  get props() {\n    return this._props;\n  }\n\n  visit(ctx: DrawingContext, children?: Node[]) {\n    const returnedValues: Exclude<DeclarationResult, null>[] = [];\n    (children ?? this.children).forEach((child) => {\n      if (child.memoized && child.memoizable) {\n        returnedValues.push(child.memoized);\n      } else {\n        const ret = child.draw(ctx);\n        if (ret) {\n          returnedValues.push(ret);\n          if (child.memoizable) {\n            child.memoized = ret;\n          }\n        }\n      }\n    });\n    return returnedValues;\n  }\n}\n"]}

package/lib/commonjs/skia/Color.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rgbaColor = exports.red = exports.processColorAsUnitArray = exports.processColorAsInt = exports.processColor = exports.green = exports.blue = exports.alphaf = void 0;
+exports.rgbaColor = exports.red = exports.processColorAsUnitArray = exports.processColor = exports.green = exports.blue = exports.alphaf = void 0;
 
-var _reactNative = require("react-native");
+var _Skia = require("./Skia");
 
 const alphaf = c => (c >> 24 & 255) / 255;
 
@@ -30,30 +30,8 @@ const rgbaColor = (r, g, b, af) => {
 
 exports.rgbaColor = rgbaColor;
 
-const processColorAsInt = color => {
-  let processedColor = (0, _reactNative.processColor)(color);
-
-  if (typeof processedColor !== "number") {
-    throw new Error(`Couldn't process color: ${color}`);
-  } // On android we need to move the alpha byte to the start of the structure
-
-
-  if (_reactNative.Platform.OS === "android") {
-    processedColor = processedColor >>> 0;
-    const a = processedColor >> 24 & 0xff;
-    const r = processedColor >> 16 & 0xff;
-    const g = processedColor >> 8 & 0xff;
-    const b = processedColor & 0xff;
-    processedColor = (a << 24 | r << 16 | g << 8 | b) >>> 0;
-  }
-
-  return processedColor;
-};
-
-exports.processColorAsInt = processColorAsInt;
-
 const processColorAsArray = cl => {
-  const icl = typeof cl === "string" ? processColorAsInt(cl) : cl;
+  const icl = typeof cl === "string" ? _Skia.Skia.Color(cl) : cl;
   const r = red(icl);
   const g = green(icl);
   const b = blue(icl);