react-native-xaml
react-native-xaml copied to clipboard
Update docs to clarify difference between using WinUI and system XAML components
Problem Description
on the left is a purely native component, and on the right is react component
- different arrow style
- different spacing and sizes (borders, paddings, etc.)
Steps To Reproduce
- Clone this repo: https://github.com/openhaptics/unihaptics-connect
- 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
@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
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?
@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.
@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".