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

Data binding not working with useRive hooks in rive-react-native v9.3.1

Open
#333 14 comments 9 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

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

  1. Set up a basic Rive component with the rewards.riv file
  2. Attempt to use useRiveNumber to update the 'Energy_Bar/Lives' value
  3. Press button to trigger the update
  4. 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>
  )
}

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 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.

Assessment

Tech stack
javascript, react-native, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.