React Native 0.72: What’s New and Why it Matters

New features in React Native bring important improvements to the developer experience and much more!

After a long wait, React Native 0.72 is finally here! It brings a number of highly requested features, improvements in performance and the developer experience, and several other important changes.  In this post, we’ll see what’s new in React Native 0.72, and most importantly, why it matters to React Native developers.

New Metro Features

React Native 0.72 introduces several important features in the Metro, the default JavaScript bundler in React Native projects.

One of the more important highlights of this release is the addition of beta support for symlinks in Metro, a long-requested feature by the community. In short, the feature allows the Metro bundler to follow symbolic links, which enables a variety of previously unsupported project structures and tools. This change lets React Native work seamlessly with monorepo setups and pnpm, eliminate the need for complicated workarounds or third party tools.

Similarly, support for Package Exports has been added to Metro, providing an alternative to the “main” field in package.json. This feature allows npm packages maintainers to define their public API more precisely and target React Native specifically. By enabling support for Package Exports, your app is more compatible with the wider JavaScript ecosystem.

Both of these new Metro features are considered to be beta, and you’ll need to update your configuration to enable them. To enable these features in your project, update your metro.config.js file and add the following options:

const config = { 
  // … 
  resolver: {   
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true, 
  },
};

Also note that the default setup of metro.config.js has changed in the new release, so be sure to update your configuration according to the template.

Improved Error Handling & Reporting in Development

One ongoing pain-point of React Native development is error reporting. During development, it’s not uncommon for small errors or typos to unleash a swarm of cryptic errors in the logs or a blank screen or “redbox” error. React Native 0.72 improves on the error reporting in development with several changes.

First, the core Hermes JavaScript engine has improved error messages for attempting to invoking undefined functions, now showing the variable name that was called. This might sound small, but it’s a great improvement over tracking down a cryptic “undefined is not a function” message! Additionally, the stack traces now filter out internal byte code frames, giving a far more readable call stack.

For component styling, previously an invalid property in StyleSheet would result in a redbox error. This release relaxes this requirement, allowing such errors to fail silently during development, similar to how invalid CSS property errors are handled in browsers. The errors can still be caught and reported at build-time.

Finally, the React Native CLI itself is updated with this release, enhancing error output by reducing duplication, clarifying wording, reducing verbose stack traces, and adding deep links to relevant docs for certain commands.

New Architecture & Performance Improvements

If you’ve been following React Native development for a while, you’ll know that each new release brings incremental improvements to the “New Architecture”, and React Native 0.72 is no exception.

The new Fabric rendering engine gets a boost with improved text rendering performance of up to 27% on iOS and 18% on Android. More detailed info on Fabric performance improvements is available in this blog post.

Also, the new architecture JavaScript engine, Hermes, has also seen a number of performance improvements, with faster compilation of large object literals and multiple optimizations to JSON parsing. These improvements will especially benefit apps that do a lot of JSON manipulation or bundling of many objects.

Finally, for iOS, the New Architecture is now compatible with the commonly used use_frameworks! CocoaPod configuration — this was a blocker for many apps in integrating the New Architecture in previous released.

As a side note on the New Architecture, as of React Native 0.72, New Architecture updates will be managed by a dedicated working group, allowing for more focused and frequent updates. If you’re interested in New Architecture updates, be sure to follow working group.

Breaking Changes and Deprecated Components

React Native 0.72 has a great set of improvements, but there are also some breaking changes around packages and features included by default. Be sure to review these changes and update your dependencies accordingly!

The primary change is that a few components such as Slider, DatePickerIOS, and ProgressViewIOS have been removed from the React Native core and have been extracted into community packages. If you’re using the components, simply find and install the recommended community package.

Additionally, several packages have been renamed and now live under react-native/packages and are published under the @react-native npm scope. These changes will not affect developers who do not have a direct dependency on a renamed package. However, developers should update any renamed dependency to its ~0.72 version when upgrading to React Native 0.72.

React Native 0.72: Not Dead, Better Than Ever

If you’re a long time React Native developer, it’s worth thinking a couple of years when everybody seemed to be asking “Is React Native Dead”? Suffering at the time from poor performance, some high profile projects moving off of React Native and increased competition from new frameworks like Flutter, it seemed like React Native had some fundamental challenges to tackle. It’s safe to say that over the past several releases, and in particular with the introduction of the New Architecture, the team has lived up the challenge.

React Native 0.72 continues this progress with an impressive step forward, driven by community feedback and featuring many significant updates and improvements. If you’re using an older version of React Native, especially a version without the Hermes JavaScript engine, it’s worth the time and effort to get up and running in 0.72.

React Native upgrades can be a bit tricky, so when you are ready to upgrade to 0.72, it’s always a good idea to consult the React Native Upgrade Helper tool and look at the upgrade documentation. If you are using Expo, React Native version 0.72 will be supported in the Expo SDK 49 release.

Good luck, and happy hacking on your React Native apps!