Lottie Animation View for React

Common errors

• TypeError: Cannot read properties of undefined (reading 'play') at Lottie.componentDidMount

  cause The `animationData` prop in `options` is missing, `null`, or undefined when the component tries to initialize the Lottie animation.
  fix Ensure that your `.json` animation file is correctly imported (e.g., `import * as animationData from './myAnimation.json'`) and passed as `animationData: animationData` within the `options` prop object.

• Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

  cause This warning occurs because `react-lottie` internally uses deprecated React lifecycle methods, which are flagged by newer React versions.
  fix This is a warning originating from the unmaintained library itself and doesn't directly indicate a problem with your code. While it's often harmless, for a clean console and future compatibility, migrating to a different, actively maintained Lottie player for React is recommended.

• Module not found: Error: Can't resolve 'react-lottie'

  cause The `react-lottie` package has not been installed, or there's a bundler configuration issue preventing its resolution (e.g., trying to import CJS in an ESM-only context without proper transpilation).
  fix First, ensure `npm install --save react-lottie` or `yarn add react-lottie` has been run. If the issue persists, check your bundler (Webpack, Rollup, Vite) configuration to ensure it correctly handles CommonJS modules from `node_modules`.

Warnings

• breaking The `react-lottie` package is effectively abandoned and has not been updated since 2018. It relies on an outdated version of `bodymovin.js` (now `lottie-web`) and may have compatibility issues with modern React versions (e.g., React 18+), strict mode, or contemporary build tools.
  Fix: For new projects or if encountering issues with newer React versions, strongly consider using actively maintained alternatives such as `@lottiefiles/react-lottie-player` or `lottie-react` which provide better compatibility and features.
• gotcha This package uses deprecated React lifecycle methods (e.g., `componentWillReceiveProps`) internally. While this often results only in console warnings in newer React versions, it might lead to unexpected behavior or future breakage.
  Fix: There is no direct fix within `react-lottie` itself. The best approach is to migrate to a modern Lottie player for React that adheres to current React best practices and lifecycle conventions.
• gotcha Due to its age, `react-lottie` may have sub-optimal performance characteristics compared to newer implementations, especially concerning animations with many layers or complex interactions.
  Fix: Monitor performance metrics and consider profiling animations. If performance is a critical concern, newer libraries or direct `lottie-web` integration might offer better control and optimization opportunities.
• gotcha The documentation and underlying library references in `react-lottie` still refer to `bodymovin.js`, which has since been renamed to `lottie-web`. This indicates the library is not aligned with the current Lottie ecosystem.
  Fix: Be aware that external resources and community support for 'bodymovin.js' specifically may be scarce. When searching for solutions or understanding features, focus on 'lottie-web' documentation, understanding that `react-lottie` wraps an older version of it.

Install

• npm install react-lottie npm
• yarn add react-lottie yarn
• pnpm add react-lottie pnpm

Imports

• Lottie
  wrong:

  import { Lottie } from 'react-lottie';

  correct:

  import Lottie from 'react-lottie';

  The `Lottie` component is a default export, not a named export. Attempting to destructure it as a named export will result in an error.
• animationData (JSON)
  wrong:

  import animationData from './path/to/animation.json';

  correct:

  import * as animationData from './path/to/animation.json';

  JSON files imported directly into JavaScript/TypeScript are typically treated as modules, with their content accessible via a named export (e.g., `default`) or a namespace import (`* as`). The `* as` pattern is generally safer for broad compatibility.
• Lottie (CommonJS)
  wrong:

  const Lottie = require('react-lottie');

  correct:

  const Lottie = require('react-lottie').default;

  When using CommonJS `require()` in environments that don't automatically resolve ESM `default` exports, you'll likely need to explicitly access the `.default` property to get the component.

Quickstart

This quickstart demonstrates how to embed and control a Lottie animation using the `react-lottie` component, including play, pause, and stop functionality, with basic state management.

import React, { useState } from 'react';
import Lottie from 'react-lottie';
import * as animationData from './pinjump.json'; // Ensure this file exists in your project

// To run this example, first install: npm install --save react-lottie

export default function LottieControl() {
  const [isStopped, setIsStopped] = useState(false);
  const [isPaused, setIsPaused] = useState(false);

  const buttonStyle = {
    display: 'block',
    margin: '10px auto',
    padding: '8px 15px',
    fontSize: '16px',
    cursor: 'pointer'
  };

  const defaultOptions = {
    loop: true,
    autoplay: true, 
    animationData: animationData, // The imported JSON animation data
    rendererSettings: {
      preserveAspectRatio: 'xMidYMid slice'
    }
  };

  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <h1>Lottie Animation Example</h1>
      <Lottie 
        options={defaultOptions}
        height={400}
        width={400}
        isStopped={isStopped}
        isPaused={isPaused}
      />
      <button style={buttonStyle} onClick={() => setIsStopped(true)}>Stop</button>
      <button style={buttonStyle} onClick={() => setIsStopped(false)}>Play</button>
      <button style={buttonStyle} onClick={() => setIsPaused(!isPaused)}>Pause/Resume</button>
    </div>
  );
}