feat: ViewModelImageProperty

Author: mfazekas

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

@@ -0,0 +1,21 @@
+package com.margelo.nitro.rive
+
+import androidx.annotation.Keep
+import app.rive.runtime.kotlin.core.ViewModelImageProperty
+import com.facebook.proguard.annotations.DoNotStrip
+import kotlinx.coroutines.flow.map
+
+@Keep
+@DoNotStrip
+class HybridViewModelImageProperty(private val viewModelImage: ViewModelImageProperty) :
+  HybridViewModelImagePropertySpec(),
+  BaseHybridViewModelProperty<Unit> by BaseHybridViewModelPropertyImpl() {
+  override fun set(image: HybridRiveImageSpec?) {
+    viewModelImage.value = (image as? HybridRiveImage)?.renderImage
+  }
+
+  override fun addListener(onChanged: () -> Unit) {
+    listeners.add(onChanged)
+    ensureValueListenerJob(viewModelImage.valueFlow.map { })
+  }
+}

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

@@ -64,4 +64,13 @@ class HybridViewModelInstance(val viewModelInstance: ViewModelInstance) : Hybrid
       return null
     }
   }
+
+  override fun imageProperty(path: String): HybridViewModelImagePropertySpec? {
+    try {
+      val imageProperty = viewModelInstance.getImageProperty(path)
+      return HybridViewModelImageProperty(imageProperty)
+    } catch (e: ViewModelException) {
+      return null
+    }
+  }
 }

example/assets/rive/many_viewmodels.riv

@@ -1,11 +1,14 @@
-import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
-import { useState, useMemo } from 'react';
+import { StyleSheet, View, Text, TouchableOpacity, Button } from 'react-native';
+import { useState, useMemo, useRef } from 'react';
+import { hybridRef } from 'react-native-nitro-modules';
 import type { Metadata } from '../helpers/metadata';
 import {
   DataBindMode,
   RiveView,
   useRiveFile,
   type ViewModelInstance,
+  RiveImages,
+  type RiveViewRef,
 } from '@rive-app/react-native';
 
 type BindModeOption =
@@ -77,6 +80,9 @@ export default function ManyViewModels() {
     require('../../assets/rive/many_viewmodels.riv')
   );
   const [bindMode, setBindMode] = useState<BindModeOption>('none');
+  const [isLoadingImage, setIsLoadingImage] = useState(false);
+  const [imageError, setImageError] = useState<string | null>(null);
+  const riveViewRef = useRef<RiveViewRef>(undefined);
 
   // Create a ViewModelInstance for "green" to demonstrate instance binding
   const greenInstance = useMemo(() => {
@@ -91,13 +97,59 @@ export default function ManyViewModels() {
     }
   }, [riveFile]);
 
+  const handleLoadImage = async () => {
+    if (!riveViewRef.current) return;
+
+    setIsLoadingImage(true);
+    setImageError(null);
+    try {
+      const viewModelInstance = riveViewRef.current.getViewModelInstance();
+      if (!viewModelInstance) {
+        setImageError('No view model instance found in view');
+        return;
+      }
+
+      const imgProp = viewModelInstance.imageProperty('imageValue');
+      if (!imgProp) {
+        setImageError('Image property "imageValue" not found');
+        return;
+      }
+
+      const riveImage = await RiveImages.loadFromURLAsync(
+        'https://picsum.photos/id/372/500/500'
+      );
+      imgProp.set(riveImage);
+
+      imgProp.addListener(() => {
+        console.log('Image property changed!');
+      });
+
+      console.log('Image loaded and set successfully');
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Unknown error';
+      setImageError(errorMsg);
+      console.error('Failed to load image:', errorMsg);
+    } finally {
+      setIsLoadingImage(false);
+    }
+  };
+
   const dataBindValue = getDataBindValue(bindMode, greenInstance);
 
   return (
     <View style={styles.container}>
       <BindModeSelector selectedMode={bindMode} onModeChange={setBindMode} />
+      <View style={styles.imageButtonContainer}>
+        <Button
+          title={isLoadingImage ? 'Loading Image...' : 'Load Test Image'}
+          onPress={handleLoadImage}
+          disabled={isLoadingImage || !riveFile}
+        />
+        {imageError && <Text style={styles.errorText}>{imageError}</Text>}
+      </View>
       {riveFile && (
         <RiveView
+          hybridRef={{ f: (ref) => (riveViewRef.current = ref) }}
           style={styles.rive}
           file={riveFile}
           dataBind={dataBindValue}
@@ -119,6 +171,17 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#fff',
   },
+  imageButtonContainer: {
+    padding: 16,
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+  },
+  errorText: {
+    color: 'red',
+    marginTop: 8,
+    fontSize: 12,
+  },
   rive: {
     flex: 1,
     width: '100%',

example/src/pages/ManyViewModels.tsx

@@ -0,0 +1,46 @@
+import RiveRuntime
+
+class HybridViewModelImageProperty: HybridViewModelImagePropertySpec {
+  var property: RiveDataBindingViewModel.Instance.ImageProperty!
+  private var listenerIds: [UUID] = []
+
+  init(property: RiveDataBindingViewModel.Instance.ImageProperty) {
+    self.property = property
+    super.init()
+  }
+
+  /// ⚠️ DO NOT REMOVE
+  /// Nitro requires a parameterless initializer for JS bridging.
+  /// This is invoked automatically during hybrid module construction.
+  /// Internally we always use `init(property:)`
+  override init() {
+    super.init()
+  }
+
+  func set(image: HybridRiveImageSpec?) throws {
+    if let hybridImage = image as? HybridRiveImage {
+      property.setValue(hybridImage.renderImage)
+    } else {
+      property.setValue(nil)
+    }
+  }
+
+  func addListener(onChanged: @escaping () -> Void) throws {
+    let id = property.addListener({
+      onChanged()
+    })
+
+    listenerIds.append(id)
+  }
+
+  func removeListeners() throws {
+    for id in listenerIds {
+      property.removeListener(id)
+    }
+    listenerIds.removeAll()
+  }
+
+  func dispose() throws {
+    try? removeListeners()
+  }
+}

ios/HybridViewModelImageProperty.swift

@@ -43,4 +43,9 @@ class HybridViewModelInstance: HybridViewModelInstanceSpec {
     guard let property = viewModelInstance?.triggerProperty(fromPath: path) else { return nil }
     return HybridViewModelTriggerProperty(property: property)
   }
+
+  func imageProperty(path: String) throws -> (any HybridViewModelImagePropertySpec)? {
+    guard let property = viewModelInstance?.imageProperty(fromPath: path) else { return nil }
+    return HybridViewModelImageProperty(property: property)
+  }
 }

ios/HybridViewModelInstance.swift

@@ -53,6 +53,10 @@
       "swift": "HybridViewModelTriggerProperty",
       "kotlin": "HybridViewModelTriggerProperty"
     },
+    "ViewModelImageProperty": {
+      "swift": "HybridViewModelImageProperty",
+      "kotlin": "HybridViewModelImageProperty"
+    },
     "RiveView": {
       "swift": "HybridRiveView",
       "kotlin": "HybridRiveView"