@shopify/react-native-skia 0.1.200 → 0.1.201

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

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

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

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

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

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

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

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

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

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

package/cpp/api/JsiSkHostObjects.h

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

package/cpp/rnskia/RNSkJsView.cpp

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

package/cpp/rnskia/RNSkJsiViewApi.h

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

package/cpp/rnskia/RNSkView.h

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

package/ios/RNSkia-iOS/ViewScreenshotService.mm

@@ -24,6 +24,7 @@
   auto view = [_uiManager viewForReactTag:viewTag];
   if (view == NULL) {
     RCTFatal(RCTErrorWithMessage(@"Could not find view with tag"));
+    return nullptr;
   }
 
   // Get size

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.200",
+  "version": "0.1.201",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [