rive-app / rive-app/rive-react-native
data binding not trigger state machine until press artboard
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 783
- Forks
- 81
- Avg merge
- 3d 6h
- Merged PRs (30d)
- 3
Description
Description
Use a data-binding boolean to trigger the state machine timeline.
Android:
After calling the useRiveBoolean set function, the view model property value changes, but the animation doesn't start until the user presses the Rive artboard.
iOS:
The useRiveBoolean set function is called, but the view model property value doesn't change until the user presses the Rive artboard.
Provide a Repro
https://github.com/CacaoRick/rive-click-issue/tree/data-binding
Source .riv/.rev file
Expected behavior
When the useRiveBoolean set function is called, the view model property changes and triggers the condition timeline to animate.
Screen record
const [setRiveRef, riveRef] = useRive();
const [isTrue, setIsTrue] = useRiveBoolean(riveRef, 'is-true');
Toggle button call setIsTrue when press, display the isTrue value on the right.
Device & Versions
- Device:
- Android Emulator, Android 15
- iOS simulator, iOS 18.5
- NPM Version: 11.4.2
- React Native: 0.79.4
- expo: 53.0.12
- rive-react-native: 9.3.4
Additional context
The current temporary solution is to call riveRef.play() after setting the view model value each time, which can successfully trigger the timeline animation.
<Button title="Toggle" onPress={() => {
setIsTrue(!isTrue);
riveRef?.play();
}} />
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the linked reproduction on the data-binding branch with the reported Android and iOS versions, then trace the useRiveBoolean setter and the riveRef.play() workaround. Done means changing the view model property immediately triggers the state-machine timeline on both platforms without requiring an artboard press or an explicit play call.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100