{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install lottie-react-native"],"cli":null},"imports":["import LottieView from 'lottie-react-native';","import type { LottieViewProps } from 'lottie-react-native';","import type { AnimationObject } from 'lottie-react-native';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}