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.
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 MainActivity
file) and enable/disable React 18.
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 theisConcurrentRootEnabled
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
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 :
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
andunlink
commands have been removed in favor of autolinking- Deprecated
initCompat
has been removed, useinit
command instead - Removed deprecated
run-android
properties - Removed
install
anduninstall
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 arun-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 :)