Linking Dependencies in React Native: A Best Practices Guide

In this article, we'll discuss dependency linking in React Native. The purpose is to serve as a general guide for linking dependencies in React Native projects and provide guidance on the best practices that apply.

First, we'll explain what dependency linking is and how it applies to the React Native platform. Then we'll explore the different types of dependency linking available while defining their differences and applications. Next, we'll provide some helpful examples of dependency linking with some basic packages in a sample project. And finally, we'll point out some of the most essential best practices to keep in mind when implementing dependency linking in React Native.

We'll briefly go through the process of creating a React Native project with the Expo scaffolding feature. If you already know how to do this, you can skip this section.

Let's proceed.

React Native 101

First things first. Let's get your environment up and running.

Necessary tools:

• Expo CLI command line utility
• NodeJS runtime
• Visual Studio Code (or your code editor of choice)

Step 1

First, install NodeJS.

You can find the installer in the official NodeJS portal or use the package manager within your OS. If you use macOS, for example, open the terminal and use homebrew by typing the following command:

$ brew install node

Step 2

Next, install the Expo CLI command line tool.

You can type the following command on the terminal to install it:

$ npm install -g expo-cli

Step 3

Finally, install Visual Studio Code. You can also use your code editor of choice.

Here's the installer.

New Project

To create a project, you can use the scaffolding tool available in Expo.

Type the following command:

$ expo init MyProject

Now let Expo know what type of project you want to create. For now, just pick 'blank (typescript).' Also, remember to change MyProject to anything you like.

Once you've done that, type the following command and select the target platform to start the project:

$ npm start

That's it.

What Is Dependency Linking in React Native?

To explain what dependency linking is, we first have to explain what a dependency is.

A dependency is a library, package, or any collection of code that exists as a unit and can be integrated into other projects to either enhance or expand the project's features, functionality, or capacities. In the strict sense of the word, a dependency is a directive indicating that an external entity is required to have a complete unit of the project.

Dependency linking is the process by which this entity or unit is retrieved and integrated into said project. A straightforward example would be if you want to add routing features to your project. In this case, the routing mechanism is handled by code that is not part of the React Native core package, so you must add it by requiring the 'react-router-dom' package.

Now, the majority of packages can be linked to your project with a simple 'npm' command or 'yarn' command if you use this dependency manager. However, some dependencies require a more hands-on process of integration. Usually, these packages are native modules specific to certain platforms like iOS or Android.

More on that in a bit.

Types of Dependency Linking in React Native

There are two types of dependency linking in React Native: automatic and manual.

Automatic linking, or auto-linking, is a recent feature integrated into the React Native command CLI by the inclusion of the 'react-native link' tool. This command tool works by running the linking commands to integrate native modules into your project.

Since most of the commands necessary for this process are the same across modules, this tool serves as an automation macro to simplify the process and streamline the integration for the developer.

Keep in mind that some modules require some extra steps to complete the integration. So always check the documentation for guidance.

On the other hand, manual linking is what you probably assume it is. By procuring the corresponding packages and files, integrating them into the appropriate project folders, and then importing the package onto the class files that use it, you essentially do the dependency linking one step at a time.

This process is much more cumbersome and risky since it requires tampering with the project files for each platform (iOS and Android), manipulating dependencies there, and ensuring that the linking is functioning correctly.

If you don't feel comfortable or have no experience working with native projects, this option might not work for you. However, if you have more expertise in this area, you might prefer this approach because it can give you a bit more control over the module integration.

Now let's explore an example of dependency linking in the project you created.

Dependency Linking Examples in React Native

For this example, we'll use the auto-linking process to illustrate how to apply dependency linking to your project. The reason is because this process is the most practical and is more likely to be helpful to all readers. However, you can find extra information about the process of manual dependency linking here.

The first step is to install the package with native dependency. To do that, just run the 'npm' command as follows:

$ npm install <package-with-native-dependencies> --save

Don't ignore the '--save' flag as it ensures that the dependency is added to the 'package.json' and 'lock' files correctly.

Now you need to run the 'react-native link' command tool to integrate the native module into your project. You can do that with the following command:

$ npx react-native link

This command updates the native 'podspec' and Xcode project file for the iOS platform with 'cocoapod' and the Android project file with Gradle to link the dependency module.

And that's it. 'React-native link' should successfully link all libraries with native dependencies to your iOS or Android project.

This process usually works seamlessly and requires no further configurations from the developer, but this depends on the complexity of the package, so your mileage may vary.

Best Practices for Dependency Linking In React Native

Now that you know how easy it is to link dependencies in your React Native project, it's vital that you understand the best practices. Sadly, some dependencies won't work as expected, and removing all the code added during the linking process can be problematic. So, it's essential to abide by these best practices to properly maintain the dependencies and deal with the edge cases where the normal process might not work as well.

Before doing dependency linking,

1. Use version control at all times.
2. Ensure that your code is committed and that there are no unsaved changes.
3. Create a feature branch for the integration and check it out.

During dependency linking,

1. Install your dependency.
2. Link your dependency.
3. Execute any dependency-specific additional integration steps.

After dependency linking,

1. Inspect your code for any integration or stability issues.
2. Commit your changes and merge the feature branch.

Moving On

Dependency linking is an essential process in the development cycle of complex React Native applications using Native modules that are platform dependent. However, it's one of the most volatile and misunderstood steps in the whole process and the one with the most potential to create a roadblock for developers.

It's essential to consistently monitor and evaluate the stability of your applications when integrating or updating native modules into your project so that you don't accidentally disrupt the productivity and output of your team.

The best way to protect your work from these pitfalls is through robust testing and continuous integration. However, this can be a time-consuming and complicated task. That's why we recommend all teams to check out Waldo's code-free testing platform solution. You can learn more about it here.