From 529a95bf145b1f25511874776724082ab8032caa Mon Sep 17 00:00:00 2001
From: "Jon Thysell (JAUNTY)" <jthysell@microsoft.com>
Date: Wed, 6 Nov 2019 11:51:50 -0800
Subject: [PATCH 1/4] ViewManager Command Updates * Added command to
 CustomUserControlViewManagerCPP, #3600 * Added support for simpler C# view
 manager commands signatures * Added support for object properties for view
 managers, #3613 * Added documentation for C++ view manager * Added
 documentation for ViewManager commands, #3599

---
 .../index.windows.js                          |  28 +-
 .../CustomUserControlViewManagerCPP.cpp       |  26 +-
 .../CustomUserControlViewManagerCPP.h         |  12 +-
 .../windows/SampleLibraryCPP/DebugHelpers.cpp |  27 ++
 .../windows/SampleLibraryCPP/DebugHelpers.h   |  18 +
 .../SampleLibraryCPP/SampleLibraryCPP.vcxproj |   2 +
 .../SampleLibraryCPP.vcxproj.filters          |   2 +
 .../SampleLibraryCPP/SampleModuleCPP.h        |  39 +--
 .../CustomUserControlViewManagerCS.cs         |   5 +-
 .../AttributedViewManager.cs                  |  61 +++-
 .../Microsoft.ReactNative/ABIViewManager.cpp  |   9 +
 vnext/Microsoft.ReactNative/IViewManager.idl  |   1 +
 vnext/Microsoft.ReactNative/ReactSupport.cpp  |   4 +-
 vnext/docs/NativeModules.md                   |   6 +-
 vnext/docs/ViewManagers.md                    | 308 +++++++++++++++++-
 15 files changed, 491 insertions(+), 57 deletions(-)
 create mode 100644 packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp
 create mode 100644 packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.h

