@shopify/react-native-skia 0.1.120 → 0.1.123

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/RNSkDrawView.cpp

@@ -40,31 +40,13 @@ RNSkDrawView::RNSkDrawView(std::shared_ptr<RNSkPlatformContext> context)
       _platformContext(std::move(context)),
       _infoObject(std::make_shared<RNSkInfoObject>()),
       _jsDrawingLock(std::make_shared<std::timed_mutex>()),
-      _gpuDrawingLock(std::make_shared<std::timed_mutex>())
+      _gpuDrawingLock(std::make_shared<std::timed_mutex>()),
+      _jsTimingInfo("SKIA/JS"),
+      _gpuTimingInfo("SKIA/GPU")
       {}
 
 RNSkDrawView::~RNSkDrawView() {
-#if LOG_ALL_DRAWING
-  RNSkLogger::logToConsole("RNSkDrawView::~RNSkDrawView - %i", getNativeId());
-#endif
-  
-  _isInvalidated = true;
-  
   endDrawingLoop();
-  
-  // Wait for the drawing locks
-  if(!_jsDrawingLock->try_lock_for(1250ms)) {
-    RNSkLogger::logToConsole("Warning: JS drawing is still locked for native view with id %i", _nativeId);
-  }
-  
-  if(!_gpuDrawingLock->try_lock_for(1250ms)) {
-    RNSkLogger::logToConsole("Warning: SKIA drawing is still locked for native view with id %i", _nativeId);
-  }
-  
-  onInvalidated();
-
-  _jsDrawingLock = nullptr;
-  _gpuDrawingLock = nullptr;
 }
 
 void RNSkDrawView::setNativeId(size_t nativeId) {
@@ -84,7 +66,6 @@ void RNSkDrawView::setDrawCallback(std::shared_ptr<jsi::Function> callback) {
   // Reset timing info
   _jsTimingInfo.reset();
   _gpuTimingInfo.reset();
-  _vsyncTimingInfo.reset();
   
   // Set up debug font/paints
   auto font = SkFont();
@@ -94,53 +75,57 @@ void RNSkDrawView::setDrawCallback(std::shared_ptr<jsi::Function> callback) {
   
   // Create draw drawCallback wrapper
   _drawCallback = std::make_shared<RNSkDrawCallback>(
-      [this, paint = std::move(paint), font = std::move(font), callback = std::move(callback)](std::shared_ptr<JsiSkCanvas> canvas, int width,
-                                    int height, double timestamp,
-                                    std::shared_ptr<RNSkPlatformContext> context) {
-
-       auto runtime = context->getJsRuntime();
-                         
-       // Update info parameter
-       _infoObject->beginDrawOperation(width, height, timestamp);
-       
-       // Set up arguments array
-       std::vector<jsi::Value> args(2);
-       args[0] = jsi::Object::createFromHostObject(*runtime, canvas);
-       args[1] = jsi::Object::createFromHostObject(*runtime, _infoObject);
-
-       // To be able to call the drawing function we'll wrap it once again
-       callback->call(*runtime,
-                      static_cast<const jsi::Value *>(args.data()),
-                      (size_t)2);
-       
-       // Reset touches
-       _infoObject->endDrawOperation();
-                         
-      // Draw debug overlays
-      if (_showDebugOverlay) {
-
-        // Display average rendering timer
-        auto jsAvg = _jsTimingInfo.getAverage();
-        //auto jsFps = _jsTimingInfo.getFps();
-        
-        auto gpuAvg = _gpuTimingInfo.getAverage();
-        //auto gpuFps = _gpuTimingInfo.getFps();
-        
-        auto total = jsAvg + gpuAvg;
-        
-        //auto vsyncFps = _vsyncTimingInfo.getFps();
-                                                      
-        // Build string
-        std::ostringstream stream;
-        stream << "js: " << jsAvg << "ms gpu: " << gpuAvg << "ms " << " total: " << total << "ms";
-//        stream << "js:" << jsAvg << "ms/" << jsFps << "fps " << "gpu:" << gpuAvg << "ms/" <<
-//          gpuFps << "fps" << " total:" << total << "ms/" << vsyncFps << "fps";
-        
-        std::string debugString = stream.str();
-        
-        canvas->getCanvas()->drawSimpleText(
-         debugString.c_str(), debugString.size(), SkTextEncoding::kUTF8, 8,
-         18, font, paint);
+      [weakSelf = weak_from_this(),
+       paint = std::move(paint),
+       font = std::move(font),
+       callback = std::move(callback)](std::shared_ptr<JsiSkCanvas> canvas,
+                                       int width,
+                                       int height,
+                                       double timestamp,
+                                       std::shared_ptr<RNSkPlatformContext> context) {
+
+       auto self = weakSelf.lock();
+       if(self) {
+         auto runtime = context->getJsRuntime();
+                           
+         // Update info parameter
+         self->_infoObject->beginDrawOperation(width, height, timestamp);
+         
+         // Set up arguments array
+         std::vector<jsi::Value> args(2);
+         args[0] = jsi::Object::createFromHostObject(*runtime, canvas);
+         args[1] = jsi::Object::createFromHostObject(*runtime, self->_infoObject);
+
+         // To be able to call the drawing function we'll wrap it once again
+         callback->call(*runtime,
+                        static_cast<const jsi::Value *>(args.data()),
+                        (size_t)2);
+         
+         // Reset touches
+         self->_infoObject->endDrawOperation();
+                           
+        // Draw debug overlays
+        if (self->_showDebugOverlay) {
+
+          // Display average rendering timer
+          auto jsAvg = self->_jsTimingInfo.getAverage();
+          //auto jsFps = _jsTimingInfo.getFps();
+          
+          auto gpuAvg = self->_gpuTimingInfo.getAverage();
+          //auto gpuFps = _gpuTimingInfo.getFps();
+          
+          auto total = jsAvg + gpuAvg;
+          
+          // Build string
+          std::ostringstream stream;
+          stream << "js: " << jsAvg << "ms gpu: " << gpuAvg << "ms " << " total: " << total << "ms";
+          
+          std::string debugString = stream.str();
+          
+          canvas->getCanvas()->drawSimpleText(
+           debugString.c_str(), debugString.size(), SkTextEncoding::kUTF8, 8,
+           18, font, paint);
+        }
       }
     });
 
@@ -196,10 +181,6 @@ void RNSkDrawView::updateTouchState(std::vector<RNSkTouchPoint>&& points) {
 }
 
 void RNSkDrawView::performDraw() {
-#if LOG_ALL_DRAWING
-  RNSkLogger::logToConsole("RNSkDrawView::performDraw - %i", getNativeId());
-#endif
-  
   // Start timing
   _jsTimingInfo.beginTiming();
   
@@ -234,37 +215,22 @@ void RNSkDrawView::performDraw() {
     // Post drawing message to the render thread where the picture recorded
     // will be sent to the GPU/backend for rendering to screen.
     auto gpuLock = _gpuDrawingLock;
-    getPlatformContext()->runOnRenderThread([this, p = std::move(p), gpuLock]() {
-      
-      if(isInvalidated()) {
-        gpuLock->unlock();
-        return;
+    _platformContext->runOnRenderThread([weakSelf = weak_from_this(), p = std::move(p), gpuLock]() {
+      auto self = weakSelf.lock();
+      if (self) {
+        // Draw the picture recorded on the real GPU canvas
+        self->_gpuTimingInfo.beginTiming();
+        self->drawPicture(p);
+        self->_gpuTimingInfo.stopTiming();
       }
-      
-      _gpuTimingInfo.beginTiming();
-
-      // Draw the picture recorded on the real GPU canvas
-      if(_nativeDrawFunc != nullptr) {
-#if LOG_ALL_DRAWING
-          RNSkLogger::logToConsole("RNSkDrawView::drawFrame - %i", getNativeId());
-#endif
-        _nativeDrawFunc(p);
-      } else {
-#if LOG_ALL_DRAWING
-          RNSkLogger::logToConsole("RNSkDrawView::drawFrame - %i SKIPPING, draw func is null", getNativeId());
-#endif
-      }
-
-      _gpuTimingInfo.stopTiming();
-
       // Unlock GPU drawing
       gpuLock->unlock();
     });
   } else {
 #ifdef DEBUG
-    static size_t framesSkipped = 0;
-    printf("SKIA/GPU: Skipped frames: %lu\n", ++framesSkipped);
+    _gpuTimingInfo.markSkipped();
 #endif
+    // Request a new redraw since the last frame was skipped.
     requestRedraw();
   }
   
@@ -280,39 +246,34 @@ void RNSkDrawView::beginDrawingLoop() {
   if (_drawingLoopId != 0 || _nativeId == 0) {
     return;
   }
-  
   // Set to zero to avoid calling beginDrawLoop before we return
-  _drawingLoopId = _platformContext->beginDrawLoop(
-    _nativeId, std::bind(&RNSkDrawView::drawLoopCallback, this, std::placeholders::_1));
+  _drawingLoopId = _platformContext->beginDrawLoop(_nativeId,
+    [weakSelf = weak_from_this()](bool invalidated) {
+    auto self = weakSelf.lock();
+    if(self) {
+      self->drawLoopCallback(invalidated);
+    }
+  });
 }
 
 void RNSkDrawView::drawLoopCallback(bool invalidated) {
-  if(invalidated) {
-    _isInvalidated = true;
-    onInvalidated();
-#if LOG_ALL_DRAWING
-  RNSkLogger::logToConsole("RNSkDrawView::onInvalidated - %i", getNativeId());
-#endif
-    return;
-  }
-  
   if(_redrawRequestCounter > 0 || _drawingMode == RNSkDrawingMode::Continuous) {
       _redrawRequestCounter = 0;
       
-    _vsyncTimingInfo.beginTiming();
-    
     // We render on the javascript thread.
     if(_jsDrawingLock->try_lock()) {
-      _platformContext->runOnJavascriptThread(std::bind(&RNSkDrawView::performDraw, this));
+      _platformContext->runOnJavascriptThread([weakSelf = weak_from_this()](){
+        auto self = weakSelf.lock();
+        if(self) {
+          self->performDraw();
+        }
+      });
     } else {
 #ifdef DEBUG
-      static size_t framesSkipped = 0;
-      printf("SKIA/JS: Skipped frames: %lu\n", ++framesSkipped);
+      _jsTimingInfo.markSkipped();
 #endif
       requestRedraw();
     }
-    
-    _vsyncTimingInfo.stopTiming();
   }
 }