-
Notifications
You must be signed in to change notification settings - Fork 203
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Prepare for soft-launch of new architecture #988
Changes from 1 commit
dda1325
ccc3244
283fa76
a97d5c2
47a3392
d7b10f3
17e40aa
2864c7b
8cce356
20f2cf9
235582f
07d9467
7b987d3
2ecb869
fb5a599
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
--- | ||
id: new-arch | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
title: New vs. Old Architecture | ||
--- | ||
|
||
The [New Architecture](https://reactnative.dev/docs/0.75/the-new-architecture/landing-page) is React Native's advanced rendering system which became the default in React Native 0.76. While React Native for Windows isn't yet making the New Architecture the default, we're excited to offer a sneak peek of the hard work that’s gone into supporting it, allowing developers to create applications using the new architecture. | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
With Fabric, RNW shifts from the previous "Paper" model, which relied heavily on XAML, to a Composition-first approach that can also host XAML islands as needed. This evolution aims to unify rendering logic cross-platform in C++, aligning more closely with the new WinAppSDK 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. | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
For those using UWP with RNW, rest assured: we’ll provide clear migration guidance 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 brings 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 | ||
``` | ||
|
||
## Milestones | ||
|
||
Our development progress is organized into milestones, each with clear goals to guide our work. We are currently focused on achieving full API parity and enhancing accessibility. Note that **community modules are not yet supported** in this soft launch phase, so most (if not all) won’t work in new architecture applications at this stage. | ||
|
||
| Milestone | Milestone Nickname | Milestone Description | | ||
| -- | -- | -- | | ||
| ☑️ M0 | Proof of Concept | <li>Internal contributors can manually create a Win32 app that renders JSX using Composition</li> | | ||
| ☑️ M1 | Experimental | <li>User can successfully initialize, build, and run a React Native Windows app on the new architecture. </li><li>User can use the _most common_ props/API’s.</li><li>User can use the _most common_ accessibility props/API’s. </li><li>User can observe _basic_ accessibility support within their app.</li><li>User will _not_ have access to full API parity with Paper.</li><li>User can use community modules within their app.</li><li>User _cannot_ use community modules with native UI within their app.</li> | | ||
| 🔜 M2 | Parity and Accessibility | <ul><li>User can use all props/API’s that were supported on Paper. </li><li>User can use all accessibility props/API’s that were supported on Paper. </li><li>User can observe compliant/delightful accessibility support within their app.</li></ul> | | ||
| ⬜ M3 | Ready for Modules | <li>User can use the _subset_ of community modules with native UI which have support for Fabric on Windows. </li> | | ||
| ⬜ M4 | Production Ready **_(Fabric now officially in support)_** | <li>User can use most community modules with native UI which had been supported on Paper.</li><li>User can view documentation for the new architecture on the React Native Windows website. </li><li>Platform will be validated against _most common_ app scenarios. </li> | | ||
| ⬜ M5 | New Default | <li>Platform will be validated against all app scenarios.</li><li>Paper architecture will be _deprecated_; Fabric will be the new default.</li> | | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## 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, feel free to open an issue in our [repo](https://github.com/microsoft/react-native-windows/issues). You can also leave comments on existing issues to help us prioritize what to tackle first! | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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 | ||
|
||
<li>View</li> | ||
<li>Text</li> | ||
<li>Image</li> | ||
<li>TextInput</li> | ||
<li>ScrollView</li> | ||
<li>Modal</li> | ||
<li>ActivityIndicator</li> | ||
<li>Switch</li> | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<li>RefreshControl</li> | ||
|
||
### Deprecated Components | ||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
TatianaKapos marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<li>Flyout</li> | ||
<li>Popup</li> |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -9,6 +9,8 @@ Make sure you have installed all of the [development dependencies](rnw-dependenc | |||||
|
||||||
For information around how to set up React Native, see the [React Native Getting Started Guide](https://reactnative.dev/docs/getting-started). | ||||||
|
||||||
> **Interested in exploring the new architecture?** We are "soft-launching" our implementation of the new architecture. If you’d like to be an early adopter, check out the instructions in the [New Architecture Guide](NewArch.md) and discover new templates available in [init-windows-cli](init-windows-cli.md#templates). | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think "soft-launch" is purely internal, and perhaps "preview" is better? Checking with others.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. changed to preview in documentation! |
||||||
|
||||||
## Create a new React Native project | ||||||
|
||||||
Remember to call `@react-native-community/cli init` from the place you want your project directory to live. | ||||||
|
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.md
to align with other file naming?