microsoft / microsoft/react-native-windows

Differences in templates - legacy vs new arch

Open
#14,815 4 comments 1 reaction 1 assignee View on GitHub

Nobody has claimed this yet.

Area: App Template bug New Architecture
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

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 Image Image
Removed some JSX Image Image
<Button /> nested inside <Text /> Image Image
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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.