rive-app / rive-app/rive-react-native

data binding not trigger state machine until press artboard

Open
#348 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
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

.riv
.rev

Image Image Image
Expected behavior

When the useRiveBoolean set function is called, the view model property changes and triggers the condition timeline to animate.

Screen record

Image
https://youtu.be/SWtxUgL3QRI

  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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.