React Native has come a long way since its initial challenges, revolutionizing the sector of mobile app development. In light of performance concerns, shifting projects, and strong competition, it is now armed with innovative solutions that successfully address development issues. With these continuous updates, React Native team has yet again announced its latest version – React Native 0.72.

With this update, the React Native framework introduces a plethora of power-packed features and improvements for a better and seamless coding experience.

Are you ready to dive into the latest advancements and discover why React Native 0.72 is making waves in the development community?

In this blog post, we’ll take a closer look at the notable additions and upgrades that come with React Native 0.72. From enhanced error handling to Metro integration and a host of other developer-friendly improvements, this release promises to elevate the React Native app development ecosystem to new heights.

But that’s not all! We won’t stop at merely highlighting the new features but also discuss the former releases of React Native versions. We’ll also delve into the significance of React Native 0.72 and why it matters in the rapidly evolving landscape of mobile app development.

So, let’s explore the fresh possibilities and examine how this update addresses the needs and challenges faced by React Native app developers.

Before moving on to the latest one, let’s brush up our minds with the previous major updates.

Highlights of the Previous Version – The Recap

React Native 0.71

• React Native 0.71 used TypeScript by default. This facilitated to write type-safe code and to catch errors at compile time.
• Flexbox Gap was a new feature that helped in creating layouts with gaps between flexbox items.
• React Native 0.71 introduced web-inspired props for accessibility, styles, and events. This made it easier to write code that was consistent with React web apps.
• PropTypes were a way to validate props passed to React components. They were deprecated in React Native 0.60, but were restored in React Native 0.71.
• React Native 0.71 included a number of improvements to the developer experience, including better error handling, improved debugging tools, and new documentation.

React Native 0.70

• React Native 0.70 introduced a new architecture that was designed to improve the performance and scalability of React Native apps.
• Hermes was made the default engine for React Native in React Native 0.70. Hermes is a JavaScript engine that is optimized for React Native.
• React Native 0.70 also included a number of other improvements, such as support for iOS 14, Android 11, and new APIs for working with the camera and the file system.

Other major updates

• React Native 0.63 introduced the new useState hook. Hence, it was just easier to manage state in React Native apps.
• React Native 0.60 introduced a number of breaking changes, including the deprecation of PropTypes and the removal of the AsyncStorage API.
• React Native 0.50 introduced the new FlatList and SectionList components, which made it simpler to create lists in React Native apps.

Latest Features & Updates in React Native 0.72

1. New Metro Features

Symlink Support (Beta)

Symlink support is still one of the most requested features in Metro, and developers are thrilled with the announcement of beta support for it in React Native 0.72.

React Native now works transparently with monorepo setups and pnpm (package manager that can be used instead of npm or yarn) thanks to symlink support, eliminating the need for workarounds. 

Symlink support is currently in beta to collect feedback on developer experience with varying workflows. 

It is expected that in the upcoming 0.73, we might see default enable symlinks with a more enhanced support mechanism.

Package Exports Support (Beta)

Package Exports is a modern replacement for the package.json “main” field and adds new functionality for npm packages to define their public API and target React Native.

By enabling Package Exports support in your Metro configuration, you will make your app compatible with the larger JavaScript ecosystem, including the new “react-native” community condition.

Enabling Beta Features

To enable these features in your project, edit the metro.config.js file and set the resolver.unstable_enableSymlinks or resolver.unstable_enablePackageExports options.

const config = {

  // ...

  resolver: {

    unstable_enableSymlinks: true,

    unstable_enablePackageExports: true,

  },

};

New metro.config.js Setup

In React Native 0.72, the config loading setup for Metro in React Native CLI is also changed. You need to update project’s metro.config.js file to match the template’s version. 

This moves control over extending the base React Native Metro config into your project. The leftover defaults are cleaned up. In addition, this means that standalone Metro CLI commands, such as metro get-dependencies, will now work.

2. Developer Experience Improvements

No more redboxes with invalid style properties

Prior to this release, providing an invalid style property in StyleSheet would result in a redbox. This is a high signal error that disrupts the workflow of the developer for a relatively low-risk error.

