Prepare for soft-launch of new architecture #988
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| --- | ||
| id: new-arch | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| title: New vs. Old Architecture | ||
| --- | ||
|
|
||
| React Native's [new architecture](https://reactnative.dev/docs/0.75/the-new-architecture/landing-page) has become the default with [version 0.76](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here), bringing many framework improvements including the advanced rendering system [Fabric](https://reactnative.dev/architecture/fabric-renderer). While React Native for Windows isn't quite yet ready to make the new architecture the default, we've been hard at work and are excited to offer a sneak peek into how you can start adopting the new architecture for Windows. | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| On Windows, the implementation of the "Paper" rendering architecture was based on UWP and WinUI. To meet the requirements of the new "Fabric" rendering architecture, the Windows implementation now uses the modern [Windows App SDK Scene Graph](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/composition). This evolution aims to unify rendering logic cross-platform in C++ and aligns more closely with the Windows App SDK and WinUI3 that favor Win32 applications. This means that apps built with the new architecture will default to Win32 rather than UWP, a change made to enhance compatibility with Windows’ latest frameworks. Apps will also be able to take advantage of the modern WinUI3 control set from the Windows App SDK. | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| For developers using RNW based on UWP, **UWP Paper applications remain fully supported** and there are no immediate plans to remove support. However, **UWP and Fabric together are currently not supported**. We will provide clear migration guidance for UWP Paper apps once Fabric support is fully established. At this stage, Fabric on Windows is best suited for early adopters comfortable with a work-in-progress experience, and the documentation may not yet be as comprehensive. For those willing to dive in, the new architecture offers a glimpse into the future of React Native Windows development. | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ## Creating a new Architecture Application | ||
|
|
||
| 1. Create a new React Native Application. | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ```bat | ||
| npx --yes @react-native-community/cli@latest init MyApp --version "latest" | ||
| ``` | ||
|
|
||
| 2. Add React Native Windows as a dependency. | ||
|
|
||
| ```bat | ||
| yarn add react-native-windows@latest | ||
| ``` | ||
|
|
||
| 3. Add the New Architecture Template to your project. (Other templates can be found in [init-windows-cli](init-windows-cli.md#templates)) | ||
|
|
||
| ```bat | ||
| yarn react-native init-windows --template cpp-app --overwrite --logging | ||
| ``` | ||
|
|
||
| 4. Run your App. | ||
|
|
||
| ```bat | ||
| yarn react-native run-windows --logging | ||
| ``` | ||
|
|
||
| ## Development Progress | ||
|
|
||
| Our work on React Native Windows' new architecture follows a series of milestones designed to guide our development priorities. Currently, our focus is on achieving full API parity and improving accessibility features. **Community modules are not yet fully supported in this soft launch phase**, so most, if not all, modules will not be compatible with new architecture applications at this stage. | ||
|
|
||
| To track real-time progress and specific milestones, visit our [Fabric for React Native for Windows Issue](https://github.com/microsoft/react-native-windows/issues/12042). This page is regularly updated with our latest development goals, roadmap items, and areas we’re actively working on. We encourage developers to check there for the latest on what’s available, what’s in progress, and what’s coming next. | ||
|
|
||
| ## Work in Progress | ||
|
|
||
| As this is a soft launch of our new architecture, you may encounter some bumps and challenges along the way. We've already logged many issues tracking properties and features that are on our to-do list, but if you come across significant concerns that aren’t yet covered, please [open an issue](https://github.com/microsoft/react-native-windows/issues/new/choose) in the react-native-windows repo. You can also leave comments on [existing issues](https://github.com/microsoft/react-native-windows/issues) to help us prioritize what to tackle first! | ||
|
|
||
| ## Components | ||
|
|
||
| The new architecture introduces significant updates. By moving away from XAML, we gain the flexibility to incorporate components that weren’t previously available and reduce technical debt from legacy XAML components. Below is a list of components we plan to support in the new architecture, as well as those we are looking to deprecate. For developers currently using Flyout or Popup, we hope they’ll find Modal a suitable alternative. | ||
|
There was a problem hiding this comment. Should we have a guide that helps with the migration from Flyout/Popup to Modal? Is it truly a 1:1 drop-in replacement? There was a problem hiding this comment. I don't think we are in a spot where we have a migration plan for Flyout/Popup, there's still a lot of properties/events missing on Modal and discussions on windows-specific properties that should be included. It won't be a 1:1 replacement though as the properties are different. Will add that for future-work though!
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ### Supported Components | ||
|
|
||
| Each component below links to the corresponding issue label in our GitHub repo that tracks the progress of its parity with the new architecture | ||
|
|
||
| - [View](https://github.com/microsoft/react-native-windows/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Area%3A%20View%22%20%20label%3A%22Workstream%3A%20Component%20Parity%22%20label%3A%22Area%3A%20Fabric%22%20) | ||
| - [Text](https://github.com/microsoft/react-native-windows/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Area%3A%20Text%22%20%20label%3A%22Workstream%3A%20Component%20Parity%22%20label%3A%22Area%3A%20Fabric%22%20) | ||
| - [Image](https://github.com/microsoft/react-native-windows/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Area%3A%20Image%22%20%20label%3A%22Workstream%3A%20Component%20Parity%22%20label%3A%22Area%3A%20Fabric%22%20) | ||
| - [TextInput](https://github.com/microsoft/react-native-windows/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Area%3A%20TextInput%22%20%20label%3A%22Workstream%3A%20Component%20Parity%22%20label%3A%22Area%3A%20Fabric%22%20) | ||
| - [ScrollView](https://github.com/microsoft/react-native-windows/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Area%3A%20ScrollView%22%20%20label%3A%22Workstream%3A%20Component%20Parity%22%20label%3A%22Area%3A%20Fabric%22%20) | ||
| - [Modal](https://github.com/microsoft/react-native-windows/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Area%3A%20Modal%22%20%20label%3A%22Workstream%3A%20Component%20Parity%22%20label%3A%22Area%3A%20Fabric%22&page=1) | ||
| - [ActivityIndicator](https://github.com/microsoft/react-native-windows/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Area%3A%20ActivityIndicator%22%20%20label%3A%22Workstream%3A%20Component%20Parity%22%20label%3A%22Area%3A%20Fabric%22%20) | ||
| - [Switch](https://github.com/microsoft/react-native-windows/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Area%3A%20Switch%22%20%20label%3A%22Workstream%3A%20Component%20Parity%22%20label%3A%22Area%3A%20Fabric%22%20) | ||
| - [RefreshControl](https://github.com/microsoft/react-native-windows/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22Area%3A%20RefreshControl%22%20%20label%3A%22Workstream%3A%20Component%20Parity%22%20label%3A%22Area%3A%20Fabric%22%20) | ||
|
|
||
| ### Deprecated Components | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| - [Flyout](https://github.com/microsoft/react-native-windows/issues/11921) | ||
| - [Popup](https://github.com/microsoft/react-native-windows/issues/11921) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -40,7 +40,7 @@ React Native Windows apps are signed and packaged. [Packaging](https://docs.micr | |
| React Native Windows apps can be distributed, installed and updated in the following ways: | ||
|
|
||
| - via [the Microsoft Store](https://docs.microsoft.com/windows/apps/desktop/modernize/desktop-to-uwp-distribute). | ||
| - via [your private Store](https://techcommunity.microsoft.com/blog/intunecustomersuccess/adding-your-microsoft-store-for-business-and-education-apps-to-the-microsoft-sto/3788506) if you are a business or educational organization. See also [Distribute LOB apps to enterprises](https://docs.microsoft.com/windows/uwp/publish/distribute-lob-apps-to-enterprises). | ||
| - using [App Installer](https://docs.microsoft.com/windows/msix/app-installer/installing-windows10-apps-web). | ||
|
|
||
| It's worth noting that you cannot just "_copy an EXE_" as the app package contains more than just the main executable, including an app manifest, assets, dependent framework libraries, etc. | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -50,6 +50,7 @@ | |
| "metro-config-out-tree-platforms" | ||
| ], | ||
| "Experimental" : [ | ||
| "new-arch", | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| "hermes", | ||
| "NuGet" | ||
| ] | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,7 +8,7 @@ This doc reports the status progress of core components modules/APIs integration | |
|
|
||
| If there is a discrepancy here, or features are not being tracked that should be, please [submit an issue under vNext](https://github.com/microsoft/react-native-windows/issues/new?labels=vnext&template=vnext.md) to let us know. | ||
|
|
||
| You can keep track of our component and module API parity more closely on our [GitHub project board](https://github.com/microsoft/react-native-windows/projects). | ||
|
|
||
| ### Components | ||
| Below are a list of components and their status towards parity between the lean core components you'd find on iOS and Android and the functionality we have today. | ||
|
|
@@ -18,13 +18,13 @@ Below are a list of components and their status towards parity between the lean | |
| |`ActivityIndicator`|**Complete**|-|**Complete**| | ||
| |`Button`|**Complete**|-|**Complete**| | ||
| |`FlatList`|**Complete**|-|**Complete**| | ||
| |`Image`|Partial|[`Image` project board](https://github.com/microsoft/react-native-windows/projects)|Partial| | ||
| |`ScrollView`|Partial|[`ScrollView` project board](https://github.com/microsoft/react-native-windows/projects)|Partial| | ||
| |`Switch`|**Complete**|-|**Complete**| | ||
| |`Text`|**Complete** *(Some properties not supported due to device platform differences, docs coming soon)*|**Complete**|**Complete**| | ||
| |`TextInput`|Partial|[`TextInput` project board](https://github.com/microsoft/react-native-windows/projects)|Partial| | ||
| |`KeyboardAvoidingView`|**Complete**|-|Not supported| | ||
| |`View`|Partial (some Style props left)|[`ViewStyle` props project board](https://github.com/microsoft/react-native-windows/projects)|**Complete**| | ||
| |`VirtualizedList`|Partial|No Issues Logged|**Complete**| | ||
chrisglein marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| ### Modules | ||
|
|
@@ -34,7 +34,7 @@ Also tracked are Native Modules, as they are essential, even if not part of the | |
|
|
||
| |Module| `vnext` version Status | `vnext` Issues remaining | `current` version Status| | ||
| |:-|:-|:-|:-| | ||
| |`Accessibility`|Partial|[Accessibility project board](https://github.com/microsoft/react-native-windows/projects)|Partial| | ||
| |`LayoutProps`|**Completed**|-|Partial| | ||
| |`Alert`|**Completed**|-|**Complete**| | ||
| |`AppState`|Partial|[2144](https://github.com/microsoft/react-native-windows/issues/2144)|**Complete**| | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -41,7 +41,7 @@ React Native Windows apps are signed and packaged. [Packaging](https://docs.micr | |
| React Native Windows apps can be distributed, installed and updated in the following ways: | ||
|
|
||
| - via [the Microsoft Store](https://docs.microsoft.com/windows/apps/desktop/modernize/desktop-to-uwp-distribute). | ||
| - via [your private Store](https://techcommunity.microsoft.com/blog/intunecustomersuccess/adding-your-microsoft-store-for-business-and-education-apps-to-the-microsoft-sto/3788506) if you are a business or educational organization. See also [Distribute LOB apps to enterprises](https://docs.microsoft.com/windows/uwp/publish/distribute-lob-apps-to-enterprises). | ||
| - using [App Installer](https://docs.microsoft.com/windows/msix/app-installer/installing-windows10-apps-web). | ||
|
|
||
| It's worth noting that you cannot just "_copy an EXE_" as the app package contains more than just the main executable, including an app manifest, assets, dependent framework libraries, etc. | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -41,7 +41,7 @@ React Native Windows apps are signed and packaged. [Packaging](https://docs.micr | |
| React Native Windows apps can be distributed, installed and updated in the following ways: | ||
|
|
||
| - via [the Microsoft Store](https://docs.microsoft.com/windows/apps/desktop/modernize/desktop-to-uwp-distribute). | ||
| - via [your private Store](https://techcommunity.microsoft.com/blog/intunecustomersuccess/adding-your-microsoft-store-for-business-and-education-apps-to-the-microsoft-sto/3788506) if you are a business or educational organization. See also [Distribute LOB apps to enterprises](https://docs.microsoft.com/windows/uwp/publish/distribute-lob-apps-to-enterprises). | ||
| - using [App Installer](https://docs.microsoft.com/windows/msix/app-installer/installing-windows10-apps-web). | ||
|
|
||
| It's worth noting that you cannot just "_copy an EXE_" as the app package contains more than just the main executable, including an app manifest, assets, dependent framework libraries, etc. | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -41,7 +41,7 @@ React Native Windows apps are signed and packaged. [Packaging](https://docs.micr | |
| React Native Windows apps can be distributed, installed and updated in the following ways: | ||
|
|
||
| - via [the Microsoft Store](https://docs.microsoft.com/windows/apps/desktop/modernize/desktop-to-uwp-distribute). | ||
| - via [your private Store](https://techcommunity.microsoft.com/blog/intunecustomersuccess/adding-your-microsoft-store-for-business-and-education-apps-to-the-microsoft-sto/3788506) if you are a business or educational organization. See also [Distribute LOB apps to enterprises](https://docs.microsoft.com/windows/uwp/publish/distribute-lob-apps-to-enterprises). | ||
| - using [App Installer](https://docs.microsoft.com/windows/msix/app-installer/installing-windows10-apps-web). | ||
|
|
||
| It's worth noting that you cannot just "_copy an EXE_" as the app package contains more than just the main executable, including an app manifest, assets, dependent framework libraries, etc. | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you rename to
new-architecture.mdto align with other file naming?