Lottie is a iOS, android and React Native library by Airbnb that enables you to embed highly performant JSON based Adobe AfterEffects<\/a> animations into your mobile app that renders After Effects animations in real time. Lottie makes it easier to render vector based animations and art in realtime with minimal code. You can find more here<\/a>. <\/p>\n\n\n\n USING LOTTIE IN REACT-NATIVE:<\/strong><\/p>\n\n\n\n Using Lottie in react-native is particularly very easy and straight forward. <\/p>\n\n\n\n You can use these animations very easily in your React Native app thanks to airbnb. The repo and official docs can be found at link below: This tutorial uses the following versions: <\/p>\n\n\n\n Throughout this tutorial, I am using NPM but feel free to use Yarn instead.<\/p>\n\n\n\n Create new React Native App:<\/strong><\/p>\n\n\n\n Installing Lottie (React Native >= 0.60.0):<\/strong><\/p>\n\n\n\n *IMPORTANT: If you face linking issue, check the troubleshooting guide at <\/strong>https:\/\/github.com\/react-native-community\/lottie-react-native<\/a> <\/p>\n\n\n\n Using Lottie in React Native:<\/strong><\/p>\n\n\n\n For this demo, I\u2019ve downloaded animations as Lottie JSON from https:\/\/lottiefiles.com\/<\/a> and place the downloaded JSON in the project structure as shown.<\/p>\n\n\n\n Next, go App.js and replace the contents with to get the following output:<\/p>\n\n\n\n You\u2019ll see the following output:<\/p>\n\n\n\n You can find the full list of props and methods available for LottieView in the API document<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/tUGkN6h5T_QTIBHMlWhPjkAJ_PuL8Ehi5pWMA979RfhO-ZDse3vek6tMn7IK2Zq6Lj1X1ThH6jDjKRZ_X5SaKO10uvOz7UYC-gCTohg5WU0eP5_hHAhpblMQNI0qM5ynhtA2Zr5P\")
https:\/\/github.com\/react-native-community\/lottie-react-native<\/a> <\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh4.googleusercontent.com\/jXhJi1XFvP6mh-ppmZhYzOA-vfPwDuK2umNkhC_2fBiCvW58jnuvRkXwxGDaDB7YTMQUGn0yn-06udI5Enn4tEdx8NX1GsrfHR55ayKQhXqs_a6hcqTVibZQvVAF75MQZSq8e_SH\")
![\"\"](\"https:\/\/lh3.googleusercontent.com\/Dm5LN9S0Cb1rO4XcHRyLWCmlGS2TM6-O48e-SZzFLwNcnzSiQKKme62VUVxOZcIRCabddkCO-WBailgEskojA53cxsb0CPUIGjJ6574_U903El9WEEGmu6ZBN_dm3Cv-OhNnWuDA\")
import React from 'react';\nimport {StyleSheet, TouchableOpacity, View, Text} from 'react-native';\nimport LottieView from 'lottie-react-native';\n\nclass App extends React.Component {\n state = {\n animationPlaying: false,\n showEat: false,\n showSleep: false,\n showCode: false,\n showRepeat: false,\n };\n\n eatPressed = () => {\n this.setState({\n animationPlaying: true,\n showEat: true,\n showSleep: false,\n showCode: false,\n showRepeat: false,\n });\n };\n\n sleepPressed = () => {\n this.setState({\n animationPlaying: true,\n showEat: false,\n showSleep: true,\n showCode: false,\n showRepeat: false,\n });\n };\n\n codePressed = () => {\n this.setState({\n animationPlaying: true,\n showEat: false,\n showSleep: false,\n showCode: true,\n showRepeat: false,\n });\n };\n\n repeatPressed = () => {\n this.setState({\n animationPlaying: true,\n showEat: false,\n showSleep: false,\n showCode: false,\n showRepeat: true,\n });\n };\n\n animationFinished = () => {\n console.log(\"Finished\")\n this.setState({\n animationPlaying: false,\n welcomeAnimationShown: true,\n buttonText: \"Let's Celebrate\",\n });\n };\n\n render() {\n return (\n <View style={styles.mainContainer}>\n {this.state.animationPlaying ? (\n <View style={styles.mainContainer}>\n {this.state.showEat && (\n <LottieView\n ref={(animation) => {\n this.animation = animation;\n }}\n autoPlay\n loop={false}\n source={require('.\/animations\/eat.json')}\n onAnimationFinish={this.animationFinished}\n \/>\n )}\n {this.state.showSleep && (\n <LottieView\n ref={(animation) => {\n this.animation = animation;\n }}\n autoPlay\n loop={false}\n source={require('.\/animations\/sleep.json')}\n onAnimationFinish={this.animationFinished}\n \/>\n )}\n {this.state.showCode && (\n <LottieView\n ref={(animation) => {\n this.animation = animation;\n }}\n autoPlay\n loop={false}\n source={require('.\/animations\/code.json')}\n onAnimationFinish={this.animationFinished}\n \/>\n )}\n {this.state.showRepeat && (\n <LottieView\n ref={(animation) => {\n this.animation = animation;\n }}\n autoPlay\n loop={false}\n source={require('.\/animations\/repeat.json')}\n onAnimationFinish={this.animationFinished}\n \/>\n )}\n <\/View>\n ) : (\n <View>\n <TouchableOpacity\n style={styles.animateButton}\n onPress={this.eatPressed}>\n <Text style={styles.animateText}>Eat<\/Text>\n <\/TouchableOpacity>\n\n <TouchableOpacity\n style={styles.animateButton}\n onPress={this.sleepPressed}>\n <Text style={styles.animateText}>Sleep<\/Text>\n <\/TouchableOpacity>\n <TouchableOpacity\n style={styles.animateButton}\n onPress={this.codePressed}>\n <Text style={styles.animateText}>Code<\/Text>\n <\/TouchableOpacity>\n <TouchableOpacity\n style={styles.animateButton}\n onPress={this.repeatPressed}>\n <Text style={styles.animateText}>Repeat<\/Text>\n <\/TouchableOpacity>\n <\/View>\n )}\n <\/View>\n );\n }\n}\n\nexport default App;\n\nconst styles = StyleSheet.create({\n mainContainer: {\n justifyContent: 'center',\n flex: 1,\n },\n animateButton: {\n height: 60,\n backgroundColor: '#000',\n marginHorizontal: 32,\n borderRadius: 20,\n justifyContent: 'center',\n alignItems: 'center',\n marginBottom: 20,\n },\n animateText: {\n fontSize: 22,\n color: '#fff',\n },\n});<\/pre>\n\n\n\n![\"\"](\"https:\/\/lh6.googleusercontent.com\/CF1f-Ata6W1RkxcC5jlFpEApYiRANCzuT5wFHiM6_V-48LX9vfl7624DOaUmE1lStapG_x3S9py36h6dnfyZ11AEeOz7IHbM5Dvp2zajGh5sAqg7LWCsv47I9A9-Q1tNJMAD7QoO\")