React Native Upgrade 0.69.4 - Journey & Benefits

In this article, we will be talking about the React Native upgrade journey. And I will be revealing all the necessary steps & tools that will help you speed up the upgrade process.

For those who are new to React Native, let me give you an overview of it & you can follow the basics on the ReactNative Official doc.

What Is React Native

React Native is a framework for building native mobile applications using the React JavaScript library. It allows developers to use React components and APIs to build native mobile apps that can run on iOS and Android platforms.

React Native also uses the same declarative programming model as React, which means that developers can describe the desired state of their app using components, and React Native will automatically update the user interface to match that state. This makes it easy to build dynamic and interactive mobile apps with React Native.

Why should we Consider Upgrading React Native?

There are several reasons why you might want to upgrade the version of React Native that you’re using in your project:

1. New features: Each new version of React Native includes new features and improvements that you might want to use in your project. Upgrading to the latest version can give you access to these new features and make it easier to build the kind of app you want to create.
2. Improved performance: Newer versions of React Native are often more performant than older versions, which means that your app might run faster and be more responsive after an upgrade.
3. Bug fixes: Every version of React Native includes bug fixes that can improve the stability and reliability of your app. Upgrading to the latest version can help you avoid issues that might have been fixed in newer releases.
4. Security updates: As with any software, it’s important to stay up to date with the latest version of React Native to ensure that your app is secure. Newer versions of React Native often include security updates that can help protect your app and your users.

Overall, upgrading to the latest version of React Native can help you take advantage of new features, improve the performance and stability of your app, and ensure that your app is secure. However, it’s important to carefully plan and test any upgrades to ensure that they don’t cause problems in your app.

Problem Faced With Our Project (0.63.4):

• Auto-Linking: auto-linking was not properly configured in the app. Due to this every time when we have to use a new library in the codebase, we have to do the changes in the Native side code. Which increases the dev time.
• Hermes: In the current React native version of the app had support for Hermes (A Javascrip Mobile Engine) Android, but not for iOS.
• Debugging: The application was not properly set up for a particular debugging tool. This increases development time by requiring the usage of multiple debugging tools at the same time.
• Network Debugging: There was an iOS network debugging compatibility issue with Flipper. So no way to debug network calls except by putting lots of consoles in the code.
• React Native New Architecture: Adopt React Native new architecture or reach its nearer version.
• Some issues were faced after the release of new Android & iOS versions, which were expected to be fixed with a newer version of React Native.

The above issues might not happen with your project if your project was created usingReactNative version more than 0.60.0

How To Upgrade React Native?

There aren’t many tools available to do the React Native Upgrade. You can upgrade the version using the below tools.

• Follow the below command to upgrade to the latest version of RN.

npx react-native upgrade 

• Follow the below command to upgrade to the specific version of RN.

npx react-native upgrade 0.69.4

The success rate of the above command is not that good. It might fail for you. So now what?

How to find the required changes for React Native Upgrade?

😉 Don’t worry, there is another way too. React Native Upgrade Helper tools is a tool using which can give you git diff between two versions of React Native. Figure out the diffs & do the changes accordingly.

After doing all the required changes using react native upgrade helper, the next step will be to upgrade the third-party dependencies.

How to find a compatible version of third-party dependencies?

You may think of going to each & every library release page to find out the compatible version. But this might be a cumbersome process to do the same steps for each & every lib.

In this case, you can use the following @rnx-kit/align-deps library to kick off the upgrade. Align-deps is an OSS tool from Microsoft that automates dependency management. It knows which packages* versions are compatible with your specific version of RN, and it uses that knowledge to align dependencies, keeping your app healthy and up-to-date. So utilize the align-deps tool & speed up the upgrade process for third-party libraries.

Challenges Faced Post Upgrade:

There are several challenges that a developer may face while upgrading to a new version of React Native:

1. Compatibility issues: Depending on the changes that have been made in the new version, some of the code in your app may no longer be compatible.
   In our application, we faced compatibility issues with Notifications, Date Picker, Image Picker & multiple functionality-related libraries.
   And due to changes in the EventEmitter’s removeListener method, all the listeners weren’t removed completely. Due to this, memory leak & malfunctioned behaviour on the navigation was noticed.
2. Deprecated APIs: As new versions of React Native are released, some APIs (Application Programming Interfaces) may be deprecated.
   Which requires migrating the code base to new APIs & thorough testing.
3. Breaking changes: Some changes in newer versions of React Native may cause existing code to break requiring you to make changes to your code in order to get everything working again.
   In our application redux-observable was used which was majorly affected due to migration. Due to this, we had to migrate 472 epics into 104 files. 🏴‍☠️
4. Third-party library compatibility: Due to the application’s reliance on third-party libraries, we had to ensure that they were compatible with the latest version of React Native and that they were functioning as intended.
   There were certain depreciated libraries that were either replaced by new ones or by our custom reusable components.
5. Testing: After successfully migrating the application. Our next was to thoroughly test the application so that it can be ready to ship to users. Which requires full bandwidth from the QA to ensure that everything is working as expected.
   This can be time-consuming, especially if you have a large or complex app.
6. We haven’t migrated the whole app to the new architecture yet. Because the third-party libraries are in a phase of adoption to the new architecture.

Development Pain Points which were solved

Some of the developer pain points that we were able to solve after the upgrade are

1. React Navigation: Now react-navigation screen state change is debuggable via Flipper’s plugin. While the development developer can navigate to different screens & see the parameters that are passed to the screen along with the screen file name & the current state of the navigation.
2. Redux: Now redux state change along with actions dispatched & actions payload can be seen on the Flipper dashboard. The developer can dispatch his custom action on the fly & debug the cause.
3. AutoLinking: The last upgrade to the current version (0.63.4) was done with the bare minimum changes. Due to this, we had manually link every installed native library. This was completely resolved in the upgrade process 🎉.

What's Next

Every Android & iOS update released, the incompatibility issue arises. This results in an increase in the number of ANRs & crashes. It can only be solved by upgrading the existing ecosystem to a newer version. That’s why upgrading is an essential part of the React Native development process.

After the upgrade, we are able to utilize the latest & performant third-party libraries to create butter-smooth UIs. Our next goal is to optimize & migrate the legacy code to a newer version.