What’s New in React Native 0.69

Recently, React Native 0.69 was released. This version has several improvements for the New Architecture of React Native and new features: React 18 support & bundled Hermes.

React Native 0.69 is the first release to support React 18. React Native enhances performance, flexibility, and memory usage.

What’s React 18 support?

React 18 introduces new hooks such as useId, and also includes new concurrency features like useTransition.

useId is a built-in hook that has been available since React 18 to generate unique IDs that are stable across the server and client while avoiding hydration mismatches.

const id = useId();

useId generates a string that includes the token. This helps ensure that the token is unique.

app.js

React 18 introduces several new features, including :

• Automatic batching
• New Strict Mode behaviors
• New hooks (useId, useSyncExternalStore)

React 18 is enabled by default when you enable the New Architecture in React Native 0.69. However, during the upgrade process, you may encounter some issues, in which case you can opt for React 18.

Opt-ing out of React 18 on Android

For Android, you can override the isConcurrentRootEnabled in your ActivityDelegate (in the MainActivityfile) and enable/disable React 18.

MainActivity.java

Opt-ing out of React 18 on iOS​

For iOS, you’ll have to change the return value to false of the concurrentRootEnabled method in your AppDelegate.mm file.

AppDelegate.mm

Note: Although the application runs on React Native 0.69, it will still utilize React 17 mode on Old Architecture even if React 18 is included in the package.json. Overriding the isConcurrentRootEnabled method will have no effect on your app.

What’s new: Bundled Hermes

Hermes is an open-source JavaScript engine optimized for React Native.

• React Native 0.69 has built-in support for Hermes. Prior to this release, Hermes and React Native were released separately. This led to a misunderstanding as to which Hermes version is compatible with which React Native version.
• Migrating to Hermes will give developers the best experience and help improve productivity.
• Hermes improves React Native performance and helps with start-up time, memory usage, and bundle size. Hermes is an entirely different JavaScript engine. Sometimes, when you upgrade a project to Hermes, you need to upgrade other dependencies for compatibility.

The use of Hermes is opt-in. Follow the instructions to enable it in your project.

Enable Hermes

Android

android/app/build.gradle

build.gradle

proguard-rules.pro

proguard-rules.pro

If you’ve built your app at least once, clean the build

$ cd android && ./gradlew clean

Now you are able to develop and deploy your app as usual

$ npx react-native run-android

iOS

Edit your ios/Podfile file and make the change illustrated below :

Podfile

Once you’ve configured it, you can install the Hermes pods with :

$ cd ios && pod install

After that, you can run the app as usual :

$ npx react-native run-ios

Highlights of 0.69

• Deprecating support for iOS/tvOS SDK 11.0, version 12.4+ is now required
• Better support for M1 users developing for Android
• Addition of the new .xcode.env configuration file for more deterministically sourcing the node executable
• React Native now uses the latest status bar API from Android 11
• Support for C++17
• New hotkeysEnabled option in the iOS debug menu

React Native CLI has been bumped to a new major version of 8.0 :

• link and unlink commands have been removed in favor of autolinking
• Deprecated initCompat has been removed, use init command instead
• Removed deprecated run-android properties
• Removed install and uninstall commands
• Removed assets and hooks from react-native.config.js – you'll need to remove these properties from your config
• podspecPath was removed from the iOS dependency config
• Removed --project-path option from a run-ios
• Changed iOS source directory detection from looking for an Xcode project to looking for a Podfile

Removed Support :

• Support for console.disableYellowBox has been dropped.
• Already deprecated prop types have been removed.
• removeListener, deprecated since RN 0.65, was removed from Appearance
• If you were using SegmentedComponentIOS, you’d now need to replace it with the third-party library, for example, segmented-control

Instructions for upgrading to React Native 0.69

To update the version of React Native and related modules, update your package.json file and then run the usual package update commands (usually yarn, pod install, etc.). However, for RN 0.69, this is not enough.

For a better approach and to get lists of changes that need to be applied, you can check out the React Native upgrade tool.

Conclusion

React Native 0.69 provides performance enhancement, less memory usage, and reduced start time. Before upgrading to 0.69, make sure to work on a different branch and have a backup of the code, as there are many open issues in the GitHub.

Hope this article has helped you learn something new today. 👏

Happy Learning :)