feat: add dataBind prop to RiveView by mfazekas · Pull Request #23 · rive-app/rive-nitro-react-native

mfazekas · 2025-11-13T15:03:42Z

Add a dataBind property to allow binding viewModelInstance in a declarative way.

Usages:
1.) Set and instance => no ref needed

const { riveViewRef, setHybridRef } = useRive();

 useEffect(() => {
   if (riveViewRef) {
     riveViewRef.bindViewModelInstance(instance);
   }
 }, [riveViewRef, instance]);
 
 
 return (
   <RiveView
      hybridRef={setHybridRef}
    />
 )

to just:

 return (
   <RiveView
      bind={instance}
    />
 )

2.) Also accepts by name:

<RiveView dataBind={{byName: 'green'}} />

3.) None or Auto for default

<RiveView dataBind={DataBindMode.AUTO} />

…r ref

- Remove needsReload trigger from dataBind property changes - Add in-place binding update methods for both platforms - Fix flicker when switching between binding modes iOS Changes: - Add applyDataBinding() method on RiveReactNativeView - Call applyDataBinding() in didSet instead of needsReload - Directly call bind/enableAutoBind/disableAutoBind on existing view Android Changes: - Add custom setter for dataBind property - Add configureDataBinding() method - Directly update viewModelInstance on existing state machine - Make riveAnimationView internal for access from HybridRiveView Result: - Smooth transitions between red/green/blue/none/auto modes - No visual flicker or reload when switching binding modes - Better performance (no view recreation) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Add artboard.bind(viewModelInstance:) in addition to stateMachine binding - Required for visual changes to take effect when switching binding modes - Matches old rive-react-native implementation pattern 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Add baseViewModel?.play() after binding view model instance - Forces view to refresh and show the new binding state - Helps ensure visual updates appear immediately 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Add baseViewModel?.play() for .none and .auto cases - Ensures view refreshes when switching to these modes - All binding modes now trigger play() for consistent behavior - Fix prettier formatting in example 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Add artboard.viewModelInstance binding in addition to stateMachine - Add view.play() call after all binding mode changes - Matches iOS implementation for consistent behavior - Ensures visual updates appear when switching modes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Remove in-place configureDataBinding() method - Set needsReload = true and call afterUpdate() when dataBind changes - Matches old rive-react-native pattern for referencedAssets changes - Full reload via setRiveFile() with new binding configuration - iOS keeps play() approach for smoother experience 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Remove afterUpdate() call from custom setter - React Native automatically calls afterUpdate() after all props update - Prevents potential double-reload issues 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Add isFirstConfigure flag to track initial load - Call play(stateMachineName, isStateMachine: true) after reload - Only play on subsequent reloads, not on first configure - Ensures state machine restarts with new binding iOS note: iOS already calls baseViewModel.play() in applyDataBinding() which handles non-first updates through the didSet mechanism 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

expo-example/app.json

example/src/pages/RiveTextRunExample.tsx

example/src/pages/RiveStateMachineInputsExample.tsx

example/src/pages/RiveEventsExample.tsx

example/src/pages/RiveDataBindingExample.tsx

example/src/pages/OutOfBandAssets.tsx

example/src/pages/RiveFileLoadingExample.tsx

ios/RiveReactNativeView.swift

ios/HybridRiveView.swift

ios/Utils.swift

ios/HybridRiveView.swift

ios/RiveReactNativeView.swift

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

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

expo-example/app.json

HayesGordon

LGTM! Thanks for this!

expo-example/app.json

mfazekas force-pushed the view-model-instance branch from c981692 to d888d84 Compare November 13, 2025 15:25

mfazekas requested a review from HayesGordon November 13, 2025 16:38

mfazekas changed the title ~~feat: add viewModelInstance to ViewProps, so we don't need to wait for ref~~ feat: add bind to ViewProps, so we don't need to wait for ref Nov 14, 2025

mfazekas changed the title ~~feat: add bind to ViewProps, so we don't need to wait for ref~~ feat: add dataBind prop to RiveView Nov 17, 2025

mfazekas force-pushed the view-model-instance branch from d07d887 to 0358e2a Compare November 17, 2025 12:59

mfazekas and others added 15 commits November 17, 2025 14:00

feat: add viewModelInstance to ViewProps, so we don't need to wait fo…

491ae77

…r ref

feat: getBoundViewModelInstance

248c82f

dataBind 1st gen

6d4dbfb

fix(andorid): use ios like implementation

719ebbe

fix(andorid): use ios like implementation

726d3d4

removed unused files

c46c6aa

refator: simplify changes

9c39621

mfazekas force-pushed the view-model-instance branch from 0358e2a to 9c39621 Compare November 17, 2025 13:01

fix: make dataBind optional and default to auto

c49e386