Lottie animation using @lottiefiles/react-lottie-player(v. 3.5.3) doesn't appear on iOS and iPadOS

[HerrineKim]

Overview

Does anyone using @lottiefiles/react-lottie-player experiencing Lottie animation using @lottiefiles/react-lottie-player(v. 3.5.3) doesn't appear only on iOS and iPadOS devices? For Windows, Mac, Android web, it's all good.

For your information, I'm using React v. 16.14.0, not React Native.

I tried with the package version 2.2.2 first, then the latest version (3.5.3), and both results are the same.

[Code]

import { Player } from '@lottiefiles/react-lottie-player';

...
            <Player
              ref={this.player}
              autoplay={false}
              loop={false}
              src={animationSource}
              style={{ width: '12rem' }}
            />

Thank you!

Consuming repo

What repo were you working in when this issue occurred?

Labels

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

[samuelOsborne]

hi @HerrineKim Do you mean on safari it doesnt appear?

If so it sounds like theres a problem with the animation and its compatibility across platforms.

Would you be open to using a different player? Our newest one here: https://www.npmjs.com/package/@lottiefiles/dotlottie-react

aims to combat these problems. Let me know what you think, thanks.

[HerrineKim]

Hi @samuelOsborne, actually mine does not appear on Chrome as well 😂 But let me try it and let you know. Thank you!

[HerrineKim]

@samuelOsborne Do you possibly know how to deal with this error?

Here's the code:

import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import animationSrc from 'assets/images/lottie-files/animation-src.lottie';
...
class SomeComponent extends Component {
...
            <DotLottieReact
              ref={this.player}
              src={animationSrc}
              loop={false}
              autoplay
              style={{
                width: '29rem',
              }}
            />
...

And the webpack setting:

...
webpackConfig.module.rules = webpackConfig.module.rules.concat({
  test: /\.(css|scss)$/,
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
      options: {
...
      }
    },
...
  {
    test: /\.lottie$/,
    use: [
      {
        loader: 'file-loader',
      },
    ],
  });
...

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