react-native-windows 0.0.0-canary.751 → 0.0.0-canary.753

package/Libraries/Alert/NativeDialogManagerWindows.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Libraries/Components/TextInput/WindowsTextInputNativeComponent.js

@@ -1,4 +1,9 @@
 /**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
  * @flow
  * @format
  */

package/Libraries/NewAppScreen/components/DebugInstructions.windows.js

@@ -8,9 +8,11 @@
  * @format
  */
 
-import React from 'react';
 import type {Node} from 'react';
-import {StyleSheet, Text} from 'react-native';
+
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import React from 'react';
 
 const styles = StyleSheet.create({
   highlight: {

package/Libraries/NewAppScreen/components/ReloadInstructions.windows.js

@@ -9,7 +9,9 @@
  */
 
 import type {Node} from 'react';
-import {StyleSheet, Text} from 'react-native';
+
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
 import React from 'react';
 
 const styles = StyleSheet.create({

package/Libraries/StyleSheet/PlatformColorValueTypes.windows.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/Microsoft.ReactNative/Base/CoreUIManagers.cpp

@@ -22,6 +22,7 @@
 #include <Views/SwitchViewManager.h>
 #include <Views/TextInputViewManager.h>
 #include <Views/TextViewManager.h>
+#include <Views/UnimplementedViewManager.h>
 #include <Views/ViewViewManager.h>
 #include <Views/VirtualTextViewManager.h>
 
@@ -33,6 +34,7 @@ void AddStandardViewManagers(
   viewManagers.push_back(std::make_unique<ActivityIndicatorViewManager>(context));
   viewManagers.push_back(std::make_unique<FlyoutViewManager>(context));
   viewManagers.push_back(std::make_unique<ImageViewManager>(context));
+  viewManagers.push_back(std::make_unique<UnimplementedViewManager>(context, L"RCTModalHostView"));
   viewManagers.push_back(std::make_unique<PopupViewManager>(context));
   viewManagers.push_back(std::make_unique<RawTextViewManager>(context));
   viewManagers.push_back(std::make_unique<RootViewManager>(context));

package/Microsoft.ReactNative/CompositionComponentView.idl

@@ -46,6 +46,12 @@ namespace Microsoft.ReactNative.Composition
   unsealed runtimeclass ActivityIndicatorComponentView : ComponentView {
   };
 
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  unsealed runtimeclass WindowsModalHostComponentView : ComponentView {
+  };
+
   [experimental]
   [webhosthidden]
   [default_interface]

package/Microsoft.ReactNative/Fabric/Composition/ComponentViewRegistry.cpp

@@ -10,27 +10,28 @@
 #include <react/renderer/components/scrollview/ScrollViewShadowNode.h>
 #pragma warning(pop)
 
-#include <Fabric/Composition/TextInput/WindowsTextInputShadowNode.h>
-#include <react/components/rnwcore/ShadowNodes.h>
-#include <react/renderer/components/image/ImageShadowNode.h>
-#include <react/renderer/components/root/RootShadowNode.h>
-#include <react/renderer/components/text/ParagraphShadowNode.h>
-#include <react/renderer/components/text/RawTextShadowNode.h>
-#include <react/renderer/components/text/TextShadowNode.h>
-#include <react/renderer/components/view/ViewShadowNode.h>
-
 #include <Fabric/Composition/AbiCompositionViewComponentView.h>
 #include <Fabric/Composition/ActivityIndicatorComponentView.h>
 #include <Fabric/Composition/CompositionHelpers.h>
 #include <Fabric/Composition/CompositionViewComponentView.h>
 #include <Fabric/Composition/ImageComponentView.h>
+#include <Fabric/Composition/Modal/WindowsModalHostViewComponentView.h>
+#include <Fabric/Composition/Modal/WindowsModalHostViewShadowNode.h>
 #include <Fabric/Composition/ParagraphComponentView.h>
 #include <Fabric/Composition/RootComponentView.h>
 #include <Fabric/Composition/ScrollViewComponentView.h>
 #include <Fabric/Composition/SwitchComponentView.h>
 #include <Fabric/Composition/TextInput/WindowsTextInputComponentView.h>
+#include <Fabric/Composition/TextInput/WindowsTextInputShadowNode.h>
 #include <Fabric/Composition/UnimplementedNativeViewComponentView.h>
 #include <Fabric/WindowsComponentDescriptorRegistry.h>
+#include <react/components/rnwcore/ShadowNodes.h>
+#include <react/renderer/components/image/ImageShadowNode.h>
+#include <react/renderer/components/root/RootShadowNode.h>
+#include <react/renderer/components/text/ParagraphShadowNode.h>
+#include <react/renderer/components/text/RawTextShadowNode.h>
+#include <react/renderer/components/text/TextShadowNode.h>
+#include <react/renderer/components/view/ViewShadowNode.h>
 
 namespace Microsoft::ReactNative {
 
@@ -58,6 +59,9 @@ ComponentViewDescriptor const &ComponentViewRegistry::dequeueComponentViewWithCo
   } else if (componentHandle == facebook::react::ImageShadowNode::Handle()) {
     view = winrt::Microsoft::ReactNative::Composition::implementation::ImageComponentView::Create(
         compContext, tag, m_context);
+  } else if (componentHandle == facebook::react::WindowsModalHostViewShadowNode::Handle()) {
+    view = winrt::Microsoft::ReactNative::Composition::implementation::WindowsModalHostComponentView::Create(
+        compContext, tag, m_context);
   } else if (componentHandle == facebook::react::WindowsTextInputShadowNode::Handle()) {
     view = winrt::Microsoft::ReactNative::Composition::implementation::WindowsTextInputComponentView::Create(
         compContext, tag, m_context);

package/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentDescriptor.h

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <glog/logging.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+// [Windows
+#include "WindowsModalHostViewShadowNode.h"
+// ]
+
+namespace facebook::react {
+
+/*
+ * Descriptor for <WindowsModalHostView> component.
+ */
+
+class WindowsModalHostViewComponentDescriptor final
+    : public ConcreteComponentDescriptor<WindowsModalHostViewShadowNode> {
+ public:
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode &shadowNode) const override {
+    auto &layoutableShadowNode = static_cast<YogaLayoutableShadowNode &>(shadowNode);
+    auto &stateData =
+        static_cast<const WindowsModalHostViewShadowNode::ConcreteState &>(*shadowNode.getState()).getData();
+
+    layoutableShadowNode.setSize(Size{stateData.screenSize.width, stateData.screenSize.height});
+    layoutableShadowNode.setPositionType(YGPositionTypeAbsolute);
+
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react

package/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp

@@ -0,0 +1,145 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "WindowsModalHostViewComponentView.h"
+
+#include <Fabric/DWriteHelpers.h>
+#include "../CompositionDynamicAutomationProvider.h"
+#include "Composition/AutoDraw.h"
+#include "Unicode.h"
+
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+winrt::Microsoft::ReactNative::ComponentView WindowsModalHostComponentView::Create(
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
+  return winrt::make<WindowsModalHostComponentView>(compContext, tag, reactContext);
+}
+WindowsModalHostComponentView::WindowsModalHostComponentView(
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    : Super(compContext, tag, reactContext, CompositionComponentViewFeatures::Default) {
+  m_props = std::make_shared<facebook::react::ModalHostViewProps const>();
+  m_visual = compContext.CreateSpriteVisual();
+}
+
+void WindowsModalHostComponentView::mountChildComponentView(
+    winrt::Microsoft::ReactNative::implementation::ComponentView &childComponentView,
+    uint32_t index) noexcept {
+  // assert(false);
+}
+
+void WindowsModalHostComponentView::unmountChildComponentView(
+    winrt::Microsoft::ReactNative::implementation::ComponentView &childComponentView,
+    uint32_t index) noexcept {
+  // assert(false);
+}
+
+void WindowsModalHostComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
+  Super::handleCommand(commandName, arg);
+}
+
+void WindowsModalHostComponentView::updateProps(
+    facebook::react::Props::Shared const &props,
+    facebook::react::Props::Shared const &oldProps) noexcept {
+  m_props = std::static_pointer_cast<facebook::react::ModalHostViewProps const>(props);
+}
+
+void WindowsModalHostComponentView::updateLayoutMetrics(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+  if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) {
+    OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
+  }
+
+  // TODO: RedBox placeholder for Modal (taken from unimplementedNativeViewComponent)
+  if (m_layoutMetrics.frame.size != layoutMetrics.frame.size ||
+      m_layoutMetrics.pointScaleFactor != layoutMetrics.pointScaleFactor) {
+    // Always make visual a min size, so that even if its laid out at zero size, its clear an unimplemented view was
+    // rendered
+    float width = std::max(m_layoutMetrics.frame.size.width, 200.0f);
+    float height = std::max(m_layoutMetrics.frame.size.width, 50.0f);
+
+    winrt::Windows::Foundation::Size surfaceSize = {
+        width * m_layoutMetrics.pointScaleFactor, height * m_layoutMetrics.pointScaleFactor};
+    auto drawingSurface = m_compContext.CreateDrawingSurfaceBrush(
+        surfaceSize,
+        winrt::Windows::Graphics::DirectX::DirectXPixelFormat::B8G8R8A8UIntNormalized,
+        winrt::Windows::Graphics::DirectX::DirectXAlphaMode::Premultiplied);
+
+    drawingSurface.HorizontalAlignmentRatio(0.f);
+    drawingSurface.VerticalAlignmentRatio(0.f);
+    drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::None);
+    m_visual.Brush(drawingSurface);
+    m_visual.Size(surfaceSize);
+    m_visual.Offset({
+        layoutMetrics.frame.origin.x * layoutMetrics.pointScaleFactor,
+        layoutMetrics.frame.origin.y * layoutMetrics.pointScaleFactor,
+        0.0f,
+    });
+
+    POINT offset;
+    {
+      ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(drawingSurface, &offset);
+      if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
+        d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Red, 0.3f));
+        assert(d2dDeviceContext->GetUnitMode() == D2D1_UNIT_MODE_DIPS);
+        const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
+        float oldDpiX, oldDpiY;
+        d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
+        d2dDeviceContext->SetDpi(dpi, dpi);
+
+        float offsetX = static_cast<float>(offset.x / m_layoutMetrics.pointScaleFactor);
+        float offsetY = static_cast<float>(offset.y / m_layoutMetrics.pointScaleFactor);
+      }
+    }
+  }
+
+  Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
+}
+
+void WindowsModalHostComponentView::updateState(
+    facebook::react::State::Shared const &state,
+    facebook::react::State::Shared const &oldState) noexcept {}
+
+void WindowsModalHostComponentView::prepareForRecycle() noexcept {}
+
+facebook::react::SharedViewProps WindowsModalHostComponentView::viewProps() noexcept {
+  return m_props;
+}
+
+winrt::Microsoft::ReactNative::Composition::IVisual WindowsModalHostComponentView::Visual() const noexcept {
+  return m_visual;
+}
+
+facebook::react::Tag WindowsModalHostComponentView::hitTest(
+    facebook::react::Point pt,
+    facebook::react::Point &localPt,
+    bool ignorePointerEvents) const noexcept {
+  facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y};
+
+  if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+       m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) &&
+      ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 &&
+      ptLocal.y <= m_layoutMetrics.frame.size.height) {
+    localPt = ptLocal;
+    return Tag();
+  }
+
+  return -1;
+}
+
+bool WindowsModalHostComponentView::focusable() const noexcept {
+  return false;
+}
+
+std::string WindowsModalHostComponentView::DefaultControlType() const noexcept {
+  return "modal";
+}
+
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation

package/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h

@@ -0,0 +1,59 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <Fabric/ComponentView.h>
+#include <Microsoft.ReactNative.Cxx/ReactContext.h>
+
+#include "Composition.WindowsModalHostComponentView.g.h"
+#include "../CompositionViewComponentView.h"
+
+#include <react/components/rnwcore/ShadowNodes.h>
+
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+
+struct WindowsModalHostComponentView
+    : WindowsModalHostComponentViewT<WindowsModalHostComponentView, CompositionBaseComponentView> {
+  using Super = WindowsModalHostComponentViewT<WindowsModalHostComponentView, CompositionBaseComponentView>;
+
+  [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
+
+  void mountChildComponentView(
+      winrt::Microsoft::ReactNative::implementation::ComponentView &childComponentView,
+      uint32_t index) noexcept override;
+  void unmountChildComponentView(
+      winrt::Microsoft::ReactNative::implementation::ComponentView &childComponentView,
+      uint32_t index) noexcept override;
+  void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept override;
+  void updateProps(facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept
+      override;
+  void updateState(facebook::react::State::Shared const &state, facebook::react::State::Shared const &oldState) noexcept
+      override;
+  void updateLayoutMetrics(
+      facebook::react::LayoutMetrics const &layoutMetrics,
+      facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
+  void prepareForRecycle() noexcept override;
+  facebook::react::SharedViewProps viewProps() noexcept override;
+  bool focusable() const noexcept override;
+
+  facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
+      const noexcept override;
+  winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
+  virtual std::string DefaultControlType() const noexcept;
+
+  WindowsModalHostComponentView(
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext);
+
+ private:
+  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
+  facebook::react::SharedViewProps m_props;
+};
+
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation

package/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewShadowNode.cpp

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [Windows
+#include "WindowsModalHostViewShadowNode.h"
+// ]
+
+#include <react/renderer/core/LayoutContext.h>
+
+namespace facebook::react {
+
+extern const char WindowsModalHostViewComponentName[] = "ModalHostView";
+
+} // namespace facebook::react

package/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewShadowNode.h

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/components/modal/ModalHostViewState.h>
+// [Windows
+#include <react/renderer/components/rnwcore/EventEmitters.h>
+#include <react/renderer/components/rnwcore/Props.h>
+// ]
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+
+namespace facebook::react {
+
+extern const char WindowsModalHostViewComponentName[];
+
+/*
+ * `ShadowNode` for <WindowsModalHostView> component.
+ */
+class WindowsModalHostViewShadowNode final : public ConcreteViewShadowNode<
+                                                 WindowsModalHostViewComponentName,
+                                                 ModalHostViewProps,
+                                                 ModalHostViewEventEmitter,
+                                                 ModalHostViewState> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+  static ShadowNodeTraits BaseTraits() {
+    auto traits = ConcreteViewShadowNode::BaseTraits();
+    traits.set(ShadowNodeTraits::Trait::RootNodeKind);
+    return traits;
+  }
+};
+
+} // namespace facebook::react

package/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp

@@ -181,12 +181,24 @@ void ScrollViewComponentView::updateProps(
 void ScrollViewComponentView::updateState(
     facebook::react::State::Shared const &state,
     facebook::react::State::Shared const &oldState) noexcept {
-  const auto &newState = *std::static_pointer_cast<facebook::react::ScrollViewShadowNode::ConcreteState const>(state);
-
-  m_contentSize = newState.getData().getContentSize();
+  m_state = std::static_pointer_cast<facebook::react::ScrollViewShadowNode::ConcreteState const>(state);
+  m_contentSize = m_state->getData().getContentSize();
   updateContentVisualSize();
 }
 
+void ScrollViewComponentView::updateStateWithContentOffset() noexcept {
+  if (!m_state) {
+    return;
+  }
+
+  m_state->updateState([contentOffset = m_scrollVisual.ScrollPosition()](
+                           const facebook::react::ScrollViewShadowNode::ConcreteState::Data &data) {
+    auto newData = data;
+    newData.contentOffset = {contentOffset.x, contentOffset.y};
+    return std::make_shared<facebook::react::ScrollViewShadowNode::ConcreteState::Data const>(newData);
+  });
+}
+
 void ScrollViewComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
     facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
@@ -529,6 +541,7 @@ void ScrollViewComponentView::ensureVisual() noexcept {
         [this](
             winrt::IInspectable const & /*sender*/,
             winrt::Microsoft::ReactNative::Composition::IScrollPositionChangedArgs const &args) {
+          updateStateWithContentOffset();
           auto eventEmitter = GetEventEmitter();
           if (eventEmitter) {
             facebook::react::ScrollViewMetrics scrollMetrics;

package/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h

@@ -11,6 +11,7 @@
 #pragma warning(push)
 #pragma warning(disable : 4305)
 #include <react/renderer/components/scrollview/ScrollViewProps.h>
+#include <react/renderer/components/scrollview/ScrollViewShadowNode.h>
 #pragma warning(pop)
 #include "Composition.ScrollViewComponentView.g.h"
 #include <winrt/Windows.UI.Composition.interactions.h>
@@ -108,6 +109,7 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool scrollLeft(float delta, bool aniamte) noexcept;
   bool scrollRight(float delta, bool animate) noexcept;
   void updateBackgroundColor(const facebook::react::SharedColor &color) noexcept;
+  void updateStateWithContentOffset() noexcept;
 
   facebook::react::Size m_contentSize;
   winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
@@ -122,6 +124,7 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   bool m_isHorizontal = false;
   bool m_changeViewAfterLoaded = false;
   bool m_dismissKeyboardOnDrag = false;
+  std::shared_ptr<facebook::react::ScrollViewShadowNode::ConcreteState const> m_state;
 
  private:
   bool shouldBeControl() const noexcept;

package/Microsoft.ReactNative/Fabric/WindowsComponentDescriptorRegistry.cpp

@@ -5,6 +5,7 @@
 #include "WindowsComponentDescriptorRegistry.h"
 
 #include <Fabric/AbiViewComponentDescriptor.h>
+#include <Fabric/Composition/Modal/WindowsModalHostViewComponentDescriptor.h>
 #include <Fabric/Composition/TextInput/WindowsTextInputComponentDescriptor.h>
 #include <react/components/rnwcore/ComponentDescriptors.h>
 #include <react/renderer/components/image/ImageComponentDescriptor.h>
@@ -33,9 +34,10 @@ WindowsComponentDescriptorRegistry::WindowsComponentDescriptorRegistry()
     : m_componentDescriptorRegistry(std::make_shared<facebook::react::ComponentDescriptorProviderRegistry>()) {
   m_componentDescriptorRegistry->add(facebook::react::concreteComponentDescriptorProvider<
                                      facebook::react::ActivityIndicatorViewComponentDescriptor>());
-
   m_componentDescriptorRegistry->add(
       facebook::react::concreteComponentDescriptorProvider<facebook::react::ImageComponentDescriptor>());
+  m_componentDescriptorRegistry->add(
+      facebook::react::concreteComponentDescriptorProvider<facebook::react::WindowsModalHostViewComponentDescriptor>());
   m_componentDescriptorRegistry->add(
       facebook::react::concreteComponentDescriptorProvider<facebook::react::ParagraphComponentDescriptor>());
   m_componentDescriptorRegistry->add(

package/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj

@@ -346,6 +346,7 @@
     <ClInclude Include="Views\Image\ReactImageBrush.h" />
     <ClInclude Include="Views\Impl\ScrollViewUWPImplementation.h" />
     <ClInclude Include="Views\Impl\SnapPointManagingContentControl.h" />
+    <ClInclude Include="Views\UnimplementedViewManager.h" />
     <ClInclude Include="Views\IXamlRootView.h" />
     <ClInclude Include="Views\KeyboardEventHandler.h" />
     <ClInclude Include="Views\PaperShadowNode.h" />
@@ -507,6 +508,7 @@
     <ClCompile Include="Views\Impl\ScrollViewUWPImplementation.cpp" />
     <ClCompile Include="Views\Impl\SnapPointManagingContentControl.cpp" />
     <ClCompile Include="Views\KeyboardEventHandler.cpp" />
+    <ClCompile Include="Views\UnimplementedViewManager.cpp" />
     <ClCompile Include="Views\PaperShadowNode.cpp" />
     <ClCompile Include="Views\PopupViewManager.cpp" />
     <ClCompile Include="Views\RawTextViewManager.cpp" />

package/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj.filters

@@ -171,6 +171,9 @@
     <ClCompile Include="Views\KeyboardEventHandler.cpp">
       <Filter>Views</Filter>
     </ClCompile>
+    <ClCompile Include="Views\UnimplementedViewManager.cpp">
+      <Filter>Views</Filter>
+    </ClCompile>
     <ClCompile Include="Views\PopupViewManager.cpp">
       <Filter>Views</Filter>
     </ClCompile>
@@ -525,6 +528,9 @@
     <ClInclude Include="Views\KeyboardEventHandler.h">
       <Filter>Views</Filter>
     </ClInclude>
+    <ClInclude Include="Views\UnimplementedViewManager.h">
+      <Filter>Views</Filter>
+    </ClInclude>
     <ClInclude Include="Views\PopupViewManager.h">
       <Filter>Views</Filter>
     </ClInclude>

package/Microsoft.ReactNative/Modules/NativeUIManager.cpp

@@ -163,7 +163,7 @@ NativeUIManager::NativeUIManager(winrt::Microsoft::ReactNative::ReactContext con
   // To Debug Yoga layout, uncomment the following line.
   // YGConfigSetPrintTreeFlag(m_yogaConfig, true);
 
-  // Additional logging can be enabled editing yoga.cpp (e.g. gPrintChanges,
+  // Additional logging can be enabled editing CalculateLayout.cpp (e.g. gPrintChanges,
   // gPrintSkips)
 #endif
 }

package/Microsoft.ReactNative/Views/UnimplementedViewManager.cpp

@@ -0,0 +1,77 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "pch.h"
+
+#include "UnimplementedViewManager.h"
+
+#include <JSValueWriter.h>
+#include <UI.Xaml.Controls.h>
+#include <Utils/PropertyUtils.h>
+#include <Utils/ValueUtils.h>
+#include <ViewControl.h>
+
+namespace Microsoft::ReactNative {
+
+class UnimplementedShadowNode : public ShadowNodeBase {
+  using Super = ShadowNodeBase;
+  std::string m_name;
+
+ public:
+  UnimplementedShadowNode(std::wstring name) {
+    std::string str;
+    std::transform(name.begin(), name.end(), std::back_inserter(str), [](wchar_t c) { return (char)c; });
+    m_name = str;
+  };
+
+  void createView(const winrt::Microsoft::ReactNative::JSValueObject &) override;
+
+  void AddView(ShadowNode &child, int64_t /*index*/) override {
+    // Not implemented
+    RedBox(m_name + " is not implemented on RNW Paper");
+  }
+
+  void RemoveChildAt(int64_t /*indexToRemove*/) override {
+    // Not implemented
+    RedBox(m_name + " is not implemented on RNW Paper");
+  }
+
+  void ReplaceChild(const XamlView & /*oldChildView*/, const XamlView & /*newChildView*/) override {
+    // Not implemented
+    RedBox(m_name + " is not implemented on RNW Paper");
+  }
+};
+
+void UnimplementedShadowNode::createView(const winrt::Microsoft::ReactNative::JSValueObject &props) {
+  Super::createView(props);
+  RedBox(m_name + " is not implemented on RNW Paper");
+}
+
+UnimplementedViewManager::UnimplementedViewManager(const Mso::React::IReactContext &context, std::wstring name)
+    : Super(context) {
+  m_name = name;
+}
+
+const wchar_t *UnimplementedViewManager::GetName() const {
+  return m_name.c_str();
+}
+
+void UnimplementedViewManager::GetNativeProps(const winrt::Microsoft::ReactNative::IJSValueWriter &writer) const {
+  Super::GetNativeProps(writer);
+
+  winrt::Microsoft::ReactNative::WriteProperty(writer, L"animationType", L"string");
+  winrt::Microsoft::ReactNative::WriteProperty(writer, L"presentationStyle", L"string");
+  winrt::Microsoft::ReactNative::WriteProperty(writer, L"focusable", L"boolean");
+}
+
+ShadowNode *UnimplementedViewManager::createShadow() const {
+  return new UnimplementedShadowNode(m_name);
+}
+
+XamlView UnimplementedViewManager::CreateViewCore(
+    int64_t /*tag*/,
+    const winrt::Microsoft::ReactNative::JSValueObject &) {
+  return winrt::make<winrt::Microsoft::ReactNative::implementation::ViewControl>();
+}
+
+} // namespace Microsoft::ReactNative