Touch Events

android/build.gradle

@@ -136,7 +136,7 @@ dependencies {
   implementation 'androidx.core:core-ktx:1.3.2'
   implementation 'androidx.appcompat:appcompat:1.2.0'
   implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.4.1'
-  implementation 'app.rive:rive-android:2.0.26'
+  implementation 'app.rive:rive-android:3.0.9'
   implementation "androidx.startup:startup-runtime:1.1.0"
   implementation 'com.android.volley:volley:1.2.0'
 }

android/src/main/java/com/rivereactnative/RiveReactNativeView.kt

@@ -1,7 +1,7 @@
 package com.rivereactnative
 
 import android.widget.FrameLayout
-import androidx.startup.AppInitializer
+import app.rive.runtime.kotlin.PointerEvents
 import app.rive.runtime.kotlin.RiveAnimationView
 import app.rive.runtime.kotlin.RiveArtboardRenderer
 import app.rive.runtime.kotlin.core.*
@@ -23,11 +23,11 @@ import kotlin.IllegalStateException
 
 
 class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout(context) {
-  private var riveAnimationView: RiveAnimationView
+  private var riveAnimationView: RiveAnimationView = RiveAnimationView(context)
   private var resId: Int = -1
   private var url: String? = null
   private var shouldBeReloaded = true
-  private var exceptionManager: ExceptionsManagerModule?
+  private var exceptionManager: ExceptionsManagerModule? = null
   private var isUserHandlingErrors = false
 
   enum class Events(private val mName: String) {
@@ -44,46 +44,43 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
   }
 
   init {
-    riveAnimationView = RiveAnimationView(context)
-    exceptionManager = (context as ReactContext).getNativeModule(ExceptionsManagerModule::class.java)
     val listener = object : RiveArtboardRenderer.Listener {
       override fun notifyLoop(animation: PlayableInstance) {
         if (animation is LinearAnimationInstance) {
-          onLoopEnd(animation.animation.name, RNLoopMode.mapToRNLoopMode(animation.loop))
+          onLoopEnd(animation.name, RNLoopMode.mapToRNLoopMode(animation.loop))
         } else {
           throw IllegalArgumentException("Only animation can be passed as an argument")
         }
       }
 
       override fun notifyPause(animation: PlayableInstance) {
         if (animation is LinearAnimationInstance) {
-          onPause(animation.animation.name)
+          onPause(animation.name)
         }
         if (animation is StateMachineInstance) {
-          onPause(animation.stateMachine.name, true)
+          onPause(animation.name, true)
         }
       }
 
       override fun notifyPlay(animation: PlayableInstance) {
         if (animation is LinearAnimationInstance) {
-          onPlay(animation.animation.name)
+          onPlay(animation.name)
         }
         if (animation is StateMachineInstance) {
-          onPlay(animation.stateMachine.name, true)
+          onPlay(animation.name, true)
         }
       }
 
       override fun notifyStateChanged(stateMachineName: String, stateName: String) {
         onStateChanged(stateMachineName, stateName)
       }
 
-
       override fun notifyStop(animation: PlayableInstance) {
         if (animation is LinearAnimationInstance) {
-          onStop(animation.animation.name)
+          onStop(animation.name)
         }
         if (animation is StateMachineInstance) {
-          onStop(animation.stateMachine.name, true)
+          onStop(animation.name, true)
         }
       }
 
@@ -106,7 +103,6 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
   fun onPause(animationName: String, isStateMachine: Boolean = false) {
     val reactContext = context as ReactContext
 
-
     val data = Arguments.createMap()
     data.putString("animationName", animationName)
     data.putBoolean("isStateMachine", isStateMachine)
@@ -156,7 +152,6 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
         handleRiveException(ex)
       }
     }
-
   }
 
   fun pause(animationNames: List<String>, areStateMachines: Boolean) {
@@ -195,6 +190,14 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
     }
   }
 
+  fun touchBegan(x: Float, y: Float) {
+    riveAnimationView.renderer.pointerEvent(PointerEvents.POINTER_DOWN, x, y)
+  }
+
+  fun touchEnded(x: Float, y: Float) {
+    riveAnimationView.renderer.pointerEvent(PointerEvents.POINTER_UP, x, y)
+  }
+
   fun update() {
     reloadIfNeeded()
   }
@@ -405,7 +408,6 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
     errorMap.putString("message", message)
     errorMap.putArray("stack", createStackTraceForRN(error.stackTrace))
     exceptionManager?.reportException(errorMap)