diff --git a/packages/microsoft-reactnative-sampleapps/index.windows.js b/packages/microsoft-reactnative-sampleapps/index.windows.js
index 3a4e872e21b..a3dfb6722f7 100644
--- a/packages/microsoft-reactnative-sampleapps/index.windows.js
+++ b/packages/microsoft-reactnative-sampleapps/index.windows.js
@@ -36,11 +36,6 @@ var getCallback = function(prefix) {
 };
 
 class SampleApp extends Component {
-  constructor(props) {
-    super(props);
-    this._CustomUserControlCSRef = React.createRef();
-  }
-
   componentDidMount() {
     this._TimedEventCSSub = SampleModuleCSEmitter.addListener('TimedEventCS', getCallback('SampleModuleCS.TimedEventCS() => '));
     this._TimedEventCPPSub = SampleModuleCPPEmitter.addListener('TimedEventCPP', getCallback('SampleModuleCPP.TimedEventCPP() => '));
@@ -130,11 +125,26 @@ class SampleApp extends Component {
   onPressCustomUserControlCS() {
     log('SampleApp.onPressCustomUserControlCS()');
 
+    var strArg = 'Hello World!';
+
     if (this._CustomUserControlCSRef)
     {
       const tag = findNodeHandle(this._CustomUserControlCSRef);
-      log(`tag: ${tag}`);
-      UIManager.dispatchViewManagerCommand(tag, UIManager.CustomUserControlCS.Commands.CustomCommand, ['Hello World!']);
+      log(`UIManager.dispatchViewManagerCommand(${tag}, CustomUserControlCS.CustomCommand, "${strArg}")`);
+      UIManager.dispatchViewManagerCommand(tag, UIManager.getViewManagerConfig('CustomUserControlCS').Commands.CustomCommand, strArg);
+    }
+  }
+
+  onPressCustomUserControlCPP() {
+    log('SampleApp.onPressCustomUserControlCPP()');
+
+    var strArg = 'Hello World!';
+
+    if (this._CustomUserControlCPPRef)
+    {
+      const tag = findNodeHandle(this._CustomUserControlCPPRef);
+      log(`UIManager.dispatchViewManagerCommand(${tag}, CustomUserControlCPP.CustomCommand, "${strArg}")`);
+      UIManager.dispatchViewManagerCommand(tag, UIManager.getViewManagerConfig('CustomUserControlCPP').Commands.CustomCommand, strArg);
     }
   }
 
@@ -154,7 +164,9 @@ class SampleApp extends Component {
         <CustomUserControlCS style={styles.customcontrol} label="CustomUserControlCS!" ref={(ref) => { this._CustomUserControlCSRef = ref; }} />
         <Button onPress={() => { this.onPressCustomUserControlCS(); }} title="Call CustomUserControlCS Commands!" />
 
-        <CustomUserControlCPP style={styles.customcontrol} label="CustomUserControlCPP!" />
+        <CustomUserControlCPP style={styles.customcontrol} label="CustomUserControlCPP!" ref={(ref) => { this._CustomUserControlCPPRef = ref; }} />
+        <Button onPress={() => { this.onPressCustomUserControlCPP(); }} title="Call CustomUserControlCPP Commands!" />
+
         <Text style={styles.instructions}>
           Hello from Microsoft!
         </Text>
diff --git a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/CustomUserControlViewManagerCPP.cpp b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/CustomUserControlViewManagerCPP.cpp
index 38739c858fd..1a7326f2439 100644
--- a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/CustomUserControlViewManagerCPP.cpp
+++ b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/CustomUserControlViewManagerCPP.cpp
@@ -5,6 +5,7 @@
 #include "CustomUserControlViewManagerCPP.h"
 
 #include "CustomUserControlCPP.h"
+#include "DebugHelpers.h"
 
 using namespace winrt;
 using namespace Microsoft::ReactNative::Bridge;
@@ -23,8 +24,7 @@ hstring CustomUserControlViewManagerCPP::Name() noexcept {
 }
 
 FrameworkElement CustomUserControlViewManagerCPP::CreateView() noexcept {
-  auto view = winrt::SampleLibraryCPP::CustomUserControlCPP();
-  return view;
+  return winrt::SampleLibraryCPP::CustomUserControlCPP();
 }
 
 // IViewManagerWithNativeProperties
@@ -70,4 +70,26 @@ void CustomUserControlViewManagerCPP::UpdateProperties(
   }
 }
 
+// IViewManagerWithCommands
+IMapView<hstring, int64_t> CustomUserControlViewManagerCPP::Commands() noexcept {
+  auto commands = winrt::single_threaded_map<hstring, int64_t>();
+  commands.Insert(L"CustomCommand", 0);
+  return commands.GetView();
+}
+
+void CustomUserControlViewManagerCPP::DispatchCommand(
+    FrameworkElement const &view,
+    int64_t commandId,
+    IVectorView<IInspectable> commandArgs) noexcept {
+  if (auto control = view.try_as<winrt::SampleLibraryCPP::CustomUserControlCPP>()) {
+    if (commandId == 0) {
+      std::string arg = std::to_string(winrt::unbox_value<int64_t>(view.Tag()));
+      arg.append(", \"");
+      arg.append(winrt::to_string(winrt::unbox_value<hstring>(commandArgs.GetAt(0))));
+      arg.append("\"");
+      ::SampleLibraryCPP::DebugWriteLine(to_string(Name()), "CustomCommand", arg);
+    }
+  }
+}
+
 } // namespace winrt::SampleLibraryCPP::implementation
diff --git a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/CustomUserControlViewManagerCPP.h b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/CustomUserControlViewManagerCPP.h
index 028939f60a0..a26f3b07eb7 100644
--- a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/CustomUserControlViewManagerCPP.h
+++ b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/CustomUserControlViewManagerCPP.h
@@ -10,7 +10,8 @@ namespace winrt::SampleLibraryCPP::implementation {
 struct CustomUserControlViewManagerCPP : winrt::implements<
                                              CustomUserControlViewManagerCPP,
                                              winrt::Microsoft::ReactNative::Bridge::IViewManager,
-                                             winrt::Microsoft::ReactNative::Bridge::IViewManagerWithNativeProperties> {
+                                             winrt::Microsoft::ReactNative::Bridge::IViewManagerWithNativeProperties,
+                                             winrt::Microsoft::ReactNative::Bridge::IViewManagerWithCommands> {
  public:
   CustomUserControlViewManagerCPP() = default;
 
@@ -28,6 +29,15 @@ struct CustomUserControlViewManagerCPP : winrt::implements<
       winrt::Windows::UI::Xaml::FrameworkElement const &view,
       winrt::Windows::Foundation::Collections::IMapView<winrt::hstring, winrt::Windows::Foundation::IInspectable> const
           &propertyMap);
+
+  // IViewManagerWithCommands
+  winrt::Windows::Foundation::Collections::IMapView<winrt::hstring, int64_t> Commands() noexcept;
+
+  void DispatchCommand(
+      winrt::Windows::UI::Xaml::FrameworkElement const &view,
+      int64_t commandId,
+      winrt::Windows::Foundation::Collections::IVectorView<winrt::Windows::Foundation::IInspectable>
+          commandArgs) noexcept;
 };
 
 } // namespace winrt::SampleLibraryCPP::implementation
diff --git a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp
new file mode 100644
index 00000000000..e4dc1f8ebaa
--- /dev/null
+++ b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp
@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+#include "pch.h"
+#include "DebugHelpers.h"
+
+namespace SampleLibraryCPP {
+
+void DebugWriteLine(const std::string &name, const std::string &methodName, const std::string &arg) {
+  std::string output = name;
+  output.append("::");
+  output.append(methodName);
+  output.append("(");
+  output.append(arg);
+  output.append(")\n");
+  OutputDebugStringA(output.c_str());
+}
+
+void DebugWriteLine(const std::string &name, const std::string &methodName, double arg) {
+  DebugWriteLine(name, methodName, std::to_string(arg));
+}
+
+void DebugWriteLine(const std::string &name, const std::string &methodName) {
+  DebugWriteLine(name, methodName, "");
+}
+
+} // namespace SampleLibraryCPP
diff --git a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.h b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.h
new file mode 100644
index 00000000000..fa765fdd064
--- /dev/null
+++ b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.h
@@ -0,0 +1,18 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "pch.h"
+
+#include <hstring.h>
+
+namespace SampleLibraryCPP {
+
+void DebugWriteLine(const std::string &name, const std::string &methodName, const std::string &arg);
+
+void DebugWriteLine(const std::string &name, const std::string &methodName, double arg);
+
+void DebugWriteLine(const std::string &name, const std::string &methodName);
+
+} // namespace SampleLibraryCPP
diff --git a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleLibraryCPP.vcxproj b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleLibraryCPP.vcxproj
index a885415d96a..bf635550434 100644
--- a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleLibraryCPP.vcxproj
+++ b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleLibraryCPP.vcxproj
@@ -108,6 +108,7 @@
       <DependentUpon>CustomUserControlCPP.idl</DependentUpon>
     </ClInclude>
     <ClInclude Include="CustomUserControlViewManagerCPP.h" />
+    <ClInclude Include="DebugHelpers.h" />
     <ClInclude Include="pch.h" />
     <ClInclude Include="ReactPackageProvider.h">
       <DependentUpon>ReactPackageProvider.idl</DependentUpon>
@@ -119,6 +120,7 @@
       <DependentUpon>CustomUserControlCPP.idl</DependentUpon>
     </ClCompile>
     <ClCompile Include="CustomUserControlViewManagerCPP.cpp" />
+    <ClCompile Include="DebugHelpers.cpp" />
     <ClCompile Include="pch.cpp">
       <PrecompiledHeader>Create</PrecompiledHeader>
     </ClCompile>
diff --git a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleLibraryCPP.vcxproj.filters b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleLibraryCPP.vcxproj.filters
index b3c19a42ee6..513349b94b9 100644
--- a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleLibraryCPP.vcxproj.filters
+++ b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleLibraryCPP.vcxproj.filters
@@ -18,6 +18,7 @@
     <ClCompile Include="ReactPackageProvider.cpp" />
     <ClCompile Include="CustomUserControlCPP.cpp" />
     <ClCompile Include="CustomUserControlViewManagerCPP.cpp" />
+    <ClCompile Include="DebugHelpers.cpp" />
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="pch.h" />
@@ -25,6 +26,7 @@
     <ClInclude Include="SampleModuleCPP.h" />
     <ClInclude Include="CustomUserControlCPP.h" />
     <ClInclude Include="CustomUserControlViewManagerCPP.h" />
+    <ClInclude Include="DebugHelpers.h" />
   </ItemGroup>
   <ItemGroup>
     <None Include="SampleLibraryCPP.def" />
diff --git a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleModuleCPP.h b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleModuleCPP.h
index 2bf7107da60..141c6fa115a 100644
--- a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleModuleCPP.h
+++ b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/SampleModuleCPP.h
@@ -9,6 +9,7 @@
 #define _USE_MATH_DEFINES
 #include <math.h>
 
+#include "DebugHelpers.h"
 #include "NativeModules.h"
 
 namespace SampleLibraryCPP {
@@ -19,24 +20,6 @@ REACT_MODULE(SampleModuleCPP);
 struct SampleModuleCPP {
   const std::string Name = "SampleModuleCPP";
 
-  void DebugWriteLine(const std::string &methodName, const std::string &arg) {
-    std::string output = Name;
-    output.append(".");
-    output.append(methodName);
-    output.append("(");
-    output.append(arg);
-    output.append(")\n");
-    OutputDebugStringA(output.c_str());
-  }
-
-  void DebugWriteLine(const std::string &methodName, double arg) {
-    DebugWriteLine(methodName, std::to_string(arg));
-  }
-
-  void DebugWriteLine(std::string methodName) {
-    DebugWriteLine(methodName, "");
-  }
-
 #pragma region Constants
 
   REACT_CONSTANT(NumberConstant);
@@ -57,23 +40,23 @@ struct SampleModuleCPP {
 
   REACT_METHOD(VoidMethod);
   void VoidMethod() noexcept {
-    DebugWriteLine("VoidMethod");
+    DebugWriteLine(Name, "VoidMethod");
   }
 
   REACT_METHOD(VoidMethodWithArgs);
   void VoidMethodWithArgs(double arg) noexcept {
-    DebugWriteLine("VoidMethodWithArgs", arg);
+    DebugWriteLine(Name, "VoidMethodWithArgs", arg);
   }
 
   REACT_METHOD(ReturnMethod);
   double ReturnMethod() noexcept {
-    DebugWriteLine("ReturnMethod");
+    DebugWriteLine(Name, "ReturnMethod");
     return M_PI;
   }
 
   REACT_METHOD(ReturnMethodWithArgs);
   double ReturnMethodWithArgs(double arg) noexcept {
-    DebugWriteLine("ReturnMethodWithArgs", arg);
+    DebugWriteLine(Name, "ReturnMethodWithArgs", arg);
     return M_PI;
   }
 
@@ -83,13 +66,13 @@ struct SampleModuleCPP {
 
   REACT_METHOD(ExplicitCallbackMethod);
   void ExplicitCallbackMethod(std::function<void(double)> &&callback) noexcept {
-    DebugWriteLine("ExplicitCallbackMethod");
+    DebugWriteLine(Name, "ExplicitCallbackMethod");
     callback(M_PI);
   }
 
   REACT_METHOD(ExplicitCallbackMethodWithArgs);
   void ExplicitCallbackMethodWithArgs(double arg, std::function<void(double)> &&callback) noexcept {
-    DebugWriteLine("ExplicitCallbackMethodWithArgs", arg);
+    DebugWriteLine(Name, "ExplicitCallbackMethodWithArgs", arg);
     callback(M_PI);
   }
 
@@ -97,7 +80,7 @@ struct SampleModuleCPP {
   void ExplicitPromiseMethod(
       std::function<void(double)> &&resolve,
       std::function<void(std::string)> &&reject) noexcept {
-    DebugWriteLine("ExplicitPromiseMethod");
+    DebugWriteLine(Name, "ExplicitPromiseMethod");
     try {
       resolve(M_PI);
     } catch (const std::exception &ex) {
@@ -110,7 +93,7 @@ struct SampleModuleCPP {
       double arg,
       std::function<void(double)> &&resolve,
       std::function<void(std::string)> &&reject) noexcept {
-    DebugWriteLine("ExplicitPromiseMethodWithArgs", arg);
+    DebugWriteLine(Name, "ExplicitPromiseMethodWithArgs", arg);
     try {
       resolve(M_PI);
     } catch (const std::exception &ex) {
@@ -124,13 +107,13 @@ struct SampleModuleCPP {
 
   REACT_SYNC_METHOD(SyncReturnMethod);
   double SyncReturnMethod() noexcept {
-    DebugWriteLine("SyncReturnMethod");
+    DebugWriteLine(Name, "SyncReturnMethod");
     return M_PI;
   }
 
   REACT_SYNC_METHOD(SyncReturnMethodWithArgs);
   double SyncReturnMethodWithArgs(double arg) noexcept {
-    DebugWriteLine("SyncReturnMethodWithArgs", arg);
+    DebugWriteLine(Name, "SyncReturnMethodWithArgs", arg);
     return M_PI;
   }
 
diff --git a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCS/CustomUserControlViewManagerCS.cs b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCS/CustomUserControlViewManagerCS.cs
index e429069147d..5872e56d8e7 100644
--- a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCS/CustomUserControlViewManagerCS.cs
+++ b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCS/CustomUserControlViewManagerCS.cs
@@ -6,7 +6,6 @@
 using Windows.UI.Xaml.Controls;
 
 using Microsoft.ReactNative.Managed;
-using System.Collections.Generic;
 
 namespace SampleLibraryCS
 {
@@ -52,9 +51,9 @@ public void SetBackgroundColor(CustomUserControlCS view, Brush value)
         }
 
         [ViewManagerCommand]
-        public void CustomCommand(CustomUserControlCS view, IReadOnlyList<object> args)
+        public void CustomCommand(CustomUserControlCS view, string arg)
         {
-            Debug.WriteLine($"{Name}.{nameof(CustomCommand)}({args[0].ToString()})");
+            Debug.WriteLine($"{Name}.{nameof(CustomCommand)}({view.Tag}, \"{arg}\")");
         }
     }
 }
diff --git a/vnext/Microsoft.ReactNative.SharedManaged/AttributedViewManager.cs b/vnext/Microsoft.ReactNative.SharedManaged/AttributedViewManager.cs
index 54e15a09438..0484ab6e52c 100644
--- a/vnext/Microsoft.ReactNative.SharedManaged/AttributedViewManager.cs
+++ b/vnext/Microsoft.ReactNative.SharedManaged/AttributedViewManager.cs
@@ -63,10 +63,8 @@ internal Dictionary<string, ViewManagerProperty<T>> ViewManagerProperties
               var setter = new ViewManagerProperty<T>();
               setter.Name = propertyAttribute.Name ?? methodInfo.Name;
               setter.Type = propertyAttribute.Type ?? TypeToViewManagerPropertyType(methodInfo.GetParameters()[1].ParameterType);
-              setter.Setter = (view, propertyValue) =>
-              {
-                methodInfo.Invoke(this, new object[] { view, propertyValue });
-              };
+              setter.Setter = MakePropertySetterMethod(methodInfo);
+
               properties.Add(setter.Name, setter);
             }
           }
@@ -119,10 +117,14 @@ private static ViewManagerPropertyType TypeToViewManagerPropertyType(Type t)
       {
         return ViewManagerPropertyType.Number;
       }
-      else if (t == typeof(object[]))
+      else if (t == typeof(IReadOnlyList<object>))
       {
         return ViewManagerPropertyType.Array;
       }
+      else if (t == typeof(IReadOnlyDictionary<string, object>))
+      {
+        return ViewManagerPropertyType.Map;
+      }
       else if (t == typeof(Brush))
       {
         return ViewManagerPropertyType.Color;
@@ -171,10 +173,7 @@ internal Dictionary<long, ViewManagerCommand<T>> ViewManagerCommands
               var command = new ViewManagerCommand<T>();
               command.CommandName = commandAttribute.Name ?? methodInfo.Name;
               command.CommandId = commandAttribute.CommandId ?? viewManagerCommands.Count;
-              command.CommandMethod = (view, commandArgs) =>
-              {
-                methodInfo.Invoke(this, new object[] { view, commandArgs });
-              };
+              command.CommandMethod = MakeCommandMethod(methodInfo);
               viewManagerCommands.Add(command.CommandId, command);
             }
           }
@@ -212,6 +211,50 @@ internal struct ViewManagerCommand<U> where U : T
 
     #region Reflection Helpers
 
+    private Action<T, object> MakePropertySetterMethod(MethodInfo methodInfo)
+    {
+      var parameters = methodInfo.GetParameters();
+
+      if (parameters.Length == 2
+        && parameters[0].ParameterType == typeof(T))
+      {
+        return (view, propertyValue) =>
+        {
+          methodInfo.Invoke(this, new object[] { view, propertyValue });
+        };
+      }
+
+      throw new ArgumentException($"Unable to parse parameters for {methodInfo.Name}.");
+    }
+
+    private Action<T, IReadOnlyList<object>> MakeCommandMethod(MethodInfo methodInfo)
+    {
+      var parameters = methodInfo.GetParameters();
+      if (parameters.Length == 2
+        && parameters[0].ParameterType == typeof(T)
+        && parameters[1].ParameterType == typeof(IReadOnlyList<object>))
+      {
+        return (view, commandArgs) =>
+        {
+          methodInfo.Invoke(this, new object[] { view, commandArgs });
+        };
+      }
+      else if (parameters.Length >= 2
+        && parameters[0].ParameterType == typeof(T))
+      {
+        return (view, commandArgs) =>
+        {
+          var invokeArgs = new List<object>(parameters.Length);
+          invokeArgs.Add(view);
+          invokeArgs.AddRange(commandArgs);
+
+          methodInfo.Invoke(this, invokeArgs.ToArray());
+        };
+      }
+
+      throw new ArgumentException($"Unable to parse parameters for {methodInfo.Name}.");
+    }
+
     private IReadOnlyDictionary<string, object> GetConstantsByAttribute<U>() where U : ViewManagerNamedAttribute
     {
       var typeInfo = GetType().GetTypeInfo();
diff --git a/vnext/Microsoft.ReactNative/ABIViewManager.cpp b/vnext/Microsoft.ReactNative/ABIViewManager.cpp
index b2f7d2972c7..d2bb84fbee2 100644
--- a/vnext/Microsoft.ReactNative/ABIViewManager.cpp
+++ b/vnext/Microsoft.ReactNative/ABIViewManager.cpp
@@ -68,6 +68,9 @@ folly::dynamic ABIViewManager::GetNativeProps() const {
         case ViewManagerPropertyType::Array:
           value = folly::dynamic("array");
           break;
+        case ViewManagerPropertyType::Map:
+          value = folly::dynamic("Map");
+          break;
         case ViewManagerPropertyType::Color:
           value = folly::dynamic("Color");
           break;
@@ -138,6 +141,12 @@ void ABIViewManager::DispatchCommand(
     auto listArgs =
         iinspectableArgs.try_as<winrt::Windows::Foundation::Collections::IVectorView<winrt::IInspectable>>();
 
+    if (listArgs == nullptr) {
+      auto args = single_threaded_vector<winrt::IInspectable>();
+      args.Append(iinspectableArgs);
+      listArgs = args.GetView();
+    }
+
     m_viewManagerWithCommands.DispatchCommand(view, commandId, listArgs);
   }
 }
diff --git a/vnext/Microsoft.ReactNative/IViewManager.idl b/vnext/Microsoft.ReactNative/IViewManager.idl
index 9d789959293..4773ee35389 100644
--- a/vnext/Microsoft.ReactNative/IViewManager.idl
+++ b/vnext/Microsoft.ReactNative/IViewManager.idl
@@ -10,6 +10,7 @@ namespace Microsoft.ReactNative.Bridge
     Number,
     String,
     Array,
+    Map,
     Color,
   };
 
diff --git a/vnext/Microsoft.ReactNative/ReactSupport.cpp b/vnext/Microsoft.ReactNative/ReactSupport.cpp
index 7982166b5fb..ff9b0053206 100644
--- a/vnext/Microsoft.ReactNative/ReactSupport.cpp
+++ b/vnext/Microsoft.ReactNative/ReactSupport.cpp
@@ -197,9 +197,9 @@ IInspectable ConvertToIInspectable(folly::dynamic const &object) {
     case folly::dynamic::INT64:
       return box_value(object.asInt());
     case folly::dynamic::OBJECT: {
-      auto objs = single_threaded_map<IInspectable, IInspectable>();
+      auto objs = single_threaded_map<hstring, IInspectable>();
       for (auto it : object.items()) {
-        objs.Insert(ConvertToIInspectable(it.first), ConvertToIInspectable(it.second));
+        objs.Insert(winrt::to_hstring(it.first.getString()), ConvertToIInspectable(it.second));
       }
       return objs.GetView();
     }
diff --git a/vnext/docs/NativeModules.md b/vnext/docs/NativeModules.md
index 2c2ab39a347..72bd0dd218c 100644
--- a/vnext/docs/NativeModules.md
+++ b/vnext/docs/NativeModules.md
@@ -273,13 +273,15 @@ To add custom events, we attribute a `std::function<void(double)>` delegate with
 Now, we want to register our new `FancyMath` module with React Native so we can use it from JavaScript code. To do this, first we're going to create a `ReactPackageProvider` which implements [Microsoft.ReactNative.IReactPackageProvider](../Microsoft.ReactNative/IReactPackageProvider.idl). It starts with defining an .idl file:
 
 *ReactPackageProvider.idl*
-```csharp
+```c++
 namespace NativeModuleSample {
 
 runtimeclass ReactPackageProvider : Microsoft.ReactNative.IReactPackageProvider
 {
   ReactPackageProvider();
 };
+
+}
 ```
 
 After that we add the .h and.cpp files:
@@ -345,6 +347,8 @@ Now that we have the `ReactPackageProvider`, it's time to register it within our
 #include "App.h"
 #include "ReactPackageProvider.h"
 
+#include "winrt/NativeModuleSample.h"
+
 namespace winrt::SampleApp::implementation {
 
 App::App() noexcept {
diff --git a/vnext/docs/ViewManagers.md b/vnext/docs/ViewManagers.md
index 9445311eccf..40b78bec3b1 100644
--- a/vnext/docs/ViewManagers.md
+++ b/vnext/docs/ViewManagers.md
@@ -93,7 +93,7 @@ namespace ViewManagerSample
 
 Here is a sample view manager written in C# called `CustomUserControlViewManager`.
 
-*FancyMath.cs*
+*CustomUserControlViewManager.cs*
 ```csharp
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Controls;
@@ -143,6 +143,12 @@ namespace ViewManagerSample
                 view.ClearValue(Control.BackgroundProperty);
             }
         }
+
+        [ViewManagerCommand]
+        public void CustomCommand(CustomUserControl view, IReadonlyList<object> commandArgs)
+        {
+            // Execute command
+        }
     }
 }
 ```
@@ -203,18 +209,28 @@ The `Microsoft.ReactNative.Managed.ReactPackageProvider` is a convenience that m
 import React, { Component } from 'react';
 import {
   AppRegistry,
+  Button,
   requireNativeComponent,
   StyleSheet,
+  UIManager,
   View,
 } from 'react-native';
 
 let CustomUserControl = requireNativeComponent('CustomUserControl');
 
 class ViewManagerSample extends Component {
+  onPress() {
+    if (_customControlRef) {
+      const tag = findNodeHandle(this._customControlRef);
+      UIManager.dispatchViewManagerCommand(tag, UIManager.getViewManagerConfig('CustomUserControl').Commands.CustomCommand, ['arg1', 'arg2']);
+    }
+  }
+
   render() {
     return (
       <View style={styles.container}>
-         <CustomUserControl style={styles.customcontrol} label="CustomUserControlCS!" ref={(ref) => { this._cuccsRef = ref; }} />
+         <CustomUserControl style={styles.customcontrol} label="CustomUserControl!" ref={(ref) => { this._customControlRef = ref; }} />
+         <Button onPress={() => { this.onPress(); }} title="Call CustomUserControl Commands!" />
       </View>);
   }
 }
@@ -240,4 +256,290 @@ AppRegistry.registerComponent('ViewManagerSample', () => ViewManagerSample);
 
 ## Sample ViewManager (C++)
 
-*TODO*
+For this sample, assume we already have the `CustomUserControl` defined in the C# example.
+
+#### 1. Authoring your View Manager 
+
+Here is a sample view manager written in C++ called `CustomUserControlViewManager`.
+
+*CustomUserControlViewManager.h*
+```c++
+#pragma once
+
+#include "winrt/Microsoft.ReactNative.Bridge.h"
+
+namespace winrt::ViewManagerSample::implementation {
+
+struct CustomUserControlViewManager : winrt::implements<
+                                             CustomUserControlViewManager,
+                                             winrt::Microsoft::ReactNative::Bridge::IViewManager,
+                                             winrt::Microsoft::ReactNative::Bridge::IViewManagerWithNativeProperties,
+                                             winrt::Microsoft::ReactNative::Bridge::IViewManagerWithCommands> {
+ public:
+  CustomUserControlViewManager() = default;
+
+  // IViewManager
+  winrt::hstring Name() noexcept;
+
+  winrt::Windows::UI::Xaml::FrameworkElement CreateView() noexcept;
+
+  // IViewManagerWithNativeProperties
+  winrt::Windows::Foundation::Collections::
+      IMapView<winrt::hstring, winrt::Microsoft::ReactNative::Bridge::ViewManagerPropertyType>
+      NativeProps() noexcept;
+
+  void UpdateProperties(
+      winrt::Windows::UI::Xaml::FrameworkElement const &view,
+      winrt::Windows::Foundation::Collections::IMapView<winrt::hstring, winrt::Windows::Foundation::IInspectable> const
+          &propertyMap);
+   
+   // IViewManagerWithCommands
+  winrt::Windows::Foundation::Collections::IMapView<winrt::hstring, int64_t> Commands() noexcept;
+
+  void DispatchCommand(
+          winrt::Windows::UI::Xaml::FrameworkElement const &view,
+          int64_t commandId,
+          winrt::Windows::Foundation::Collections::IVectorView<winrt::Windows::Foundation::IInspectable> commandArgs) noexcept;
+};
+
+}
+```
+
+*CustomUserControlViewManager.cpp*
+```c++
+#include "pch.h"
+#include "CustomUserControlViewManager.h"
+
+using namespace winrt;
+using namespace Microsoft::ReactNative::Bridge;
+using namespace Windows::Foundation;
+using namespace Windows::Foundation::Collections;
+
+using namespace Windows::UI::Xaml;
+using namespace Windows::UI::Xaml::Media;
+using namespace Windows::UI::Xaml::Controls;
+
+namespace winrt::ViewManagerSample::implementation {
+
+// IViewManager
+hstring CustomUserControlViewManager::Name() noexcept {
+  return L"CustomUserControl";
+}
+
+FrameworkElement CustomUserControlViewManager::CreateView() noexcept {
+  return winrt::ViewManagerSample::CustomUserControl();
+}
+
+// IViewManagerWithNativeProperties
+IMapView<hstring, ViewManagerPropertyType> CustomUserControlViewManager::NativeProps() noexcept {
+  auto nativeProps = winrt::single_threaded_map<hstring, ViewManagerPropertyType>();
+
+  nativeProps.Insert(L"label", ViewManagerPropertyType::String);
+  nativeProps.Insert(L"color", ViewManagerPropertyType::Color);
+  nativeProps.Insert(L"backgroundColor", ViewManagerPropertyType::Color);
+
+  return nativeProps.GetView();
+}
+
+void CustomUserControlViewManager::UpdateProperties(
+    FrameworkElement const &view,
+    IMapView<hstring, IInspectable> const &propertyMap) {
+  if (auto control = view.try_as<winrt::ViewManagerSample::CustomUserControl>()) {
+    for (auto const &pair : propertyMap) {
+      auto const &propertyName = pair.Key();
+      auto const &propertyValue = pair.Value();
+
+      if (propertyName == L"label") {
+        if (propertyValue != nullptr) {
+          auto value = winrt::unbox_value<hstring>(propertyValue);
+          control.SetValue(winrt::ViewManagerSample::CustomUserControl::LabelProperty(), propertyValue);
+        } else {
+          control.ClearValue(winrt::ViewManagerSample::CustomUserControl::LabelProperty());
+        }
+      } else if (propertyName == L"color") {
+        if (auto value = propertyValue.try_as<Brush>()) {
+          control.SetValue(Control::ForegroundProperty(), propertyValue);
+        } else {
+          control.ClearValue(Control::ForegroundProperty());
+        }
+      } else if (propertyName == L"backgroundColor") {
+        if (auto value = propertyValue.try_as<Brush>()) {
+          control.SetValue(Control::BackgroundProperty(), propertyValue);
+        } else {
+          control.ClearValue(Control::BackgroundProperty());
+        }
+      }
+    }
+  }
+}
+
+// IViewManagerWithCommands
+IMapView<hstring, int64_t> CustomUserControlViewManager::Commands() noexcept {
+    auto commands = winrt::single_threaded_map<hstring, int64_t>();
+    commands.Insert(L"CustomCommand", 0);
+    return commands.GetView();
+}
+
+void CustomUserControlViewManager::DispatchCommand(
+    FrameworkElement const &view,
+    int64_t commandId,
+    IVectorView<IInspectable> commandArgs) noexcept {
+  if (auto control = view.try_as<winrt::SampleLibraryCPP::CustomUserControlCPP>()) {
+    if (commandId == 0) {
+      // Execute command
+    }
+  }
+}
+
+}
+
+```
+
+#### 2. Registering your View Manager
+
+As with native modules, we want to register our new `CustomUserControlViewManager` with React Native so we can actually use it. To do this, first we're going to create a `ReactPackageProvider` which implements [Microsoft.ReactNative.IReactPackageProvider](../Microsoft.ReactNative/IReactPackageProvider.idl).
+
+*ReactPackageProvider.idl*
+```c++
+namespace ViewManagerSample {
+
+runtimeclass ReactPackageProvider : Microsoft.ReactNative.IReactPackageProvider
+{
+  ReactPackageProvider();
+};
+
+}
+```
+
+After that we add the .h and.cpp files:
+
+*ReactPackageProvider.h*
+```cpp
+#pragma once
+#include "ReactPackageProvider.g.h"
+
+namespace winrt::ViewManagerSample::implementation {
+
+struct ReactPackageProvider : ReactPackageProviderT<ReactPackageProvider>
+{
+  ReactPackageProvider() = default;
+  void CreatePackage(Microsoft::ReactNative::IReactPackageBuilder const& packageBuilder);
+};
+
+} // namespace winrt::ViewManagerSample::implementation
+
+namespace winrt::ViewManagerSample::factory_implementation {
+
+struct ReactPackageProvider : ReactPackageProviderT<
+                                     ReactPackageProvider,
+                                     implementation::ReactPackageProvider>
+{
+};
+
+} // namespace winrt::ViewManagerSample::factory_implementation
+```
+
+*ReactPackageProvider.cpp*
+```cpp
+#include "pch.h"
+#include "ReactPackageProvider.h"
+#include "ReactPackageProvider.g.cpp"
+
+#include "CustomUserControlViewManager.h"
+
+using namespace winrt::Microsoft::ReactNative;
+using namespace Microsoft::ReactNative;
+
+namespace winrt::ViewManagerSample::implementation {
+
+void ReactPackageProvider::CreatePackage(IReactPackageBuilder const& packageBuilder)
+{
+  packageBuilder.AddViewManager(
+      L"CustomUserControlViewManager", []() { return winrt::make<CustomUserControlViewManager>(); });
+}
+
+} // namespace winrt::ViewManagerSample::implementation
+
+```
+
+Here we've implemented the `CreatePackage` method, which receives `packageBuilder` to build contents of the package. And then we call `AddViewManager` with the name of our view manager and a lambda which returns an instance of the view manager.
+
+Now that we have the `ReactPackageProvider`, it's time to register it within our `ReactApplication`. We do that by simply adding the proviver to the `PackageProviders` property.
+
+*App.cpp*
+```c++
+#include "pch.h"
+
+#include "App.h"
+#include "ReactPackageProvider.h"
+#include "winrt/ViewManagerSample.h"
+
+namespace winrt::SampleApp::implementation {
+
+App::App() noexcept {
+  /* Other Init Code */
+
+  PackageProviders().Append(make<ReactPackageProvider>()); // Includes all modules in this project
+  PackageProviders().Append(winrt::ViewManagerSample::ReactPackageProvider());
+
+  /* Other Init Code */
+}
+
+} // namespace winrt::SampleApp::implementation
+```
+
+This example assumes that the `ViewManagerSample::ReactPackageProvider` we created above is in a different project (assembly) than our application. However you'll notice that by default we also added a `SampleApp::ReactPackageProvider`.
+
+The `SampleApp::ReactPackageProvider` is a convenience that makes sure that all native modules and view managers defined within the app project automatically get registered. So if you're creating your native modules directly within the app project, you won't actually want to define a separate `ReactPackageProvider`. 
+
+#### 3. Using your View Manager in JSX
+
+*ViewManagerSample.js*
+```js
+import React, { Component } from 'react';
+import {
+  AppRegistry,
+  Button,
+  requireNativeComponent,
+  StyleSheet,
+  UIManager,
+  View,
+} from 'react-native';
+
+let CustomUserControl = requireNativeComponent('CustomUserControl');
+
+class ViewManagerSample extends Component {
+  onPress() {
+    if (_customControlRef) {
+      const tag = findNodeHandle(this._customControlRef);
+      UIManager.dispatchViewManagerCommand(tag, UIManager.getViewManagerConfig('CustomUserControl').Commands.CustomCommand, ['arg1', 'arg2']);
+    }
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+         <CustomUserControl style={styles.customcontrol} label="CustomUserControl!" ref={(ref) => { this._customControlRef = ref; }} />
+         <Button onPress={() => { this.onPress(); }} title="Call CustomUserControl Commands!" />
+      </View>);
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  customcontrol: {
+    color: '#333333',
+    backgroundColor: '#006666',
+    width: 200,
+    height: 20,
+    margin: 10,
+  },
+});
+
+AppRegistry.registerComponent('ViewManagerSample', () => ViewManagerSample);
+```

From 55898bb4cea8d9d8f538928a3ccfcb3ea6ad729a Mon Sep 17 00:00:00 2001
From: "Jon Thysell (JAUNTY)" <jthysell@microsoft.com>
Date: Wed, 6 Nov 2019 16:45:50 -0800
Subject: [PATCH 2/4] Change files

---
 ...act-native-windows-2019-11-06-16-45-50-vmcommands.json | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 change/react-native-windows-2019-11-06-16-45-50-vmcommands.json

diff --git a/change/react-native-windows-2019-11-06-16-45-50-vmcommands.json b/change/react-native-windows-2019-11-06-16-45-50-vmcommands.json
new file mode 100644
index 00000000000..163e88d4f8c
--- /dev/null
+++ b/change/react-native-windows-2019-11-06-16-45-50-vmcommands.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "ViewManager Command Updates * Added command to CustomUserControlViewManagerCPP, #3600 * Added support for simpler C# view manager commands signatures * Added support for object properties for view managers, #3613 * Added documentation for C++ view manager * Added documentation for ViewManager commands, #3599",
+  "packageName": "react-native-windows",
+  "email": "jthysell@microsoft.com",
+  "commit": "529a95bf145b1f25511874776724082ab8032caa",
+  "date": "2019-11-07T00:45:50.666Z"
+}
\ No newline at end of file

From 7577d224b1d27471189b8bdbe9222cd567f3ae52 Mon Sep 17 00:00:00 2001
From: "Jon Thysell (JAUNTY)" <jthysell@microsoft.com>
Date: Thu, 7 Nov 2019 13:23:54 -0800
Subject: [PATCH 3/4] Addressing feedback

---
 .../windows/SampleAppCPP/DebugConsole.h                    | 3 +--
 .../windows/SampleLibraryCPP/DebugHelpers.cpp              | 7 +------
 vnext/Microsoft.ReactNative/ABIViewManager.cpp             | 2 +-
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/DebugConsole.h b/packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/DebugConsole.h
index d9061633469..f4231c71f56 100644
--- a/packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/DebugConsole.h
+++ b/packages/microsoft-reactnative-sampleapps/windows/SampleAppCPP/DebugConsole.h
@@ -12,8 +12,7 @@ REACT_MODULE(DebugConsole);
 struct DebugConsole {
   REACT_METHOD(Log);
   void Log(std::string message) noexcept {
-    std::string output = message;
-    output.append("\n");
+    std::string output = message + "\n";
     OutputDebugStringA(output.c_str());
   }
 };
diff --git a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp
index e4dc1f8ebaa..6587653ec1e 100644
--- a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp
+++ b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp
@@ -7,12 +7,7 @@
 namespace SampleLibraryCPP {
 
 void DebugWriteLine(const std::string &name, const std::string &methodName, const std::string &arg) {
-  std::string output = name;
-  output.append("::");
-  output.append(methodName);
-  output.append("(");
-  output.append(arg);
-  output.append(")\n");
+  std::string output = name + "::" + methodName + "(" + arg +")\n";
   OutputDebugStringA(output.c_str());
 }
 
diff --git a/vnext/Microsoft.ReactNative/ABIViewManager.cpp b/vnext/Microsoft.ReactNative/ABIViewManager.cpp
index d2bb84fbee2..e5d96d07d2e 100644
--- a/vnext/Microsoft.ReactNative/ABIViewManager.cpp
+++ b/vnext/Microsoft.ReactNative/ABIViewManager.cpp
@@ -141,7 +141,7 @@ void ABIViewManager::DispatchCommand(
     auto listArgs =
         iinspectableArgs.try_as<winrt::Windows::Foundation::Collections::IVectorView<winrt::IInspectable>>();
 
-    if (listArgs == nullptr) {
+    if (!listArgs) {
       auto args = single_threaded_vector<winrt::IInspectable>();
       args.Append(iinspectableArgs);
       listArgs = args.GetView();

From fd09e60b4197e226df3636487112f1dec8b9966e Mon Sep 17 00:00:00 2001
From: "Jon Thysell (JAUNTY)" <jthysell@microsoft.com>
Date: Thu, 7 Nov 2019 13:34:21 -0800
Subject: [PATCH 4/4] clangify

---
 .../windows/SampleLibraryCPP/DebugHelpers.cpp                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp
index 6587653ec1e..db4b384d186 100644
--- a/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp
+++ b/packages/microsoft-reactnative-sampleapps/windows/SampleLibraryCPP/DebugHelpers.cpp
@@ -7,7 +7,7 @@
 namespace SampleLibraryCPP {
 
 void DebugWriteLine(const std::string &name, const std::string &methodName, const std::string &arg) {
-  std::string output = name + "::" + methodName + "(" + arg +")\n";
+  std::string output = name + "::" + methodName + "(" + arg + ")\n";
   OutputDebugStringA(output.c_str());
 }