Passing interactivity adds another wrapping div that might break styling

[Nitay Rabinovich]

Describe the bug

There's Inconsistent rendering behavior when passing interactivity prop - Another wrapping div is rendered, preventing passing relative sizes to through style or className prop (The wrapping div is rendered here, so passing 100% to width/height wouldn't be applied correctly)

To Reproduce
Steps to reproduce the behavior:

1. Render Lottie with style={{width: '100%', height: '100%'}} within a div with set height and width
2. The animation will resize to fill containing div.
3. Pass interactivity property - the animation will no longer fill containing div

Expected behavior
Passing interactivity shouldn't break DOM structure in such a way

Screenshots

[Gamote]

@NitayRabi Thank you for reporting this. Yes you're right, it's on my todo list for the next version.

[Gamote]

Hey @NitayRabi, this bug was fixed in v2.2.1.