Before using lottie-react-native, we need to install the library into our React Native project as a node module so we can import it inside the code base of our app. To perform this installation, we have two different options:
Both tools will result in the same output (lottie-react-native) and its dependencies will be installed inside the node_modules folder inside our React Native project folder. Using one tool or another will be up to each developer and should not influence the resulting product in any way.
The topics we will cover in this chapter are as follows:
Installing lottie-react-native follows a similar process as any other npm library, taking into account that it's a library that depends on native libraries written in Swift and Java. Taking this into account, developers can always read about the installation process in the GitHub repository URL: https://github.com/lottie-react-native/lottie-react-native.
When installing lottie-react-native, developers should know that, because of the way it is built, the iOS native library for Lottie should also be installed to enable lottie-react-native to render Lottie animations in iOS apps.
Let's take a look at the steps we need to follow in order to complete a successful installation.
Follow these steps to install the lottie-react-native library using npm:
npm i --save lottie-react-native
This command will follow four different steps:
npm detects and installs the latest version of the library from the npm public repository, but we could force a specific version of the library by specifying it after an @ sign followed by the version number we would like to install.
npm i --save [email protected]
Running this command will trigger the installation of lottie-ios on a very specific version, 3.2.3, which is the compatible version for lottie-react-native to work properly on iOS devices.
pod install
This action will trigger CocoaPods, a dependency management tool for iOS and macOS projects that will download and install all the dependencies required by lottie-ios to function.
Once all these dependencies are installed, we can start using the lottie-react-native library inside our React Native app.
Using Yarn for installing lottie-react-native is similar to using npm.
Let's see how to do so:
yarn add lottie-react-native
This command will follow four different steps:
Yarn always looks for the latest version of the library in the npm public repository, but we could force a specific version of the library by specifying it after an @ sign followed by the version number we would like to install.
yarn add [email protected]
Running this command will install lottie-ios on its version number 3.2.3, which is the compatible version for lottie-react-native to work properly on iOS devices.
pod install
This action will trigger CocoaPods, a dependency management tool for iOS and macOS projects that will download and install all the dependencies required by lottie-ios to function.
Once all these dependencies are installed, we can start using the lottie-react-native library inside our React Native app. This library depends on other packages in order to deploy all its functionality. Let's take a look now at these packages.
As with many other libraries, lottie-react-native depends on a number of libraries that will be automatically installed when running npm or Yarn installations, as we did in the previous section of this chapter. The full list of dependencies is as follows:
"peerDependencies": {
"lottie-ios": "^3.2.3",
"react": "*",
"react-native": "|=0.46"
},
"dependencies": {
"invariant": "^2.2.2",
"prop-types": "^15.5.10",
"react-native-safe-modules": "^1.0.3"
}
As we can see, lottie-react-native needs to run on a project that contains at least three dependent libraries: lottie-ios (which should be installed using npm or Yarn, as we saw in the previous section of this chapter), react, and react-native (version 0.46 or higher).
On top of those peer dependencies, lottie-react-native also requires three regular dependencies: invariant, prop-types, and react-native-safe-modules. All of them will be installed automatically by npm or Yarn so developers do not need to take any manual action to install them.
Let's take a look now at the platform-specific requirements that lottie-react-native has.
Both platforms have specific requirements for lottie-react-native to be installed properly. Let's take a look now at what those differences are and how we can complete the installation in iOS and Android.
For its iOS version, lottie-react-native depends on lottie-ios, which is a library built by Airbnb in Swift. This means we need to enable our React Native app to read and execute Swift code. In order to do so, we need to create a bridging header (if we haven't done it yet) so the Objective-C part of our app can communicate with the Swift part and therefore, send and receive messages to lottie-ios.
If we don't have a bridging header in our project, we can create one by following these steps:
Upon finishing these steps, our app should be ready to start using lottie-react-native on any iOS and macOS device. Let's now prepare our app to run lottie-react-native on Android devices.
On some rare occasions, auto-linking may not work properly when installing lottie-react-native on Android devices. This will result in the app crashing when trying to build it. In this case, you would need to follow these steps to fix the issue:
include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
When all these changes are done, rebuild the app for Android devices and check whether the crash is fixed. As we have our installation finished, let's move on now to see the limitations and possibilities of using the most well-known Lottie features.
Not all Adobe After Effects (AE) features are supported by lottie-react-native. In fact, Airbnb maintains a list of non-supported features on their website: https://github.com/airbnb/lottie/blob/master/supported-features.md.
The support list for the most common features at the time of writing is as follows:
Let's now learn how to deal with previous versions of lottie-react-native in cases when our version of React Native requires a version other than the latest.
Depending on which version of React Native we are building our project with, we will need to install a specific version or range of versions. The list of versions to be installed can be found in the previous chapter, so now we are going to learn how to install one of those specific versions:
We now have lottie-react-native and its dependencies properly installed and ready to be used to render Lottie animations within our React Native app.
Our project can now be successfully built on both iOS and Android devices, so let's start the magic and integrate our first Lottie animation. We will cover how to do this in the next chapter.