Using imported JSON file as source only works when spreading into new object

[kb-ig]

Overview

When using an imported lottie JSON file as the src rather than specifying a URL, I have to spread the JSON object into a new object every time the component renders, otherwise the animation doesnt play. I'm not sure if there's a valid reason for it or it's a bug.

This doesnt work - the animation doesnt play:

import AnimationData from "./animation.json";
//...
<Player src={AnimationData} ... />

But this does work - the animation plays

import AnimationData from "./animation.json";
//...
<Player src={{...AnimationData}} ... />

Consuming repo

What repo were you working in when this issue occurred?

I've reproduced this in a couple of repos, including this codesandbox.

Labels

• [ ] Add the Type: Bug label to this issue.

[samuelOsborne]

Hi @kb-ig, thanks for creating this issue, I'll look in to it.

[samuelOsborne]

@kb-ig The problem seems to be coming from your toggle code, I don't have a problem using the animationData like in your first code snippet:

https://codesandbox.io/s/react-play-lottie-on-toggle-s3d6hf

I think the spread operator works because React detected a change (the new object being created) and re-renders the component, but the first method doesn't do that so the component isn't re-rendered

[kb-ig]

@samuelOsborne Yeah I see what you're saying. I think I was misunderstanding the autoplay prop. It must only play on the load event, and that only fires once in my codesandbox above, regardless of pressing the button to toggle the value passed into the autoplay prop. I was under the impression that changing the value passed into the autoplay prop would re-render the Player component, but that doesnt seem to be the case.

It might be handy to have a play prop, which doesnt only play on the load event, but plays regardless of the player state. An in my example code, I'd pass the value into play rather than autoplay.

I've played around with this react-lottie-player before stumbling upon the lottiefiles one, which has something to that effect.

[samuelOsborne]

@kb-ig Yes you're correct, autoplay will play the animation when it has finished loading.

Is there a difference between your idea of a play prop and calling the play() method like I did in my codesandbox?

[kb-ig]

@samuelOsborne No, no difference really, other than taking away some of the visual noise of capturing the instance and calling a function on the instance. It would really just be a convenience prop, that would:

• call the start() function if the play prop is true and the animation is not currently playing
• call the stop() function if the play prop is false and the animation is currently playing

Just an idea based on very little experience using this or other lottie players.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.