react-native-windows
react-native-windows copied to clipboard
Fabric for React Native for Windows
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?
Not quite yet. We aren't ready for people to try out Fabric on Windows at this moment. There are still significant gaps in both the functionality and the developer experience. At some point we'll open this up to early adopters who are comfortable with a less polished experience. In the meantime, keep an eye on this issue for progress.
Milestones
Milestone | Milestone Nickname | Milestone Description |
---|---|---|
☑️ M0 | Proof of Concept |
|
☑️ M1 | Experimental |
|
🔜 M2 | Parity and Accessibility |
|
⬜ M3 | Ready for Modules |
|
⬜ M4 | Production Ready (Fabric now officially in support) |
|
⬜ M5 | New Default |
|
Host Component Parity
(updated January 2024)
Priority | Component | Available | Properties |
---|---|---|---|
0 | View | ✅ | 90% |
0 | Text | ✅ | 85% |
0 | Image | ✅ | 89% |
0 | TextInput | ✅ | 78% |
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
- [ ] #11135
- [ ] #11920
- [ ] #11908
- [ ] #6136
- [ ] #11907
- [ ] #11422
- [ ] #11898
- [ ] #11157
- [ ] #11921
- [ ] https://github.com/microsoft/react-native-windows-samples/issues/862
- [ ] https://github.com/microsoft/react-native-windows/issues/12027
Other milestones
### Tasks
- [ ] https://github.com/microsoft/react-native-windows/issues/11908
- [ ] Fabric version of an app in the store ([potentially Artificial Chat](https://github.com/chrisglein/artificial-chat/issues/119))
- [ ] https://github.com/microsoft/react-native-gallery/issues/349
- [ ] [Fabric version of Gallery](https://github.com/microsoft/react-native-gallery/issues/349), accessibility parity gets passing grade
- [ ] Production brownfield app ships a single experience on Fabric