diff --git a/docs/_integration-with-existing-apps-swift.md b/docs/_integration-with-existing-apps-swift.md index e2e79eea0a3..f00e011cbd8 100644 --- a/docs/_integration-with-existing-apps-swift.md +++ b/docs/_integration-with-existing-apps-swift.md @@ -122,7 +122,7 @@ The `Podfile` will contain a boilerplate setup that you will tweak for your inte > The `Podfile` version changes depending on your version of `react-native`. Refer to https://react-native-community.github.io/upgrade-helper/ for the specific version of `Podfile` you should be using. Ultimately, your `Podfile` should look something similar to this: -[Podfile Template](https://github.com/facebook/react-native/blob/main/packages/react-native/template/ios/Podfile) +[Podfile Template](https://github.com/react-native-community/template/blob/main/template/ios/Podfile) After you have created your `Podfile`, you are ready to install the React Native pod. diff --git a/docs/stylesheet.md b/docs/stylesheet.md index a4872a50f45..3a0be6fd150 100644 --- a/docs/stylesheet.md +++ b/docs/stylesheet.md @@ -3,7 +3,7 @@ id: stylesheet title: StyleSheet --- -A StyleSheet is an abstraction similar to CSS StyleSheets +A StyleSheet is an abstraction similar to CSS StyleSheets. ```SnackPlayer name=StyleSheet import React from 'react'; @@ -41,7 +41,8 @@ export default App; Code quality tips: - By moving styles away from the render function, you're making the code easier to understand. -- Naming the styles is a good way to add meaning to the low level components in the render function. +- Naming the styles is a good way to add meaning to the low level components in the render function, and encourage reuse. +- In most IDEs, using `StyleSheet.create()` will offer static type checking and suggestions to help you write valid styles. --- @@ -101,22 +102,20 @@ export default App; ### `create()` ```tsx -static create(styles: Object): Object; +static create(styles: Object extends Record): Object; ``` -Creates a StyleSheet style reference from the given object. +An identity function for creating styles. The main practical benefit of creating styles inside `StyleSheet.create()` is static type checking against native style properties. --- ### `flatten()` ```tsx -static flatten(style: Object[]): Object; +static flatten(style: Array>): Object; ``` -Flattens an array of style objects, into one aggregated style object. Alternatively, this method can be used to lookup IDs, returned by `StyleSheet.register`. - -> **NOTE:** Exercise caution as abusing this can tax you in terms of optimizations. IDs enable optimizations through the bridge and memory in general. Referring to style objects directly will deprive you of these optimizations. +Flattens an array of style objects, into one aggregated style object. ```SnackPlayer name=Flatten import React from 'react'; @@ -163,8 +162,6 @@ const flattenStyle = StyleSheet.flatten([page.text, typography.header]); export default App; ``` -This method internally uses `StyleSheetRegistry.getStyleByID(style)` to resolve style objects represented by IDs. Thus, an array of style objects (instances of `StyleSheet.create()`), are individually resolved to, their respective objects, merged as one and then returned. This also explains the alternative use. - --- ### `setStyleAttributePreprocessor()` diff --git a/docs/the-new-architecture/landing-page.md b/docs/the-new-architecture/landing-page.md index 6ae1cd3097b..3fdcf6546f0 100644 --- a/docs/the-new-architecture/landing-page.md +++ b/docs/the-new-architecture/landing-page.md @@ -215,13 +215,14 @@ You can follow along and contribute in our dedicated [discussions & proposals](h ## Should I use the New Architecture today? -Today, the New Architecture is considered experimental and we continue to refine backwards compatibility for a better adoption experience. +At [React Conf 2024](https://youtu.be/Q5SMmKb7qVI?feature=shared&t=1219), we announced that the React Native [New Architecture is now in Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189). -The team plans to enable the New Architecture by default in an upcoming React Native release by the end of 2024. +We believe that the New Architecture is very close to be used in production. -Our guidance is as follows +Our guidance is as follows: - For most production apps, we do _not_ recommend enabling the New Architecture today. Waiting for the official release will offer the best experience. +- However, we do advise for you to plan for the migration and to start trying it out. - If you maintain a React Native library, we recommend enabling it and verifying your use cases are covered. You can find the [instructions here](https://github.com/reactwg/react-native-new-architecture#guides). ### Enable the New Architecture diff --git a/docs/upgrading.md b/docs/upgrading.md index a5ca28c5e07..26392f3db4c 100644 --- a/docs/upgrading.md +++ b/docs/upgrading.md @@ -21,10 +21,6 @@ You first need to select from and to which version you wish to upgrade, by defau 💡 Major updates will show an "useful content" section on the top with links to help you out when upgrading. -:::tip -Or you can run the `npx react-native upgrade`, which will automatically check your current version and the latest version available and will show you the link to the Upgrade Helper page with the versions already selected. -::: - ### 2. Upgrade dependencies The first file that is shown is the `package.json`, it's good to update the dependencies that are showing in there. For example, if `react-native` and `react` appears as changes then you can install it in your project by running following commands: @@ -52,21 +48,7 @@ yarn add react@{{REACT_VERSION}} ### 3. Upgrade your project files -The new release may contain updates to other files that are generated when you run `npx react-native init`, those files are listed after the `package.json` in the Upgrade Helper page. If there aren't other changes then you only need to rebuild the project to continue developing. - -In case there are changes then you can either update them manually by copying and pasting from the changes in the page or you can do it with the React Native CLI upgrade command by running: - -```shell -npx react-native upgrade -``` - -This will check your files against the latest template and perform the following: - -- If there is a new file in the template, it is created. -- If a file in the template is identical to your file, it is skipped. -- If a file is different in your project than the template, you will be prompted; you have options to keep your file or overwrite it with the template version. - -> Some upgrades won't be done automatically with the React Native CLI and require manual work, e.g. `0.28` to `0.29`, or `0.56` to `0.57`. Make sure to check the [release notes](https://github.com/facebook/react-native/releases) when upgrading so that you can identify any manual changes your particular project may require. +The new release may contain updates to other files that are generated when you run `npx react-native init`, those files are listed after the `package.json` in the [Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) page. If there aren't other changes then you only need to rebuild the project to continue developing. In case there are changes you need to manually apply them into your project. ### Troubleshooting diff --git a/package.json b/package.json index 10c69afd3cd..36ad4a98ace 100644 --- a/package.json +++ b/package.json @@ -36,14 +36,8 @@ "yarn-deduplicate": "^5.0.0" }, "resolutions": { - "axios": "^1.6.2", "trim": "^1.0.1", "update-notifier": "^6.0.2", "@sideway/formula": ">=3.0.1" - }, - "comments": { - "resolutions": { - "axios": "Removable after Docusaurus commit with https://github.com/facebook/docusaurus/pull/9547" - } } } diff --git a/website/blog/2024-06-25-use-a-framework-to-build-react-native-apps.md b/website/blog/2024-06-25-use-a-framework-to-build-react-native-apps.md new file mode 100644 index 00000000000..d1c2e367afa --- /dev/null +++ b/website/blog/2024-06-25-use-a-framework-to-build-react-native-apps.md @@ -0,0 +1,74 @@ +--- +title: 'Use a framework to build React Native apps' +authors: [cortinico] +tags: [announcement] +date: 2024-06-25 +--- + +At [React Conf](https://www.youtube.com/live/0ckOUBiuxVY?si=pU4qP4eB5iWfY0IG&t=2320), we updated our guidance on the best tool to get started building React Native apps: a **React Native framework** - a toolbox with all the necessary APIs to let you build production-ready apps. + +Using React Native frameworks, such as Expo, is now the **recommended** approach to create new apps. + +In this blogpost we want to walk you through what they are in detail and what they mean for you as a React Native developer starting a new project. + + + +## What is a React Native framework? + +If you’ve been building production apps, you probably know that there is a set of common problems you will need to solve sooner or later. + +When building any application on either web or native, you probably want your users to navigate through different screens, fetch data, and store the state of your user. But for native apps there is even more to deal with: you need tools to upgrade your native code between React Native versions, manage compatible versions of all of your dependencies, and deal with native build tools. + +It takes a village to bring an app from idea to production without the right tools. + +We want you to focus on writing beautiful applications and features for your users, and not solving those common problems over and over. + +That’s why we believe that the best way for you to experience React Native is through a framework that offers a toolbox with all the necessary tools you need to build production-ready applications. + +We’ve found that **you’re either using a framework or you’re building your own framework**. + +There is nothing wrong with building your own framework, by crafting your own solutions for routing, navigation, deploying, and so on. Major corporations like Meta and Microsoft build their own frameworks internally to integrate deeply into their brownfield apps. But we believe that most people will be better off by using an existing framework. + +If you’ve been using React on web, you’re probably familiar with a similar concept of [production-grade React frameworks](https://react.dev/learn/start-a-new-react-project#production-grade-react-frameworks). + +As of today, the only recommended community framework for React Native is [Expo](https://docs.expo.dev/). Folks at Expo have been investing in the React Native ecosystem since the early days of React Native and as of today, we believe the developer experience offered by Expo is best in class. + +:::note + +Expo, the framework, is and will remain free and open source, while Expo Application Services (EAS) is an optional paid service. + +::: + + + +If you haven’t used Expo recently, make sure you don’t miss [this talk from Kadi @ Expo](https://www.youtube.com/live/0ckOUBiuxVY?si=N-WSfmAJSMfd6wDL&t=3888) where she’s showcasing what you can do with Expo in 2024. + +We’ve also updated the [Getting Started page](https://reactnative.dev/docs/environment-setup) on the website to reflect this recommendation. + +## How will frameworks affect you? + +If you’re already using a recommended framework such as Expo, you’re already good to go! + +If you'd like to migrate your existing app to Expo, you can find instructions on [the official Expo website](https://docs.expo.dev/bare/overview/). Expo offers many benefits, such as an easier way to [upgrade your React Native version](https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/), a better developer experience, and much more. + +However, if you can't or don't want to migrate to Expo, that's fine too. Using React Native without an official framework will continue to be supported. The tools you’ve been using such as React Native Community CLI, Template and [Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) will keep on working as usual. + +The `react-native init` command has moved out of core and is now accessible via: + +``` +npx @react-native-community/cli@latest init +``` + +and on GitHub at [react-native-community/cli](https://github.com/react-native-community/cli). + +If you’re a React Native library developer, we collected a list of recommendations on which APIs to use. [Read more in the RFC](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0759-react-native-frameworks.md#what-do-we-recommend-to-react-native-library-developers). + +## Further reading + +If you’re interested in learning more about the reasoning behind this decision, we invite you to read the [RFC0759: React Native Frameworks](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0759-react-native-frameworks.md#what-do-we-recommend-to-react-native-library-developers). This RFC is a result of a multi-month effort involving countless discussions and brainstorming among different partners and players of the React Native ecosystem. + +While Expo today is the only recommended framework, the RFC also contains [guidelines](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0759-react-native-frameworks.md#becoming-a-react-native-framework) on how to become a recommended framework, as we hope to see more competition and innovation in this space. + +Moreover, you should check out the talk [useFrameworks()](https://www.youtube.com/watch?v=lifGTznLBcw) at App.js 2024 where we presented this RFC and the necessary changes in a short format. + +We believe that by clarifying the respective responsibilities of React Native Core and the Frameworks, we can foster a healthier ecosystem and drive growth & innovation for React Native. diff --git a/website/blog/2024-08-12-release-0.75.md b/website/blog/2024-08-12-release-0.75.md new file mode 100644 index 00000000000..c3e57b6d8bd --- /dev/null +++ b/website/blog/2024-08-12-release-0.75.md @@ -0,0 +1,490 @@ +--- +title: 'React Native 0.75 - Support for Percentage Values in Layout, New Architecture Stabilization, Template & init Updates, and more' +authors: + [ + gabrieldonadel, + siddharthkul, + titozzz, + blakef, + cipolleschi, + cortinico, + ] +tags: [engineering] +date: 2024-08-14 +--- + +Today we are excited to release React Native 0.75! + +This release ships several features, such as Yoga 3.1 with support for `%` values, several stabilization fixes for the New Architecture, and the introduction of the recommendation for users to use a React Native Framework. + +### Highlights + +- [Yoga 3.1 and Layout Improvements](/blog/2024/08/12/release-0.75#yoga-31-and-layout-improvements) +- [New Architecture Stabilization](/blog/2024/08/12/release-0.75#new-architecture-stabilization) +- [Using Frameworks](/blog/2024/08/12/release-0.75#using-frameworks) + +### Breaking Changes + +- [Touchables in TypeScript can’t be used as types in Generic expressions anymore](/blog/2024/08/12/release-0.75#touchables-in-typescript-cant-be-used-as-types-in-generic-expressions-anymore) +- [Last version supporting minSdk 23 and minIOSVersion 13.4](/blog/2024/08/12/release-0.75#last-version-supporting-minsdk-23-and-miniosversion-134) +- [Android: JSIModule has been deleted](/blog/2024/08/12/release-0.75#android-jsimodule-has-been-deleted) +- [Android: PopUp Menu removed from core](/blog/2024/08/12/release-0.75#android-popup-menu-moved-to-separate-package) +- [iOS: Finalized Push Notifications deprecation work](/blog/2024/08/12/release-0.75#ios-finalized-pushnotificationios-deprecation-work) +- [Community CLI: Removal of ram-bundle and profile-hermes commands](/blog/2024/08/12/release-0.75#community-cli-removal-of-ram-bundle-and-profile-hermes-commands) + + + +## Highlights + +### Yoga 3.1 and Layout Improvements + +Since we last shipped Yoga [version 3.0](https://reactnative.dev/blog/2024/04/22/release-0.74#yoga-30) in React Native 0.74, we kept on pushing many improvements and new layout capabilities for your applications. React Native 0.75 ships with Yoga 3.1 and you can learn more about what’s new in the official Yoga’s [release blog post](https://www.yogalayout.dev/blog/announcing-yoga-3.1). + +One notable and highly requested feature is the support for `%` values in various places, such as `gaps` and `translation` + +:::info +These features are available only for the New Architecture. If you are keen to use them, please consider migrating to it. +::: + +#### Percentage Values in Gaps + +With 0.75, the `gap`, `columnGap` and `rowGap` props described [here](https://reactnative.dev/docs/flexbox#row-gap-column-gap-and-gap) now support a string with a `%` value. + +For example: + +```tsx +function App(): React.JSX.Element { + return ( + + + + + + + + + + + + + + + + + + ); +} +``` + +Will be rendered as follows: + +| Android | iOS | +| ------------------------------------------------------------ | ---------------------------------------------------- | +| ![Android Gaps](../static/blog/assets/0.75-android-gaps.png) | ![iOS Gaps](../static/blog/assets/0.75-ios-gaps.png) | + +#### Percentage values in Translation + +The [`transform` prop](https://reactnative.dev/docs/transforms) can also now accept `%` as values for the `translate` transformations. + +For example, the following component would move the red square’s X coordinate by 100% of its width and the Y coordinate by 100% of its height: + +```tsx +function Translated() { + return ( + + + + ); +} +``` + +Will be rendered as follows: + +| Android | iOS | +| --------------------------------------------------------------------------- | ------------------------------------------------------------------ | +| ![Android Translation](../static/blog/assets/0.75-android-translations.png) | ![iOS Translation](../static/blog/assets/0.75-ios-translation.png) | + +### New Architecture Stabilization + +Since our announcement of the [New Architecture being in Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189) at React Conf, we shipped several bug fixes and improvements to its stability. + +Our goal is for the New Architecture to be considered stable in the near future. Therefore, in the last few months we focused on bridging the gaps between the Old and the New Architecture. Some examples of bugs and missing features we fixed are: + +- Fix `adjustsFontSizeToFit` on Android ([#44075](https://github.com/facebook/react-native/pull/44075)) +- Fix `textAlign` not working with inline views on Android ([#44146](https://github.com/facebook/react-native/pull/44146)) +- Fix text baseline being moved up on iOS ([#44932](https://github.com/facebook/react-native/pull/44932)) + +Together with the folks at Expo, we also worked on adding information about New Architecture support in the [React Native Directory](https://reactnative.directory/), so it will be immediately clear for you if a library already supports the New Architecture or not: + +![React Native Directory](../static/blog/assets/0.75-rn-directory.png) + +We also invite you to take part in the [New Architecture survey](https://t.co/ucAA58hnFu). This survey is key for us to collect precious feedback on the next steps for the New Architecture rollout. + +We also want to share a post we published in the New Architecture Working Group about [Supporting UIManager in the New Architecture](https://github.com/reactwg/react-native-new-architecture/discussions/201). This post offers an API overview of the `UIManager` API on Android and how it can help the migration of more advanced apps & libraries. + +This release contains also a new API which is now the blessed way to access the `jsi::Runtime`. + +#### Accessing `jsi::Runtime` in TurboModules + +In the past, there has never been a recommended way from native modules to access the `jsi::Runtime`, and consumers would work around the framework to do so in risky ways. In 0.74, we introduced experimental APIs providing safe access to the `jsi::Runtime`, and we’re happy to announce their stability for 0.75. + +
+Examples on how to access the jsi::Runtime + +On iOS, you can make your Turbo Native Module conform to the protocol `RCTTurboModuleWithJSIBindings`. You can now implement `installJSIBindingsWithRuntime`, which will give you thread-safe access to the runtime. + +```objc +@interface RCTSampleTurbo Module () +@end + +#pragma mark - RCTTurboModuleWithJSIBindings +- (void)installJSIBindingsWithRuntime:(jsi::Runtime &)runtime { + runtime.global().setProperty( + runtime, + "myGlobalFunction", + jsi:: Function::createFromHost Function(...)); +} +``` + +On Android, you can make your Turbo Native Module conform to the interface `TurboModuleWithBindings`. You can now implement the JNI method `getBindingsInstaller`, which will give you thread-safe access to the runtime in C++. + +```java +public class SampleTurboModule extends NativeSampleTurboModuleSpec implements TurboModuleWithJSIBindings + +@Override +public native BindingsInstallerHolder getBindingsInstaller(); +``` + +```cpp +// C++ +jni::local_ref SampleTurboModuleJSIBindings::getBindingsInstaller(jni::alias_ref jobj) { + return BindingsInstallerHolder::newObjectCxxArgs( + [](jsi::Runtime& runtime) { + runtime.global().setProperty( + runtime, + “myGlobalFunction”, + jsi::Function::createFromHostFunction(...)); + } + ); +} +``` + +If you’re on the UI thread and you need to access the runtime, we introduced a new API: `CallInvoker`. It consists of a single method, `invokeAsync`, that will jump onto the JS thread to safely execute some work using the JS runtime. These APIs are forward compatible. + +On iOS, we’ve provided the protocol `RCTCallInvokerModule`. After conforming to this protocol, our infrastructure will decorate the module with access to the `CallInvoker`. + +```objc +@interface RCTSampleTurboModule() + +[self.callInvoker callInvoker].invokeAsync([&](jsi::Runtime& runtime) { + // do stuff on JS thread +} +``` + +On Android, the `CallInvoker` is accessible through the `ReactContext` in a JNI wrapper called `CallInvokerHolder`, where you can then call `invokeAsync` after crossing the JNI boundary. + +```java +// Java +public abstract CallInvokerHolder getJSCallInvokerHolder(); +``` + +```cpp +// C++ +jsCallInvokerHolder->cthis()->getCallInvoker()->invokeAsync([&](jsi::Runtime& rt) { + // do stuff on JS thread +}); +``` + +
+ +### Using Frameworks + +As we shared at React Conf earlier this year, the recommended way to build a React Native app is now through a framework, such as Expo. + +You can read more about this guidance on our previous blog-post: "[Use a framework to build React Native apps](https://reactnative.dev/blog/2024/06/25/use-a-framework-to-build-react-native-apps)". + +We want to set up new React Native users for success. We believe that using a framework makes you as productive as possible, and offers you the best developer experience when building new apps. + +To reflect those recommendations, this version includes the following changes: + +- We moved the `/template` folder from the `react-native` package to a separate repository: [`react-native-community/template`](https://github.com/react-native-community/template). +- We’re sunsetting the `react-native init` command as of December 31st 2024. + +If you’re already using a framework such as Expo, those changes won’t impact you at all. You’ll be able to use React Native 0.75 together with Expo SDK 51. + +If you’re not using a framework or you’re building your own framework, let’s see how those changes will impact you. + +#### Moving the template to react-native-community/template + +Historically, `react-native` used to ship a `/template` folder inside the NPM package which was used by the Community CLI to create new projects. This made updating the template quite slow as we needed a new React Native release for every template change. + +With our latest recommendation to use a framework, we feel that shipping an opinionated template inside our core NPM package was not aligned with [our vision](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0759-react-native-frameworks.md). + +Therefore, we decided to move the template to the [`@react-native-community/template`](https://www.npmjs.com/package/@react-native-community/template) package. + +This will make it easier for the community to maintain and evolve the template, without having to rely on a React Native release for every change. Moreover, this brings the template closer to the Community CLI and will make it easier for everyone to inspect and depend on the template as a separate package. + +This change should be completely transparent to users who create new projects using the Community CLI. From now on, new issues related to the template should be reported on the [template issue tracker](https://github.com/react-native-community/template/issues?q=sort%3Aupdated-desc+is%3Aissue+is%3Aopen). All the various tools that depend on the template, such as the upgrade-helper, have also been updated accordingly and will continue working as usual. + +#### Sunsetting react-native init + +Similarly to the template, the `react-native init` command was also adapted to align with the new recommendation. + +Historically, `react-native init` was the default command to create new React Native projects. However, in 2024, we feel this command does not provide the same onboarding experience that a framework would offer you. That is why we are not recommending it anymore, instead you should use a framework like Expo. + +You can still use `react-native init` to create new projects using the Community CLI & template today, but you will see the following warning: + +![Init Deprecation](../static/blog/assets/0.75-deprecation.png) + +Starting from December 31st 2024, the `init` command won’t create a project anymore. You will have to either: + +- Use a framework such as Expo, with its own dedicate command to create a new project, such as `npx create-expo-app` +- Invoke the Community CLI directly with `npx @react-native-community/cli init` + +Please note that `react-native config` and all the other commands than `init` will continue working as usual. + +:::info +In order to offer a smoother migration experience, the `react-native@0.75.0` package is still depending on `@react-native-community/cli` but we’re planning on removing this dependency in the near future. +::: + +#### Auto-linking performance improvements + +During this work in updating the `init` command, we also spent time rewriting the auto-linking logic to be more performant. This results in faster build speed for both Android and iOS. + +With React Native 0.75, if you are using Expo, the auto-linking step could now run ~6.5x faster on Android and ~1.5x faster on iOS. You can read more about these improvements [here](https://github.com/react-native-community/discussions-and-proposals/discussions/814). + +### Breaking changes + +While this upcoming section seems lengthy, we expect that the breaking changes here will mostly impact a small group of users that are using React Native in more advanced ways. + +We want to present them here for the sake of completeness and for reference. + +#### Touchables in TypeScript can’t be used as types in Generic expressions anymore + +`TouchablesOpacity` and `TouchableHighlights` components have been converted to functional components. This means that they cannot be used as `value & type` anymore. So, for example, the following is not valid anymore: + +```tsx +import {TouchableHighlight} from 'react-native'; +const ref = useRef(); +// ^^^ TS2749: TouchableHighlight refers to a value, but is being used as a type here. +// Did you mean typeof TouchableHighlight? +``` + +Instead, you should use the built-in React type `React.ElementRef` or, alternatively, the `View` type: + +```tsx +import {TouchableHighlight} from 'react-native'; +const ref1 = + useRef>(); +// or +const ref2 = useRef(); +``` + +#### Last version supporting minSdk 23 and minIOSVersion 13.4 + +These are not breaking changes in 0.75 _per se_, but we want to share that React Native 0.75 will be the last version of React Native to support minSdk 23 (Android 6.0) and minIOSVersion 13.4. + +Starting from React Native 0.76, the minSdk version will be 24 (Android 7.0) and the minIOSVersion will be 15.1. + +You can read more about it in our official announcement [for Android](https://github.com/react-native-community/discussions-and-proposals/discussions/802) and [for iOS](https://github.com/react-native-community/discussions-and-proposals/discussions/812). + +#### Android: JSIModule has been deleted + +The `com.facebook.react.bridge.JSIModule` ([source](https://github.com/facebook/react-native/blob/0.73-stable/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/bridge/JSIModule.java)) was an API that we temporarily introduced to allow a Native Module to access JSI directly on Android. +The accessors for this API [were deprecated in 0.74](https://reactnative.dev/blog/2024/04/22/release-0.74#other-breaking-changes), and we verified that there was no meaningful usage of this API in Open Source so we’re removing it in 0.75. +You can use [Turbo Native Modules](https://github.com/reactwg/react-native-new-architecture/blob/main/docs/turbo-modules.md) instead as an alternative. + +#### Android: PopUp Menu moved to separate package + +In 0.74, [we moved the Android’s `PopUpMenu` to a separate package](https://reactnative.dev/blog/2024/04/22/release-0.74#other-breaking-changes) under the `@react-native` scope. +In 0.75, we are removing the remaining methods that were still in core: + +- `UIManagerModule.showPopupMenu()` +- `UIManagerModule.dismissPopupMenu()` + +As an alternative, please use the please use the `` component, which lives in the [`@react-native/popup-menu-android`](https://www.npmjs.com/search?q=%40react-native%2Fpopup-menu-android) package. + +#### iOS: Finalized PushNotificationIOS deprecation work + +In 0.74, we [deprecated](https://reactnative.dev/blog/2024/04/22/release-0.74#api-changes-to-pushnotificationios-deprecated) some APIs from the `PushNotificationIOS` module. + +In 0.75, we’ve deleted these APIs to migrate off legacy representations of notifications metadata. + +The APIs that have been deleted are: + +```objc + + (void)didReceiveLocalNotification:(UILocalNotification *)notification; + + (void)didReceiveRemoteNotification:(NSDictionary *)notification; +``` + +Instead, use `didReceiveNotification:(UNNotification *)notification`. + +#### Community CLI: Removal of ram-bundle and profile-hermes commands + +We would like to announce two significant removals coming from the Community CLI: the commands `ram-bundle` and `profile-hermes`. + +The `ram-bundle` command was introduced in React Native 0.59 to let you run your bundles by loading them directly in memory. This functionality is now superseded by Hermes, our default JS engine. You should not use the `ram-bundle` command. + +The `profile-hermes` command was a tool to help you profile the CPU performance of your JavaScript code. This used the old `.cpuprofile` format, which is no longer supported in recent versions of Chrome. Including this capability as a standalone command is also something we are moving away from as we work on raising the quality bar of our debugging tools. CPU profiling can now be accessed from the "Profiler" panel in the [Experimental New Debugger](https://reactnative.dev/docs/0.74/debugging?js-debugger=new-debugger#opening-the-debugger) (Note: this is not accessible if connecting to Hermes from Chrome). + +## Other Breaking changes + +### General + +- **Codegen** + - Changed slightly the name of pure C++ TurboModules generated classes and structs. We dropped the `Cxx` token from their names + - Float enums are not supported anymore due to possible precision errors + - Throw an error when passing `null` in JS to a non nullable argument in Native +- **Linting** + - ESLint config no longer run prettier when linting +- **C++** + - `ScrollViewShadowNode` now requires a new `bool includeTransform` parameter in the constructor + - Removed `executeAsynchronously` and `executeSynchronously_CAN_DEADLOCK` from RuntimeExecutor + - Renamed `JsErrorHandlingFunc` to `OnJsError` in `JsErrorHandler.h` + - Renamed `handleJsError` to `OnJsError` in `handleFatalError.h` + - Removed unused `import` from `ReactPrimitives.h` + - `LongLivedObjectCollection` and `LongLivedObject` get methods now accepts a Runtime parameter + - Renamed the `utils/jsi.h` file to `jsi-utils.h` +- **TextInput** + - Removed deprecated `onTextInput` callback +- **Pressability** + - Removed `onLongPressShouldCancelPress_DEPRECATED`, `onResponderTerminationRequest_DEPRECATED`, and `onStartShouldSetResponder_DEPRECATED` method + +#### Android + +- **ReactViewBackgroundDrawable** + - Deprecated in favor of `CSSBackgroundDrawable`. This also remove some APIs from `ReactViewBackgroundDrawable` and from `ColorUtil` +- **ReactContext** + - `ReactContext` and `ReactApplicationContext` are now abstract. Use `BridgeReactContext` and `BridgelessReactContext` instead + - Delete `ReactContext.initializeWithInstance()`. Please use `BridgeReactInstance` instead + - Remove `BridgelessReactContext.getJavaScriptContextHolder()` from. Please use `BridgelessCatalystInstance` instead + - Remove `ReactContext.getRuntimeExecutor()`. Please use `BridgelessCatalystInstance` +- **Layout** + - Support percentage flex gap values. This changes the parameters of some methods like `setGap`, `setRowGap` and `setColumnGap` from float to dynamic + - Requires `supportsRTL` in Android Manifest +- **Runtime** + - Removed `ReactJsExceptionHandler` from ReactHostImpl + - Make the app responsible to return the core turbomodules when not using the default template +- **DevSupport** + - Changed the `DevSupportManagerFactory.create()` to accept a new `PausedInDebuggerOverlayManager` parameter +- **Measurement** + - Deleted `UIManagerModule.measureLayoutRelativeToParent()` + +#### iOS + +- **Runtime** + - Remove `[RCTHost getSurfacePresenter]` and `[RCTHost getModuleRegistry]` + - Remove `EventPriority` class and always use the default `EventPriority::AsynchronousBatched`. If build fails, please remove any use of `EventPriority` +- **Image** + - Remove unused `RCTImageLoadingPerfInstrumentationEnabled` +- **Error Handling** + - Remove `RCTRedBox` access through `RCTBridge` +- **CocoaPods** + - Renamed `BUILD_FROM_SOURCE` to `RCT_BUILD_HERMES_FROM_SOURCE` + - Renamed `React-Codegen` to `ReactCodegen` for better compatibility with `use_frameworks` and Swift +- **TextInput** + - Remove deprecated `onTextInput` callback + +### Acknowledgements + +React Native 0.75 contains over **1491 commits** from **165 contributors**. Thanks for all your hard work! + +Thanks to all the additional authors that worked on documenting features in this release post: + +- [Nick Gerleman](https://github.com/NickGerleman) and [Joe Vilches](https://github.com/joevilches) for _Yoga 3.1 and Layout Improvements_ +- [Arushi Kesarwani](https://github.com/arushikesarwani94) for Supporting UIManager in the New Architecture +- [Phillip Pan](https://github.com/philIip) for Accessing jsi::Runtime in TurboModules +- [Alan Lee](https://github.com/alanleedev) and [Soe Lynn](https://github.com/realsoelynn) for Last version supporting minSdk 23 and minIOSVersion 13.4 +- [Kudo Chien](https://github.com/kudo) for Auto-linking performance improvements +- [Alex Hunt](https://github.com/huntie) for Removal of `ram-bundle` and `profile-hermes` commands + +### Upgrade to 0.75 + +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. + +To create a new project: + +```bash +npx @react-native-community/cli@latest init MyProject –-version latest +``` + +If you use Expo, React Native 0.75 will be supported in Expo SDK 51. + +:::info +0.75 is now the latest stable version of React Native and 0.72.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). We aim to publish a final end-of-life update of 0.72 in the near future. +::: diff --git a/website/blog/authors.yml b/website/blog/authors.yml index ff1b74cf7b3..56d033bcc71 100644 --- a/website/blog/authors.yml +++ b/website/blog/authors.yml @@ -140,3 +140,21 @@ alanjhughes: title: Software Engineer at Expo url: https://github.com/alanjhughes image_url: https://github.com/alanjhughes.png + +blakef: + name: Blake Friedman + title: Software Engineer at Meta + url: https://github.com/blakef + image_url: https://github.com/blakef.png + +gabrieldonadel: + name: Gabriel Donadel Dall'Agnol + title: Software Engineer at Expo + url: https://github.com/gabrieldonadel + image_url: https://github.com/gabrieldonadel.png + +siddharthkul: + name: Siddharth Kulkarni + title: Software Engineer at Coinbase + url: https://github.com/siddharthkul + image_url: https://github.com/siddharthkul.png diff --git a/website/sidebars.json b/website/sidebars.json index 2a64bdc4694..d6e033bc061 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -116,7 +116,7 @@ ] } ], - "Experimental": ["the-new-architecture/landing-page"] + "New Architecture": ["the-new-architecture/landing-page"] }, "api": { "APIs": [ diff --git a/website/static/blog/assets/0.75-android-gaps.png b/website/static/blog/assets/0.75-android-gaps.png new file mode 100644 index 00000000000..b80fcdb77dc Binary files /dev/null and b/website/static/blog/assets/0.75-android-gaps.png differ diff --git a/website/static/blog/assets/0.75-android-translations.png b/website/static/blog/assets/0.75-android-translations.png new file mode 100644 index 00000000000..bc39146d995 Binary files /dev/null and b/website/static/blog/assets/0.75-android-translations.png differ diff --git a/website/static/blog/assets/0.75-deprecation.png b/website/static/blog/assets/0.75-deprecation.png new file mode 100644 index 00000000000..2647a2b280b Binary files /dev/null and b/website/static/blog/assets/0.75-deprecation.png differ diff --git a/website/static/blog/assets/0.75-ios-gaps.png b/website/static/blog/assets/0.75-ios-gaps.png new file mode 100644 index 00000000000..a361cbb5da6 Binary files /dev/null and b/website/static/blog/assets/0.75-ios-gaps.png differ diff --git a/website/static/blog/assets/0.75-ios-translation.png b/website/static/blog/assets/0.75-ios-translation.png new file mode 100644 index 00000000000..55af6438e89 Binary files /dev/null and b/website/static/blog/assets/0.75-ios-translation.png differ diff --git a/website/static/blog/assets/0.75-rn-directory.png b/website/static/blog/assets/0.75-rn-directory.png new file mode 100644 index 00000000000..8b315acf2fe Binary files /dev/null and b/website/static/blog/assets/0.75-rn-directory.png differ diff --git a/website/versioned_docs/version-0.74/the-new-architecture/landing-page.md b/website/versioned_docs/version-0.74/the-new-architecture/landing-page.md index 6ae1cd3097b..3fdcf6546f0 100644 --- a/website/versioned_docs/version-0.74/the-new-architecture/landing-page.md +++ b/website/versioned_docs/version-0.74/the-new-architecture/landing-page.md @@ -215,13 +215,14 @@ You can follow along and contribute in our dedicated [discussions & proposals](h ## Should I use the New Architecture today? -Today, the New Architecture is considered experimental and we continue to refine backwards compatibility for a better adoption experience. +At [React Conf 2024](https://youtu.be/Q5SMmKb7qVI?feature=shared&t=1219), we announced that the React Native [New Architecture is now in Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189). -The team plans to enable the New Architecture by default in an upcoming React Native release by the end of 2024. +We believe that the New Architecture is very close to be used in production. -Our guidance is as follows +Our guidance is as follows: - For most production apps, we do _not_ recommend enabling the New Architecture today. Waiting for the official release will offer the best experience. +- However, we do advise for you to plan for the migration and to start trying it out. - If you maintain a React Native library, we recommend enabling it and verifying your use cases are covered. You can find the [instructions here](https://github.com/reactwg/react-native-new-architecture#guides). ### Enable the New Architecture diff --git a/website/versioned_sidebars/version-0.74-sidebars.json b/website/versioned_sidebars/version-0.74-sidebars.json index 16f9e360931..f82b82d9763 100644 --- a/website/versioned_sidebars/version-0.74-sidebars.json +++ b/website/versioned_sidebars/version-0.74-sidebars.json @@ -115,7 +115,7 @@ ] } ], - "Experimental": ["the-new-architecture/landing-page"] + "New Architecture": ["the-new-architecture/landing-page"] }, "api": { "APIs": [ diff --git a/yarn.lock b/yarn.lock index 13cd503e571..f9988f1db6a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4234,11 +4234,6 @@ async@^3.2.3: resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c" integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ== -asynckit@^0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" - integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== - at-least-node@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2" @@ -4261,15 +4256,6 @@ available-typed-arrays@^1.0.5: resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7" integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw== -axios@^1.6.2: - version "1.6.2" - resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2" - integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A== - dependencies: - follow-redirects "^1.15.0" - form-data "^4.0.0" - proxy-from-env "^1.1.0" - babel-core@^7.0.0-bridge.0: version "7.0.0-bridge.0" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece" @@ -5082,13 +5068,6 @@ combine-promises@^1.1.0: resolved "https://registry.yarnpkg.com/combine-promises/-/combine-promises-1.1.0.tgz#72db90743c0ca7aab7d0d8d2052fd7b0f674de71" integrity sha512-ZI9jvcLDxqwaXEixOhArm3r7ReIivsXkpbyEWyeOhzz1QS0iSgBPnWvEqvIQtYyamGCYA88gFhmUrs9hrrQ0pg== -combined-stream@^1.0.8: - version "1.0.8" - resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" - integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== - dependencies: - delayed-stream "~1.0.0" - comma-separated-tokens@^2.0.0: version "2.0.3" resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee" @@ -5683,11 +5662,6 @@ del@^6.1.1: rimraf "^3.0.2" slash "^3.0.0" -delayed-stream@~1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" - integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ== - denodeify@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/denodeify/-/denodeify-1.2.1.tgz#3a36287f5034e699e7577901052c2e6c94251631" @@ -6664,9 +6638,9 @@ fast-url-parser@1.1.3: punycode "^1.3.2" fast-xml-parser@^4.0.12, fast-xml-parser@^4.2.4: - version "4.3.2" - resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.3.2.tgz#761e641260706d6e13251c4ef8e3f5694d4b0d79" - integrity sha512-rmrXUXwbJedoXkStenj1kkljNF7ugn5ZjR9FJcwmCfcCbtOMDghPajbc+Tck6vE6F5XsDmx+Pr2le9fw8+pXBg== + version "4.4.1" + resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.4.1.tgz#86dbf3f18edf8739326447bcaac31b4ae7f6514f" + integrity sha512-xkjOecfnKGkSsOwtZ5Pz7Us/T6mrbPQrq0nh+aCO5V9nk5NLWmasAHumTKjiPJPWANe+kAZ84Jc8ooJkzZ88Sw== dependencies: strnum "^1.0.5" @@ -6853,7 +6827,7 @@ flow-parser@^0.206.0: resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.206.0.tgz#f4f794f8026535278393308e01ea72f31000bfef" integrity sha512-HVzoK3r6Vsg+lKvlIZzaWNBVai+FXTX1wdYhz/wVlH13tb/gOdLXmlTqy6odmTBhT5UoWUbq0k8263Qhr9d88w== -follow-redirects@^1.0.0, follow-redirects@^1.15.0: +follow-redirects@^1.0.0: version "1.15.6" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b" integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA== @@ -6897,15 +6871,6 @@ form-data-encoder@^2.1.2: resolved "https://registry.yarnpkg.com/form-data-encoder/-/form-data-encoder-2.1.4.tgz#261ea35d2a70d48d30ec7a9603130fa5515e9cd5" integrity sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw== -form-data@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" - integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== - dependencies: - asynckit "^0.4.0" - combined-stream "^1.0.8" - mime-types "^2.1.12" - format@^0.2.0: version "0.2.2" resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b" @@ -10892,7 +10857,7 @@ mime-types@2.1.18: dependencies: mime-db "~1.33.0" -mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34: +mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34: version "2.1.35" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== @@ -12301,11 +12266,6 @@ proxy-addr@~2.0.7: forwarded "0.2.0" ipaddr.js "1.9.1" -proxy-from-env@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" - integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== - public-ip@^4.0.1: version "4.0.4" resolved "https://registry.yarnpkg.com/public-ip/-/public-ip-4.0.4.tgz#b3784a5a1ff1b81d015b9a18450be65ffd929eb3"