Using a Lottie file in a React Native app
Once we have our animation exported into a Lottie file, we can integrate it into any React Native app and start the animation on any iOS or Android device. In this section, we will show how this is done on the main screen of a sample blank React Native app, but the process can be extrapolated into any screen or component within any React Native app.
The first thing we have to do is store our Lottie file in a folder inside our app. We need to make sure we can import files from this folder in our React components and screens. For example, we could store our Lottie files in the assets folder, where all images used in our app are stored:
Figure 9.1 – Storing animation in the app folder structure
In this case, we stored a JSON file named myLottieFile.json inside the assets/animations folder so it's accessible through a simple import statement: require('./assets/animations/myLottieFile.json').
