Upgrading To New Version In React Native

4 April 2022

Upgrading to new variations of React Native will provide you with getting entry to extra APIs, views, developer tools, and different goodies. Upgrading calls for a small quantity of effort, however, we attempt to make it sincere for you.
React Native 0.60-0.65.0-RC.3 is a first-ratereplacement that brings many welcome modifications. The everydayimprovementsystem applies, however, to improveeasilyits milesbeneficial to recognize what has been modified and why you want to make suremodificationsin your project.

What’s New?

Firstly, let’s take a look at what’s new in this version. This is a summary of the https://reactnative.dev/docs/upgrading.

Auto Linking

The big new feature of React Native above 0.60 is Auto Linking. Linking native libraries has always been one of the harder parts of React Native development. It’s a multi-step process and missing one of the steps can lead to hard to debug issues.

The new React Native CLI includes support for Auto Linking your native dependencies. This works by scanning your dependencies and adding the linking code for you at compile time. On Android this works using the usual Gradle build system, and on iOS it uses Cocoapods.

You can read more about Auto Linking on the React Native CLI documentation.

You can keep using manual linking if you wish, including mixing automatic and manual linking, however, I recommend migrating to the new system as soon as possible.

AndroidX Migration

Almost all Android apps previously made use of the Android Support Library. These sets of libraries were released by Google separately from the usual Android release cycle and provided backward compatibility of new features between Android versions. It’s the main reason why Android apps can support very old Android versions without too many issues.

Google has recently announced that the Support Library is being replaced by AndroidX (short of Android Extensions). These libraries are mostly the same, however, the package names have all been changed. There is also now a new release system where each part of the library is an independent version, rather than all being released at the same time.

The upgrade process for most React Native apps boils down to adding a flag to start the migration and then ensuring that all of your libraries are using AndroidX rather than the Support Library. It is not possible to use both in a single app, however, there are some tools to help with the migration.

Hermes Engine on Android

React Native apps use a headless Javascript engine to execute your code.

On iOS, that is executed using the JavascriptCore framework furnished via way of means of Apple (the use of whatever else might breach the App Store guidelines).

On Android, there may be no machine-furnished Javascript engine, so every React Native app covers the JavascriptCore framework within the packaged app. This worked properly and saved it regularly with the iOS app, however, it had a few downsides as JavascriptCore became now no longer designed for use this way.

Facebook has been operating internally on a modern-day Javascript engine referred to as Hermes. It is written from the floor up with the React Native use case in mind. This affects smaller app sizes and quicker app loading times. This is a drop-in substitute for maximum apps, however, as it’s a brand new machine you ought to very well take a look at your app earlier than freeing it as there can be compatibility issues.

Lean Core

0.60 continues the “Lean Core” effort. Because the React Native repository is very large and complex, it makes it hard for non-core parts of the codebase to be testable and approachable to new contributors. This is why the maintainers are splitting out these non-core components into new community run repositories. This process started with WebView with great results.

In 0.59 some additional components and APIs were extracted and marked as deprecated. In React Native above 0.60 the deprecated APIs have now been removed. To continue using NetInfo, Geolocation, or WebView you will need to migrate to the new libraries. These are now well maintained and come with bug fixes and other improvements.

New Start Screen

This won’t affect most people who are upgrading, however, a lot of work has gone into making the “first-run” screen on React Native much friendlier and more informative. Take a look at the blog post linked above to see screenshots of it in action.

Before You Upgrade

As always, it is right to run through some exams earlier than you carry out an upgrade. Firstly, and mainly in case you are going to put in a .zero version, test the React Native trouble tracker to see if there are any predominant troubles with the brand new launch which may have an effect on you. You must additionally undergo the libraries which you use and spot if everybody is reporting any compatibility troubles with the brand new version.

By doing this earlier than starting, you may keep yourself a while going for walks into recognized troubles and as an alternative wait till patches are launched which makes the technique smoother.

Assuming that there don’t appear to be any blockers, you’re prepared to begin upgrading.

Upgrading to React Native Above 0.60

As with all React Native upgrades, it’s far endorsed that you test the diff for the newly created tasks and practice those modifications in your personal project.

You can do that the usage of the improved helper device and the diff I could be speakme you thru is the only among 0.59.10 to 0.60.6. You can simply observe this diff and make the modifications yourself, however, I need to give an explanation to you about each of those modification methods to present you a mile’s higher expertise of why you want to make the modifications.

Upgrade the Dependency Versions

The first step is to improve the dependencies to your package.json and defloration them. Remember that every React Native model is tied to a selected model of React, so make certain you improve that as well. You ought to additionally make certain that react-test-renderer fits the React model in case you use it, and which you improve the metro-react-native-babel-preset and Babel versions.

Flow Upgrade

