A React Native Windows library to use XAML / WinUI controls
Перейти к файлу
Jon Thysell (JAUNTY) b174aa5245 Fix line ending generation 2022-01-26 13:04:37 -08:00
.github Update publish workflow to build on Windows, publish on Ubuntu 2022-01-26 11:02:22 -08:00
codegen/Properties > 2021-11-05 18:07:50 -07:00
example Renormalize line endings 2022-01-26 12:27:01 -08:00
examplenuget Renormalize line endings 2022-01-26 12:27:01 -08:00
package Fix line ending generation 2022-01-26 13:04:37 -08:00
.gitattributes Fix line ending generation 2022-01-26 13:04:37 -08:00
.gitignore gitignore 2021-02-27 22:26:06 -08:00
LICENSE Create LICENSE 2021-02-21 02:40:16 -08:00
README.md Update README.md 2021-09-29 17:10:53 -07:00
TechnicalGuide.md Update TechnicalGuide.md 2021-03-14 01:51:03 -08:00
USAGE.md Codegen event arg methods (#173) 2022-01-26 17:03:22 +00:00
package.json update version 2021-11-07 13:11:52 -08:00
yarn.lock Renormalize line endings 2022-01-26 12:27:01 -08:00

README.md

CI

react-native-xaml

A React Native Windows view manager that allows directly using the Windows XAML framework.

Cheat sheet

To see examples of the syntax and available controls, check out the Usage guide.

Main advantages

  • Allows developers writing react-native-windows apps (React Native apps targeting Windows 10) to quickly get started, if they are familiar with XAML.
  • Developers are not limited by the set of controls present today in RNW and community modules that support Windows.
  • Best of all, this solution is available today!
  • The set of types/properties/events are the XAML ones, however JS libraries can wrap those to expose the Windows control in a platform-agnostic way (e.g. as a way to implement a cross-plat control for Windows).

react-native-xaml works by leveraging metadata for XAML properties, types and events. This metadata is automatically generated (code-gen) from the Windows SDK. This means we can have a full projection of all of XAML – or any WinRT components written by app devs, that export a UserControl – without manual intervention.

Technical details:

See Technical Guide.

Demo

react-native-xaml demo