Skip to content

Commit

Permalink
Update & fix links in TechnicalGuide.md (#284)
Browse files Browse the repository at this point in the history
This commit fixes links from `/asklar/react-native-xaml` to the current
repo URL - `/microsoft/react-native-xaml`
###### Microsoft Reviewers: [Open in
CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/microsoft/react-native-xaml/pull/284)
  • Loading branch information
jbgski authored Aug 28, 2024
1 parent 34d71b6 commit 0fdf33a
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 8 deletions.
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
A React Native Windows view manager that allows directly using the [Windows XAML](https://docs.microsoft.com/windows/uwp/xaml-platform/xaml-overview) framework.

## Cheat sheet
To see examples of the syntax and available controls, check out the [Usage guide](https://github.com/asklar/react-native-xaml/tree/main/USAGE.md).
To see examples of the syntax and available controls, check out the [Usage guide](https://github.com/microsoft/react-native-xaml/tree/main/USAGE.md).

## Main advantages
- Allows developers writing [react-native-windows](https://microsoft.github.io/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](https://github.com/asklar/react-native-xaml/tree/main/package/Codegen)) from the Windows SDK.
react-native-xaml works by leveraging metadata for XAML properties, types and events. This metadata is automatically generated ([code-gen](https://github.com/microsoft/react-native-xaml/tree/main/package/Codegen)) 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](https://docs.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.UserControl) – without manual intervention.

## Technical details
Expand All @@ -22,5 +22,5 @@ Pull Requests are welcome. See [Contribution Guide](CONTRIBUTING.md) for details

## Demo

![react-native-xaml demo](https://raw.githubusercontent.com/asklar/react-native-xaml/main/example/rnx.gif)
![react-native-xaml demo](https://raw.githubusercontent.com/microsoft/react-native-xaml/main/example/rnx.gif)

10 changes: 5 additions & 5 deletions TechnicalGuide.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,18 @@ This metadata will then be consumed by the ReactNativeXaml project which is the
- Maps JS type names to constructors of XAML objects. These are used by the RN props to specify how to create a given XAML type from JS.
- Maps JS property names to a list of XAML types that have those properties, as well as what JS type the property is, and information about how to set those properties.
- Maps JS event names to attachment handlers. When a new XAML object is created from react-native-xaml, the library will figure out which events to create event handlers from based on this metadata.
- Maps enum value names to functions that can parse the strings and give back the enum value themselves. This might go away with https://github.com/asklar/react-native-xaml/issues/19.
- Maps enum value names to functions that can parse the strings and give back the enum value themselves. This might go away with https://github.com/microsoft/react-native-xaml/issues/19.

CodeGen will generate metadata for XAML properties if all these conditions are true:
- They are instance properties (non-static), public, and have a setter
- They are a simple type (int, bool, double, string, Color/Brush/SolidColorBrush, Thickness, or an enum), or of type IInspectable (Object).
- They are backed by a DependencyProperty on the type
- Their name does not conflict with an existing ViewProps JS property (e.g. Style, Width, Height, Padding): https://github.com/asklar/react-native-xaml/issues/6
- Support for attached properties is not yet implemented: https://github.com/asklar/react-native-xaml/issues/31
- Their name does not conflict with an existing ViewProps JS property (e.g. Style, Width, Height, Padding): https://github.com/microsoft/react-native-xaml/issues/6
- Support for attached properties is not yet implemented: https://github.com/microsoft/react-native-xaml/issues/31

Properties like Content that are of type IInspectable are mapped to JS object. You can specify a boxed string by passing an object with a string field: `{string: "my string value"}`.

Events are created as long as their names don't conflict with existing registrations (e.g. onKeyUp/onKeyDown is already taken by the RNW framework so those events are not registered by react-native-xaml): https://github.com/asklar/react-native-xaml/issues/32
Events are created as long as their names don't conflict with existing registrations (e.g. onKeyUp/onKeyDown is already taken by the RNW framework so those events are not registered by react-native-xaml): https://github.com/microsoft/react-native-xaml/issues/32

By default, CodeGen will only look for the Windows 10 SDK (10.0.19041.0, version 2004). You can install it from Visual Studio's installer or [here](https://developer.microsoft.com/windows/downloads/windows-10-sdk/).
It is also possible to pass any number of custom WinMD files representing Windows Runtime components. Any UserControls that are defined in those projects will be added to the metadata tables as well as the 19041 SDK XAML types.
Expand Down Expand Up @@ -105,4 +105,4 @@ cd node_modules\react-native-xaml
yarn build
```

See the diff to enable the sample UserControl example here: https://github.com/asklar/react-native-xaml/pull/35
See the diff to enable the sample UserControl example here: https://github.com/microsoft/react-native-xaml/pull/35

0 comments on commit 0fdf33a

Please sign in to comment.