Upgrading to React Native 0.64.1 without headaches

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.

npx react-native upgrade

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.

use_react_native!(
   :path => config[:reactNativePath],
   # change to `true` and then  install pods
   :hermes_enabled => true
)

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.

npx react-codemod update-react-imports

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:

"transformIgnorePatterns": [
    "node_modules/(?!(@react-native|react-native)/)"
]

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.

{
  // ...
  "rules": {
    // ...
    "̶r̶e̶a̶c̶t̶/̶j̶s̶x̶-̶u̶s̶e̶s̶-̶r̶e̶a̶c̶t̶"̶:̶ ̶"̶o̶f̶f̶"̶,̶
    "̶r̶e̶a̶c̶t̶/̶r̶e̶a̶c̶t̶-̶i̶n̶-̶j̶s̶x̶-̶s̶c̶o̶p̶e̶"̶:̶ ̶"̶o̶f̶f̶"̶
  }
}

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.

module.exports = {
  presets: [
    ['module:metro-react-native-babel-preset', 
    { useTransformReactJSXExperimental: true }]
  ],
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        runtime: 'automatic',
      },
    ],
  ]
}

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

npx react-native start --reset-cache

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!