First a smooth one. The model of Flow that React Native makes use of has been up to date in 0.60. This method which you want to ensure that the flow-bin dependency you’ve got is ready to ^0.98.0 and you’ve got the equal cost in the [version] of your .flowconfig report.

If you’re using Flow for kind checking on your project, this could cause extra mistakes in your personal code. I propose that you check the changelog for the variations among 0.92 and 0.98 to see what is probably inflicting them.

If you’re using Typescript for kind-checking your code then you may virtually get rid of the .flowconfig report and the flow-bin dependency and forget about this little bit of the diff.

If you aren’t the usage of a kind checker in any respect then I fantastically propose you look at the usage of one. Either choice will work, however, my non-public choice is to apply Typescript.

Migrate iOS Linking to Cocoapods

If you aren’t presently using Cocoapods for linking, then it’s miles encouraged which you migrate over. This will assist you to take advantage of the Auto Linking feature. Also, React Native 0.61, is the simplest linking technique available. However, in case you select you could depart your challenge how it’s miles for now.

If you’re presently using Cocoapods, you’ll additionally want to make some adjustments to how your challenge is linked.

To start, you’ll want to make certain you’ve got Cocoapods installed on your machine. I advise putting in thru Bundler to make certain all the builders of your app use the suitable model of Cocoapods.

• bundle init
• bundle install cocoapods

You then need to set up Cocoapods for your project. Run this command inside your ios folder:

• bundle exec pod install
• This will create a Podfile file.

The first part lists the React Native libraries that you want to link. This is defined in a function and then used in the target block below. You need to change YOUR_TARGET to be the name of the target which is listed in Xcode. You can find this by opening Xcode, pressing the project at the top of the left panel, and then looking at the target name.

If you have multiple targets (for example, one for development and another for production) then you can have multiple target blocks in your Podfile. This is why we defined the pods in a shared method.

Once this is done, you can run bundle exec pod install from the ios directory. This will generate a Podfile.lock file (similar to your Yarn.lock or package-lock.json) and a .xcworkspace file. You should now close your previous Xcode Project and open the Workspace. This workspace includes two projects; your app project and a Pods project. From now on you will need to use this workspace whenever you use Xcode to build your app. Not doing this will lead to build errors.

The next step is to remove the existing libraries from your Xcode project. The easiest way to do this is to open Xcode and delete the Libraries group in the left menu. Make sure you choose “Remove references” to avoid breaking your node modules.

At this point you can either continue to the next section to add auto linking support, or use the react-native link command to manually add libraries to your Podfile. If you choose the link route, then you will need to run bundle exec pod install to complete the linking.

You may still need to manually link libraries which do not support Cocoapods, however, this is quite a small list of libraries now.

Migrate iOS to Auto Linking

Auto Linking permits you to keep away from the complexity of putting in linking while you upload a brand new library in your React Native project. To do this, you want to make sure you’ve installed Cocoapods correctly.

To upload Auto Linking support, you want to make some small modifications to your Podfile. Firstly, on the pinnacle of the Podfile upload this line:

Next, you need to replace all of the library podfile lines from your Podfile with this single line:

use_native_modules!

You need to leave the React Native related ones in place. See the list above for the ones which are related to the React Native core.

At this point, you can run bundle exec pod install to complete the linking and then test that everything still works as expected. You may still need to manually link any older libraries which do not support auto-linking, however, this is a very small list of libraries now.

Migrate Android to Auto Linking

Adding Auto Linking support for Android is pretty similar to adding support on iOS. Firstly, in your android/settings.gradle remove the current contents of the file and replace it all with:

Make sure you keep the root project name the same as you previously had.

Next, open android/app/build.gradle and add this line to the very end of the file:

You then need to go up to the dependencies block and remove all of the implementation lines for the libraries that you use.

Lastly, you need to make a few changes to your [MainApplication.java](http://mainapplication.java) file. Inside the getPackages method, replace the contents of the method with:

This replaces the current list of packages that you had. You can then go to the top of that file and replace the manual imports your previously had with:

import com.facebook.react.PackageList;

At this point, you can build your Android app and ensure everything still works as expected.

Lean Core

As noted above, a number of the non-middle components of React Native were extracted from the principle module and moved out to the network-run repository. If you presently use the sort of three APIs, you’ll want to put in the brand new network module and extrude your imports to update the vintage middle version. Most libraries are drop-in replacements and include upgrades over the vintage “middle” version.

• NetInfo has been replaced by @react-native-community/netinfo
• WebView has been replaced by @react-native-community/webview
• Geolocation has been replaced by @react-native-community/geolocation

To automate the upgrade, you can use the rn-upgrade-deprecated-modules tool. However, I would recommend looking at the READMEs of the replacement project to check for any compatibility changes.