-
   }
 
   private fun createStackTraceForRN(stackTrace: Array<StackTraceElement>): ReadableArray {

android/src/main/java/com/rivereactnative/RiveReactNativeViewManager.kt

@@ -1,23 +1,13 @@
 package com.rivereactnative
 
+import android.view.MotionEvent
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
 
 class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
-  private enum class Commands {
-    PLAY,
-    PAUSE,
-    STOP,
-    RESET,
-    FIRE_STATE,
-    SET_BOOLEAN_STATE,
-    SET_NUMBER_STATE
-  }
-
-
   override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Map<String, String>>? {
     val builder: MapBuilder.Builder<String, Map<String, String>> = MapBuilder.builder<String, Map<String, String>>()
     for (event in RiveReactNativeView.Events.values()) {
@@ -28,28 +18,11 @@ class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
 
   override fun getName() = "RiveReactNativeView"
 
-  override fun getCommandsMap(): Map<String, Int>? {
-    return MapBuilder.of(
-      "play",
-      Commands.PLAY.ordinal,
-      "pause",
-      Commands.PAUSE.ordinal,
-      "stop",
-      Commands.STOP.ordinal,
-      "reset",
-      Commands.RESET.ordinal,
-      "fireState",
-      Commands.FIRE_STATE.ordinal,
-      "setBooleanState",
-      Commands.SET_BOOLEAN_STATE.ordinal,
-      "setNumberState",
-      Commands.SET_NUMBER_STATE.ordinal
-    )
-  }
+  override fun receiveCommand(view: RiveReactNativeView, commandId: String, args: ReadableArray?) {
+    when (commandId) {
+      // Playback Controls
 
-  override fun receiveCommand(view: RiveReactNativeView, commandType: Int, args: ReadableArray?) {
-    when (commandType) {
-      Commands.PLAY.ordinal -> {
+      "play" -> {
         args?.let {
           val animationNames = it.getArray(0)!!
           val loopMode = it.getString(1)!!
@@ -63,7 +36,7 @@ class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
         }
 
       }
-      Commands.PAUSE.ordinal -> {
+      "pause" -> {
         args?.let {
           val animationNames = it.getArray(0)!!
           val areStateMachines = it.getBoolean(1)
@@ -72,7 +45,7 @@ class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
           }
         }
       }
-      Commands.STOP.ordinal -> {
+      "stop" -> {
         args?.let {
           val animationNames = it.getArray(0)!!
           val areStateMachines = it.getBoolean(1)
@@ -81,8 +54,11 @@ class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
           }
         }
       }
-      Commands.RESET.ordinal -> view.reset()
-      Commands.FIRE_STATE.ordinal -> {
+      "reset" -> view.reset()
+
+      // StateMachine inputs
+
+      "fireState" -> {
         args?.let {
           val stateMachineName = it.getString(0)!!
           val inputName = it.getString(1)!!
@@ -91,7 +67,7 @@ class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
           }
         }
       }
-      Commands.SET_BOOLEAN_STATE.ordinal -> {
+      "setBooleanState" -> {
         args?.let {
           val stateMachineName = it.getString(0)!!
           val inputName = it.getString(1)!!
@@ -101,7 +77,7 @@ class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
           }
         }
       }
-      Commands.SET_NUMBER_STATE.ordinal -> {
+      "setNumberState" -> {
         args?.let {
           val stateMachineName = it.getString(0)!!
           val inputName = it.getString(1)!!
@@ -111,8 +87,31 @@ class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
           }
         }
       }
-      else -> {
+
+      // Touch Events
+
+      "touchBegan" -> {
+        args?.let {
+          val x: Double = it.getDouble(0)
+          val y: Double = it.getDouble(1)
+          view.run {
+            this.touchBegan(x.toFloat(), y.toFloat())
+          }
+        }
       }
+      "touchEnded" -> {
+        args?.let {
+          val x: Double = it.getDouble(0)
+          val y: Double = it.getDouble(1)
+          view.run {
+            this.touchEnded(x.toFloat(), y.toFloat())
+          }
+        }
+      }
+
+      // Other
+
+      else -> { }
     }
   }
 

example/ios/Podfile

@@ -1,7 +1,7 @@
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
-platform :ios, '11.4'
+platform :ios, '14.0'
 
 target 'RiveReactNativeExample' do
   config = use_native_modules!

example/ios/Podfile.lock

@@ -307,10 +307,10 @@ PODS:
     - React-Core (= 0.63.4)
     - React-cxxreact (= 0.63.4)
     - React-jsi (= 0.63.4)
-  - rive-react-native (2.1.36):
+  - rive-react-native (2.1.37):
     - React-Core
-    - RiveRuntime (= 1.0.18)
-  - RiveRuntime (1.0.18)
+    - RiveRuntime (= 2.0.12)
+  - RiveRuntime (2.0.12)
   - RNCMaskedView (0.1.11):
     - React
   - RNCPicker (1.16.0):
@@ -535,8 +535,8 @@ SPEC CHECKSUMS:
   React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
   React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
   ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
-  rive-react-native: f3e4552e7f2aeabebd7d2674330ef759bc51faf8
-  RiveRuntime: e36e481478d5332694427ddbc12cc50ccfa8a1bc
+  rive-react-native: d237f3b10ecbfc1e235aa39097f51a57d36abfba
+  RiveRuntime: 00c431bf347aaad3a3d0ed381241cf945b537e1a
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
   RNCPicker: 918e98b54a141791e99614b1c320ef2e58300490
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
@@ -546,6 +546,6 @@ SPEC CHECKSUMS:
   Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 7a60b8501923e113027edc977b6f9c8e43435501
+PODFILE CHECKSUM: ffca5ebcfa1ead72871bfd5c0adf18ed1df71ff3
 
 COCOAPODS: 1.11.2

example/ios/RiveReactNativeExample.xcodeproj/project.pbxproj

@@ -26,6 +26,7 @@
 		9D879D0D265BF2A400D01424 /* ui_swipe_left_to_delete.riv in Resources */ = {isa = PBXBuildFile; fileRef = 9D879D0C265BF2A400D01424 /* ui_swipe_left_to_delete.riv */; };
 		9D879D0F265BF5B300D01424 /* skills.riv in Resources */ = {isa = PBXBuildFile; fileRef = 9D879D0E265BF5B300D01424 /* skills.riv */; };
 		9DBF1CC52684937E0008391A /* v6_file.riv in Resources */ = {isa = PBXBuildFile; fileRef = 9DBF1CC42684937E0008391A /* v6_file.riv */; };
+		C3C07472283BE07300E8EB33 /* hero_editor.riv in Resources */ = {isa = PBXBuildFile; fileRef = C3C07471283BE07300E8EB33 /* hero_editor.riv */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -69,6 +70,7 @@
 		9D879D0C265BF2A400D01424 /* ui_swipe_left_to_delete.riv */ = {isa = PBXFileReference; lastKnownFileType = file; path = ui_swipe_left_to_delete.riv; sourceTree = "<group>"; };
 		9D879D0E265BF5B300D01424 /* skills.riv */ = {isa = PBXFileReference; lastKnownFileType = file; path = skills.riv; sourceTree = "<group>"; };
 		9DBF1CC42684937E0008391A /* v6_file.riv */ = {isa = PBXFileReference; lastKnownFileType = file; path = v6_file.riv; sourceTree = "<group>"; };
+		C3C07471283BE07300E8EB33 /* hero_editor.riv */ = {isa = PBXFileReference; lastKnownFileType = file; path = hero_editor.riv; sourceTree = "<group>"; };
 		CA3E69C5B9553B26FBA2DF04 /* libPods-RiveReactNativeExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-RiveReactNativeExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		E00ACF0FDA8BF921659E2F9A /* Pods-RiveReactNativeExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-RiveReactNativeExample.release.xcconfig"; path = "Target Support Files/Pods-RiveReactNativeExample/Pods-RiveReactNativeExample.release.xcconfig"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
@@ -195,6 +197,7 @@
 		9D4FE60A26493B460098BF6A /* Assets */ = {
 			isa = PBXGroup;
 			children = (
+				C3C07471283BE07300E8EB33 /* hero_editor.riv */,
 				042FD22626B81BD1004556A3 /* constrained.riv */,
 				04A886F226A990050078530A /* two_bone_ik.riv */,
 				9DBF1CC42684937E0008391A /* v6_file.riv */,
@@ -357,6 +360,7 @@
 				9D4FE6122649427F0098BF6A /* bird.riv in Resources */,
 				9D879D0D265BF2A400D01424 /* ui_swipe_left_to_delete.riv in Resources */,
 				9D879D0926578A5400D01424 /* loopy.riv in Resources */,
+				C3C07472283BE07300E8EB33 /* hero_editor.riv in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -828,13 +832,9 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
-				LIBRARY_SEARCH_PATHS = (
-					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
-					"\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"",
-					"\"$(inherited)\"",
-				);
+				LIBRARY_SEARCH_PATHS = "\"$(inherited)\"";
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -881,13 +881,9 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
-				LIBRARY_SEARCH_PATHS = (
-					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
-					"\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"",
-					"\"$(inherited)\"",
-				);
+				LIBRARY_SEARCH_PATHS = "\"$(inherited)\"";
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

example/src/MultipleAnimations.tsx

@@ -70,7 +70,7 @@ export default function MultipleAnimations() {
             }
           }}
           autoplay={false}
-          fit={Fit.Cover}
+          fit={Fit.Contain}
           style={styles.box}
           resourceName={'artboard_animations'}
         />
@@ -159,7 +159,7 @@ const styles = StyleSheet.create({
   },
   box: {
     width: '100%',
-    height: 400,
+    height: 600,
     marginVertical: 20,
   },
   row: {