Data binding not working with useRive hooks in rive-react-native v9.3.1
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 38/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript, react-native, typescript
Research direction
Start by reproducing the example with the provided rewards.riv asset, React Native 0.76.9, and rive-react-native 9.3.1. Trace the useRiveNumber hook and its data-binding entry point, then verify that the Energy_Bar/Lives value changes from null and updates the animation to 10 when the button is pressed.
Written by the indexing model from the issue text.
Description
Description
I'm experiencing problems with data binding in rive-react-native v9.3.1. The useRiveNumber hook isn't successfully updating values in my Rive animation.
Environment
- rive-react-native version: 9.3.1
- React Native version: 0.76.9
- Platform: [Both]
Reproduction Steps
- Set up a basic Rive component with the rewards.riv file
- Attempt to use useRiveNumber to update the 'Energy_Bar/Lives' value
- Press button to trigger the update
- Observe that the animation doesn't reflect the change
Expected Behavior
The Lives counter in the animation should update to the new value (10) when the button is pressed.
Actual Behavior
- The Lives counter doesn't update
- console.log shows {lives: null, setLives: [Function]}
- No errors are displayed
Code Example
import React from 'react'
import { View, useWindowDimensions, Button } from 'react-native'
import Rive, {
Fit,
useRive,
AutoBind,
RNRiveErrorType,
RNRiveError,
useRiveNumber,
} from 'rive-react-native'
export const RiveTestView = () => {
const { width } = useWindowDimensions()
const [setRiveRef, riveRef] = useRive()
let [lives, setLives] = useRiveNumber(riveRef, 'Energy_Bar/Lives')
const onChangeLives = () => {
if(!setLives) {
return
}
setLives(10)
}
console.log({lives, setLives})
return (
<View >
<View style={{ width, height: '100%' }}>
<Button title="Update Rive Text" onPress={onChangeLives} />
<Rive
ref={setRiveRef}
fit={Fit.Layout}
layoutScaleFactor={1}
autoplay={true}
dataBinding={AutoBind(true)}
stateMachineName={'State Machine 1'}
source={require('./assets/rewards.riv')}
onError={(riveError: RNRiveError) => {
switch (riveError.type) {
case RNRiveErrorType.DataBindingError: {
console.error(`${riveError.message}`)
return
}
default:
console.error('Unhandled error')
return
}
}}
/>
</View>
</View>
)
}
- Dominant language
- TypeScript
- Stars
- 783
- Forks
- 81
- Avg merge
- 3d 6h
- Merged PRs (30d)
- 3
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.
More from rive-app/rive-react-native
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
rive-app/rive-react-native#433 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
rive-app/rive-react-native#431 · 2 comments ·
-
[Android] Rive events dispatched off the UI thread can deadlock with Reanimated under Fabric (ANR) Open
Difficulty 3/5 1-2 days Newbie friendliness 68/100
rive-app/rive-react-native#444 ·
-
Difficulty 4/5 3-5 days Newbie friendliness 45/100
rive-app/rive-react-native#441 ·
-
Difficulty 4/5 3-5 days Newbie friendliness 48/100
rive-app/rive-react-native#440 ·
All issues in rive-app/rive-react-native
Similar issues
-
Browser Waiting for: Product Owner
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
getsentry/sentry-javascript#24577 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
agilepathway/label-checker#640 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
copse-dev/agent-pane#2953 ·
-
agentic-workflows
Difficulty 1/5 Under an hour Newbie friendliness 85/100
githubnext/rig#534 ·
-
automation missing-model model-sync provider:pioneer
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
anomalyco/models.dev#7701 ·