Refactor to extendable skia views (#899)

example/android/app/src/main/java/com/shopify/reactnative/skia/example/MainApplication.java

@@ -2,6 +2,8 @@
 
 import android.app.Application;
 import android.content.Context;
+import android.os.StrictMode;
+
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactInstanceManager;
@@ -51,6 +53,13 @@ public ReactNativeHost getReactNativeHost() {
   @Override
   public void onCreate() {
     super.onCreate();
+    if(BuildConfig.DEBUG)
+      StrictMode.setVmPolicy(new StrictMode.VmPolicy.Builder()
+              .detectLeakedClosableObjects()
+              .detectLeakedRegistrationObjects()
+              .penaltyLog()
+              .build());
+
     // If you opted-in for the New Architecture, we enable the TurboModule system
     ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
     SoLoader.init(this, /* native exopackage */ false);

example/src/Examples/API/List.tsx

@@ -58,6 +58,10 @@ const examples = [
     screen: "Data",
     title: "📊 Data",
   },
+  {
+    screen: "PictureView",
+    title: "🖼 Picture View",
+  },
   {
     screen: "Picture",
     title: "🖼 Picture",

example/src/Examples/API/PictureView.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+import { usePicture, Skia, SkiaPictureView } from "@shopify/react-native-skia";
+
+export const PictureViewExample = () => {
+  // Create picture
+  const picture = usePicture(
+    { x: 0, y: 0, width: 100, height: 100 },
+    (canvas) => {
+      const paint = Skia.Paint();
+      paint.setColor(Skia.Color("pink"));
+      canvas.drawRect({ x: 0, y: 0, width: 100, height: 100 }, paint);
+
+      const circlePaint = Skia.Paint();
+      circlePaint.setColor(Skia.Color("orange"));
+      canvas.drawCircle(50, 50, 50, circlePaint);
+    }
+  );
+
+  return <SkiaPictureView style={styles.container} picture={picture} debug />;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

example/src/Examples/API/Routes.ts

@@ -17,4 +17,5 @@ export type Routes = {
   Checker: undefined;
   UseCanvas: undefined;
   Reanimated: undefined;
+  PictureView: undefined;
 };

example/src/Examples/API/index.tsx

@@ -20,6 +20,7 @@ import { UseCanvas } from "./UseCanvas";
 import { FreezeExample } from "./Freeze";
 import { Touch } from "./Touch";
 import { Reanimated } from "./Reanimated";
+import { PictureViewExample } from "./PictureView";
 
 const Stack = createNativeStackNavigator<Routes>();
 export const API = () => {
@@ -131,6 +132,13 @@ export const API = () => {
           title: "🖼 Picture",
         }}
       />
+      <Stack.Screen
+        name="PictureView"
+        component={PictureViewExample}
+        options={{
+          title: "🖼 Picture View",
+        }}
+      />
       <Stack.Screen
         name="Checker"
         component={FreezeExample}

package/android/CMakeLists.txt

@@ -34,18 +34,17 @@ add_library(
         SHARED
         "${PROJECT_SOURCE_DIR}/cpp/jni/JniLoad.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/jni/JniSkiaManager.cpp"
-        "${PROJECT_SOURCE_DIR}/cpp/jni/JniSkiaDrawView.cpp"
+
         "${PROJECT_SOURCE_DIR}/cpp/jni/JniPlatformContext.cpp"
-        "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/RNSkDrawViewImpl.cpp"
+        "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/RNSkOpenGLCanvasProvider.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/rnskia-android/SkiaOpenGLRenderer.cpp"
-        
+
         "${PROJECT_SOURCE_DIR}/cpp/jsi/JsiHostObject.cpp"
 
         "${PROJECT_SOURCE_DIR}/cpp/rnskia/RNSkManager.cpp"
-        "${PROJECT_SOURCE_DIR}/cpp/rnskia/RNSkDrawView.cpp"
+        "${PROJECT_SOURCE_DIR}/cpp/rnskia/RNSkJsView.cpp"
         "${PROJECT_SOURCE_DIR}/cpp/rnskia/RNSkDispatchQueue.cpp"
 
-
         "${PROJECT_SOURCE_DIR}/cpp/api/third_party/CSSColorParser.cpp"
 
 )

package/android/cpp/jni/JniLoad.cpp

@@ -1,13 +1,15 @@
 #include "JniPlatformContext.h"
 #include "JniSkiaDrawView.h"
+#include "JniSkiaPictureView.h"
 #include "JniSkiaManager.h"
 #include <fbjni/fbjni.h>
 #include <jni.h>
 
 JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
-    return facebook::jni::initialize(vm, [] {
-        RNSkia::JniSkiaManager::registerNatives();
-        RNSkia::JniSkiaDrawView::registerNatives();
-        RNSkia::JniPlatformContext::registerNatives();
-    });
+  return facebook::jni::initialize(vm, [] {
+      RNSkia::JniSkiaManager::registerNatives();
+      RNSkia::JniSkiaDrawView::registerNatives();
+      RNSkia::JniSkiaPictureView::registerNatives();
+      RNSkia::JniPlatformContext::registerNatives();
+  });
 }

package/android/cpp/jni/JniSkiaManager.cpp

@@ -16,13 +16,8 @@ using namespace facebook;
 void JniSkiaManager::registerNatives() {
     registerHybrid({
         makeNativeMethod("initHybrid", JniSkiaManager::initHybrid),
-        makeNativeMethod(
-            "initializeRuntime", JniSkiaManager::initializeRuntime),
-        makeNativeMethod("registerSkiaView", JniSkiaManager::registerSkiaView),
-        makeNativeMethod(
-            "unregisterSkiaView", JniSkiaManager::unregisterSkiaView),
-        makeNativeMethod(
-            "invalidate", JniSkiaManager::invalidate),
+        makeNativeMethod("initializeRuntime", JniSkiaManager::initializeRuntime),
+        makeNativeMethod("invalidate", JniSkiaManager::invalidate),
     });
 }
 
@@ -46,12 +41,4 @@ void JniSkiaManager::initializeRuntime() {
     _skManager = std::make_shared<RNSkManager>(_jsRuntime, _jsCallInvoker, _context);
 }
 
-void JniSkiaManager::registerSkiaView(int viewTag, JniSkiaDrawView *skiaView) {
-    _skManager->registerSkiaDrawView(viewTag, skiaView->getDrawViewImpl());
-}
-
-void JniSkiaManager::unregisterSkiaView(int viewTag) {
-    _skManager->unregisterSkiaDrawView(viewTag);
-}
-
 } // namespace RNSkia

package/android/cpp/jni/include/JniSkiaBaseView.h

@@ -0,0 +1,68 @@
+#pragma once
+
+#include <memory>
+
+#include <fbjni/fbjni.h>
+#include <jni.h>
+#include <jsi/jsi.h>
+
+#include <JniSkiaManager.h>
+
+namespace RNSkia {
+    using namespace facebook;
+    using namespace jni;
+
+    class JniSkiaBaseView {
+    public:
+        JniSkiaBaseView(jni::alias_ref<JniSkiaManager::javaobject> skiaManager,
+                        std::shared_ptr<RNSkBaseAndroidView> skiaView) :
+                _manager(skiaManager->cthis()),
+                _skiaView(skiaView) {}
+
+        ~JniSkiaBaseView() {}
+
+        std::shared_ptr<RNSkManager> getSkiaManager() { return _manager->getSkiaManager(); };
+
+    protected:
+        virtual void updateTouchPoints(jni::JArrayDouble touches) {
+          _skiaView->updateTouchPoints(touches);
+        }
+
+        virtual void surfaceAvailable(jobject surface, int width, int height) {
+          _skiaView->surfaceAvailable(surface, width, height);
+        }
+
+        virtual void surfaceSizeChanged(int width, int height) {
+          _skiaView->surfaceSizeChanged(width, height);
+        }
+
+        virtual void surfaceDestroyed() {
+          _skiaView->surfaceDestroyed();
+        }
+
+        virtual void setMode(std::string mode) {
+          _skiaView->setMode(mode);
+        }
+
+        virtual void setDebugMode(bool show) {
+          _skiaView->setShowDebugInfo(show);
+        }
+
+        virtual void registerView(int nativeId) {
+          getSkiaManager()->registerSkiaView(nativeId,
+                                             _skiaView->getSkiaView());
+        }
+
+        virtual void unregisterView() {
+          getSkiaManager()->setSkiaView(_skiaView->getSkiaView()->getNativeId(), nullptr);
+          getSkiaManager()->unregisterSkiaView(
+                  _skiaView->getSkiaView()->getNativeId());
+          _skiaView->viewDidUnmount();
+        }
+
+    private:
+        JniSkiaManager *_manager;
+        std::shared_ptr<RNSkBaseAndroidView> _skiaView;
+    };
+
+} // namespace RNSkia