Upgrading to React Native 0.64.1 without headaches

Radu Iamandi
May 21, 2021 · 2 min read

Not long ago, a new version of React Native was released into the wild and it’s full of goodies for developers. Some of us jumped aboard on the launch day, while others waited patiently for a new minor release to fix the new issues. The best testers are the users, right?

Photo by Kelly Sikkema on Unsplash

Let’s get into it!

Upgrading React Native to 0.64.1

The easiest way to do it is to run the ‘upgrade’ command.

All you have to do now is fix the conflicts and you’re good to go! Yay!

There’s also a harder way. Even though we like to automate everything, sometimes it’s better to keep it old school. If that’s the case, use the Upgrade Helper. Basically, it’s just a pretty git diff.

So, what’s new?

Hermes for iOS

Hermes is a new JS engine optimised for React Native. It helps with improving start-up times, decreasing memory usage and reducing the app size. It was first released with 0.60.4, but it was available only for Android and it’s pretty easy to enable it. Just change your Podfile according to the following snippet.

React 17

Even though it’s not using all its features, one of the main additions is the ability to use JSX components without importing ‘React’. What’s even cooler is that there’s a script to remove all the unnecessary imports for you.

Aaaand that’s it! Or is it?

Troubleshooting

Failed tests

There’s a chance that your tests will fail because ‘ErrorHandler’ is seen as an ‘Unexpected identifier’. In my case, I needed to add @react-native with ‘@’ into transformIgnorePatterns in package.json as shown below:

ESLint

Your ESLint might go nuts after running the JSX transform script. If so, the fix is effortless. Just remove these 2 lines from your eslintrc.js and the problem will go away.

Babel

If you encounter ‘Can’t find variable: React’, that means Babel requires some manual fiddling. All you have to do is tell Babel to use the new JSX transform and set it’s runtime option to ‘automatic’ in babel.config.js as shown here.

Oh, don’t forget to restart the bundler with the — reset-cache option after.

Wasn’t that hard, was it? The hardest part of upgrading is gathering troubleshooting data. This article should be enough for an upgrade à la carte.

Happy upgrading!

We build digital product that matter

salt&pepper
Radu Iamandi

Written by

salt&pepper

We’re a full-service software development company dedicated to building digital products that matter. We provide a complete range of services: consulting services, business analysis, UI/UX design, web and mobile development, quality assurance, and maintenance.