support latest RN & RNSkia versions

package/android/CMakeLists.txt

@@ -54,17 +54,30 @@ target_link_libraries(
         ${LOG_LIB}                          # <-- Logcat logger
         android                             # <-- Android JNI core
         fbjni::fbjni                        # <-- fbjni
-        ReactAndroid::react_nativemodule_core # <-- RN: Native module core
         ReactAndroid::jsi                   # <-- RN: JSI
-        ReactAndroid::reactnativejni        # <-- RN: React Native JNI bindings
-        ReactAndroid::runtimeexecutor       # <-- RN: Runtime executor
-        ReactAndroid::turbomodulejsijni     # <-- RN: TurboModule JSI JNI bindings
         -ljnigraphics
         -lGLESv2
         -lEGL
         -landroid
 )
 
+# This if-then-else can be removed once this library does not support version below 0.76
+if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 76)
+    message("RN Filament: Using React Native merged SO...")
+    target_link_libraries(
+        ${PACKAGE_NAME}
+        ReactAndroid::reactnative
+    )
+else()
+    target_link_libraries(
+        ${PACKAGE_NAME}
+        ReactAndroid::react_nativemodule_core   # <-- RN: Native module core
+        ReactAndroid::reactnativejni            # <-- RN: React Native JNI bindings
+        ReactAndroid::runtimeexecutor           # <-- RN: Runtime executor
+        ReactAndroid::turbomodulejsijni         # <-- RN: TurboModule JSI JNI bindings
+    )
+endif()
+
 # 1. Link react-native-skia
 message("react-native-skottie: Linking react-native-skia...")
 find_package(shopify_react-native-skia REQUIRED CONFIG)

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

@@ -35,34 +35,27 @@ class JniSkiaSkottieView : public jni::HybridClass<JniSkiaSkottieView>, public J
                     makeNativeMethod("surfaceAvailable", JniSkiaSkottieView::surfaceAvailable),
                     makeNativeMethod("surfaceDestroyed", JniSkiaSkottieView::surfaceDestroyed),
                     makeNativeMethod("surfaceSizeChanged", JniSkiaSkottieView::surfaceSizeChanged),
-                    makeNativeMethod("setMode", JniSkiaSkottieView::setMode),
                     makeNativeMethod("setDebugMode", JniSkiaSkottieView::setDebugMode),
-                    makeNativeMethod("updateTouchPoints", JniSkiaSkottieView::updateTouchPoints),
                     makeNativeMethod("registerView", JniSkiaSkottieView::registerView),
                     makeNativeMethod("unregisterView", JniSkiaSkottieView::unregisterView)});
   }
 
 protected:
-  void updateTouchPoints(jni::JArrayDouble touches) override {
-    JniSkiaBaseView::updateTouchPoints(touches);
-  }
 
-  void surfaceAvailable(jobject surface, int width, int height) override {
-    JniSkiaBaseView::surfaceAvailable(surface, width, height);
-  }
+    void surfaceAvailable(jobject surface, int width, int height,
+                          bool opaque) override {
+        JniSkiaBaseView::surfaceAvailable(surface, width, height, opaque);
+    }
 
-  void surfaceSizeChanged(int width, int height) override {
-    JniSkiaBaseView::surfaceSizeChanged(width, height);
-  }
+    void surfaceSizeChanged(jobject surface, int width, int height,
+                            bool opaque) override {
+        JniSkiaBaseView::surfaceSizeChanged(surface, width, height, opaque);
+    }
 
   void surfaceDestroyed() override {
     JniSkiaBaseView::surfaceDestroyed();
   }
 
-  void setMode(std::string mode) override {
-    JniSkiaBaseView::setMode(mode);
-  }
-
   void setDebugMode(bool show) override {
     JniSkiaBaseView::setDebugMode(show);
   }

package/android/src/main/java/com/skiaskottie/SkiaSkottieView.java

@@ -19,28 +19,24 @@ public SkiaSkottieView(Context context) {
         mHybridData = initHybrid(skiaModule.getSkiaManager());
     }
 
-    @Override
+  @Override
     protected void finalize() throws Throwable {
         super.finalize();
         mHybridData.resetNative();
     }
 
     private native HybridData initHybrid(SkiaManager skiaManager);
 
-    protected native void surfaceAvailable(Object surface, int width, int height);
+    protected native void surfaceAvailable(Object surface, int width, int height, boolean opaque);
 
-    protected native void surfaceSizeChanged(int width, int height);
+    protected native void surfaceSizeChanged(Object surface, int width, int height, boolean opaque);
 
     protected native void surfaceDestroyed();
 
     protected native void setBgColor(int color);
 
-    protected native void setMode(String mode);
-
     protected native void setDebugMode(boolean show);
 
-    protected native void updateTouchPoints(double[] points);
-
     protected native void registerView(int nativeId);
 
     protected native void unregisterView();

