feat: Reanimated shared value → Rive property binding (#64)

* feat: add Reanimated shared value to Rive property binding example

Demonstrates driving Rive ViewModelNumberProperty from Reanimated shared values
using NitroModules.box() to share HybridObjects with worklets.

* fix: use correct worklets package for Reanimated 4.x

* feat: add pan gesture to shared value example

* _playIfNeeded on android

* android implementation

* fix: lint and android version

* upograde nitro

* fix ktlint error

* playIfNeeded

* fix: change _playIfNeeded to playIfNeeded

* adjust progress

Author: mfazekas

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

@@ -118,6 +118,8 @@ class HybridRiveView(val context: ThemedReactContext) : HybridRiveViewSpec() {
 
   override fun reset() = asyncExecuteOnUiThread { view.reset() }
 
+  override fun playIfNeeded() = view.playIfNeeded()
+
   override fun onEventListener(onEvent: (event: UnifiedRiveEvent) -> Unit) =
     executeOnUiThread { view.addEventListener(onEvent) }
 

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

@@ -190,6 +190,14 @@ class RiveReactNativeView(context: ThemedReactContext) : FrameLayout(context) {
 
   fun reset() = riveAnimationView?.reset()
 
+  fun playIfNeeded() {
+    if (riveAnimationView?.isPlaying == false) {
+      riveAnimationView?.post {
+        riveAnimationView?.play()
+      }
+    }
+  }
+
   fun addEventListener(onEvent: (event: RNEvent) -> Unit) {
     val eventListener = object : RiveFileController.RiveEventListener {
       override fun notifyEvent(event: RiveEvent) {

example/assets/rive/movecircle.riv

@@ -7,7 +7,10 @@ const root = path.resolve(__dirname, '..');
 module.exports = getConfig(
   {
     presets: ['module:@react-native/babel-preset'],
-    plugins: [['babel-plugin-react-compiler', {}]],
+    plugins: [
+      ['babel-plugin-react-compiler', {}],
+      'react-native-reanimated/plugin',
+    ],
   },
   { root, pkg }
 );

example/babel.config.js

@@ -8,7 +8,7 @@ PODS:
   - hermes-engine (0.79.2):
     - hermes-engine/Pre-built (= 0.79.2)
   - hermes-engine/Pre-built (0.79.2)
-  - NitroModules (0.31.4):
+  - NitroModules (0.31.10):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1803,6 +1803,83 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNReanimated (4.1.5):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated (= 4.1.5)
+    - RNWorklets
+    - Yoga
+  - RNReanimated/reanimated (4.1.5):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated/apple (= 4.1.5)
+    - RNWorklets
+    - Yoga
+  - RNReanimated/reanimated/apple (4.1.5):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNWorklets
+    - Yoga
   - RNRive (0.1.0):
     - DoubleConversion
     - glog
@@ -1829,6 +1906,80 @@ PODS:
     - ReactCommon/turbomodule/core
     - RiveRuntime (= 6.12.0)
     - Yoga
+  - RNWorklets (0.6.1):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNWorklets/worklets (= 0.6.1)
+    - Yoga
+  - RNWorklets/worklets (0.6.1):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNWorklets/worklets/apple (= 0.6.1)
+    - Yoga
+  - RNWorklets/worklets/apple (0.6.1):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.11.18.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-hermes
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SocketRocket (0.7.1)
   - Yoga (0.0.0)
 
@@ -1908,7 +2059,9 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNRive (from `../..`)
+  - RNWorklets (from `../node_modules/react-native-worklets`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -2064,8 +2217,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-picker/picker"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNRive:
     :path: "../.."
+  RNWorklets:
+    :path: "../node_modules/react-native-worklets"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -2077,7 +2234,7 @@ SPEC CHECKSUMS:
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   hermes-engine: 314be5250afa5692b57b4dd1705959e1973a8ebe
-  NitroModules: 8229091083785ae690dc9071f07fc412e0cb8243
+  NitroModules: 7f50ee216f8403e8eb243acfc504f3f856d6914c
   RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
   RCTDeprecation: 83ffb90c23ee5cea353bd32008a7bca100908f8c
   RCTRequired: eb7c0aba998009f47a540bec9e9d69a54f68136e
@@ -2144,7 +2301,9 @@ SPEC CHECKSUMS:
   RiveRuntime: 8d819993126145fbf5a73089e7634b14b9aa577f
   RNCPicker: 83c74db2de8274d8a8f3e18d91dea174a708f8c4
   RNGestureHandler: bff91bb5ab5688265c70f74180ef718b94f33fe3
+  RNReanimated: 9a24892f34ea317264883806d2e3de7ce34eab90
   RNRive: 6ced82b0b2ff90cbb87813849e9c05761d038119
+  RNWorklets: ddf16938b1ed7e878563a4fc8a690968ef3d27f1
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 9f110fc4b7aa538663cba3c14cbb1c335f43c13f
 

example/ios/Podfile.lock

@@ -15,9 +15,11 @@
     "@react-navigation/stack": "^7.3.2",
     "react": "19.0.0",
     "react-native": "0.79.2",
-    "react-native-gesture-handler": "^2.25.0",
-    "react-native-nitro-modules": "^0.31.3",
-    "react-native-safe-area-context": "^5.4.0"
+    "react-native-gesture-handler": "2.29.1",
+    "react-native-nitro-modules": "0.31.10",
+    "react-native-reanimated": "4.1.5",
+    "react-native-safe-area-context": "^5.4.0",
+    "react-native-worklets": "0.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",