search

microsoft / react-native-xaml

A React Native Windows library to use XAML / WinUI controls
MIT License
97 stars 28 forks source link

Update docs to clarify difference between using WinUI and system XAML components #241

Open leon0399 opened 1 year ago

leon0399 commented 1 year ago

Problem Description

on the left is a purely native component, and on the right is react component image

  1. different arrow style
  2. different spacing and sizes (borders, paddings, etc.)

Steps To Reproduce

  1. Clone this repo: https://github.com/openhaptics/unihaptics-connect
  2. Check out this commit: https://github.com/openhaptics/unihaptics-connect/commit/0f0665cfa4a45cea6f09ae90ad08193039b7ca35 on branch different-navigatioin-components

Expected Results

Exact same compnents

Environment

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 5800HS with Radeon Graphics
    Memory: 4.95 GB / 15.41 GB
  Binaries:
    Node: 16.18.1 - ~\AppData\Local\Temp\yarn--1670406327817-0.5154773305045288\node.CMD
    Yarn: 1.22.19 - ~\AppData\Local\Temp\yarn--1670406327817-0.5154773305045288\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.18362.0, 10.0.19041.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.11.33027.164 (Visual Studio Community�2019)
  Languages:
    Java: 17.0.1 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.65.0 => 0.65.0
    react-native-windows: 0.65.2 => 0.65.2
  npmGlobalPackages:
    *react-native*: Not Found
asklar commented 1 year ago

@leon0399 Your react component is using the older NavigationView and friends (the type from Windows.UI.Xaml), whereas your native component is using it from Microsoft.UI.Xaml (WinUI 2). In order to use the type from MUX in RNX, you have to use WinUI.NavigationView and friends

leon0399 commented 1 year ago

Thank you so much!

In order to use the type from MUX in RNX, you have to use WinUI.NavigationView and friends.

I think it is worth mentioning in the docs. Or it is just me just missed this?

chrisglein commented 1 year ago

@asklar do we project both the WUX vs. MUX version of the NavigationView? https://github.com/asklar/react-native-xaml/blob/main/USAGE.md#navigationview

If there are two different versions that seems like something we should clarify in the docs.

asklar commented 1 year ago

@chrisglein yeah we should clarify it in the docs. We project all xaml controls in WUX and any additional metadata, which by default includes MUXC. Feel free to reuse this issue to mean "update the docs".