Rive React Native Data Binding Bug Reproduction

This repository is a standalone reproduction of critical data binding issues in rive-react-native that need to be addressed by the Rive team. REF : RIV-10056

🐛 Bug Summary

Bindings do not work on initial mount - On first load, data bindings often fail completely

🔧 Environment

• Platform: React Native (Expo SDK 52.0.46)
• Rive Package: rive-react-native@^9.3.1
• React Native Version: 0.76.7
• Device: Occurs on both Android & iOS
• Expo Dev Client: Yes (custom client)

📋 Detailed Issue Description

Problem 1: Unreliable Data Binding on Initial Mount

• On first app load, data bindings often fail (text stays "View model not binded")
• Only after hot-reloading or updating the binding code while the app is running do the values bind correctly
• Tested with Autobind, bindByName, and bindByIndex - all show the same unreliable behavior
• Once binding succeeds, everything works perfectly across all views/screens

🧪 Reproduction Setup

This repository contains a minimal reproduction case with:

• A Rive animation (dune.riv) with a state machine called "DuneTalk"
• Four numeric data bindings for audio amplitude values (amplitude_1, amplitude_2, amplitude_3, amplitude_4)
• Boolean inputs for controlling animation state (stopVoiceMode, isLoading)
• A text display that shows "Data View Model not Binded" or "binded" based on binding status

🚀 How to Reproduce the Bug

Prerequisites

npm install

Steps to Reproduce

1. Build and run the app:

   npx expo run:ios
   # or
   npx expo run:android

2. Observe the initial behavior:

   • On loading, check if the text displays "Data View Model not Binded" (bug present) or "binded" (working correctly)
   • If binded, the "Set Random Values" button should work and animate the bars
   • If not binded, the animation will be static

3. Reproduce the issue:

   • Force close the app completely
   • Reopen the app
   • Observe inconsistent binding behavior on fresh launches

🔍 What We've Tried

Attempted Fixes (None worked consistently)

• ✗ Delayed the binding with timeouts and boolean flags
• ✗ Waited for onMount and other lifecycles before binding
• ✗ Created minimal reproduction with single value changes
• ✗ Removed all extra logic except Rive binding
• ✗ Added conditions before setting ref/dataBind
• ✗ Tried different binding methods (Autobind, bindByName, bindByIndex)

What Works

• ✅ Static animations without data binding work perfectly
• ✅ Once binding succeeds (after hot reload), everything works reliably
• ✅ All animation features work correctly when binding is successful

📁 Key Files

• App.tsx: Main component with Rive integration and data binding logic
• assets/rive/dune.riv: Rive animation file with state machine "DuneTalk"
• assets/rive/dune-backup.rev: My backup in case you need to see how the StateMachine and ViewModel is configured.

🎯 Expected Behavior

1. Data bindings should reliably work on first mount
2. No crashes should occur when accessing/setting values after Rive ref is initialized
3. Consistent behavior across app launches