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

Author: mfazekas

example/src/pages/RiveDataBindingExample.tsx

@@ -1,5 +1,5 @@
 import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   Fit,
   RiveView,
@@ -61,14 +61,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 +98,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) {