package/cpp/RNSkSkottieView.h

@@ -11,7 +11,7 @@
 #include <jsi/jsi.h>
 
 #include "JsiSkPicture.h"
-#include "JsiValueWrapper.h"
+#include "JsiValue.h"
 #include "RNSkLog.h"
 #include "RNSkPlatformContext.h"
 #include "RNSkView.h"
@@ -41,9 +41,9 @@ class RNSkSkottieRenderer : public RNSkRenderer, public std::enable_shared_from_
   RNSkSkottieRenderer(std::function<void()> requestRedraw, std::shared_ptr<RNSkPlatformContext> context)
       : RNSkRenderer(requestRedraw), _platformContext(context) {}
 
-  bool tryRender(std::shared_ptr<RNSkCanvasProvider> canvasProvider) override {
-    return performDraw(canvasProvider);
-  }
+//  bool tryRender(std::shared_ptr<RNSkCanvasProvider> canvasProvider) override {
+//    return performDraw(canvasProvider);
+//  }
 
   void renderImmediate(std::shared_ptr<RNSkCanvasProvider> canvasProvider) override {
     performDraw(canvasProvider);
@@ -216,14 +216,13 @@ class RNSkSkottieView : public RNSkView {
 
   void resetAnimation() {
     std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->resetPlayback();
-    setDrawingMode(RNSkDrawingMode::Default);
+//    setDrawingMode(RNSkDrawingMode::Default);
   }
 
   ~RNSkSkottieView() {
     std::shared_ptr<RNSkPlatformContext> platformContext = getPlatformContext();
-    auto jsRuntime = platformContext->getJsRuntime();
     // Call the onAnimationFinish callback
-    if (getRenderer() == nullptr || jsRuntime == nullptr || onAnimationFinishPtr == nullptr) {
+    if (getRenderer() == nullptr || onAnimationFinishPtr == nullptr) {
       return;
     }
 
@@ -233,23 +232,19 @@ class RNSkSkottieView : public RNSkView {
     }
 
     // The animation wasn't finished, notify that it got cancelled:
-    if (platformContext->isOnJavascriptThread()) {
-      onAnimationFinishPtr->call(*jsRuntime, jsi::Value(true));
-    } else {
       std::shared_ptr<jsi::Function> onAnimationFinish = onAnimationFinishPtr;
       platformContext->runOnJavascriptThread([=]() { onAnimationFinish->call(*jsRuntime, jsi::Value(true)); });
-    }
   }
 
-  void setJsiProperties(std::unordered_map<std::string, RNJsi::JsiValueWrapper>& props) override {
+  void setJsiProperties(std::unordered_map<std::string, RNJsi::ViewProperty>& props) override {
 
     RNSkView::setJsiProperties(props);
 
     // We need to make sure .start gets called last.
     // It might happen that setJsiProperties gets called multiple times before the view is actually ready.
     // In this case all our "props" will be stored, and then once its ready setJsiProperties gets called
     // with all the props at once. Then .start has to be called last, otherwise the animation will not play.
-    std::vector<std::pair<std::string, RNJsi::JsiValueWrapper>> sortedProps(props.begin(), props.end());
+    std::vector<std::pair<std::string, RNJsi::ViewProperty>> sortedProps(props.begin(), props.end());
     if (sortedProps.size() > 1) {
       // Custom sort function to place 'start' at the end
       std::sort(sortedProps.begin(), sortedProps.end(),
@@ -258,7 +253,7 @@ class RNSkSkottieView : public RNSkView {
 
     std::shared_ptr<RNSkSkottieRenderer> renderer = std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer());
     for (auto& prop : sortedProps) {
-      if (prop.first == "src" && prop.second.getType() == RNJsi::JsiWrapperValueType::HostObject) {
+      if (prop.first == "src" && prop.second.getType() == RNJsi::JsiValue::HostObject) {
         renderer->setSrc(prop.second.getAsHostObject());
         renderImmediate(); // Draw the first frame
       } else if (prop.first == "scaleType") {
@@ -300,27 +295,23 @@ class RNSkSkottieView : public RNSkView {
 
         // We can only call the runtime on the JS thread.
         // And we might be called from the UI thread here.
-        if (platformContext->isOnJavascriptThread()) {
-          installOnAnimationFinishCallback();
-        } else {
           // TODO: note, this is async and potentially requires us to use a lock
           //       or we find a way to call the _callInvoker sync
           platformContext->runOnJavascriptThread(installOnAnimationFinishCallback);
-        }
 
         // Actually start the rendering:
         renderer->setStartTime(RNSkTime::GetSecs());
-        setDrawingMode(RNSkDrawingMode::Continuous);
+//        setDrawingMode(RNSkDrawingMode::Continuous);
       } else if (prop.first == "pause") {
         if (renderer->isPaused()) {
           continue;
         }
 
-        setDrawingMode(RNSkDrawingMode::Default);
+//        setDrawingMode(RNSkDrawingMode::Default);
         renderer->pause();
       } else if (prop.first == "reset") {
         renderer->resetPlayback();
-        setDrawingMode(RNSkDrawingMode::Default); // This will also trigger a requestRedraw
+//        setDrawingMode(RNSkDrawingMode::Default); // This will also trigger a requestRedraw
       } else if (prop.first == "loop") {
         isLooping = prop.second.getAsBool();
       }

package/example/Gemfile

@@ -2,7 +2,8 @@ source 'https://rubygems.org'
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby '>= 2.6.10'
 
-# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
-# bound in the template on Cocoapods with next React Native release.
-gem 'cocoapods', '>= 1.13', '< 1.15'
-gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
+gem 'concurrent-ruby', '< 1.3.4'

package/example/Gemfile.lock

@@ -89,8 +89,10 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  activesupport (>= 6.1.7.5, < 7.1.0)
-  cocoapods (>= 1.13, < 1.15)
+  activesupport (>= 6.1.7.5, != 7.1.0)
+  cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
+  concurrent-ruby (< 1.3.4)
+  xcodeproj (< 1.26.0)
 
 RUBY VERSION
    ruby 2.7.6p219

package/example/android/app/build.gradle

@@ -51,6 +51,9 @@ react {
     //
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
     // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
 }
 
 /**
@@ -165,5 +168,3 @@ dependencies {
 
   implementation project(':react-native-skottie')
 }
-
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

package/example/android/app/src/main/java/com/skiaskottieexample/MainApplication.kt

@@ -9,6 +9,7 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
 import com.facebook.soloader.SoLoader
 
 class MainApplication : Application(), ReactApplication {
@@ -34,7 +35,7 @@ class MainApplication : Application(), ReactApplication {
 
   override fun onCreate() {
     super.onCreate()
-    SoLoader.init(this, false)
+    SoLoader.init(this, OpenSourceMergedSoMapping)
     if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       load()

package/example/android/build.gradle

@@ -1,11 +1,11 @@
 buildscript {
     ext {
-        buildToolsVersion = "34.0.0"
-        minSdkVersion = 23
-        compileSdkVersion = 34
+        buildToolsVersion = "35.0.0"
+        minSdkVersion = 24
+        compileSdkVersion = 35
         targetSdkVersion = 34
-        ndkVersion = "26.1.10909125"
-        kotlinVersion = "1.9.22"
+        ndkVersion = "27.1.12297006"
+        kotlinVersion = "2.0.21"
     }
     repositories {
         google()

package/example/android/gradle.properties

@@ -21,8 +21,6 @@ org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
 # Android operating system, and which are packaged with your app's APK
 # https://developer.android.com/topic/libraries/support-library/androidx-rn
 android.useAndroidX=true
-# Automatically convert third-party libraries to use AndroidX
-android.enableJetifier=true
 
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using

package/example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
 networkTimeout=10000
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

package/example/android/gradlew

@@ -15,6 +15,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
+# SPDX-License-Identifier: Apache-2.0
+#
 
 ##############################################################################
 #
@@ -55,7 +57,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.
@@ -84,7 +86,8 @@ done
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
 # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
-APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
+' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -246,4 +249,4 @@ eval "set -- $(
         tr '\n' ' '
     )" '"$@"'
 
-exec "$JAVACMD" "$@"
+exec "$JAVACMD" "$@"

package/example/android/settings.gradle

@@ -1,5 +1,7 @@
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'SkiaSkottieExample'
-apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
 

package/example/ios/.xcode.env.local

@@ -1,2 +1,2 @@
-export NODE_BINARY=/var/folders/5n/z448zlfd02ddb0hk378ypj480000gn/T/yarn--1714831406757-0.8095014996128791/node
+export NODE_BINARY=/Users/hannomargelo/.nvm/versions/node/v18.20.1/bin/node
 

package/example/ios/Podfile

@@ -5,7 +5,7 @@ require Pod::Executable.execute_command('node', ['-p',
     {paths: [process.argv[1]]},
   )', __dir__]).strip
 
-platform :ios, 14.0
+platform :ios, min_ios_version_supported
 prepare_react_native_project!
 
 linkage = ENV['USE_FRAMEWORKS']
@@ -23,16 +23,13 @@ target 'SkiaSkottieExample' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
-  target 'SkiaSkottieExampleTests' do
-    inherit! :complete
-    # Pods for testing
-  end
-
   post_install do |installer|
     # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
     react_native_post_install(
       installer,
       config[:reactNativePath],
+      :mac_catalyst_enabled => false,
+      # :ccache_enabled => true
     )
   end
 end