feat: data binding add trigger property hook

Author: HayesGordon

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

@@ -36,6 +36,7 @@ import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.Job
 import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.cancel
+import kotlinx.coroutines.flow.drop
 import kotlinx.coroutines.launch
 import java.io.IOException
 import java.io.InputStream
@@ -453,10 +454,20 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
         RNPropertyType.Color -> viewModelInstance.getColorProperty(path)
         RNPropertyType.Enum -> viewModelInstance.getEnumProperty(path)
         RNPropertyType.Trigger -> viewModelInstance.getTriggerProperty(path)
-      } ?: return
+      }
       val job = scope.launch {
-        property.valueFlow.collect { value ->
-          sendEvent(key, value)
+        when (propertyTypeEnum) {
+          RNPropertyType.Trigger -> {
+            // We drop the first value as a trigger has no initial value
+            property.valueFlow.drop(1).collect { _ ->
+              sendEvent(key, null)
+            }
+          }
+          else -> {
+            property.valueFlow.collect { value ->
+              sendEvent(key, value)
+            }
+          }
         }
       }
       propertyListeners[key] = PropertyListener(viewModelInstance, path, propertyType, job)

example/app/(examples)/DataBinding.tsx

@@ -20,6 +20,7 @@ import Rive, {
   useRiveColor,
   useRiveNumber,
   useRiveString,
+  useRiveTrigger,
 } from 'rive-react-native';
 import { Button } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
@@ -34,6 +35,10 @@ export default function DataBinding() {
   let [price, setPrice] = useRiveNumber(riveRef, 'Price_Value');
   let [coinValue] = useRiveNumber(riveRef, 'Coin/Item_Value');
 
+  useRiveTrigger(riveRef, 'Button/Pressed', () => {
+    console.log('Button pressed');
+  });
+
   useEffect(() => {
     if (coinValue !== undefined) {
       console.log('coinValue changed:', coinValue);

ios/RiveReactNativeView.swift

@@ -676,7 +676,7 @@ class RiveReactNativeView: RCTView, RivePlayerDelegate, RiveStateMachineDelegate
 
     private struct PropertyRegistration {
         let property: RiveDataBindingViewModel.Instance.Property
-        let initialValue: Any
+        let initialValue: Any?
         let createListener: () -> UUID?
     }
 
@@ -751,7 +751,16 @@ class RiveReactNativeView: RCTView, RivePlayerDelegate, RiveStateMachineDelegate
                 )
 
             case .Trigger:
-                return nil
+                guard let prop = dataBindingInstance.triggerProperty(fromPath: path) else { return nil }
+                return PropertyRegistration(
+                    property: prop,
+                    initialValue: nil,
+                    createListener: { [weak self] in
+                        prop.addListener {
+                            self?.eventEmitter?.sendEvent(withName: key, body: nil)
+                        }
+                    }
+                )
             }
         }()
 
@@ -763,7 +772,9 @@ class RiveReactNativeView: RCTView, RivePlayerDelegate, RiveStateMachineDelegate
         }
 
         // Send initial value
-        eventEmitter?.sendEvent(withName: key, body: registration.initialValue)
+        if let initialValue = registration.initialValue {
+            eventEmitter?.sendEvent(withName: key, body: initialValue)
+        }
 
         // Create and store listener
         if let listener = registration.createListener() {

src/Rive.tsx

@@ -211,6 +211,54 @@ export function useRiveColor(
   return useRivePropertyListener<RiveRGBA>(riveRef, path, PropertyType.Color);
 }
 
+export function useRiveTrigger(
+  riveRef: RiveRef | null,
+  path: string,
+  onTrigger?: () => void
+): (() => void) | undefined {
+  const triggerCallback = useCallback(() => {
+    onTrigger?.();
+  }, [onTrigger]);
+
+  useEffect(() => {
+    const listener = riveRef?.internalNativeEmitter?.();
+    if (!listener) return () => {};
+    const reactTag = findNodeHandle(riveRef.viewTag());
+    if (!reactTag) return () => {};
+
+    listener.addListener<void>(
+      path,
+      PropertyType.Trigger,
+      reactTag,
+      triggerCallback
+    );
+
+    return () => {
+      listener.removeListener<void>(
+        path,
+        PropertyType.Trigger,
+        reactTag,
+        triggerCallback
+      );
+    };
+  }, [riveRef, path, triggerCallback]);
+
+  // Function to fire the trigger
+  const trigger = useCallback(() => {
+    if (!riveRef) {
+      if (__DEV__) {
+        console.warn(
+          `[Rive] Tried to trigger "${path}" before riveRef was available.`
+        );
+      }
+      return;
+    }
+    riveRef.trigger(path);
+  }, [riveRef, path]);
+
+  return riveRef ? trigger : undefined;
+}
+
 function useRivePropertyListener<T>(
   riveRef: RiveRef | null,
   path: string,

src/index.tsx

@@ -7,6 +7,7 @@ import Rive, {
   useRiveBoolean,
   useRiveColor,
   useRiveEnum,
+  useRiveTrigger,
 } from './Rive';
 
 export {
@@ -17,6 +18,7 @@ export {
   useRiveBoolean,
   useRiveColor,
   useRiveEnum,
+  useRiveTrigger,
 };
 
 export default Rive;