Since the release of React 17 in the fall of 2020, the developer community has placed high expectations on the next version of React Native. React Native 0.64 was released in March 2021 amid much fanfare and speculation. The new release brings some exciting new features that will benefit the entire community, especially iOS developers who have hotly anticipated the launch of Hermes on the platform.
In this guide, we’ll give you a peek at what’s new in React Native 0.64, including:
Hermes is an open-source JavaScript engine that is optimized to run React Native on multiple platforms. Hermes improves app performance by decreasing memory utilization, reducing the download size of the app, and cutting down the time it takes to become usable, or time to interactive (TTI).
Hermes was previously available only to Android as an opt-in. With this update, Hermes is available on iOS as well.
As the React Native ecosystem has grown, developers have encountered challenges related to the production of large-scale apps. Huge bundle size, excessive phone memory usage, and increased interaction time, to name a few issues, can result in a bad user experience.
The engineers at Facebook designed Hermes as a lightweight solution to these problems. However, before the release of React Native 0.64, iOS developer faced an uphill battle when it came to maintaining the same level of quality.
The inclusion of Hermes on iOS helps React Native apps perform better, makes them more lightweight, and decreases interaction time on iOS platforms. This should incentivize the React Native community to contribute further toward the growth of Hermes and the platform in general.
Before you switch an existing project to Hermes, you must ensure that you upgrade the project to use React Native 0.64. To enable Hermes on iOS, set hermes_enabled to true in your podfile and then run pod install.
It’s worth noting that support for Hermes is still is in its nascent form in iOS. We can expect further improvements and support in the days to come.
To enable Hermes on Android, add enableHermes: true to your android/app/build.gradle file.
Over the past year, Facebook has been sponsoring the Major League Hacking fellowship and supporting contributions to React Native, including the use of the Performance tab in Chrome DevTools to visualize the execution of a React Native application when it uses Hermes.
Though useful, this feature isn’t entirely new because you can already profile your React Native app running on Hermes. But by running this new command, you can convert a Hermes tracing profile to a Chrome tracing profile and pull it to the local machine:
react-native profile-hermes [destinationDir] <flag>
Learn more about how to record a Hermes sampling profile in the official docs.
React Native 0.64 also brings proxy support to Hermes. This support enables compatibility with the community’s popular projects, such as React Native Firebase and MobX. If you’ve been using these packages, you can now migrate your project to Hermes.
The React Native team is planning to make Hermes the default JavaScript engine for Android in an upcoming release. If you encounter an issue when using Hermes in your React Native projects, you should report it.
Inline requires is a Metro configuration option that can help accelerate an app’s startup time by delaying the execution of JavaScript modules until they are used. Traditionally, the execution of JavaScript modules begins at startup.
This feature has existed for a few years as an opt-in configuration option, but React Native 0.64 has this option enabled by default to help you build fast-performing mobile apps without any extra configuration.
Inline requires is a Babel transform. It takes module imports and converts them to be inline.
Let’s look at an example in which inline requires transforms a module import call from being at the top of the file to where it is used.
Before:
import { TestFunction } from 'test-module';
const TestComponent = (props) => {
const result = TestFunction();
return <Text>{result}</Text>;
};
After:
const TestComponent = (props) => {
const result = require('test-module').TestFunction();
return <Text>{result}</Text>;
};
React 17 does not include any new feature or any big breaking developer-facing changes. The official blog post noted that React 17 is a “stepping stone” release designed to make it safer to embed a tree managed by one version of React inside a tree managed by another version. It also makes it easier to embed React into applications built with other frameworks.
In addition, a new JSX transform eliminates the need to import React to use JSX. This is an opt-in feature and the React team noted that it plans to continue support for the classic JSX transform.
Thanks to the efforts of more than 100 contributors around the globe, React Native 0.64 is now live. This new release is beneficial to and supportive of the whole React Native community. With the community’s help to spot bugs, we can expect further improvements in upcoming releases.
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.
LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.
Start proactively monitoring your React Native apps — try LogRocket for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Onlook bridges design and development, integrating design tools into IDEs for seamless collaboration and faster workflows.
JavaScript generators offer a powerful and often overlooked way to handle asynchronous operations, manage state, and process data streams.
webpack’s Module Federation allows you to easily share code and dependencies between applications, helpful in micro-frontend architecture.
Whether you’re part of the typed club or not, one function within TypeScript that can make life a lot easier is object destructuring.
Learn more →
