feat: ViewModelImageProperty (#40)

* feat: ViewModelImageProperty

* force refresh

* refactor: use PropertyListenerHelper

* fix: addListener fix

* fix: ktlint

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.set((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,13 @@
-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, useEffect } from 'react';
 import type { Metadata } from '../helpers/metadata';
 import {
   DataBindMode,
   RiveView,
   useRiveFile,
   type ViewModelInstance,
+  RiveImages,
+  type RiveViewRef,
 } from '@rive-app/react-native';
 
 type BindModeOption =
@@ -77,6 +79,10 @@ 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);
+  const isListening = useRef(false);
 
   // Create a ViewModelInstance for "green" to demonstrate instance binding
   const greenInstance = useMemo(() => {
@@ -91,13 +97,69 @@ export default function ManyViewModels() {
     }
   }, [riveFile]);
 
+  const handleLoadImage = async () => {
+    if (!riveViewRef.current) return;
+
+    setIsLoadingImage(true);
+    setImageError(null);
+    try {
+      const vmi = riveViewRef.current.getViewModelInstance();
+      if (!vmi) {
+        console.log('No ViewModelInstance found on RiveViewRef');
+        setImageError('No ViewModelInstance found on RiveViewRef');
+        return null;
+      }
+      const imgProp = vmi.imageProperty('imageValue');
+      if (!imgProp) {
+        setImageError('Image property "imageValue" not found');
+        return null;
+      }
+
+      if (!isListening.current) {
+        imgProp.addListener(() => {
+          console.log('[IMAGE PROPERTY LISTENER]: Image property changed!');
+        });
+        isListening.current = true;
+      }
+
+      const riveImage = await RiveImages.loadFromURLAsync(
+        'https://picsum.photos/id/372/500/500'
+      );
+      imgProp.set(riveImage);
+      riveViewRef.current.play();
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Unknown error';
+      setImageError(errorMsg);
+      console.error('Failed to load image:', errorMsg);
+    } finally {
+      setIsLoadingImage(false);
+    }
+    return true;
+  };
+
   const dataBindValue = getDataBindValue(bindMode, greenInstance);
+  useEffect(() => {
+    isListening.current = false;
+  }, [dataBindValue]);
 
   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 +181,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

@@ -5,7 +5,6 @@ import {
 } from '@react-navigation/native';
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
-import 'react-native-reanimated';
 
 import { useColorScheme } from '@/hooks/use-color-scheme';
 

expo-example/app/_layout.tsx

@@ -4,8 +4,15 @@ import RiveRuntime
 /// Protocol for Rive property types that support listener management
 protocol RivePropertyWithListeners: AnyObject {
   associatedtype ListenerValueType
-  
-  func addListener(_ callback: @escaping (ListenerValueType) -> Void) -> UUID
+  typealias ListenerType = (ListenerValueType) -> Void
+
+  func addListener(_ callback: @escaping ListenerType) -> UUID
+  func removeListener(_ id: UUID)
+}
+
+/// Protocol for Rive property types with void listeners (Trigger, Image)
+protocol RivePropertyWithVoidListeners: AnyObject {
+  func addListener(_ callback: @escaping () -> Void) -> UUID
   func removeListener(_ id: UUID)
 }
 
@@ -33,32 +40,46 @@ extension EnumPropertyType: RivePropertyWithListeners {
 extension ColorPropertyType: RivePropertyWithListeners {
   typealias ListenerValueType = UIColor  // Native: UIColor → Double (needs conversion)
 }
-// Note: TriggerProperty doesn't fit the pattern - it has () -> Void listeners, not (Void) -> Void
+extension TriggerPropertyType: RivePropertyWithListeners {
+  func addListener(_ callback: @escaping ListenerType) -> UUID {
+    addListener { callback(()) }
+  }
+
+  typealias ListenerValueType = Void
+}
+
+extension ImagePropertyType: RivePropertyWithListeners {
+  typealias ListenerValueType = Void
+
+  func addListener(_ callback: @escaping ListenerType) -> UUID {
+    addListener { callback(()) }
+  }
+}
 
 /// Helper class for managing ViewModel property listeners
 class PropertyListenerHelper<PropertyType: RivePropertyWithListeners> {
   private var listenerIds: [UUID] = []
   weak var property: PropertyType?
-  
+
   init(property: PropertyType) {
     self.property = property
   }
-  
+
   /// Adds a listener to the property and automatically tracks its ID for cleanup
   func addListener(_ callback: @escaping (PropertyType.ListenerValueType) -> Void) {
     guard let property = property else { return }
     let id = property.addListener(callback)
     listenerIds.append(id)
   }
-  
+
   func removeListeners() throws {
     guard let property = property else { return }
     for id in listenerIds {
       property.removeListener(id)
     }
     listenerIds.removeAll()
   }
-  
+
   func dispose() throws {
     try? removeListeners()
   }
@@ -69,10 +90,10 @@ class PropertyListenerHelper<PropertyType: RivePropertyWithListeners> {
 protocol ValuedPropertyProtocol<ValueType> {
   associatedtype PropertyType: RivePropertyWithListeners
   associatedtype ValueType
-  
+
   var property: PropertyType! { get }
   var helper: PropertyListenerHelper<PropertyType> { get }
-  
+
   func addListener(onChanged: @escaping (ValueType) -> Void) throws
   func removeListeners() throws
   func dispose() throws
@@ -83,7 +104,7 @@ extension ValuedPropertyProtocol {
   func removeListeners() throws {
     try helper.removeListeners()
   }
-  
+
   func dispose() throws {
     try helper.dispose()
   }

ios/BaseHybridViewModelProperty.swift

@@ -0,0 +1,31 @@
+import RiveRuntime
+
+class HybridViewModelImageProperty: HybridViewModelImagePropertySpec, ValuedPropertyProtocol {
+  func addListener(onChanged: @escaping () -> Void) throws {
+    try addListener(onChanged: { _ in onChanged() })
+  }
+  
+  var property: ImagePropertyType!
+  lazy var helper = PropertyListenerHelper(property: property!)
+
+  init(property: ImagePropertyType) {
+    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)
+    }
+  }
+}

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

@@ -1,10 +1,16 @@
 import NitroModules
 import RiveRuntime
 
-class HybridViewModelTriggerProperty: HybridViewModelTriggerPropertySpec {
-  private var property: TriggerPropertyType!
+class HybridViewModelTriggerProperty: HybridViewModelTriggerPropertySpec, ValuedPropertyProtocol {
+  internal var property: TriggerPropertyType!
+  lazy var helper = PropertyListenerHelper(property: property!)
+
   private var listenerIds: [UUID] = []
-  
+
+  func addListener(onChanged: @escaping () -> Void) throws {
+    try addListener(onChanged: { _ in onChanged() })
+  }
+
   init(property: TriggerPropertyType) {
     self.property = property
     super.init()
@@ -21,22 +27,4 @@ class HybridViewModelTriggerProperty: HybridViewModelTriggerPropertySpec {
   func trigger() {
     property.trigger()
   }
-  
-  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/HybridViewModelTriggerProperty.swift

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