Skip to content

Commit 0fb05c0

Browse files
vzaidmanvzaidman
committed
initial working version
1 parent aaab017 commit 0fb05c0

File tree

6 files changed

+313
-0
lines changed

6 files changed

+313
-0
lines changed

‎website/blog/2025-10-08-react-native-0.82.md‎

Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,313 @@
1+
---
2+
title: 'React Native 0.82 - Legacy Architecture Sunsetting, React 19.1.1, Hermes V1, DOM Node APIs, and more'
3+
authors: [vzaidman, cortinico, gabrieldonadel, alanjhughes]
4+
tags: [engineering]
5+
date: 2025-10-08
6+
---
7+
8+
import Tabs from '@theme/Tabs';
9+
import TabItem from '@theme/TabItem';
10+
11+
# **React Native 0.82 - Legacy Architecture Sunsetting, Experimental Hermes V1, React 19.1.1, DOM Node APIs, and more!**
12+
13+
Today we are excited to release React Native 0.82!
14+
15+
This release is a crucial milestone for React Native: after multiple years of rollout of the New Architecture, we’re finally sunsetting the Legacy Architecture. The New Architecture is now the **only** architecture of React Native. This release also ships with a newer version of our Javascript engine: Hermes V1, which is available via an experimental opt-in. We’re also updating the React version to 19.1.1 and shipping support for DOM Node APIs.
16+
17+
### Highlights
18+
19+
- [Sunsetting the Legacy Architecture](/blog/2025/10/08/react-native-0.82#sunsetting-the-legacy-architecture)
20+
- [Experimental Hermes V1](/blog/2025/10/08/react-native-0.82#experimental-hermes-v1)
21+
- [React 19.1.1](/blog/2025/10/08/react-native-0.82#react-19.1.1)
22+
- [DOM Node APIs](/blog/2025/10/08/react-native-0.82#dom-node-apis)
23+
24+
<!--truncate-->
25+
26+
# Highlights
27+
28+
## Sunsetting the Legacy Architecture
29+
30+
Starting with this version, [the New Architecture](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here) will be the **only** architecture for React Native, there will no longer be an option to opt-out of the New Architecture.
31+
32+
The New Architecture has been tested and refined over a long period of time, and [has been the default architecture since version 0.76](/blog/2024/10/23/the-new-architecture-is-here). We're now confident in making it the only architecture.
33+
34+
In 0.82, if you try to set `newArchEnabled=false` on Android, or if you try to install Cocoapods with `RCT_NEW_ARCH_ENABLED=0` on iOS, these will be ignored and your app will still run with the New Architecture enabled.
35+
36+
### How to migrate
37+
38+
If you haven’t migrated your project to the New Architecture, our recommendations are the following:
39+
40+
First, migrate your project to React Native 0.81 or Expo SDK 54. Those are the last versions that support the opt-out and contain various performance improvements specifically for users migrating to the New Architecture.
41+
42+
Then enable the New Architecture in 0.81 and verify that your application is working fine.
43+
44+
You can then update safely to React Native 0.82 and future versions.
45+
46+
If an incompatible 3rd party dependency prevents you from migrating to the New Architecture, we recommend you reach out to the library maintainers directly.
47+
48+
If a bug in React Native core prevents you from migrating, we recommend you reach out to us [through our issue tracker](https://github.com/facebook/react-native/issues/new/choose).
49+
50+
### Interop Layers & 3P library compatibility
51+
52+
We are keeping the interop layers in the codebase for the foreseeable future. All the classes and functions that are required by the interop layers won’t be removed anytime soon. We will share further updates in the future regarding the removals of Interop Layers later on.
53+
54+
We’ve also verified that the 3p libraries that offer backward compatibility with both old and New Architectures will keep on working with 0.82 where New Architecture is the only architecture.
55+
56+
### Removal of Legacy Architecture classes
57+
58+
To ensure backward compatibility and reduce breaking changes, we are not removing any APIs of the Legacy Architecture from the core of React Native in this version.
59+
60+
Removing the Legacy Architecture will allow us to save significant size on the overall bundle size, therefore the removal is scheduled to start from the next version of React Native.
61+
62+
You can find more information in [RFC0929: Removal of the Legacy Architecture of React Native](https://github.com/react-native-community/discussions-and-proposals/pull/929).
63+
64+
## Experimental Hermes V1
65+
66+
React Native 0.82 adds support for opting into Hermes V1.
67+
68+
Hermes V1 is the next evolution of Hermes. We've been experimenting with it internally in our apps, and it is now time for the community to try it as well. It comes with improvements in the compiler and in the VM that boosts Hermes performance.
69+
70+
From initial tests and benchmarks, Hermes V1 outperforms Legacy Hermes in various scenarios. We have seen improvements in bundle loading and TTI. The improvements strongly depend on the details of your apps.
71+
72+
On the [Expensify app](https://github.com/Expensify/App), a real world and complex application, and we have seen the following improvements:
73+
| Metric | Android (low end device) | iOS |
74+
| --- | --- | --- |
75+
| Bundle Load Time | 3.16% | 9% |
76+
| Total TTI | 7.62% | 2.5% |
77+
| Content TTI | 7.19% | 7.5% |
78+
79+
For Total TTI, we measured the time it takes from bundle loading to when the first screen in the app is rendered and it is interactive.
80+
81+
For Content TTI, we measured the time it takes for a component to be interactive from the first rendering of the component itself.
82+
83+
Hermes V1 does not yet contain JS-to-native compilation (previously known as “Static Hermes”) or the JIT compilation that was [presented during React Native EU 2023](https://www.youtube.com/watch?v=q-xKYA0EO-c). We are still testing these features and we will share more as we make progress.
84+
85+
### How to enable Hermes V1
86+
87+
:::info
88+
89+
While Hermes V1 is in the experimental phase, in order to try it, you’ll need to build React Native from source. Once Hermes V1 ships as default in a future React Native version, this restriction will be lifted.
90+
91+
:::
92+
93+
To try Hermes V1 in your own project, use the following steps:
94+
95+
1. Force your package manager to resolve the experimental version of Hermes V1 compiler package by modifying the corresponding section of your `package.json` file (note that the current versioning convention is only for the experimental phase of Hermes V1):
96+
97+
<Tabs>
98+
<TabItem label="yarn" value="yarn" default>
99+
```
100+
"resolutions": {
101+
"hermes-compiler": "250829098.0.1"
102+
}
103+
```
104+
</TabItem>
105+
<TabItem value="npm" label="npm">
106+
```
107+
"overrides": {
108+
"hermes-compiler": "250829098.0.1"
109+
}
110+
```
111+
</TabItem>
112+
</Tabs>
113+
114+
2. Enable Hermes V1 for Android by adding `hermesV1Enabled=true` inside the `android/gradle.properties` file, and configure React Native [to build from source](https://reactnative.dev/contributing/how-to-build-from-source#android) by editing `android/settings.gradle`:
115+
116+
<Tabs>
117+
<TabItem value="android/gradle.properties" label="android/gradle.properties" default>
118+
```diff
119+
+ hermesV1Enabled=true
120+
```
121+
</TabItem>
122+
<TabItem label="android/settings.gradle" value="android/settings.gradle">
123+
```diff
124+
+ includeBuild('../node_modules/react-native') {
125+
+ dependencySubstitution {
126+
+ substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
127+
+ substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
128+
+ substitute(project(":packages:react-native:ReactAndroid:hermes-engine")).using(module("com.facebook.hermes:hermes-android:250829098.0.1"))
129+
+ }
130+
+ }
131+
```
132+
</TabItem>
133+
</Tabs>
134+
135+
3. Enable Hermes V1 for iOS by installing pods with `RCT_HERMES_V1_ENABLED=1` environment variable. Keep in mind that Hermes V1 is not compatible with the precompiled React Native builds, so make sure you don’t use the `RCT_USE_PREBUILT_RNCORE` flag when installing pods:
136+
137+
```sh
138+
RCT_HERMES_V1_ENABLED=1 bundle exec pod install
139+
```
140+
141+
## React 19.1.1
142+
143+
This release of React Native ships with the latest React stable: [19.1.1](https://github.com/facebook/react/releases/tag/v19.1.1).
144+
145+
This release of React contains full support for owner stacks for React Native. Back in React Native 0.80, when we shipped support for 19.1.0, we mentioned that owner stacks were not fully supported if you were using the [`@babel/plugin-transform-function-name`](https://babeljs.io/docs/babel-plugin-transform-function-name) Babel plugin. This release lifts this restriction and enables owner stacks for all React Native users.
146+
147+
| BEFORE | AFTER |
148+
| ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
149+
| ![Example error thrown without Owner Stacks](../static/blog/assets/0.82-owners-stack-before.png) | ![Example error thrown with Owner Stacks](../static/blog/assets/0.82-owners-stack-after.png) |
150+
151+
React 19.1.1 also improves the reliability of [`useDeferredValue`](https://react.dev/reference/react/useDeferredValue) and [`startTransition`](https://react.dev/reference/react/startTransition) in a Suspense boundary for React Native. These are essential React features, designed to boost app responsiveness. Previously both were wrongly showing the fallback component when used together with a Suspense boundary on React Native. With 19.1.1, they now consistently perform as expected on React Native, aligning their behavior with Web.
152+
153+
## DOM Node APIs
154+
155+
Starting from React Native 0.82, native components will provide DOM-like nodes via refs.
156+
157+
Before, native components provided React Native-specific objects with just a handful of methods like `measure` and `setNativeProps`. After this release, they will provide [nodes implementing a subset of the DOM API](https://reactnative.dev/docs/element-nodes) that allow traversing the UI tree, measuring layout, etc. as they do on Web, e.g.:
158+
159+
```jsx
160+
function MyComponent(props) {
161+
const ref = useRef();
162+
163+
useEffect(() => {
164+
const element = ref.current;
165+
166+
// New methods
167+
element.parentNode;
168+
element.parentElement;
169+
element.childNodes;
170+
element.children;
171+
const bounds = element.getBoundingClientRect();
172+
const doc = element.ownerDocument;
173+
const maybeElement = doc.getElementById('some-view');
174+
175+
// Legacy methods are still available
176+
element.measure((x, y, width, height, pageX, pageY) => {
177+
/* ... */
178+
});
179+
}, []);
180+
181+
return <View ref={ref} />;
182+
}
183+
```
184+
185+
Additionally, this will expose access to leaf [text nodes](https://reactnative.dev/docs/text-nodes) (created by the `Text` component) and [document nodes](https://reactnative.dev/docs/document-nodes) representing React Native root nodes.
186+
187+
This is a backwards compatible change, as the new nodes will continue implementing the legacy methods (like `measure`).
188+
189+
For more information, please check our [documentation](https://reactnative.dev/docs/nodes).
190+
191+
## Other changes
192+
193+
### Web Performance APIs (Canary)
194+
195+
React Native now implements a subset of the performance APIs available on Web:
196+
197+
- [High Resolution Time](https://www.w3.org/TR/hr-time-3/): defines `performance.now()` and `performance.timeOrigin`.
198+
- [Performance Timeline](https://w3c.github.io/performance-timeline/): defines `PerformanceObserver` and methods to access performance entries in the performance object (`getEntries()`, `getEntriesByType()`, `getEntriesByName()`).
199+
- [User Timing](https://w3c.github.io/user-timing/): defines `performance.mark` and `performance.measure`.
200+
- [Event Timing API](https://w3c.github.io/event-timing/): defines `event` entry types reported to `PerformanceObserver`.
201+
- [Long Tasks API](https://w3c.github.io/longtasks/): defines `longtask` entry types reported to `PerformanceObserver`.
202+
203+
They allow tracking different aspects of performance in your app at runtime (for telemetry) and they will be visible in the performance panel in React Native DevTools (available in a future version of React Native).
204+
205+
They are currently **available only in the [canary release level](https://reactnative.dev/docs/next/releases/release-levels)**, and will be released as stable in a future version of React Native.
206+
207+
### Create a `debugOptimized` build type for Android
208+
209+
Starting with React Native 0.82, you will be able to use the `debugOptimized` build type to speed up your development experience.
210+
211+
Historically, Android creates two default build variants:
212+
213+
- `debug`, used by default when developing and that allows you to connect to the various debugger tools such as React Native DevTools, Metro, the Android JVM and C++ debugger
214+
- `release`, used when shipping your application to production. This is fully optimized, with obfuscation and optimization that will make debugging harder.
215+
216+
As most React Native developers won’t need to use the C++ debugger when developing, we introduced the `debugOptimized` build type.
217+
218+
With `debugOptimized` your animations and re-rendering will be faster, because you’re running a React Native build with several C++ optimizations enabled. At the same time you will still be able to use React Native Dev Tools to debug your JavaScript code.
219+
220+
When using `debugOptimized`, you won’t be able to use the JVM or C++ native debuggers, but you will still be able to use them if you use the `debug` build type.
221+
222+
To run the `debugOptimized` variant for your app built with the Community CLI you can invoke:
223+
224+
<Tabs>
225+
<TabItem label="Raw React Native" value="Raw React Native" default>
226+
```
227+
npx react-native run-android --mode debugOptimized
228+
```
229+
</TabItem>
230+
<TabItem value="Expo" label="Expo">
231+
```
232+
npx expo run:android --variant debugOptimized
233+
```
234+
</TabItem>
235+
</Tabs>
236+
237+
:::info
238+
239+
The `debugOptimized` build type has also been backported to React Native 0.81 and Expo SDK 54.
240+
241+
:::
242+
243+
You can see the `debugOptimized` in action in these samples where we’re rendering several animations on screens.
244+
245+
The build running `debug` is running at ~20FPS while the `debugOptimized` one is running at ~60FPS:
246+
| `debug` | `debugOptimized` |
247+
| ------- | ---------------- |
248+
| ![Example build running with `debug`](../static/blog/assets/0.82-debug.gif) | ![Example build running with `debugOptimized`](../static/blog/assets/0.82-debug-optimized.gif) |
249+
250+
## Breaking Changes
251+
252+
### Uncaught promise rejections will now raise `console.error`
253+
254+
Following the [improvement of reporting uncaught JavaScript errors](/blog/2025/08/12/react-native-0.81#improved-reporting-of-uncaught-javascript-errors) in the previous version, we will now be reporting uncaught promises through that mechanism as well:
255+
256+
![Example of a promise rejection reported to console](../static/blog/assets/0.82-uncaught-promise-rejection-report.png)
257+
258+
Due to a bug, these were completely swallowed and ignored previously, so please expect some pre-existing errors to surface after upgrading to React Native 0.81. For that reason, previously pre-existing errors might also surface in JavaScript errors reported to your backend, and create a surge in new reports.
259+
260+
### Other Breaking Changes
261+
262+
#### General
263+
264+
- Move `ReactNativeFeatureFlags` to `src/private`
265+
- In general you should not depend on `ReactNativeFeatureFlags` at all as that is a private API.
266+
- Type of `Appearance.setColorScheme()` has been updated to no longer accept a nullable value
267+
- Use 'unspecified' instead of null/undefined in the edge case that the color scheme needs to be reset.
268+
269+
#### iOS
270+
271+
- Migrated `RCTDisplayLink` away from legacy api `RCTModuleData` as we plan to remove it in the future.
272+
273+
#### Android
274+
275+
- Class `com.facebook.react.bridge.JSONArguments` is removed as was accidentally `public`
276+
- Deprecate `MessageQueueThreadPerfStats`
277+
- We deprecated this API and replaced it with stub. You should not rely on stats from this API anymore as the provided stats were not reliable
278+
- Bump Gradle from 8.x to 9.0.0
279+
- List of all the changes in the next major stable version of Gradle 9.0.0 is available here: [https://gradle.org/whats-new/gradle-9/](https://gradle.org/whats-new/gradle-9/) but we expect no impact at all to users
280+
281+
#### C++
282+
283+
- Delete backward compatibility headers for `CallbackWrapper.h` / `LongLivedObject.h`
284+
- The correct include for those headers is `#include <react/bridging/LongLivedObject.h>` and `#include <react/bridging/CallbackWrapper.h>`.
285+
- You should not use the old includes under `#import <ReactCommon/….h>`
286+
287+
Read the full list of breaking changes in the [CHANGELOG for 0.82](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0820).
288+
289+
## Acknowledgements[​](https://reactnative.dev/blog/2024/08/12/release-0.75#acknowledgements)
290+
291+
React Native 0.82 contains over 868 commits from 93 contributors. Thanks for all your hard work!
292+
293+
We want to send a special thank you to those community members that shipped significant contributions in this release:
294+
295+
- [Dawid Małecki](https://github.com/coado) and [Jakub Piasecki](https://github.com/j-piasecki) for their help in rolling out Hermes V1.
296+
- [Riccardo Cipolleschi](<[https://github.com/cipolleschi](https://github.com/cipolleschi)>) for his support with writing the React 19.1.1 and Hermes V1 paragraph.
297+
- [Rubén Norte](https://github.com/rubennorte) for his support with writing the DOM Api and Performance API paragraphs.
298+
- [Tomasz Zawadzki](https://github.com/tomekzaw/) for his support with the `debugOptimized` benchmarking.
299+
- [Krystof Woldrich](https://github.com/krystofwoldrich) for his support with fixing the swallowing of uncaught promise rejections.
300+
301+
## Upgrade to 0.82
302+
303+
Please use the [React Native Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) to view code changes between React Native versions for existing projects, in addition to the Upgrading docs.
304+
305+
To create a new project:
306+
307+
If you use Expo, React Native 0.82 will be available as part of the expo@canary releases.
308+
309+
The next stable SDK 55 will be shipped with the next stable release of React Native: 0.83.
310+
311+
::: info
312+
313+
0.82 is now the latest stable version of React Native and 0.79.x moves to unsupported. For more information see [React Native's support policy](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md).

‎website/static/blog/assets/0.82-debug-optimized.gif‎

5.93 MB
Loading

‎website/static/blog/assets/0.82-debug.gif‎

8.45 MB
Loading

‎website/static/blog/assets/0.82-owners-stack-after.png‎

52 KB
Loading

‎website/static/blog/assets/0.82-owners-stack-before.png‎

38.6 KB
Loading

‎website/static/blog/assets/0.82-uncaught-promise-rejection-report.png‎

72.3 KB
Loading

0 commit comments

Comments
 (0)