liftoff!

USAGE.md

@@ -18,7 +18,7 @@ If either of these are true, you will want to generate a custom projection for y
 
 For more information on generating a custom projection, please see the [Technical Guide](TechnicalGuide.md).
 
-# Sample usage
+# Sample usage - UWP XAML
 
 Below are  usage examples of some controls and features of react-native-xaml.
 If you have questions about a scenario you don't see below, please [file an issue](https://github.com/asklar/react-native-xaml/issues/new)!
@@ -408,3 +408,21 @@ In order to enable Direct debugging for your app, make sure that your App.cpp/Ap
 ```cs
   InstanceSettings.UseWebDebugger = false;
 ```
+
+# Sample usage - WinUI controls
+
+WinUI controls are available with the `WinUI_` prefix.
+
+## InfoBar
+
+const [visible, setVisible] = useState(Visibility.Visible);
+//...
+<WinUI_InfoBar
+  message="the message"
+  title="the title"
+  isOpen={true}
+  visibility={visible}
+  onClosed={() => {
+    setVisible(Visibility.Collapsed);
+  }}
+

example/App.tsx

@@ -52,6 +52,9 @@ import {
   NavigationViewItemHeader,
   FontIcon,
   WinUI_InfoBar,
+  WinUI_ProgressRing,
+  HorizontalAlignment,
+  Visibility,
 } from 'react-native-xaml';
 
 const Section = ({children, title}): Node => {
@@ -90,12 +93,23 @@ const App: () => Node = () => {
   const [count, setCount] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
   const [option, setOption] = useState('');
+  const [visible, setVisible] = useState(Visibility.Visible);
   return (
     <SafeAreaView style={backgroundStyle}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         style={backgroundStyle}>
+        <WinUI_ProgressRing isActive={true} width={40} />
+        <WinUI_InfoBar
+          message="the message"
+          title="the title"
+          isOpen={true}
+          visibility={visible}
+          onClosed={() => {
+            setVisible(Visibility.Collapsed);
+          }}
+        />
         <View>
           <Text style={{fontSize: 36, textAlign: 'center', padding: 42}}>
             Welcome to React Native XAML
@@ -105,10 +119,6 @@ const App: () => Node = () => {
           style={{
             backgroundColor: isDarkMode ? Colors.black : Colors.white,
           }}>
-          <TextBox text={option} focusable={true} />
-          <WinUI_InfoBar title="title">
-            <TextBlock text="asd"/>
-          </WinUI_InfoBar>
           <Button
             foreground="#992222"
             onTapped={a => {

package/package.json

@@ -33,7 +33,7 @@
   "readmeFilename": "README.md",
   "peerDependencies": {
     "react": ">= 17.0.1",
-    "react-native": ">= 0.64.0",
+    "react-native": ">= 0.64.2",
     "react-native-windows": ">= 0.64.5"
   },
   "devDependencies": {
@@ -43,9 +43,9 @@
     "@typescript-eslint/eslint-plugin": "^2.27.0",
     "@typescript-eslint/parser": "^2.27.0",
     "react": "17.0.1",
-    "react-native": "0.64.0",
+    "react-native": ">=0.64.2",
     "react-native-typescript-transformer": "*",
-    "react-native-windows": "0.64.14",
+    "react-native-windows": ">=0.64.14",
     "typescript": "^4.1.2"
   },
   "files": [
@@ -55,8 +55,5 @@
     "lib/",
     "src/",
     "!*.ruleset"
-  ],
-  "dependencies": {
-    "react-native-windows": "^0.64.14"
-  }
+  ]
 }

package/tsconfig.json

@@ -21,7 +21,7 @@
       "resolveJsonModule": true,
       "strict": true,
       "target": "es6",
-      "types": ["node"],
+      "types": ["react"],
       "outDir": "lib",
       "sourceMap": true
     },

package/windows/ReactNativeXaml/XamlViewManager.cpp

@@ -56,7 +56,7 @@ namespace winrt::ReactNativeXaml {
 
     const JSValueObject& propertyMap = JSValue::ReadObjectFrom(propertyMapReader);
 
-    auto e = view;
+    auto e = view;  
     auto cn = get_class_name(e);
     if (auto control = e.try_as<DependencyObject>()) {
       for (auto const& pair : propertyMap) {
@@ -69,11 +69,14 @@ namespace winrt::ReactNativeXaml {
           auto rcn = get_class_name(realObject);
           prop->SetValue(realObject, propertyValue, m_reactContext);
           handled = true;
+          continue;
         }
         else if (auto eventAttacher = m_xamlMetadata->AttachEvent(m_reactContext, propertyName, control, propertyValue.AsBoolean())) {
+          continue;
         }
-        else if (propertyName == "type") {}
+        else if (propertyName == "type") { return; }
         else {
+          cdebug << "[react-native-xaml] Unhandled call to UpdateProperties " << propertyName << " on view: " << cn << "\n";
           auto className = winrt::get_class_name(e);
           if (IsDebuggerPresent()) {
             assert(false && "unknown property");
@@ -81,8 +84,6 @@ namespace winrt::ReactNativeXaml {
         }
       }
     }
-
-    cdebug << "[react-native-xaml] Unhandled call to UpdateProperties with view: " << cn << "\n";
   }
 
   // IViewManagerWithExportedEventTypeConstants
@@ -109,13 +110,6 @@ namespace winrt::ReactNativeXaml {
     FrameworkElement const& view,
     winrt::hstring const& commandId,
     winrt::Microsoft::ReactNative::IJSValueReader const& /*commandArgsReader*/) noexcept {
-    if (auto control = view.try_as<winrt::Windows::UI::Xaml::Controls::HyperlinkButton>()) {
-      if (commandId == L"CustomCommand") {
-        // const JSValueArray& commandArgs = JSValue::ReadArrayFrom(commandArgsReader);
-        // Execute command
-      }
-    }
-
     auto viewType = get_class_name(view);
     cdebug << "[react-native-xaml] Unhandled call to DispatchCommand with view: " << viewType << "\n";
   }

yarn.lock

@@ -5566,7 +5566,7 @@ react-native-typescript-transformer@*:
     semver "^5.4.1"
     source-map "^0.5.6"
 
-react-native-windows@^0.64.14, react-native-windows@^0.64.2:
+react-native-windows@0.64.14, react-native-windows@^0.64.2:
   version "0.64.14"
   resolved "https://registry.yarnpkg.com/react-native-windows/-/react-native-windows-0.64.14.tgz#f4849d986733cccc78e1d5fe70d0ab1b16d8a75b"
   integrity sha512-OkLl8BvbbZgW5Ep0vWwIDI45/TU/Tns62PQYRyZqQB2a/pyfAFxLJFGR6cWXIsdlHYUqVduJDFEmOt71mqZPUA==
@@ -5606,45 +5606,7 @@ react-native-windows@^0.64.14, react-native-windows@^0.64.2:
     whatwg-fetch "^3.0.0"
     ws "^7.4.6"
 
-react-native@0.64.0:
-  version "0.64.0"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.64.0.tgz#c3bde5b638bf8bcf12bae6e094930d39cb942ab7"
-  integrity sha512-8dhSHBthgGwAjU+OjqUEA49229ThPMQH7URH0u8L0xoQFCnZO2sZ9Wc6KcbxI0x9KSmjCMFFZqRe3w3QsRv64g==
-  dependencies:
-    "@jest/create-cache-key-function" "^26.5.0"
-    "@react-native-community/cli" "^5.0.1-alpha.0"
-    "@react-native-community/cli-platform-android" "^5.0.1-alpha.0"
-    "@react-native-community/cli-platform-ios" "^5.0.1-alpha.0"
-    "@react-native/assets" "1.0.0"
-    "@react-native/normalize-color" "1.0.0"
-    "@react-native/polyfills" "1.0.0"
-    abort-controller "^3.0.0"
-    anser "^1.4.9"
-    base64-js "^1.1.2"
-    event-target-shim "^5.0.1"
-    hermes-engine "~0.7.0"
-    invariant "^2.2.4"
-    jsc-android "^245459.0.0"
-    metro-babel-register "0.64.0"
-    metro-react-native-babel-transformer "0.64.0"
-    metro-runtime "0.64.0"
-    metro-source-map "0.64.0"
-    nullthrows "^1.1.1"
-    pretty-format "^26.5.2"
-    promise "^8.0.3"
-    prop-types "^15.7.2"
-    react-devtools-core "^4.6.0"
-    react-native-codegen "^0.0.6"
-    react-refresh "^0.4.0"
-    regenerator-runtime "^0.13.2"
-    scheduler "^0.20.1"
-    shelljs "^0.8.4"
-    stacktrace-parser "^0.1.3"
-    use-subscription "^1.0.0"
-    whatwg-fetch "^3.0.0"
-    ws "^6.1.4"
-
-react-native@^0.64.0:
+react-native@0.64.2, react-native@^0.64.0:
   version "0.64.2"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.64.2.tgz#233b6ed84ac4749c8bc2a2d6cf63577a1c437d18"
   integrity sha512-Ty/fFHld9DcYsFZujXYdeVjEhvSeQcwuTGXezyoOkxfiGEGrpL/uwUZvMzwShnU4zbbTKDu2PAm/uwuOittRGA==