Differences in templates - legacy vs new arch

[frankcalise]

Problem Description

There are some differences between a newly spun up Legacy app vs New Arch app. See the table below:

	Legacy	New Arch
Default template
Removed some JSX
<Button /> nested inside <Text />

Steps To Reproduce

1. Init a new project on 0.79.0
2. Run the template
3. Delete all <Section /> elements but one
4. Add a <Button /> inside <Section />
5. Repeat with --template cpp-app and observe the differences

Expected Results

I'm unsure of what to expect, since I know there are different philosophies behind the UI in Legacy vs New Arch if I'm not mistaken? UWP vs WinUI?

But I'm not sure if you wanted it to look the same, such as the dark title bar in new arch. It also seems odd that the same exact code in terms of the starter app template from RN core behaves differently (the style of a shorter ScrollView and then the nested Button issue), so maybe it's a New Arch issue.

CLI version

18.0.0

Environment

System:
  OS: Windows 11 10.0.22631
  CPU: "(16) x64 AMD Ryzen 7 9700X 8-Core Processor             "
  Memory: 13.01 GB / 31.15 GB
Binaries:
  Node:
    version: 20.19.2
    path: C:\nvm4w\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: C:\nvm4w\nodejs\yarn.CMD
  npm:
    version: 10.8.2
    path: C:\nvm4w\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.14.36203.30 (Visual Studio Community 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.0
    wanted: 0.79.0
  react-native-windows:
    installed: 0.79.0
    wanted: ^0.79.0
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Community Modules

No response

Target React Native Architecture

Both Architectures

Target Platform Version

None

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

Legacy repo: https://github.com/frankcalise/WinButtonLegacy
New Arch repo: https://github.com/frankcalise/WinButtonNewArch

[chrisglein]

Love that you're trying out new arch and comparing to old arch. This is an area we've been building towards for a long time and it's great to get feedback.

But I'm not sure if you wanted it to look the same, such as the dark title bar in new arch. It also seems odd that the same exact code in terms of the starter app template from RN core behaves differently (the style of a shorter ScrollView and then the nested Button issue), so maybe it's a New Arch issue.

The title bar difference is a good catch. From moving to UWP to Win32 there are some differences that can be recovered. I think that WinAppSDK titlebar tools are relevant here (more detail).

There will be areas where there are differences in the rendering between old arch and new arch. Some of those are intentional (our old arch Paper implementation didn't match the behavior on other platforms, like around TextInput). Some of those are unintentional (gaps in the implementation that should be fixed). For the former (intentional differences), the goal is to document those to aid with migration of any existing apps. For the latter (bugs in implementation), the goal is to fix them ;)

To be clear, the nested Button inside of Text is something that didn't work before but does now, correct? That was an area where with the new arch implementation we were able to fix a long standing gap.

🔍 Triage recommendation: Capture all the differences called out in this report and ensure each is captured, either as a documentation for intentional difference, or as a bug.

[frankcalise]

@chrisglein glad it is useful! I only want to start with New Arch ideally, but I know the Fabric support isn't quite finished yet. But seeing as that will be default going forward, I'd like to use that. However, I'm checking Legacy when I hit snags to compare.

To be clear, the nested Button inside of Text is something that didn't work before but does now, correct?

This is correct, but one extra thing to note in the screenshot for this scenario is that the <Button /> gets modified in a weird way. Initially, it might look cut off where the bottom of the text is. But it's not cut exactly, the bottom padding seems off, because you can actually see the border around the button still. The label however, is mashed up against the bottom border.

The title bar difference is a good catch

I'll see if I can work through the docs and fix the template on this one.

[frankcalise]

@chrisglein Upon further review with the title bar, I can properly set the color based on the documentation you sent inside of WinMain

  winrt::Windows::UI::Color titleBarColor{ winrt::Windows::UI::Color{ 1, 32, 32, 32 } };
  appWindow.TitleBar().BackgroundColor(titleBarColor);
  appWindow.TitleBar().InactiveBackgroundColor(titleBarColor);
  appWindow.TitleBar().ButtonBackgroundColor(titleBarColor);
  appWindow.TitleBar().ButtonInactiveBackgroundColor(titleBarColor);

Switching my OS settings (Personalization > Colors > Choose your mode) back to light will then leave the title bar in the dark colors I just set.

So it feels like the title bar isn't respecting the theme in Fabric? This is the proper color from what I can tell here: https://github.com/microsoft/react-native-windows/blob/main/vnext/Microsoft.ReactNative/Fabric/Composition/Theme.cpp#L344

I'm happy to help work on a fix and test it if you can advise me on where that lives in the repo. Still digging at it myself, but couldn't quite find where a title bar theming was done.