Works with type in app.tsx

example/App.tsx

@@ -29,31 +29,32 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
-// let NativeXamlControl = requireNativeComponent<XamlControlProps>("XamlControl");
-// interface XamlControlProps extends ViewProps {
-//   type: string;
-//   text: string;
-//   onClick?: (
-//       event: NativeSyntheticEvent<undefined>
-//     ) => void;
-// }
+let NativeXamlControl = requireNativeComponent<XamlControlProps>("XamlControl");
+interface XamlControlProps extends ViewProps {
+  type: string;
+  text: string;
+  onClick?: (
+      event: NativeSyntheticEvent<undefined>
+    ) => void;
+}
 
-// const XamlControl: React.FC<XamlControlProps> = ({
-//   type,
-//   text,
-//   onClick
-// }) => {
-// //    const accessibilityLabel = text;
-//   return (
-//       <NativeXamlControl type={type} style={{height:34,width:34,backgroundColor:"red"}} text={text} 
-//        onClick={onClick ? onClick : () => {
-//             console.log("Hi!!"); 
-//           }}
-//       />
-//   );
-// };
+const XamlControl: React.FC<XamlControlProps> = ({
+  type,
+  text,
+  onClick,
+  style
+}) => {
+//    const accessibilityLabel = text;
+  return (
+      <NativeXamlControl type={type} text={text} style={style}
+       onClick={onClick ? onClick : () => {
+            console.log("Hi!!"); 
+          }}
+      />
+  );
+};
 
-import { XamlControl, XamlControlProps } from 'react-native-xaml';
+// import { XamlControl } from 'react-native-xaml';
 
 const Section = ({children, title}): Node => {
   const isDarkMode = useColorScheme() === 'dark';
@@ -95,7 +96,7 @@ const App: () => Node = () => {
         contentInsetAdjustmentBehavior="automatic"
         style={backgroundStyle}>
         <Header />
-        <XamlControl type="hyperlinkButton" text="Hello World" style={{width:50,height:20,backgroundColor:'red'}} />
+        <XamlControl type="hyperlinkButton" text="Hello World" style={{width:150,height:40,backgroundColor:'red'}} />
         <View
           style={{
             backgroundColor: isDarkMode ? Colors.black : Colors.white,

example/package.json

@@ -14,7 +14,7 @@
     "react": "17.0.1",
     "react-native": "0.64.0-rc.2",
     "react-native-windows": "0.64.0-preview.8",
-    "react-native-xaml": "../"
+    "react-native-xaml": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

example/windows/example.sln

@@ -35,7 +35,7 @@ Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Mso", "..\node_modules\reac
 EndProject
 Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Include", "..\node_modules\react-native-windows\include\Include.vcxitems", "{EF074BA1-2D54-4D49-A28E-5E040B47CD2E}"
 EndProject
-Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "ReactNativeXaml", "..\node_modules\react-native-xaml\windows\ReactNativeXaml\ReactNativeXaml.vcxproj", "{0FF7027A-222C-4FFB-8F17-91D18BBAF7A8}"
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "ReactNativeXaml", "..\..\windows\ReactNativeXaml\ReactNativeXaml.vcxproj", "{0FF7027A-222C-4FFB-8F17-91D18BBAF7A8}"
 EndProject
 Global
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution

example/windows/example/AutolinkedNativeModules.g.targets

@@ -3,7 +3,7 @@
   <!-- AutolinkedNativeModules.g.targets contents generated by "react-native autolink-windows" -->
   <ItemGroup>
     <!-- Projects from react-native-xaml -->
-    <ProjectReference Include="$(ProjectDir)..\..\node_modules\react-native-xaml\windows\ReactNativeXaml\ReactNativeXaml.vcxproj">
+    <ProjectReference Include="$(ProjectDir)..\..\..\windows\ReactNativeXaml\ReactNativeXaml.vcxproj">
       <Project>{0ff7027a-222c-4ffb-8f17-91d18bbaf7a8}</Project>
     </ProjectReference>
   </ItemGroup>

example/yarn.lock

@@ -5401,7 +5401,7 @@ react-native-windows@0.64.0-preview.8:
     ws "^6.1.4"
 
 react-native-xaml@../:
-  version "0.0.1"
+  version "0.0.2"
 
 react-native@0.64.0-rc.2:
   version "0.64.0-rc.2"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-xaml",
   "title": "React Native Xaml",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Allows using XAML directly, inside of a React Native Windows app",
   "main": "lib/commonjs/index.js",
   "typings": "lib/commonjs/index.d.ts",

src/XamlControl.tsx

@@ -1,16 +1,10 @@
 import React from "react";
-import { NativeSyntheticEvent, requireNativeComponent, ViewProps } from "react-native";
+import { NativeSyntheticEvent, requireNativeComponent } from "react-native";
+import { XamlControlProps } from './index';
 //import { styles } from "./styles.ts";
 
 let NativeXamlControl = requireNativeComponent<XamlControlProps>("XamlControl");
 
-export interface XamlControlProps extends ViewProps {
-    readonly type: string;
-    readonly text: string;
-    readonly onClick?: (
-        event: NativeSyntheticEvent<undefined>
-      ) => void;
-}
 
 export const XamlControl: React.FC<XamlControlProps> = ({
     type,

src/index.d.ts

@@ -0,0 +1,9 @@
+import { ViewProps, NativeSyntheticEvent } from 'react-native';
+
+export interface XamlControlProps extends ViewProps {
+    readonly type: string;
+    readonly text: string;
+    readonly onClick?: (
+        event: NativeSyntheticEvent<undefined>
+      ) => void;
+}

src/index.tsx

@@ -3,4 +3,4 @@ import { XamlControl } from './XamlControl';
 
 const { Xaml } = NativeModules;
 
-export default { Xaml, XamlControl };
+export default { Xaml, XamlControl, XamlControlProps };

windows/ReactNativeXaml/XamlViewManager.cpp

@@ -147,8 +147,8 @@ namespace winrt::ReactNativeXaml {
   };
 
   const std::map<std::string, PropInfo> xamlPropertyMap = {
-    { "width", { MAKE_GET_DP(FrameworkElement::HeightProperty), FromJSType::Double, XamlPropType::Double }},
-    { "height", { MAKE_GET_DP(FrameworkElement::WidthProperty), FromJSType::Double, XamlPropType::Double }},
+    { "width", { MAKE_GET_DP(FrameworkElement::WidthProperty), FromJSType::Double, XamlPropType::Double }},
+    { "height", { MAKE_GET_DP(FrameworkElement::HeightProperty), FromJSType::Double, XamlPropType::Double }},
     { "text", { MAKE_GET_DP(ContentControl::ContentProperty), FromJSType::String, XamlPropType::Object }},
     { "color", { MAKE_GET_DP(Control::ForegroundProperty), FromJSType::SolidColorBrush, XamlPropType::Object }},
     { "backgroundColor", { MAKE_GET_DP(Control::BackgroundProperty), FromJSType::SolidColorBrush, XamlPropType::Object }},