Fabric for React Native for Windows

[chrisglein]

This issue is a hub for the various workstreams underway to bring the current "Paper" implementation of React Native on Windows to become a Fabric implementation.

About Fabric

Fabric is the new rendering system for React Native, designed to share more rendering logic cross-platform in C++. RNW's existing Paper renderer is built on XAML, with various parts dropping down into native Composition as need be; the new Fabric renderer will target Composition from the start, but with the ability to host XAML islands within.

Apps on the new architecture will be Win32 by default (This is a change from the Paper architecture where apps were UWP by default). The move away from UWP was a decision made to stay in alignment with the new WinAppSDK and WinUI3 which support Win32 apps (See here for more information). For our customers with UWP RNW apps, we will have clear migration instructions out once we reach official support for Fabric.

Can I Try It?

We aren't ready for most people to try out Fabric on Windows at this moment. There are still significant gaps in both the functionality and the developer experience. If you are an early adopter who is comfortable with an unpolished experience, you can try it out here. However understand that documentation will be thin, and please consult all of the below lists for what is not yet implemented before making any bug reports. As we progress further into our milestones the level of support will increase.

Milestones

Milestone	Milestone Nickname	Milestone Description
☑️ M0	Proof of Concept	Internal contributors can manually create a Win32 app that renders JSX using Composition
☑️ M1	Experimental	User can successfully initialize, build, and run a React Native Windows app on the new architecture. User can use the most common props/API’s. User can use the most common accessibility props/API’s. User can observe basic accessibility support within their app. User will not have access to full API parity with Paper. User can use community modules within their app. User cannot use community modules with native UI within their app.
🔜 M2	Parity and Accessibility	User can use all props/API’s that were supported on Paper. User can use all accessibility props/API’s that were supported on Paper. User can observe compliant/delightful accessibility support within their app.
⬜ M3	Ready for Modules	User can use the subset of community modules with native UI which have support for Fabric on Windows.
⬜ M4	Production Ready (Fabric now officially in support)	User can use most community modules with native UI which had been supported on Paper. User can view documentation for the new architecture on the React Native Windows website. Platform will be validated against most common app scenarios.
⬜ M5	New Default	Platform will be validated against all app scenarios. Paper architecture will be deprecated; Fabric will be the new default.

Host Component Parity

(updated February 2024)

Priority	Component	Available	Properties
0	View	✅	90%
0	Text	✅	85%
0	Image	✅	89%
0	TextInput	✅	80%
1	ScrollView	✅	84%
1	Modal	🟥	64%
2	ActivityIndicator	✅	86%
2	Switch	✅	90%
2	RefreshControl	🟥	28%

Host Components are the core RN primitive components directly backed by native UI. This table tracks our progress to reach parity in Fabric (Composition) with our Paper (XAML) implementation. See the parity tracking issue here

Paper Parity

Note that Paper itself never reached 100% parity. So 100% completion in the table above represents reaching 100% of what Paper accomplished, which is represented here:

Component	Completed %
View	79% (116/147)
Text	72% (111/155)
Image	77% (151/196)
TextInput	72% (165/230)
ScrollView	69% (143/208)
Modal	57% (41/72)
ActivityIndicator	78% (117/150)
Switch	79% (121/154)
RefreshControl	74% (116/156)

Task list

Tasks

Beta Give feedback

1. Host Components in RNW have parity between Paper and Fabric renderers #11135
   9 of 9
   Area: Fabric Deliverable New Architecture Parity: Fabric vs. Paper enhancement +5
   
2. React Native Windows Init v2 #11920
   10 of 35
   Area: Developer Experience Deliverable Developer First Experience Documentation New Architecture enhancement +6
   
3. Enable creation of a new Fabric app from template via the CLI #11908
   Area: App Template Area: CLI Area: Fabric New Architecture enhancement +5
   
4. Make Hermes the default JS engine #6136
   Area: JavaScript Engine enhancement +2
   
5. Ensure XAML controls can be hosted within a Fabric app's Composition tree #11907
   Area: Fabric New Architecture enhancement +3
   
6. E2E testing for Fabric #11422
   9 of 20
   Area: Fabric Area: Test Infrastructure Area: Tests New Architecture enhancement +5
   
7. Accessibility for Fabric #11898
   3 of 11
   Area: Accessibility Area: Fabric Deliverable New Architecture enhancement +5
   
8. Modal component parity for Fabric #11157
   API: Completion Area: Component Views Area: Fabric Area: Modal Deliverable New Architecture Parity: Fabric vs. Paper enhancement +8
   
9. Flyout/Popup components for Fabric #11921
   Area: Fabric Area: Flyout Area: Modal Area: Popup New Architecture enhancement +6
   
10. Migrate (or fork) samples from Paper to Fabric react-native-windows-samples#862
    enhancement samples +2
    
11. Migrate Supported Community Modules to Fabric #12027
    Area: Fabric Extensions New Architecture enhancement +4

Other milestones

Tasks

Beta Give feedback

1. Enable creation of a new Fabric app from template via the CLI #11908
   Area: App Template Area: CLI Area: Fabric New Architecture enhancement +5
   
2. Fabric version of an app in the store (potentially Artificial Chat)
3. Create version of Gallery app that uses Fabric instead of Paper react-native-gallery#349
   enhancement +1
   
4. Fabric version of Gallery, accessibility parity gets passing grade
5. Production brownfield app ships a single experience on Fabric