Dependency Hell In React Native

In 2022, I successfully landed an internship as a front-end developer on the React Native stack. As I was already familiar with React JS for the web, I thought it would be good to have some experience with the native mobile stack. I am writing this article to share my experience of a few stressful days, during which I had to fix a dependency bug from a package that was crashing the entire app.

Severity Of The Bug

Before going into the bug, let's understand the severity of the situation. My team and I were working hard on polishing the app, removing all the bugs, and improving user experiences so that we could finally roll out the app to new users and apply to VCs for funding. But as with everything in this world, things never go as planned.

Upgrading Expo SDK

Our previously functioning app started crashing when Expo released SDK 47, which was a problem as Expo only supports the previous three releases. Since we were using SDK 43, I was tasked with upgrading the SDK before it impacted other team members. I came across the official Expo SDK 47 blog and thought the process would be straightforward, but I was wrong. After following all the steps, my console was filled with a daunting stack of red errors.

Debugging Quest

The first thing I did after skimming through the error stack was to search on Stack Overflow to see if people were getting similar errors after upgrading the SDK. Since SDK 47 was new, I could not find any relevant sources for my problem. So, I second-guessed myself and tried to repeat the steps provided by Expo SDK 47 again, but sadly it didn't work. 😢.

Since Expo SDK 47 wasn't working and Expo also supports the three previous releases, I decided to upgrade to a previous SDK version and try my luck. I cloned two new repositories where I upgraded to SDK 45 and SDK 46. Unfortunately, luck was not on my side as I encountered similar red stack errors on both SDK versions.

As more team members started experiencing issues related to the deprecated SDK, my desperation began to increase. I received text messages from the group alerting me to their similar problems. It felt like I was trying to solve an error that wasn't in the code because it was working fine yesterday. This only added to my frustration.

More Debugging….

I have discovered that one of the best ways to solve bugs is to take a break and step away from the problem when you're feeling frustrated. Doing something enjoyable like taking a walk, having ice cream, or indulging in something that comforts you can help you clear your mind and refresh your perspective. I prefer to take a walk during sunset as it is incredibly soothing, and the colors of the sky make everything feel ten times better. Pic of sunset taken by me…

After going for a walk, I decided to ask for help and solve the problem through pair programming. My team members attempted to upgrade, but they encountered the same error. Fortunately, we received a clue that the error was caused by a dependency called "react-native-reanimated." With this hint, I decided to investigate the issue on GitHub within the React Native package.

Previously, I had been able to resolve almost all of my errors by searching on Stack Overflow. So, this was the first time that I felt like one of those senior engineers after searching for and finding an open issue.

Finally The Solution…

Finally, after skimming through various GitHub issues and opening more than 15 Chrome tabs, I discovered an issue with the package we were using, "react-native-skeleton-content." It was using a different version of "react-native-reanimated" under its dependencies, which caused the error we were facing😭😭.

To resolve the issue, I added resolutions in the "package.json" file with the version of "react-native-reanimated" that "react-native-skeleton-content" required. This allowed us to use the correct version of the package and eliminated the error.

"resolutions": { "react-native-reanimated": "^2.9.1" },

Link to the GitHub issue. The issue is still open, and some people are still experiencing similar difficulties😢.

Well, our fix did work. We were able to add some new features, resolve some bugs, and improve the user experience of the app. But just when we thought we had resolved platform-specific errors and could focus on rolling out features and debugging some edge cases in our codebase…

WE WERE NOT ABLE TO MAKE A NEW BUILD FOR USERS.…..☠☠

The team finally decided to migrate from Expo to React Native. One of the expert team members handled the migration from Expo to React Native, and the adventure thus continued.

Similar Frameworks / Stacks

My developer experience with React Native wasn't very pleasant. However, I would like to introduce another framework that I worked extensively on in 2022, i.e. Ionic Capacitor. Capacitor offers the stability of web development along with native plugins that can be added to provide native features. Link to a blog article that introduces ionic capacitor.

I created a side project called Cryptocademy using React JS and Capacitor, which has garnered over 500 downloads on the Play Store and currently has more than 800 signups. Over the course of a year, I never encountered any platform-specific issues or dependency issues with React JS and Ionic/Capacitor. Overall, my experience working with capacitor js was always pleasant

One of the downsides of using Capacitor/Ionic is that the documentation and community content could be better. Most of the available content for Ionic/Capacitor on the internet is written in Angular JS, which can be difficult to convert to React JS. This has been a pain point for me. The examples of plugins in the Capacitor documentation could be improved. I have found that many plugins are difficult to implement because of a lack of examples. Even if I manage to find a blog post on a plugin, it is often written for Angular or is several years old, which can make it challenging to apply the examples to my current project.

I have not tried flutter yet. If you are a flutter developer, I would love to know your developer experience with it in the comments.

Learnings

I learned a lot during my first internship and I'm grateful for the experience. Before this, I only worked on my projects, so it was great to work with other people's code, debug it, and do pair programming. Having more experienced colleagues also helped me improve my skills.

I would like to know about your experience with the React Native stack. Have you encountered similar issues, and if so, how did you resolve them? Please let me know in the comments.