Introduction
React Native 0.72 was recently released as the latest stable version of React Native. It comes with significant improvements in developer experience, debugging, new features for the metro bundler, and a new possibility to incrementally adopt the New Architecture in your app.
In today’s live stream, I covered all the major updates coming in the latest React Native version, and I showed practical examples of what’s new and how it can help you.
Let’s summarise the most important things to expect from React Native 0.72.
RN 0.72 Improved Developer Experience
Based on the State of React Native community survey, one of the biggest pain points of React Native development was debugging and cryptic error messages.
Meta team took notes, and we have some improvements in this direction:
- Invalid style props will not trigger the Red Logbox and will simply notify you in the console
- No more "undefined is not a function" error. Now, Hermes will tell you exactly what function you tried to call and it was undefined. This way, it will be easier to find and fix the error.
- Better error messages when the project fails to initialize or build. The build errors reported by react native were always hard to understand, and you had to open Android Studio or Xcode to understand why the build failed.
- Faster compilation times
- More optimized JSON parsing, benefiting libraries that do a lot of JSON serialization, ex: redux-persist
Long-awaited features for Metro
Metro is the javascript bundler used by React Native. For some years, Metro didn’t receive a lot of "love" from Meta, but in the last year, we see some promising changes. There is a growing dedicated team working on Metro, working on improving the developer experience for React Native developers.
Symlinks 🔗🎉
If you tried to use pnpm in your React Native app, or if you are working inside a mono repo, you most probably encountered the issue of React Native not working great with symlinks.
This was the GitHub issue number #1 inside the metro repo, and we finally have Beta support for symlinks in RN 0.72.
In version 0.73, symlinks will be enabled by default, but for now, we can opt-in to use symlinks starting from 0.72. For that, we have to update metro.config.js file and set config.resolver.unstable_enableSymlinks = true.
Package Exports Support (Beta)
Another important feature is the support for the exports field inside package.json. Previously, metro only supported the main field inside package.json, which only allowed the libraries to export one single file.
With the exports field, libraries can define what files are exported.
A lot of javascript libraries, like Firebase and Storybooks, were already using the field and now these libraries will work out of the box inside your application.
This feature as well will be enabled by default in 0.73, but in 0.72 we have to opt in by updating metro.config.js file and setting config.resolver.unstable_enablePackageExports = true.
Incremental adoption for the New Architecture
The New Architecture was introduced in React Native 0.68 as a completely new way of how the communication between the javascript side and the native side happens. In the old architecture, the communication happens over the "Bridge" where all the data is serialized on one end and deserialized on the other, which is quite inefficient. In the New Architecture, there is no bridge, and the communication happens synchronously. Javascript is invoking the native side directly through JSI (javascript interface).
The problem with the New Architecture was the inability to incrementally adopt it in your application. It was all or nothing. If at least one of your dependencies did not support the New Architecture, you couldn’t enable it in your app. That means that the whole ecosystem and all React native packages have to be updated to support the new architecture, which doesn’t sound like an easy task.
To speed up the transition period to the New Architecture, starting with RN 0.72, we can incrementally adopt it, even when not all our native views have been migrated. For that, we have to specify what components are we using that have not yet been migrated, and those components will be rendered using the interop layer.
If everything sounds too abstract, check out out the live stream on youtube, where I explained this with an example. We enabled the new Architecture for a fresh RN project. Then, we installed the @react-native-picker/picker library, which does not yet support the new arch. We say the Red box you usually see in this scenario. To fix it, we simply added the View from react-native-picker to unstable_reactLegacyComponentNames, and everything worked.
We were running the application with the New Architecture enabled and using a library that wasn’t migrated yet.
Upgrade your project
To upgrade your project to the latest RN 0.72 version, you can use the upgrade helper tool. Select the current version of React Native your project is using, and it will show you what you have to change to make the upgrade.
Make sure to check out the breaking changes as well. There are a lot of renamed packages that you might have to update in your project.
The upgrade process in React Native is another pain point. There is no one-size-fits-all solution for upgrading any project. The process is quite manual, involves changes on the native side, and is quite error-prone. That’s another reason why I tend to always use Expo. The upgrades are way easier.
RN 0.72 in Action
If you are more like a project-based learner, check out this livestream where I dive deeper in all the new updates from React Native 0.72 and put them in actions.
