Switch to autolinking to add new packages quickly with no worries about the native code.
The following article is part of The Ultimate Guide to React Native Optimization and describes how to automate the dependency management with <rte-code>autolinking<rte-code>.
Why is it important?
Sometimes adding new packages to your React Native apps may cause some issues with the native code. What's more, this process may occur more time-consuming than you previously estimated. That's why we decided to tell you why it is a good idea to automate your dependency management with <rte-code>autolinking<rte-code> and make this process faster, more efficient, and with no harm to the native code of your app.
The previous parts of our guide discuss:
- Reducing the device’s battery usage with UI re-renders
- The best practices around using dedicated higher-ordered React Native components
- Picking external libraries
- Libraries optimized for mobile
- How to Achieve 60FPS Animations in React Native
- Why Is It Essential to Always Run The Latest Version of React Native?
- How to Debug Faster and Better with Flipper
Be sure to check them out. Now let's jump into the main topic.
Automate your dependency management with autolinking
Issue: You’re adding libraries manually or using the deprecated react-native link
Historically, React Native didn’t provide an out-of-the-box solution for cases like that. Developers were encouraged to follow the best practices for a given platform.
On Android, the recommendation was to use Gradle, which was already a platform of choice within the Android community. React Native used Gradle for building its source code and pulling its own dependencies, which naturally enforced all community packages to follow the same strategy.
On iOS, on the other hand, the situation was a bit more complex. By default, React Native projects didn’t use any sophisticated tooling for managing dependencies - pulling them down was on you. Some community modules have started using CocoaPods, which was similar to Gradle, because of the way it structured the project and provided proper dependency management. Unfortunately, CocoaPods wasn’t compatible with how all React Native projects used to manage the dependencies by default.
React Native tried to partially solve this problem by introducing <rte-code>react-native link<rte-code> - a CLI command that once run, tries to perform all the necessary steps for you. It performed a naive find & replace within your configuration files and tried to add the required packages.
Unfortunately, there has always been a risk of hitting a dependency that is not compatible with the way you manage your dependencies. In that case, the only solution was to migrate to a system that works. That task alone wasn’t easy - it required a lot of native-related knowledge and an understanding of build systems. If you have ever upgraded to a React Native version that introduced certain native changes, you will perfectly know what we are talking about.
Over time, CocoaPods have started to become more and more popular within the community. Eventually, React Native decided to switch to CocoaPods and make it a default way of managing the external dependencies on iOS.
As a result, both iOS and Android now have a fully-featured solution for dependency management. Thanks to that, developers can use a npm-like tool to pull down the dependencies, instead of downloading the files manually and putting them somewhere on the disk.
While this has helped with the confusion around adding external native dependencies, the situation still called for additional steps to run after simple <rte-code>yarn add<rte-code>.
<p-bg-col>$ yarn add react-native-fbads<p-bg-col>
Long story short, if you’re performing additional steps after installing React Native modules, you should keep on reading!
The codebase is harder to upgrade and maintain and you spend more time on adding additional packages
If you are still managing your dependencies “the legacy way” as described above, you’re missing out on the build improvements and automation. As a result, experimenting with new dependencies becomes more challenging and it takes longer to set them up. Some libraries may even cease to work as developers migrate them to the new build system.
Also, you need to spend more time on upgrading to newer React Native versions as there are a bunch of native dependencies and native code that has to be revised and upgraded.
The new system is based on dedicated native build tools, such as CocoaPods and Gradle. Because of that, it is able to handle a lot of those meticulous steps for you.
Solution: Switch to autolinking (CocoaPods/Gradle based)
Autolinking is a new way of managing your native dependencies that, by design, is fully transparent and does not require any additional effort on your side. It is very easy to integrate and it hooks in places that you had to handle yourself.
It works the same for both iOS and Android. For the purpose of this section, let’s focus on Android.
Rather than letting Gradle know the details of every package you’re using, you replace the list of packages with a single line that calls into the React Native CLI. This little helper checks your <rte-code>package.json<rte-code> for the possible React Native packages and automatically performs the necessary actions.
Here is an example: In build.gradle, the call into the React Native CLI results in an array of packages that are then registered in the pipeline. It is worth noting that paths are calculated dynamically, based on the location of your source files. Consequently, all different non-standard architectures, including popular <rte-code>monorepo<rte-code>s, are now supported by default.
Another great trait of autolinking is that it generates the list of packages for you on Android. Thanks to that, all the packages defined by your external dependencies are automatically registered, without the need to open Android Studio and learn how to import packages in Java.
The principle here is simple - you don’t have to be aware of what the library you are downloading consists of. The possibility of exploring those details should be left as an option to the most curious developers.
Benefit: You can quickly add new packages and don’t worry about native code
You no longer have to worry about external dependencies or additional build steps, including pulling SDK or linking assets.
To sum up, automating your dependency management the way we described here has a huge positive impact on the mobile app development process. Besides coding, it also makes the maintenance easier and increases the speed of upgrading. What's more, this solution can make developers' work more time-efficient because the only thing they will focus on will be the process of building the app.
In the next part of our guide, we will tell you how to optimize your Android app startup time with Hermes.
We are the official Facebook partners on React Native. We’ve been working on React Native projects for over 5 years, delivering high-quality solutions for our clients and contributing greatly to the React Native ecosystem. Our Open Source projects help thousands of developers to cope with their challenges and make their work easier every day.
Contact us if you need help with cross-platform or React Native development. We will be happy to provide a free consultation.