What’s New In React Native 0.71— How to Upgrade & Why it Matters
React Native 0.71 has just been released, touting a number of new features and improvements. In this post, we'll take a look at what's new, why it matters, and how to upgrade your React Native app to take advantage of the latest version.
First-Class Support for TypeScript
The year is 2023, and there's really no reason to not be using TypeScript. Well, actually, sometimes the thing that holds people back from using it is lack of support in the libraries and frameworks they rely on. Though React Native has had TypeScript support for years, enabling it has involved bringing your own configuration and manually installing separate type definition packages.
As of React Native 0.71, there's no longer any excuse: the new version has first-class support for TypeScript, including bundled type definitions, eliminating the need for external dependencies. This means that enabling TypeScript in your project is even simpler than before. In fact, if you create a new project via the React Native CLI, TypeScript is now enabled by default.
As part of the effort to add first-class TypeScript support, the React Native team has updated all of the documentation to include type information. This is a very nice touch, as projects sometimes add TypeScript support, but frustratingly don't provide type information in the docs, forcing developers to sift through source files to hunt down the types themselves.
Why it Matters
Using TypeScript in your React Native project will help you find and fix issues in your code before they're shipped. While the lack of formal TypeScript support in the past may have kept you from adding it to your project, first-class support in React Native 0.71 means now is the time to start using it. TypeScript is a massive win for code quality and developer tooling, and is simply where the industry is going.
Improved Layout with Flexbox Gap
React Native 0.71 adds a number of enhancements to layout & styling. One of the most notable changes is the addition of flexbox gap support to the React Native layout engine.
React Native's flexbox-based layout engine already provides a powerful way to produce responsive mobile designs. But managing the spacing between elements can be a bit tricky and sometimes downright annoying.
The usual approach to managing the space between elements is with the margin style. The main problem with margin is that it's typically applied to all sibling elements (like all Views in a list), resulting in unwanted margins at the start or end of the elements (or both), as well as doubled margins between elements:
The usual solution is simple enough, but a bit ugly: apply margin only on the right, and then use no margin for the last item. While this approach works well enough, it does require special case logic and a style change for one item in the list. Okay, okay, that's not the end of the world, but now there's a better way: flexbox gap.
gap is a style attribute applied at the container level rather than at the item level, and does exactly what we want: it controls the gap size between items without introducing any unwanted space.
Why it Matters
gap is a relatively new addition to flexbox, but I've been using it happily on the web for a while now. While it is a simple feature, it does invoke a feeling of "where has this been all my life?", and it removes the need for hacky CSS selectors or extra styling logic in your JavaScript. Introduction of flexbox gap support in React Native is a huge win for developer and designer ergonomics.
New Architecture Updates
One of the most important change in React 0.71 is the continued rollout of the New Architecture.
If you've been following React Native development for a while, you'll note that "New Architecture Updates" have been touted in the last several versions. You might cynically think that the "New Architecture" is some kind of vaporware that is never actually completed – but this is far from the truth! There are a couple of reasons that the New Architecture updates are an ongoing effort over several releases.
First, the term refers not to just one architectural change, but several independent improvements to React Native:
- Hermes – a high performance JavaScript engine
- Turbo Modules – the new native module system
- Fabric – new optimized rendering system
Second, the changes have mostly opt-in and are at various levels of maturity. For example, the Hermes engine has been stable and enabled by default since version 0.70. Other changes, such as the Fabric rendering system, need to be manually enabled and are still considered in beta.
Finally, the rollout of some of the changes is, in practice, dependent on upgrades from popular 3rd party packages. The current stable release of the popular Reanimated package, for example, is not compatible with the new Fabric renderer, though a pre-release version does include support.
0.71 continues the rollout of the new architecture with massively improved build performance using pre-built artifacts, a greatly simplified integration process on iOS (via the new RCTAppDelegate class) and a number of bug fixes & other improvements
With the changes in 0,71 (and using the pre-release version of Reanimated), I was able to get my app fully up and running with Fabric and the new architeture, though I did encounter some cosmetic issues due to another 3rd party package in my project. I'll probably hold off on leaving it enabled until the 3rd party issues are fully resolved, but it's amazing to see the full new architecture in action.
Why it Matters
Though React Native's new architecture is a work-in-progress, every new release provides real, incremental value to React Native developers. If you haven't already enabled Hermes, for example, it's now fully supported and will your app give a major performance boost. And while Fabric is still considered experimental, it's definitely time to start getting your app ready for the change with React Native 0.71.
How to Upgrade
Upgrading React Native can be tricky, but there are a couple of tricks to make the process a bit smoother.
First, double-check the latest version of React Native. As of this writing, version 0.71.1 of React Native has been released with some minor improvements, so when following the instructions below, be sure to use the latest version!
Next, you'll need to update a number of core dependencies. Updating React Native to 0.71.1 is the main change, but a number of other packages will need to be upgraded as well. While you can try to do this manually, there's a community maintained tool you can use to show you all of the outdated dependencies in your project:
npx @rnx-kit/align-deps --init
npx @rnx-kit/align-deps --requirements react-native@0.71Once you've update your core dependencies, you'll also need to make a number of changes in some supporting files in your project, such as the native project build files.
The best way to see the full list of changes needed is to use the React Native upgrade helper tool. This tool lets you specify your current version of React Native and shows all the changes needed to upgrade to version 0.71.1. For example, if you're upgrading from 0.70.6 to 0.71.1, here's the full list of changes you'll need to make.
If you're upgrading from a much older version of React Native, the list of changes can be huge and frankly, pretty intimidating. In this case, it can sometimes be more efficient to create a pristine new React Native 0.71.1 project and migrate your components & application code over to the new project. Or, use the new project for reference and copy over files individually to your existing one.
My own upgrades from 0.70 went pretty well, though I did enounter one issue with the popular react-native-splash-screen package. Fortunately, others had already encountered the issue and found a simple workaround:
crazycodeboyRecap
React Native 0.71 introduces a number of new features, some of which offer immediate value to React Native developers, while others provide steady infrastructure improvements and longer term value.
For a full list of changes in React Native 0.71, checkout the official blog post on the topic.
by Alexander Benedikt Kuttig
⭐️⭐️⭐️⭐️⭐️
