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

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.

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

[samuelOsborne]

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