feat: add data binding observability

Author: HayesGordon

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

@@ -0,0 +1,21 @@
+package com.rivereactnative
+
+enum class RNPropertyType(private val mValue: kotlin.String) {
+  Number("number"),
+  String("string"),
+  Boolean("boolean"),
+  Color("color"),
+  Trigger("trigger"),
+  Enum("enum");
+
+  override fun toString(): kotlin.String {
+    return mValue
+  }
+
+  companion object {
+
+    fun mapToRNPropertyType(propertyType: kotlin.String): RNPropertyType {
+      return valueOf(entries.first() { it.toString() == propertyType }.name)
+    }
+  }
+}

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

@@ -37,4 +37,14 @@ class RiveReactNativeModule(reactContext: ReactApplicationContext) : ReactContex
   fun getNumberStateAtPath(node: Int, inputName: String, path: String, promise: Promise) {
     handleState(node, promise) { view -> view.getNumberStateAtPath(inputName, path) }
   }
+
+  @ReactMethod
+  fun addListener(type: String?) {
+    // Keep: Required for RN built in Event Emitter Calls.
+  }
+
+  @ReactMethod
+  fun removeListeners(type: Int?) {
+    // Keep: Required for RN built in Event Emitter Calls.
+  }
 }

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

@@ -27,11 +27,13 @@ import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.ReadableType
 import com.facebook.react.bridge.WritableMap
+import com.facebook.react.modules.core.DeviceEventManagerModule
 import com.facebook.react.modules.core.ExceptionsManagerModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.events.RCTEventEmitter
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.Job
 import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.cancel
 import kotlinx.coroutines.launch
@@ -98,6 +100,8 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
   private var listener: RiveFileController.Listener
   private var eventListener: RiveFileController.RiveEventListener
   private var assetStore: RiveReactNativeAssetStore? = null
+  private val scope = CoroutineScope(Dispatchers.Default)
+  private val propertyListeners = mutableMapOf<String, Job>()
 
   enum class Events(private val mName: String) {
     PLAY("onPlay"), PAUSE("onPause"), STOP("onStop"), LOOP_END("onLoopEnd"), STATE_CHANGED("onStateChanged"), RIVE_EVENT(
@@ -175,6 +179,7 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
 
   override fun onDetachedFromWindow() {
     if (willDispose) {
+      scope.cancel()
       assetStore?.dispose()
       riveAnimationView?.dispose()
       removeListeners()
@@ -190,6 +195,7 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
   }
 
   private fun removeListeners() {
+    clearPropertyListeners()
     riveAnimationView?.unregisterListener(listener)
     riveAnimationView?.removeEventListener(eventListener)
   }
@@ -425,6 +431,43 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
     }
   }
 
+  fun registerPropertyListener(path: String, propertyType: String) {
+    val key = "$propertyType:$path"
+
+    val propertyTypeEnum = RNPropertyType.mapToRNPropertyType(propertyType);
+
+    val property = when (propertyTypeEnum) {
+        RNPropertyType.String -> getViewModelInstance()?.getStringProperty(path)
+        RNPropertyType.Boolean -> getViewModelInstance()?.getBooleanProperty(path)
+        RNPropertyType.Number -> getViewModelInstance()?.getNumberProperty(path)
+        RNPropertyType.Color -> getViewModelInstance()?.getColorProperty(path)
+        RNPropertyType.Enum -> getViewModelInstance()?.getEnumProperty(path)
+        RNPropertyType.Trigger -> getViewModelInstance()?.getTriggerProperty(path)
+    } ?: return
+
+    // This should not be required, as JavaScript does a check to ensure
+    // event emitters are unique. Adding this as a safety.
+    propertyListeners[key]?.cancel()
+
+    val job = scope.launch {
+        property.valueFlow.collect { value ->
+            sendEvent(key, value)
+        }
+    }
+    propertyListeners[key] = job
+}
+
+  private fun sendEvent(eventName: String, value: Any) {
+    context
+      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+      .emit(eventName, value)
+  }
+
+  private fun clearPropertyListeners() {
+    propertyListeners.values.forEach { it.cancel() }
+    propertyListeners.clear()
+  }
+
   fun update() {
     reloadIfNeeded()
   }

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

@@ -171,6 +171,16 @@ class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
         }
       }
 
+      "registerPropertyListener" -> {
+        args?.let {
+          val path = it.getString(0)
+          val propertyType = it.getString(1)
+          view.run {
+            registerPropertyListener(path, propertyType)
+          }
+        }
+      }
+
       // Touch Events
 
       "touchBegan" -> {

example/app/(examples)/DataBinding.tsx

@@ -1,23 +1,48 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   SafeAreaView,
   ScrollView,
   StyleSheet,
   Button,
   View,
 } from 'react-native';
-import Rive, { Fit, RiveRef } from 'rive-react-native';
+import Rive, {
+  Fit,
+  RiveRef,
+  useRiveColor,
+  useRiveNumber,
+  useRiveReady,
+  useRiveString,
+} from 'rive-react-native';
 
 export default function DataBinding() {
   const riveRef = React.useRef<RiveRef>(null);
+  const riveIsReady = useRiveReady(riveRef);
 
+  let [buttonText, setButtonText] = useRiveString(riveRef, 'Button/State_1');
+  let [lives, setLives] = useRiveNumber(riveRef, 'Energy_Bar/Lives');
+  let [barColor, setBarColor] = useRiveColor(riveRef, 'Energy_Bar/Bar_Color');
+
+  useEffect(() => {
+    if (riveIsReady) {
+      // Set initial values through hooks
+      setButtonText("Let's go!");
+      setLives(7);
+      setBarColor({ r: 0, g: 255, b: 0, a: 255 });
+    }
+  }, [riveIsReady, setButtonText, setLives, setBarColor]);
+
+  console.log('Button Text:', buttonText);
+  console.log('Lives:', lives);
+  console.log('Bar Color:', barColor);
+
+  // Set values directly
   const updateDataBindingValues = () => {
-    // Update the view model instance properties
-    // NUMBER VALUE
-    riveRef.current?.setNumberPropertyValue('Energy_Bar/Lives', 7);
-    // STRING VALUE
-    riveRef.current?.setStringPropertyValue('Button/State_1', "Let's go!");
-    // COLOR VALUE
+    // SET NUMBER VALUE
+    riveRef.current?.setNumberPropertyValue('Energy_Bar/Lives', 6);
+    // SET STRING VALUE
+    riveRef.current?.setStringPropertyValue('Button/State_1', 'Direct!');
+    // SET COLOR VALUE
     riveRef.current?.setColorPropertyValue('Energy_Bar/Bar_Color', {
       r: 0,
       g: 255,