{"id":11253,"library":"lottie-react-native","title":"Lottie React Native","description":"Lottie React Native provides comprehensive React Native bindings for the Lottie animation ecosystem, enabling the display of Adobe After Effects animations exported as JSON files via Bodymovin. Currently stable at version 7.3.6, the library maintains an active release cadence with frequent bug fixes and feature updates, often including support for new React Native versions and Expo SDKs. Its primary differentiation lies in allowing designers to directly ship complex animations without requiring engineers to painstakingly recreate them in code. It offers native rendering on iOS (using `lottie-ios`), Android (using `lottie-android`), and Windows (using `Lottie-Windows`), ensuring high performance and fidelity across platforms. The package ships with TypeScript types, facilitating robust development.","status":"active","version":"7.3.6","language":"javascript","source_language":"en","source_url":"https://github.com/lottie-react-native/lottie-react-native","tags":["javascript","lottie","animation","react","react-native","keyframe","typescript"],"install":[{"cmd":"npm install lottie-react-native","lang":"bash","label":"npm"},{"cmd":"yarn add lottie-react-native","lang":"bash","label":"yarn"},{"cmd":"pnpm add lottie-react-native","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for web platform support to render dotLottie animations.","package":"@lottiefiles/dotlottie-react","optional":true},{"reason":"Core React dependency for all React Native applications.","package":"react","optional":false},{"reason":"Core React Native dependency for mobile applications.","package":"react-native","optional":false},{"reason":"Required for Windows platform support and specific native module linking.","package":"react-native-windows","optional":true}],"imports":[{"note":"LottieView is exported as a default export.","wrong":"import { LottieView } from 'lottie-react-native';","symbol":"LottieView","correct":"import LottieView from 'lottie-react-native';"},{"note":"Use a type import for LottieView's props interface in TypeScript.","symbol":"LottieViewProps","correct":"import type { LottieViewProps } from 'lottie-react-native';"},{"note":"Type for the Lottie animation JSON object source.","symbol":"AnimationObject","correct":"import type { AnimationObject } from 'lottie-react-native';"}],"quickstart":{"code":"import React, { useRef, useEffect } from 'react';\nimport { View, StyleSheet, Button } from 'react-native';\nimport LottieView from 'lottie-react-native';\n\n// Assuming 'myAnimation.json' is in your project's assets folder\n// and contains a valid Lottie JSON animation.\nconst myAnimation = require('./path/to/myAnimation.json'); \n\nfunction AnimationScreen() {\n  const animationRef = useRef<LottieView>(null);\n\n  useEffect(() => {\n    // Start animation automatically on component mount\n    animationRef.current?.play();\n  }, []);\n\n  return (\n    <View style={styles.container}>\n      <LottieView\n        ref={animationRef}\n        source={myAnimation} // Path to your local JSON animation\n        autoPlay={true}\n        loop={true}\n        style={styles.lottieAnimation}\n        onAnimationFinish={(isCancelled) => {\n          console.log('Animation finished:', isCancelled ? 'cancelled' : 'completed');\n        }}\n      />\n      <View style={styles.controls}>\n        <Button title=\"Play\" onPress={() => animationRef.current?.play()} />\n        <Button title=\"Pause\" onPress={() => animationRef.current?.pause()} />\n        <Button title=\"Reset\" onPress={() => animationRef.current?.reset()} />\n      </View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  lottieAnimation: {\n    width: 300,\n    height: 300,\n    backgroundColor: 'transparent',\n  },\n  controls: {\n    flexDirection: 'row',\n    marginTop: 20,\n    gap: 10\n  }\n});\n\nexport default AnimationScreen;\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Consult the MIGRATION-5-TO-6.md guide on the GitHub repository for detailed upgrade instructions and changes from v5 to v6.","message":"Version 6.x introduced significant breaking changes. While specific details are not provided in the excerpt, they require migration steps.","severity":"breaking","affected_versions":">=6.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=7.3.0 <7.3.2"},{"fix":"Run `yarn add @lottiefiles/dotlottie-react` or `npm install @lottiefiles/dotlottie-react` when targeting web platforms in addition to `lottie-react-native`.","message":"For web platform support, the '@lottiefiles/dotlottie-react' peer dependency must be explicitly installed, as it is not bundled.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure `@lottiefiles/dotlottie-react` is at least `^0.13.5` to maintain compatibility with React 19 and newer React Native/Expo SDK versions.","message":"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.","severity":"gotcha","affected_versions":">=7.3.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade `lottie-react-native` to version `7.2.3` or higher, which includes a specific fix for this Kotlin type mismatch error.","cause":"Incompatibility issues arising from Kotlin type declarations when building React Native applications on version 0.80.","error":"Build Error with React Native 0.80 - Kotlin Type Mismatch"},{"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.","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.","error":"Invariant Violation: LottieView was not found in the UIManager."},{"fix":"Change your import statement from `import { LottieView } from 'lottie-react-native';` to `import LottieView from 'lottie-react-native';`","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.","error":"TypeError: _lottieReactNative.default.LottieView is not a constructor (evaluating '_reactNative.LottieView')"},{"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+.","cause":"This error occurs in specific React Native versions (like 0.82+) due to internal changes in how `TextAttributeProps.UNSET` is imported or referenced.","error":"ReferenceError: Can't find variable: TextAttributeProps"}],"ecosystem":"npm"}