Skip to content

Commit 71fb0b2

Browse files
committed
[blog] Add 0.73 announcement post
1 parent 7396470 commit 71fb0b2

File tree

3 files changed

+185
-0
lines changed

3 files changed

+185
-0
lines changed
Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
---
2+
title: 'React Native 0.73 - Debugging Improvements, Stable Symlink Support, and more'
3+
authors: [fortmarek, titozzz, hurali, lunaleaps, huntie]
4+
tags: [announcement, release, debugging]
5+
date: 2023-12-06
6+
---
7+
8+
Today we're releasing React Native 0.73! This release adds improvements to debugging with Hermes, stable symlink support, Android 14 support, and new experimental features. We are also deprecating legacy debugging features. We continue to make foundational improvements in preparation for the New Architecture.
9+
10+
### Highlights
11+
12+
- [Debugging Improvements](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#debugging-improvements)
13+
- [Stable Symlink Support in Metro](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#stable-symlink-support-in-metro)
14+
- [Kotlin Template on Android](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#kotlin-template-on-android)
15+
- [Android 14 Support](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#android-14-support)
16+
- [Deprecated Debugging Features](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#deprecated-debugging-features)
17+
- [New Architecture Updates](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#new-architecture-updates)
18+
19+
### Breaking Changes
20+
21+
- [Babel Package Renames](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#babel-package-renames)
22+
- [React Native CLI Changes](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#react-native-cli-changes)
23+
- [Other Breaking Changes](/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#other-breaking-changes)
24+
25+
<!--truncate-->
26+
27+
## Highlights
28+
29+
### Debugging Improvements
30+
31+
The React Native and Hermes teams are committed to improving the debugging experience in React Native. In 0.73, we're happy to share some initial progress out of this ongoing investment.
32+
33+
#### Console Log History in Hermes
34+
35+
`console.log()` is an ever popular way for developers to quickly debug their JavaScript code. In previous releases, console logs in React Native apps would not be recorded until a debugger was connected. This made it hard to observe logs that occur early during app load.
36+
37+
In React Native 0.73 we've addressed this issue. Hermes now captures all `console.log()` calls in the background, which will be sent to the Console tab when a debugger is first connected — matching the debugging experience in web browsers. This new behaviour works across Flipper, Chrome DevTools connected to Hermes, and the experimental New Debugger.
38+
39+
#### Updated Debugging Docs
40+
41+
We've refreshed the [Debugging](/docs/debugging) section of our docs, which now includes up-to-date information on how to connect all supported debuggers, more info on React DevTools, and refreshed visuals.
42+
43+
![Overview of the Debugging docs as of 0.73](/blog/assets/0.73-debugging-docs.jpg)
44+
45+
#### Experimental New Debugger
46+
47+
The React Native team is working on a new JavaScript debugger experience, intended to replace Flipper, with a Technical Preview available as of React Native 0.73. The new debugger opens immediately, and features a stripped-back Chrome DevTools UI customized for debugging React Native with Hermes.
48+
49+
:::note
50+
The new debugger is **experimental** and has some [known issues](https://github.com/react-native-community/discussions-and-proposals/discussions/733) we are actively working to solve in a future release of React Native. If you are trying it out, please use the [same discussion thread](https://github.com/react-native-community/discussions-and-proposals/discussions/733) to report feedback.
51+
:::
52+
53+
![The new debugger frontend opened to the "Welcome" pane](/docs/assets/debugging-debugger-welcome.jpg)
54+
55+
Learn more about enabling this experience [in the docs](/docs/next/debugging?js-debugger=new-debugger#opening-the-debugger).
56+
57+
### Stable Symlink Support in Metro
58+
59+
Support for resolving symlinks in Metro is now **enabled by default**. Symlink support enables React Native to work with monorepo setups when containing directories are configured with [`watchFolders`](https://metrobundler.dev/docs/configuration/#watchfolders).
60+
61+
Symlinks are deeply represented in Metro's internals, meaning they work with features such as [Fast Refresh](/docs/fast-refresh), and incur little performance overhead during bundling. Symlinks are supported on all desktop platforms, with and without Watchman.
62+
63+
:::info
64+
65+
#### Monorepo workarounds
66+
67+
We are aware there are still edge cases when using React Native in a monorepo layout. We have planned work to address some of these, which didn't quite make it into 0.73 — but which we aim to ship as soon as possible.
68+
69+
**For React Native template projects (`npx react-native init`)**, you will need to configure any [`watchFolders`](https://metrobundler.dev/docs/configuration/#watchfolders) outside of the project root in order for Metro to discover them ([more info](https://metrobundler.dev/docs/configuration/#unstable_enablesymlinks-experimental)). You may also need to update file paths if your `react-native` dependency is installed to a folder at a different level.
70+
71+
**For Expo apps**, support for Yarn (Classic) workspaces is configured out of the box. See also the [Work with monorepos](https://docs.expo.dev/guides/monorepos/) guide in the Expo docs.
72+
:::
73+
74+
### Kotlin Template on Android
75+
76+
We're excited to announce that, starting from 0.73, Kotlin is now the **recommended language** for Android apps built with React Native. This follows the direction that the Android ecosystem has been moving in for several years and allows you to write your app using a modern language.
77+
78+
We've updated React Native's template on Android to use Kotlin instead of Java. The new `MainActivity.kt` and `MainApplication.kt` files are 36% smaller in size.
79+
80+
The [Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) has also been updated to make it easier to migrate your `.java` files to `.kt` files.
81+
If you've previously modified the Java files in your project and you need support migrating them to Kotlin, you can use the `Code > Convert Java file to Kotlin File` utility of Android Studio (also accessible with the shortcut <kbd>Cmd ⌘</kbd> + <kbd>Shift ⇧</kbd> + <kbd>Option ⌥</kbd> + <kbd>K</kbd>).
82+
83+
### Android 14 Support
84+
85+
We've updated React Native to fully support Android 14. Starting from 0.73, React Native developers can now target the latest Android SDK version, [API Level 34](https://developer.android.com/guide/topics/manifest/uses-sdk-element?hl=en#ApiLevels) (_Upside Down Cake_).
86+
87+
#### Grant partial access to photos and videos
88+
89+
[Selected Photos Access](https://developer.android.com/about/versions/14/changes/partial-photo-video-access) allows Android 14 users to grant apps access to specific items in their media library, rather than access to all media. In 0.73, React Native apps now support this capability, by using the `READ_MEDIA_VISUAL_USER_SELECTED` permission in the [`PermissionsAndroid`](https://reactnative.dev/docs/permissionsandroid) API.
90+
91+
#### Min SDK bump
92+
93+
React Native 0.73 will be the final version which supports Android 5.0 (API Level 21). The next version of React Native will have a minimum SDK version of 23 (Android 6.0). Read more about the upcoming changes to min SDK bump [here](/). <!-- TODO -->
94+
95+
### Deprecated Debugging Features
96+
97+
#### Flipper ↔ React Native integration
98+
99+
We are gradually moving away from Flipper as the default tool for debugging React Native apps. In 0.73, this begins by deprecating the native Flipper integration included with React Native (bootstrap code which wires up Flipper's core plugins). We will be removing this integration and dependency in the next release — meaning parts of Flipper such as the Network plugin will cease to work.
100+
101+
**Unchanged**: Flipper as a standalone product for native app debugging will continue to exist. Even after its removal from new React Native projects in future, developers will be able to [manually add Flipper to their app](https://fbflipper.com/docs/getting-started/android-native/) if they wish.
102+
103+
For more information on why we are moving away from Flipper, [view the RFC](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0641-decoupling-flipper-from-react-native-core.md).
104+
105+
#### Remote JavaScript Debugging
106+
107+
Remote JavaScript Debugging is a legacy debugging mode that connects an external web browser (Chrome) to your app and runs your JavaScript code inside a web page, i.e. `http://localhost:8081/debugger-ui`. This model could lead to inconsistent app behaviour while debugging, and is incompatible with native modules under the New Architecture.
108+
109+
In 0.73, Remote JavaScript Debugging is deprecated and has been removed from the Dev Menu. Enabling the remote debugger must now be done manually via the `NativeDevSettings` API. Doing this is covered in the [Other Debugging Methods docs](/docs/next/other-debugging-methods#remote-js-debugging).
110+
111+
:::info
112+
Remote JavaScript Debugging was previously the default debugging experience for apps using JavaScriptCore (JSC). We recommend [Safari Developer Tools (direct JSC debugging)](/docs/next/other-debugging-methods#safari-developer-tools-direct-jsc-debugging) instead, for iOS apps.
113+
114+
We recommend using [Hermes](/docs/hermes) for a consistent debugging experience on all platforms.
115+
:::
116+
117+
### New Architecture Updates
118+
119+
We continue active development on the New Architecture and are fully invested in bringing it to the Open Source community.
120+
121+
In 0.73, Bridgeless Mode is now available for experimentation. We're shipping this with a new interop layer to continue support for legacy Native Modules. And we're introducing Static View Configs, which simplify native view components on iOS.
122+
123+
More info on these features will be covered in an incoming blog post.
124+
125+
## Breaking Changes
126+
127+
### Babel Package Renames
128+
129+
We've relocated two Babel-related packages out of Metro and into React Native's repository and versioning scheme, enabling us to simplify maintenance and upgrades. The new versions of these packages support New Architecture features in 0.73, meaning these dependencies must be updated.
130+
131+
Please follow the [Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) when upgrading, to ensure you have updated these dependencies. Some packages have been renamed:
132+
133+
| Old Package Name | New Package Name |
134+
| -------------------------------------- | --------------------------------------- |
135+
| `metro-react-native-babel-preset` | `@react-native/babel-preset` |
136+
| `metro-react-native-babel-transformer` | `@react-native/metro-babel-transformer` |
137+
138+
:::info
139+
`@react-native/babel-preset` now includes `@react-native/babel-plugin-codegen`, this no longer needs to be specified separately in your Babel config file.
140+
:::
141+
142+
### React Native CLI Changes
143+
144+
#### Highlighted breaking changes
145+
146+
- Change default task prefix in `build-android` command. From now on, when you run `build-android`, the `bundle` task will be run instead of `assemble` ([#1913](https://github.com/react-native-community/cli/pull/1913)).
147+
- Remove fallback flow for Metro config defaults ([#1972](https://github.com/react-native-community/cli/pull/1972)).
148+
- The [updated `metro.config.js` format](/blog/2023/06/21/0.72-metro-package-exports-symlinks#new-metroconfigjs-setup) from 0.72 is now required in 0.73, as we have removed the fallback copy of these defaults from CLI.
149+
- Remove `--configuration` option from `run-ios` (replaced with `--mode`) ([#2028](https://github.com/react-native-community/cli/pull/2028)).
150+
- Remove `--variant` option from `build-android` command (replaced with `--mode`) ([#2026](https://github.com/react-native-community/cli/pull/2026)).
151+
152+
[See full changelog for v12.0.0](https://github.com/react-native-community/cli/releases/tag/v12.0.0).
153+
154+
### Other Breaking Changes
155+
156+
- Raise minimum Node.js requirement to 18.x ([#37709](https://github.com/facebook/react-native/pull/37709)) (see also [Node.js 16 EOL](https://nodejs.org/en/blog/announcements/nodejs16-eol)).
157+
- The template now uses TypeScript 5.0 ([#36862](https://github.com/facebook/react-native/pull/36862)).
158+
- React Native types continue working on TypeScript 4.8.
159+
- **Android**: Major bump of Fresco to 3.0 ([#38275](https://github.com/facebook/react-native/pull/38275)).
160+
- **iOS**: Raise minimum iOS version to 13.4 ([#36795](https://github.com/facebook/react-native/pull/36795)).
161+
- **iOS**: Metro will no longer be automatically started when running builds via Xcode ([#38242](https://github.com/facebook/react-native/pull/38242)).
162+
163+
For library authors:
164+
165+
- **Android**: Bump to AGP 8.1.1 ([discussion](https://github.com/react-native-community/discussions-and-proposals/issues/671))
166+
167+
## Acknowledgements
168+
169+
React Native 0.73 contains over [2259 commits](https://github.com/facebook/react-native/compare/v0.72.7...v0.73.0) from 68 contributors. Thanks for all your hard work!
170+
171+
## Upgrade to 0.73
172+
173+
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](/docs/upgrading). You can also create a new project with `npx react-native@latest init MyProject`.
174+
175+
If you use Expo, React Native 0.73 will be supported in the Expo SDK 50 release.
176+
177+
:::info
178+
0.73 is now the latest stable version of React Native and **0.70.x now moves to unsupported**. For more information see [React Native’s support policy](https://github.com/reactwg/react-native-releases#releases-support-policy).
179+
:::

website/blog/authors.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,3 +116,9 @@ huntie:
116116
title: Software Engineer at Meta
117117
url: https://twitter.com/alxhnt
118118
image_url: https://github.com/huntie.png
119+
120+
hurali:
121+
name: Hur Ali
122+
title: Software Engineer at Callstack
123+
url: https://twitter.com/hurali97
124+
image_url: https://github.com/hurali97.png
177 KB
Loading

0 commit comments

Comments
 (0)