React native upgrade to v0.61.2

Alright, few days ago we managed to upgrade our React Native app from v0.59.8 to the latest version, v0.61.2 and just like any other upgrade with breaking changes, it was tough!

I’m going to briefly share with you the way we did it, but before we get there, some of you might ask, it’s worth it?

Well, if you take a quick look at RN release blog posts start from v0.60 to the latest one, you can see there are lot’s of improvements coming with this major upgrade, for example, thanks to Hermes, new JavaScript engine used in this version, it improves RN performance by decreasing memory utilization, reducing download size, and decreasing the time it takes for the app to become usable or “time to interactive” (TTI).

But at the end it’s really depends on your product & business plan to take this decision. Now back to the question, it’s worth it? imho, yeah, damn right it’s worth it!

Highlights of changes

You can always check RN github release page for more details about the changes, but the list below are the major changes in this upgrade :

• AndroidX Support ( Breaking change )
• Remove React .xcodeproj (Breaking Change )
• CocoaPods by Default
• Auto-linking support via CocoaPods
• Multiple API extracted ( WebView, NetInfo, Geolocation )
• Hermes JavaScript engine
• Fast Refresh
• useWindowDimensions Hook

let the party begin

Thanks to react native community, in this route we are not alone. They have built a great tool called Upgrade Helper to make the upgrade process simpler. It helps React Native users with brownfield apps or complex customisations to see what’s changed between versions. So the first step you should take is to use this tool, and based on what is the current version of your app, you will see exact changes required to apply for upgrading to latest version of RN.

React native upgrade helper

Follow the changes file by file and note that, based on your current version you might need to download some new files ( if you already don’t have them ) like this one and add them in the right path for your project.

Next step is to upgrade your dependencies, this is what you might need to do, check github page for every single library you have, go to release page/Change logs blog, and look for the version that released with RN 0.60 support, you might want to look in their change logs for things like :

• Add androidx suppport
• Support RN60 AutoLinking
• Using CocoaPods

Release page for react-native-fs

If you can’t find this information in change logs, what you can do is to check the package folder in your node_module and look for a .podspec file, if the package have this file, you are good to go, react-native will handle it for you, as mentioned in highlight of changes, react native now use CocoaPods by default ( if you are not familiar with CocoPods, you might want to see this instruction ) and support Auto-linking which means you don’t need to link any native module manually anymore, that being said, from now on, we should not run below command for linking libraries :

// We don't need you anymore
$ react-native link

However sometimes, you might need to add the .podspec file path it this way to your Podfile :

pod 'RNVectorIcons', :podspec => '../node_modules/react-native-vector-icons/RNVectorIcons.podspec'

if you can’t find a .podspec file in the package, try to update the library to the latest version and see if in the latest version they include it, but if still there was no .podspec file, that means your library not supporting CocoaPods yet. If this is the case for you and if it become a blockage for your upgrade, what you probably want to do is :

• Contributions! send a pull request with .podspec implementation.
• Implemented locally and use patch-packer
• Use manual linking

For your android project, things are more simpler, for the most part besides changes that you should do based on Upgrade Helper instruction, you don’t need to do anything, but if there is a package which for any reason cannot be autolinked, you can still add them manually in your MainApplication.java file, in our case we didn’t face with any, but if you faced with this scenario, you need to import it manually :

import com.example.ReactNativeExamplePackage

and add it manually inside getPackages() like below :

packages.add(new ReactNativeExamplePackage())

Another thing that worth to mention here, is you can disable autolinking for unsupported libraries, React Native CLI can be configured by creating a react-native.config.js at the root of the project. During the transition period some packages may not support autolinking on certain platforms. To disable autolinking for a package, you can do something like this in your react-native.config.js:

// react-native.config.js
module.exports = {
  dependencies: {
    'some-unsupported-package': {
      platforms: {
        android: null, // disable Android platform, other platforms will still autolink if provided
      },
    },
  },
};

Other thing that you might need to know, is how to autolink a local library, you can again leverage CLI configuration to make it “see” React Native libraries that are not part of your 3rd party dependencies. You can do it in this way :

// react-native.config.js
module.exports = {
  dependencies: {
    'local-rn-library': {
      root: '/root/libraries',
    },
  },
};

How do I know my upgrade was successful?

Well if your app is running & you don’t see any red screen of death, then congrats, but you can make sure by opening Dev menu (Cmd+D on iOS, Cmd+M or Ctrl+M on Android) in your emulator, if you see Reload instead of the useless Hot reload, then you are all set, enjoy RN development with Fast Refresh feature, it’s awesome.

Post upgrade tips!

Once you done with the upgrade, I do suggest to observe the app in debug mode through xocode/android studio and watch the logs and look for anything that might cause performance issues , for example in our case React-native-device-info had a major performance problem, which luckily it fixed in the latest version.