Port app to Fabric

[chrisglein]

Overview

Well before RNW's Fabric support moved into public preview (0.76, December 2025) or to the default option (0.80, pending), I decided to port this app from Paper to RNW's very-much-cutting-edge early Fabric implementation in 2023. This issue captures a lot of that journey.

Through the PR history you may see a lot of strata of the implementation, first from a hand-coded app, then in 0.73 replaced with the early app template, and eventually on the official preview in 0.76. It's been a journey! This app's journey is not what I'd expect is the case for an app starting today, when everything is implemented and fixed and streamlined. But this issue captures the journey of following that cutting edge.

Note that for RNW, migrating a Paper app into a Fabric isn't a simple switch. Fabric apps are an entirely different app type. Paper is UWP, Fabric is Win32+WinAppSDK. It is necessary to create a new app and then restore the native connections and dependencies.

• JS-only functionality should work (largely) as before, including imported modules.
• Native code should work mostly as before... except for needing to handle the UWP->Win32 app model move.
• Modules hosting native UI are going to be more problematic at this point in time (where those modules haven't been updated to support Fabric)

Plan

• Create a new blank Fabric app from template
• Delete all contents in existing Paper app (backed up through source control, of course!)
• Copy newly created Fabric app over gutted Paper app
• Restore (from source control) all the relevant native code files and JS files that weren't part of the app generated originally from the Paper app template
• Thoughtfully merge files from app template that had been intentionally modified (in this case, few)
• Copy app .png assets to .ico files (change from UWP->Win32 app type)
• Stubbed out all import dependencies in JS
• Made a quick JS-only implementation of key components essential to the flow of the app (like Picker and Popup)
• Bring in the JS-only dependencies (Markdown rendering, for example), as these should work regardless of Paper/Fabric
• Restore in-app native code (VersionInfo wrapper, for example)
• Restore imported native code module dependencies
  • Find non-UWP alternatives for other non-UI module dependencies (If needed?)
  • Modify min Fabric app sample to be packaged to get access to some of the UWP-style APIs? (e.g. Clipboard via DataTransfer) (note that this was eventually handled by the default app template)
  • Clipboard
    • Local workaround
    • Restore use of "@react-native-clipboard/clipboard"
  • AsyncStorage
    • Restore use of "@react-native-async-storage/async-storage"
  • react-native-winrt (for Speech Synthesis)
    • ⚠️Workaround (switched from codegenJS to turbo module)
• UI module dependencies
  • Picker
    • ⚠️Workaround (recreated a Picker replacement using Modal)
    • Restore use of "@react-native-picker/picker"
  • fluent-ui-reactnative
    • ⚠️Workaround: Created FluentControls library in app with JS replacements
    • Figure out blocking issues with FURN
  • react-native-content-dialog (JS only)
    • ⚠️Workaround: Local package patch of PlatformColor usage, changing color string constants
    • Figure out how module can have different versions for Fabric vs. Paper
  • react-native-syntax-highlighter (JS only)
    • ⚠️Workaround: Removed
    • Figure out how to get working again
• Review app's behavior with Accessibility Insights
• Merge Fabric version to main
• Release Fabric version of app to store

Issues Found Along the Way

• Fabric TextInput generates double key presses (0.0.0-canary.637) microsoft/react-native-windows#11452 Typing produces double keypresses
• Fabric Button does not render anything (due to lack of PlatformColor) microsoft/react-native-windows#11456 Button text does not render
• Fabric Button does not render anything (due to lack of PlatformColor) microsoft/react-native-windows#11456 Button background/border does not render
• Fabric's TextInput caret displays in wrong position microsoft/react-native-windows#11486 Caret in wrong position
• Setting a single border (e.g. borderBottomWidth) in Fabric doesn't work microsoft/react-native-windows#11549 Bottom border doesn't render
• Release builds of Fabric should bundle microsoft/react-native-windows#11564 Need to run Metro in the meantime
• Fabric TextInput doesn't apply background color microsoft/react-native-windows#11763 Chat entry has no background plate (will be a difference between Paper and Fabric)
• Fabric Text renders emojis in monochrome microsoft/react-native-windows#11764
• Accessibility headers/groups not showing in Accessibility Insights
• Invoke pattern on button components does not invoke them (may need app side to use onAccessibilityTap)
• Fabric ScrollView does not render a scroll bar microsoft/react-native-windows#12075 ScrollView does not display a scroll bar
• Fabric ScrollView does not respond to keyboard commands (page up, page down, home, end, or arrow keys) microsoft/react-native-windows#12076 ScrollView cannot be controlled with keyboard events (page up, page down, home, end)
• Fabric components should support the app theme (light/dark) microsoft/react-native-windows#11489 Components do not respond to dark mode
• Not yet able to include non-UI component projects (async-storage, clipboard) in a Fabric project microsoft/react-native-windows#12786
• TextInput does not accept PlatformColor values for color/highlightColor style microsoft/react-native-windows#15159
• Text component renders as black in dark mode microsoft/react-native-windows#15158 Change in behavior
• Modal displays at a much larger size than I'd expect. microsoft/react-native-windows#14805 this resulted in significant workarounds of fixed sizes
• Modal needs a way to disable the title bar microsoft/react-native-windows#15169 this would improve the integrated feel of the app if fixed
• Text component renders as black in dark mode microsoft/react-native-windows#15158 by design, but not sufficiently documented)
• TextInput does not accept PlatformColor values for color/highlightColor style microsoft/react-native-windows#15159
• Hyperlink embedded into Text content does not render microsoft/react-native-windows#15160 better than Paper in some ways, but still incorrect behavior
• App crashes after creating a Modal and then moving the window microsoft/react-native-windows#15165 this one is high impact and will block properly updating the store release
• Multiline TextInput starts using more space for next line well before wrapping actually happens microsoft/react-native-windows#15166
• Tooltip does not show at correct location (offset quite a bit above and to the left) microsoft/react-native-windows#15167
• TextInput regression between Paper and Fabric: Manual set value clearTextOnSubmit-style behavior not working. microsoft/react-native-windows#15168 easy to work around, but did require changing Paper JS
• Mouse scroll wheel does not scroll microsoft/react-native-windows#15177

Screenshot of In-Progress Implementation

[chrisglein]

Latest comparison of Paper to Fabric:

Paper	Fabric

Technically the left version was on the #114 branch, so it's not quite apples to apples. And the size difference is due to running on different machines. But it gives you the gist.

[chrisglein]

That previous set of screenshots was across 2 different machines with different resolutions. Here's a more apples to apples comparison (both running side by side on same dev box):

Paper	Fabric

For the dialogs, the Paper version was using the RNW Popup component, which doesn't exist in Fabric. Alongside some other control dependencies like Picker. So there are some placeholders here in the meantime:

Paper	Fabric

[acoates-ms]

Are we missing a border in those tables? (The horizontal lines) Any idea what that is? I thought our border implementation on fabric is actually more complete than the paper one.

[chrisglein]

Are we missing a border in those tables? (The horizontal lines) Any idea what that is? I thought our border implementation on fabric is actually more complete than the paper one.

Yeah, I had noticed that one but haven't had a chance to dig in yet. I'm using a JS-only module for markdown rendering, and the styling for those tables should be here. That table element is using borderBottomWidth. So it appears that in Fabric the borderBottomWidth isn't registering. It's marked as completed in the table, so I assume there's a bug somewhere in the handling. I'll poke around and open a bug to track this (update: here's the bug).

[chrisglein]

Would probably be possible to merge this sooner if there was the ability to have file redirects for fabric components. Example: mycomponent.windows.fabric.js.

[chrisglein]

Grabbing the latest Canary build with some fixes that have happened, the addition of color emojis is great. Accessibility information is starting to come online too, so we can start looking at those gaps.

Paper	Fabric