feat: add viewModelInstance to ViewProps, so we don't need to wait for ref

Author: mfazekas

android/src/main/java/com/margelo/nitro/rive/HybridRiveView.kt

@@ -56,6 +56,7 @@ class HybridRiveView(val context: ThemedReactContext) : HybridRiveViewSpec() {
   override var alignment: Alignment? = null
   override var fit: Fit? = null
   override var layoutScaleFactor: Double? = null
+  override var bind: HybridViewModelInstanceSpec? = null
   //endregion
 
   //region View Methods
@@ -112,6 +113,7 @@ class HybridRiveView(val context: ThemedReactContext) : HybridRiveViewSpec() {
     val hybridFile = file as? HybridRiveFile
     val riveFile = hybridFile?.riveFile ?: return
 
+    val viewModelInstance = (bind as? HybridViewModelInstance)?.viewModelInstance
     val config = ViewConfiguration(
       artboardName = artboardName,
       stateMachineName = stateMachineName,
@@ -121,6 +123,7 @@ class HybridRiveView(val context: ThemedReactContext) : HybridRiveViewSpec() {
       alignment = convertAlignment(alignment) ?: DefaultConfiguration.ALIGNMENT,
       fit = convertFit(fit) ?: DefaultConfiguration.FIT,
       layoutScaleFactor = layoutScaleFactor?.toFloat() ?: DefaultConfiguration.LAYOUTSCALEFACTOR,
+      bind = viewModelInstance,
     )
     view.configure(config, needsReload)
 

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

@@ -29,7 +29,8 @@ data class ViewConfiguration(
   val riveFile: File,
   val alignment: Alignment,
   val fit: Fit,
-  val layoutScaleFactor: Float?
+  val layoutScaleFactor: Float?,
+  val bind: ViewModelInstance?
 )
 
 @SuppressLint("ViewConstructor")
@@ -67,6 +68,14 @@ class RiveReactNativeView(context: ThemedReactContext) : FrameLayout(context) {
       // TODO: this seems to require a reload for the view to take the new value (bug on Android)
       riveAnimationView?.layoutScaleFactor = config.layoutScaleFactor
     }
+
+    config.bind?.let { vmi ->
+      val stateMachines = riveAnimationView?.controller?.stateMachines
+      if (!stateMachines.isNullOrEmpty()) {
+        stateMachines.first().viewModelInstance = vmi
+      }
+    }
+
     viewReadyDeferred.complete(true)
   }
 

example/src/pages/RiveDataBindingExample.tsx

@@ -3,7 +3,6 @@ import { useEffect, useMemo } from 'react';
 import {
   Fit,
   RiveView,
-  useRive,
   useRiveNumber,
   type ViewModelInstance,
   type RiveFile,
@@ -61,14 +60,6 @@ function DataBindingExample({
   instance: ViewModelInstance;
   file: RiveFile;
 }) {
-  const { riveViewRef, setHybridRef } = useRive();
-
-  useEffect(() => {
-    if (riveViewRef) {
-      riveViewRef.bindViewModelInstance(instance);
-    }
-  }, [riveViewRef, instance]);
-
   const { error: coinValueError } = useRiveNumber('Coin/Item_Value', instance);
 
   if (coinValueError) {
@@ -106,10 +97,10 @@ function DataBindingExample({
       style={styles.rive}
       autoBind={false}
       autoPlay={true}
+      bind={instance}
       fit={Fit.Layout}
       layoutScaleFactor={1}
       file={file}
-      hybridRef={setHybridRef}
     />
   );
 }

ios/HybridRiveView.swift

@@ -12,6 +12,8 @@ private struct DefaultConfiguration {
 }
 
 class HybridRiveView : HybridRiveViewSpec {
+  var bind: (any HybridViewModelInstanceSpec)?
+  
   // MARK: View Props
   var artboardName: String? { didSet { needsReload = true } }
   var stateMachineName: String? { didSet { needsReload = true } }
@@ -86,6 +88,7 @@ class HybridRiveView : HybridRiveViewSpec {
     guard let hybridFile = file as? HybridRiveFile,
           let file = hybridFile.riveFile else { return }
 
+    let viewModelInstance = (bind as? HybridViewModelInstance)?.viewModelInstance
     let config = ViewConfiguration(
       artboardName: artboardName,
       stateMachineName: stateMachineName,
@@ -95,7 +98,8 @@ class HybridRiveView : HybridRiveViewSpec {
       viewSource: hybridFile,
       alignment: convertAlignment(alignment) ?? DefaultConfiguration.alignment,
       fit: convertFit(fit) ?? DefaultConfiguration.fit,
-      layoutScaleFactor: layoutScaleFactor ?? DefaultConfiguration.layoutScaleFactor
+      layoutScaleFactor: layoutScaleFactor ?? DefaultConfiguration.layoutScaleFactor,
+      bind: viewModelInstance
     )
 
     try? getRiveView().configure(config, reload: needsReload)

ios/RiveReactNativeView.swift

@@ -17,6 +17,7 @@ struct ViewConfiguration {
   let alignment: RiveRuntime.RiveAlignment
   let fit: RiveRuntime.RiveFit
   let layoutScaleFactor: Double
+  let bind: RiveDataBindingViewModel.Instance?
 }
 
 class RiveReactNativeView: UIView, RiveStateMachineDelegate {
@@ -66,6 +67,10 @@ class RiveReactNativeView: UIView, RiveStateMachineDelegate {
       viewReadyContinuation?.resume()
       viewReadyContinuation = nil
     }
+    
+    if let bind = config.bind {
+      baseViewModel?.riveModel?.stateMachine?.bind(viewModelInstance: bind)
+    }
   }
 
   func bindViewModelInstance(viewModelInstance: RiveDataBindingViewModel.Instance) {