useRive hook displays nothing.

[Oriole-Alex]

Hi,
Probably just me missing something simple - I'm able to display my .riv animation with Rive /> however when i try to use the with the useRive hook and pass in parameters, i get no content displayed on screen. Below is the code im using, literally nothing else in the React app as I just wanted to test this (loving the animation tools on the website btw!)

I'm using React "^17.0.2" and "rive-react": "latest"

any help would be really appreciated :)

---

import { useRive } from 'rive-react';

function App() {

const { RiveComponent } = useRive({
    src: "./Assets/Rive/backgroundFile.riv",
    autoplay: true,
    
})

return (
    <div style={{ height: "500px", width: "500px" }}>
        <RiveComponent />
    </div>
)

}

export default App;

[avivian]

Hey @Oriole-Alex!

From what I can see it looks like you're doing everything right. I suspect the issue could be with how you're hosting the .riv file. How is it hosted? Do you see any errors in the console when you try to run this code? Does it work when you a different file hosted online in the src, e.g this one from our community: https://public.rive.app/community/runtime-files/736-1464-translationscale-constraints-demo.riv?

[Oriole-Alex]

Hi Avivian,

Thanks for the quick response! Very strange, you are completely right, swapping in the url you provided displays the animation perfectly with zero code changes. Any idea why your hosted animation works whereas the locally stored file only works in the basic component and not with the hook?

[avivian]

I'm not sure, the basic component is using the hook under the hood! Can you give me some example code showing my how your code with the basic component works?

How are your assets hosted within your app? Are you using create-react-app? If so, what is the path to the .riv file within your public folder? If that's all working correctly, it could also be due to the fact it's using a relative path as the src. Try it with an absolute path to your .riv file. E.g /Assets/Rive/backgroundFile.riv without the . if that's the root folder of your assets.

We have an example of using the hook with static files here https://github.com/rive-app/rive-react/tree/main/examples/basic-with-hook that might be worth having a look at to see a working example!

[Oriole-Alex]

Hi avivian,

Sorry for the slow reply. Turned out I was just calling the element badly - all good now :) thanks for the help!

One other question - is there a way to reverse the animation? I can only see .play and .pause but no .reverse?

[avivian]

We don't have the ability to reverse the animation in the rive-js runtime right now. Something I can look at adding if you raise an issue in the https://github.com/rive-app/rive-wasm repo!