Fabric for React Native for Windows
chrisglein opened this issue · 1 comments
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 |
|
| ☑️ 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 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
Other milestones
As RNW's Fabric support has yet to reach Beta status, details on it are not included in our usual release notes (0.75.0-preview.1 example). But there's a ton of RNW Fabric progress contained in each release and we wanted to highlight it here for those tracking closely! 😊
📝 0.74
• Add Switch animations (https://github.com/microsoft/react-native-windows/pull/12631 and https://github.com/microsoft/react-native-windows/pull/12207 and https://github.com/microsoft/react-native-windows/pull/12301)
• Fixed BinSkim errors to be compliant with publishing standards (https://github.com/microsoft/react-native-windows/pull/12295)
• Add CharacterRecieved Event (https://github.com/microsoft/react-native-windows/pull/12254)
• Adds testing suites to Fabric (https://github.com/microsoft/react-native-windows/pull/12250 and https://github.com/microsoft/react-native-windows/pull/12442 and https://github.com/microsoft/react-native-windows/pull/12539 and https://github.com/microsoft/react-native-windows/pull/12602 and https://github.com/microsoft/react-native-windows/pull/12610 and https://github.com/microsoft/react-native-windows/pull/12675)
• Add support for loading image files from local files (https://github.com/microsoft/react-native-windows/pull/12264)
• Expand native theming implementation (https://github.com/microsoft/react-native-windows/pull/12287)
• Move E2E fabric app to WinAppSDK and lifted composition (https://github.com/microsoft/react-native-windows/pull/12242)
• Enable concurrentRoot (https://github.com/microsoft/react-native-windows/pull/12367)
• The new Fabric app template now supports yarn windows as an alias to react-native run-windows (https://github.com/microsoft/react-native-windows/pull/12374)
• The new Fabric app template supports yarn test:windows to run jest app rendering tests with react-test-renderer (https://github.com/microsoft/react-native-windows/pull/12376)
• Add support for custom native component to have c++ state and custom measure (https://github.com/microsoft/react-native-windows/pull/12418)
• Add DeviceInfoModule (https://github.com/microsoft/react-native-windows/pull/12450)
• Add caretHidden to TextInput (https://github.com/microsoft/react-native-windows/pull/12430)
• Add support for custom themes and support runtime theme change (https://github.com/microsoft/react-native-windows/pull/12474)
• Move to using winrt objects for ComponentViews (https://github.com/microsoft/react-native-windows/pull/12580)
• Expose public APIs to navigate native UI tree (https://github.com/microsoft/react-native-windows/pull/12614)
• Initial scrollbar implementation for ScrollViewComponentView (https://github.com/microsoft/react-native-windows/pull/12622)
• Add scrollbar show/hide logic (https://github.com/microsoft/react-native-windows/pull/12625)
• Fix issue causing PointerMove events to have incorrect position when using WM_msg input (https://github.com/microsoft/react-native-windows/pull/12638)
• Implement ActivityIndicator's size property (https://github.com/microsoft/react-native-windows/pull/12122)
• Capture pointer input during scroll thumb drag (https://github.com/microsoft/react-native-windows/pull/12642)
• Allow unimplemented native views to have children (https://github.com/microsoft/react-native-windows/pull/12650)
• Remove AbiCompositionViewComponent and move to inheritance overrides for custom components (https://github.com/microsoft/react-native-windows/pull/12668)
• Mouse wheel handling when use WM_MSG hosting uses wrong mouse position (https://github.com/microsoft/react-native-windows/pull/12672)
• Fix visual issue when quickly dragging scrollthumb before it finishes animating in (https://github.com/microsoft/react-native-windows/pull/12671)
• LogBox crashes when running lifted composition (https://github.com/microsoft/react-native-windows/pull/12725)
• Expose (un)MountChildComponentView to 3P components (https://github.com/microsoft/react-native-windows/pull/12720)
• Add onSubmitEditing and clearTextOnSubmit (https://github.com/microsoft/react-native-windows/pull/12746)
• Add additional functionality to support implementing more advanced custom components (https://github.com/microsoft/react-native-windows/pull/12739)
• Updated @react-native-windows/automation to support launching and connecting to packaged new-app fabric apps for UIA automation and testing (https://github.com/microsoft/react-native-windows/pull/12769)
• Add onKeyPress for TextInput and enable legacyTextInputTests (https://github.com/microsoft/react-native-windows/pull/12771)
• Add experimental bridgeless mode (https://github.com/microsoft/react-native-windows/pull/12781)
• Fix various issues with instance shutdown when using bridgeless (https://github.com/microsoft/react-native-windows/pull/12790)
• Add UIBatchingQueue to bridgeless mode (https://github.com/microsoft/react-native-windows/pull/12812/files)
• Implement LoadingUI and DebuggingOverlay (https://github.com/microsoft/react-native-windows/pull/12809)
• Update ActivityIndicator to newer visuals (https://github.com/microsoft/react-native-windows/pull/12865)
• Extract RenderText into helper function + clean up Loading visuals (https://github.com/microsoft/react-native-windows/pull/12866)
📝 0.75
• Fixes hang on shutdown. Fix hang on shutdown when JS instance failed to start (#12867) · microsoft/react-native-windows@b99ccd7 (github.com)
• Fix OnSelectionChanged running multiple times. Fix OnSelectionChanged running multiple times (#12903) · microsoft/react-native-windows@187f3a6 (github.com)
• Start of implementation of TextLayoutManager::measureLines. Partial implementation of TextLayoutManager::measureLines (#12930) · microsoft/react-native-windows@3067b5a (github.com)
• Move CompositionSwitcher to Experimental namespace. Move CompositionSwitcher to Experimental namespace (#12960) · microsoft/react-native-windows@347922f (github.com)
• Unify some DPI drawing logic. Unify some DPI drawing logic (#12974) · microsoft/react-native-windows@8953893 (github.com)
• Don’t use CoreWindow to determine key state. Dont use CoreWindow to determine key state (#12998) · microsoft/react-native-windows@a4f55e5 (github.com)
• Ensure D2D device context is not used outside Begin/End draw. Ensure D2D device context is not used outside Begin/End draw (#13011) · microsoft/react-native-windows@5fa1ba4 (github.com)
• Rework custom resources API. Rework custom resources API (#13013) · microsoft/react-native-windows@c15f1bb (github.com)
• Fix a reference cycle between CompositionRootView and CompositionEventHandler. Fix a reference cycle between CompositionRootView and CompositionEventHandler (#13163) · microsoft/react-native-windows@7bace67 (github.com)
• Add ability to provide custom image uri handlers. Add ability to provide custom image uri handlers (#13180) · microsoft/react-native-windows@a645675 (github.com)
• Add support for data: images. Add support for data: images (#13191) · microsoft/react-native-windows@974ae25 (github.com)
• Move UriHandler registration to PackageProvider. Move UriHandler registration to PackageProvider (#13197) · microsoft/react-native-windows@de5c307 (github.com)
• Fix experimental winui3 builds. Fix experimental winui3 builds (#13203) · microsoft/react-native-windows@dea1b59 (github.com)
• Expose ImageProps from ImageComponentView's and add ImageSource type. Expose ImageProps from ImageComponentView's and add ImageSource type (#13206) · microsoft/react-native-windows@8f366c5 (github.com)
• Introduce clearTextOnFocus property for TextInput. Introduce clearTextOnFocus property for TextInput (#13227) · microsoft/react-native-windows@d38ba13 (github.com)
• Add various native focus APIs. Add various native focus APIs (#13234) · microsoft/react-native-windows@0d5ad19 (github.com)
• APIs to enable RootViews that size to content. APIs to enable RootViews that size to content (#13269) · microsoft/react-native-windows@b150f8e (github.com)
• Support blob: images, and provide better image.onError callbacks. Support blob: images, and provide better image.onError callbacks (#13285) · microsoft/react-native-windows@adc4d09 (github.com)
• Touch pointer moved was being reported to richedit as a pointerup. Touch pointer moved was being reported to richedit as a pointerup (#13313) · microsoft/react-native-windows@71feab2 (github.com)