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.

In this issue, let’s summarise the most important things to expect from React Native 0.72.

Before we jump into it, I wanted to remind you that there are ONLY 3 days left to benefit from a 25% discount for our premium Full-Stack Mobile Development course using promo code JUNE25 at checkout.

​Enroll now, and let’s start working together from the next Monday 🙌

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.

Upgrade yourself

Look at this flawless transition 😲

If you read this email till here, I can see that you are truly dedicated to staying up-to-date and growing as a React Native developer.

That’s exactly what I had in mind when designing and putting together the Full-stack Mobile Developer course. I’ve worked on it for the last 2 years, making sure that this is the best React Native course out there. We tested it with multiple batches of students, improving it with every new iteration.

🥳 I am thrilled to announce that we’ve completed all the modules and as a thank you for your consistent support and belief in us, we are hosting a ⚡️Flash Sale⚡️ on course enrolments!

This week only, save 25% on the Full Stack Mobile Developer Course. Use the code JUNE25 at the checkout and embark on your learning journey today.

Remember, this promotion lasts until the end of this week.

That's, 3 Days ONLY 🚀

Did you learn something new today?

If you found this email valuable, forward it to one friend or coworker that can benefit from it as well. That would be much appreciated 🙏

Vadim Savin Helping you become a better developer together with the notJust.dev team