In React Native 0.72, there is a relaxation of a certain requirement. Now, errors of this nature can fail without popping any error message during the development process.

This is similar to supplying an invalid CSS property in the browser. Furthermore, types are updated so that some errors could be caught at build time rather than run time.

Better error readability for Hermes

Hermes has improved the error message that appears when an undefined callable is invoked.

var x = undefined; x();

    // Before: undefined is not a function

    // After: x is not a function (it is undefined)

Furthermore, LogBox stack traces now filter out Hermes bytecode frames that are irrelevant to the to the app users.

Modified error output of the React Native CLI

0.72 includes React Native CLI v11, which includes enhancements to reduce duplication, clarify wording, reduce verbose stack traces, and add deep links to relevant docs in the init, run-android, and run-ios commands.

JSON Parsing in Hermes and Faster Compilation

Hermes has reduced the time it takes to compile large object literals. In one reported issue, #852, for example, a user encountered an entire dataset produced out as a large object literal. Compilation was sped up by 97% (221c) by improving the de-duplication algorithm used by Hermes. These enhancements will benefit build times for apps that contain a large number of objects.

Multiple JSON parsing optimizations (de9c, 6e2d) have also been released, which will benefit apps that use libraries like redux-persist and rely heavily on JSON manipulation.

More ECMAScript Support in Hermes

React Native 0.72 now includes support for the following Hermes specifications:

• prototype.at provides Array, TypedArray, and String support. See also #823 (ebe2).
• Implement JSON that is well-formed.To avoid ill-formed Unicode strings, use stringify (d41d).
• Use AggregateError (9b25), which represents multiple errors wrapped in a single error. Useful for multiple errors, such as those generated by Promise.When all promises passed to it fail, any() is called.

These features are already available to JSC users.

3. New Architecture Updates

If you’ve been following the React Native app development framework for quite a while, you’ll know that every new version brings incremental enhancements to the “New Architecture,” and React Native 0.72 is no exception.

The new Fabric rendering engine now has improved text rendering performance of up to 18% on Android and 27% on iOS. 

Also, Hermes, the new architecture JavaScript engine, has seen a number of performance improvements, including faster compilation of large object literals and multiple JSON parsing optimizations. These enhancements will be especially useful for apps that do a lot of JSON manipulation or object bundling.

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

As a bonus, New Architecture updates will be managed by a dedicated working group beginning with React Native 0.72, allowing for more focused and frequent updates.

Breaking Changes

1. Deprecated Component Removals

In React Native 0.72, the following components were deprecated and will be removed in a future release:

• Slider – superseded by @react-native-community/slider
• DataPickerIOS – superseded by  @react-native-community/datetimepicker
• ProgressViewIOS – superseded by @react-native-community/progress-view

These components are no longer being maintained and are not recommended for use in new projects. If you are using any of these components in your existing React Native app development projects, you will have to modify your code to use a different component.

2. Package Renames

To ensure clear ownership, every single package published from the react-native core repository are now stored under react-native/packages and are published under the @react-native npm scope.

There are no changes to the react-native package.

The following packages have been renamed in React Native 0.72:

Image Source: https://reactnative.dev/blog/2023/06/21/0.72-metro-package-exports-symlinks 

If you have no direct dependency on a renamed package, this change will not affect you. 

The new package names reflect the fact that these packages have been updated to use the new architecture. Update your code to use the above new package names.

Upgrade to React Native 0.72 version!

So, React Native 0.72 brings a range of exciting new features and enhancements to the table. From improved performance and developer experience to Metro integration and better error handling, this update offers developers an opportunity to take their React Native app development to the next level.

If you’re currently using an older version of React Native, it’s highly recommended to upgrade to version 0.72. 

If you encounter any challenges during the upgrade process or need assistance with troubleshooting and support, leverage the expert services from the leading React Native app development company – DianApps.

Don’t hesitate to reach out to us to unlock the full potential of React Native 0.72.

The post React Native 0.72: An Overview and Latest Updates appeared first on Learn About Digital Transformation & Development | DianApps Blog.