fix: missing isStateMachine argument for Android

Author: HayesGordon

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

@@ -166,14 +166,14 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
     reactContext.getJSModule(RCTEventEmitter::class.java).receiveEvent(id, Events.STATE_CHANGED.toString(), data)
   }
 
-  fun play(animationName: String, rnLoopMode: RNLoopMode, rnDirection: RNDirection) {
+  fun play(animationName: String, rnLoopMode: RNLoopMode, rnDirection: RNDirection, isStateMachine: Boolean) {
     val loop = RNLoopMode.mapToRiveLoop(rnLoopMode)
     val direction = RNDirection.mapToRiveDirection(rnDirection)
     if (animationName.isEmpty()) {
-      riveAnimationView.play(loop, direction)
+      riveAnimationView.play(loop, direction) // intentionally we skipped areStateMachines argument to keep same behaviour as it is in the native sdk
     } else {
       try {
-        riveAnimationView.play(animationName, loop, direction)
+        riveAnimationView.play(animationName, loop, direction, isStateMachine)
       } catch (ex: RiveException) {
         handleRiveException(ex)
       }

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

@@ -27,10 +27,11 @@ class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
           val animationName = it.getString(0)!!
           val loopMode = it.getString(1)!!
           val direction = it.getString(2)!!
+          val isStateMachine = it.getBoolean(3)
           view.run {
             val rnLoopMode = RNLoopMode.mapToRNLoopMode(loopMode)
             val rnDirection = RNDirection.mapToRNDirection(direction)
-            play(animationName, rnLoopMode, rnDirection)
+            play(animationName, rnLoopMode, rnDirection, isStateMachine)
           }
         }
 

ios/RiveReactNativeView.swift

@@ -187,10 +187,10 @@ class RiveReactNativeView: UIView, RivePlayerDelegate, RiveStateMachineDelegate
 
     // MARK: - Playback Controls
 
-    func play(animationName: String? = nil, rnLoopMode: RNLoopMode, rnDirection: RNDirection) {
+    func play(animationName: String? = nil, rnLoopMode: RNLoopMode, rnDirection: RNDirection, isStateMachine: Bool) {
         let loop = RNLoopMode.mapToRiveLoop(rnLoopMode: rnLoopMode)
         let direction = RNDirection.mapToRiveDirection(rnDirection: rnDirection)
-        if (animationName ?? "").isEmpty {
+        if (animationName ?? "").isEmpty || isStateMachine {
             viewModel.play(loop: loop, direction: direction)
         } else {
             viewModel.play(animationName: animationName, loop: loop, direction: direction)

ios/RiveReactNativeViewManager.m

@@ -19,7 +19,7 @@ @interface RCT_EXTERN_MODULE(RiveReactNativeViewManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(onStateChanged, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onError, RCTDirectEventBlock)
 
-RCT_EXTERN_METHOD(play:(nonnull NSNumber *)node animationName:(nonnull NSString)animationName loop:(NSString)loopMode direction:(NSString)direction)
+RCT_EXTERN_METHOD(play:(nonnull NSNumber *)node animationName:(nonnull NSString)animationName loop:(NSString)loopMode direction:(NSString)direction isStateMachine:(BOOL)isStateMachine)
 RCT_EXTERN_METHOD(pause:(nonnull NSNumber *)node)
 RCT_EXTERN_METHOD(stop:(nonnull NSNumber *)node)
 RCT_EXTERN_METHOD(reset:(nonnull NSNumber *)node)

ios/RiveReactNativeViewManager.swift

@@ -8,10 +8,10 @@ class RiveReactNativeViewManager: RCTViewManager {
         return RiveReactNativeView()
     }
 
-    @objc func play(_ node: NSNumber, animationName: String, loop: String, direction: String) {
+    @objc func play(_ node: NSNumber, animationName: String, loop: String, direction: String, isStateMachine: Bool) {
         DispatchQueue.main.async {
             let component = self.bridge.uiManager.view(forReactTag: node) as! RiveReactNativeView
-            component.play(animationName: animationName, rnLoopMode: RNLoopMode.mapToRNLoopMode(value: loop), rnDirection: RNDirection.mapToRNDirection(value: direction))
+            component.play(animationName: animationName, rnLoopMode: RNLoopMode.mapToRNLoopMode(value: loop), rnDirection: RNDirection.mapToRNDirection(value: direction), isStateMachine: isStateMachine);
 
         }
     }

src/Rive.tsx

@@ -204,14 +204,15 @@ const RiveContainer = React.forwardRef<RiveRef, Props>(
     const play = useCallback<RiveRef[ViewManagerMethod.play]>(
       (
         // eslint-disable-next-line no-shadow
-        animationName = '', // TODO change
+        animationName = '',
         loop = LoopMode.Auto,
-        direction = Direction.Auto
+        direction = Direction.Auto,
+        isStateMachine = false
       ) => {
         UIManager.dispatchViewManagerCommand(
           findNodeHandle(riveRef.current),
           ViewManagerMethod.play,
-          [animationName, loop, direction]
+          [animationName, loop, direction, isStateMachine]
         );
       },
       []

src/types.ts

@@ -8,7 +8,8 @@ export type RiveRef = {
   play: (
     animationName?: string,
     loop?: LoopMode,
-    direction?: Direction
+    direction?: Direction,
+    isStateMachine?: boolean
   ) => void;
   pause: () => void;
   stop: () => void;