Lottie React Native

Common errors

• Build Error with React Native 0.80 - Kotlin Type Mismatch

  cause Incompatibility issues arising from Kotlin type declarations when building React Native applications on version 0.80.
  fix Upgrade `lottie-react-native` to version `7.2.3` or higher, which includes a specific fix for this Kotlin type mismatch error.

• Invariant Violation: LottieView was not found in the UIManager.

  cause The native module for LottieView has not been correctly linked or initialized by React Native. This often occurs due to caching issues or incomplete setup steps.
  fix For iOS, navigate to your `ios` directory and run `pod install`. For Android, try `npx react-native start --reset-cache` and a clean build of your app (e.g., `cd android && ./gradlew clean` then rebuild). Ensure autolinking is functional or manually link if necessary.

• TypeError: _lottieReactNative.default.LottieView is not a constructor (evaluating '_reactNative.LottieView')

  cause This error typically indicates an incorrect import statement where `LottieView` is being imported as a named export when it is, in fact, a default export.
  fix Change your import statement from `import { LottieView } from 'lottie-react-native';` to `import LottieView from 'lottie-react-native';`

• ReferenceError: Can't find variable: TextAttributeProps

  cause This error occurs in specific React Native versions (like 0.82+) due to internal changes in how `TextAttributeProps.UNSET` is imported or referenced.
  fix Update `lottie-react-native` to version `7.3.4` or newer, which includes a fix addressing the `TextAttributeProps.UNSET` import for React Native 0.82+.

Warnings

• breaking Version 6.x introduced significant breaking changes. While specific details are not provided in the excerpt, they require migration steps.
  Fix: Consult the MIGRATION-5-TO-6.md guide on the GitHub repository for detailed upgrade instructions and changes from v5 to v6.
• breaking The way to apply styles to the animation's container changed with the introduction of a new 'containerStyle' prop in v7.3.0, potentially breaking existing layouts. While v7.3.2 reintroduced backward compatibility, direct styling of the LottieView component might behave differently.
  Fix: For versions 7.3.0 and 7.3.1, explicitly use the `containerStyle` prop for outer container styling. As of v7.3.2, backward compatibility was restored, so direct `style` prop usage on `LottieView` might work, but `containerStyle` is the recommended explicit prop for the outer container.
• gotcha For web platform support, the '@lottiefiles/dotlottie-react' peer dependency must be explicitly installed, as it is not bundled.
  Fix: Run `yarn add @lottiefiles/dotlottie-react` or `npm install @lottiefiles/dotlottie-react` when targeting web platforms in addition to `lottie-react-native`.
• gotcha Using Lottie React Native with newer React versions (e.g., React 19) typically found in React Native 0.78+ or Expo SDK 53, requires ensuring the `@lottiefiles/dotlottie-react` peer dependency is updated.
  Fix: Ensure `@lottiefiles/dotlottie-react` is at least `^0.13.5` to maintain compatibility with React 19 and newer React Native/Expo SDK versions.

Install

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

Imports

• LottieView
  wrong:

  import { LottieView } from 'lottie-react-native';

  correct:

  import LottieView from 'lottie-react-native';

  LottieView is exported as a default export.
• LottieViewProps

  import type { LottieViewProps } from 'lottie-react-native';

  Use a type import for LottieView's props interface in TypeScript.
• AnimationObject

  import type { AnimationObject } from 'lottie-react-native';

  Type for the Lottie animation JSON object source.

Quickstart

Demonstrates how to integrate and control a Lottie animation using a local JSON file within a React Native component, including playback controls and lifecycle events.

import React, { useRef, useEffect } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import LottieView from 'lottie-react-native';

// Assuming 'myAnimation.json' is in your project's assets folder
// and contains a valid Lottie JSON animation.
const myAnimation = require('./path/to/myAnimation.json'); 

function AnimationScreen() {
  const animationRef = useRef<LottieView>(null);

  useEffect(() => {
    // Start animation automatically on component mount
    animationRef.current?.play();
  }, []);

  return (
    <View style={styles.container}>
      <LottieView
        ref={animationRef}
        source={myAnimation} // Path to your local JSON animation
        autoPlay={true}
        loop={true}
        style={styles.lottieAnimation}
        onAnimationFinish={(isCancelled) => {
          console.log('Animation finished:', isCancelled ? 'cancelled' : 'completed');
        }}
      />
      <View style={styles.controls}>
        <Button title="Play" onPress={() => animationRef.current?.play()} />
        <Button title="Pause" onPress={() => animationRef.current?.pause()} />
        <Button title="Reset" onPress={() => animationRef.current?.reset()} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  lottieAnimation: {
    width: 300,
    height: 300,
    backgroundColor: 'transparent',
  },
  controls: {
    flexDirection: 'row',
    marginTop: 20,
    gap: 10
  }
});

export default AnimationScreen;