Implement native inverted behaviors for ScrollView

change/@react-native-windows-virtualized-list-ae7563e8-178f-4f0d-a565-9e11f32ad2e6.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement native inverted behaviors for ScrollView",
+  "packageName": "@react-native-windows/virtualized-list",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-0e0722f1-9253-4400-b44f-9ac6159a3e61.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement native inverted behaviors for ScrollView",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

vnext/.flowconfig

@@ -27,6 +27,8 @@
 <PROJECT_ROOT>/Libraries/Components/View/View.js
 <PROJECT_ROOT>/Libraries/DeprecatedPropTypes/DeprecatedViewAccessibility.js
 <PROJECT_ROOT>/Libraries/Image/Image.js
+<PROJECT_ROOT>/Libraries/Lists/VirtualizedList.js
+<PROJECT_ROOT>/Libraries/Lists/VirtualizedListProps.js
 <PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
 <PROJECT_ROOT>/Libraries/NewAppScreen/components/DebugInstructions.js
 <PROJECT_ROOT>/Libraries/NewAppScreen/components/ReloadInstructions.js

vnext/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj

@@ -344,6 +344,7 @@
     <ClInclude Include="Views\Image\ReactImage.h" />
     <ClInclude Include="Views\Image\ReactImageBrush.h" />
     <ClInclude Include="Views\Impl\ScrollViewUWPImplementation.h" />
+    <ClInclude Include="Views\Impl\ScrollViewViewChanger.h" />
     <ClInclude Include="Views\Impl\SnapPointManagingContentControl.h" />
     <ClInclude Include="Views\IXamlRootView.h" />
     <ClInclude Include="Views\KeyboardEventHandler.h" />
@@ -568,6 +569,7 @@
     <ClCompile Include="Views\Image\ReactImage.cpp" />
     <ClCompile Include="Views\Image\ReactImageBrush.cpp" />
     <ClCompile Include="Views\Impl\ScrollViewUWPImplementation.cpp" />
+    <ClCompile Include="Views\Impl\ScrollViewViewChanger.cpp" />
     <ClCompile Include="Views\Impl\SnapPointManagingContentControl.cpp" />
     <ClCompile Include="Views\KeyboardEventHandler.cpp" />
     <ClCompile Include="Views\PaperShadowNode.cpp" />

vnext/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj.filters

@@ -176,6 +176,9 @@
     <ClCompile Include="Views\Impl\ScrollViewUWPImplementation.cpp">
       <Filter>Views\Impl</Filter>
     </ClCompile>
+    <ClCompile Include="Views\Impl\ScrollViewViewChanger.cpp">
+      <Filter>Views\Impl</Filter>
+    </ClCompile>
     <ClCompile Include="Views\Impl\SnapPointManagingContentControl.cpp">
       <Filter>Views\Impl</Filter>
     </ClCompile>
@@ -541,6 +544,9 @@
     <ClInclude Include="Views\Impl\ScrollViewUWPImplementation.h">
       <Filter>Views\Impl</Filter>
     </ClInclude>
+    <ClInclude Include="Views\Impl\ScrollViewViewChanger.h">
+      <Filter>Views\Impl</Filter>
+    </ClInclude>
     <ClInclude Include="Views\Impl\SnapPointManagingContentControl.h">
       <Filter>Views\Impl</Filter>
     </ClInclude>

vnext/Microsoft.ReactNative/Views/Impl/ScrollViewUWPImplementation.cpp

@@ -15,10 +15,18 @@ ScrollViewUWPImplementation::ScrollViewUWPImplementation(const winrt::ScrollView
   m_scrollViewer = winrt::make_weak(scrollViewer);
 }
 
+void ScrollViewUWPImplementation::ContentAnchoringEnabled(bool enabled) {
+  ScrollViewerSnapPointManager()->ContentAnchoringEnabled(enabled);
+}
+
 void ScrollViewUWPImplementation::SetHorizontal(bool horizontal) {
   ScrollViewerSnapPointManager()->SetHorizontal(horizontal);
 }
 
+void ScrollViewUWPImplementation::SetInverted(bool inverted) {
+  ScrollViewerSnapPointManager()->SetInverted(inverted);
+}
+
 void ScrollViewUWPImplementation::SnapToInterval(float interval) {
   ScrollViewerSnapPointManager()->SnapToInterval(interval);
 }

vnext/Microsoft.ReactNative/Views/Impl/ScrollViewUWPImplementation.h

@@ -23,7 +23,9 @@ class ScrollViewUWPImplementation {
  public:
   ScrollViewUWPImplementation(const winrt::ScrollViewer &scrollViewer);
 
+  void ContentAnchoringEnabled(bool enabled);
   void SetHorizontal(bool isHorizontal);
+  void SetInverted(bool isInverted);
   void SnapToInterval(float interval);
   void SnapToStart(bool snapToStart);
   void SnapToEnd(bool snapToEnd);

vnext/Microsoft.ReactNative/Views/Impl/ScrollViewViewChanger.cpp

@@ -0,0 +1,117 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "pch.h"
+
+#include <UI.Xaml.Controls.h>
+#include <winrt/Windows.UI.Xaml.Interop.h>
+#include "ScrollViewUWPImplementation.h"
+#include "ScrollViewViewChanger.h"
+#include "SnapPointManagingContentControl.h"
+
+namespace winrt {
+using namespace winrt::Windows::UI::Xaml::Interop;
+}
+
+namespace Microsoft::ReactNative {
+
+constexpr const double SCROLL_EPSILON = 1.0;
+
+const winrt::TypeName viewViewManagerTypeName{winrt::hstring{L"ViewViewManager"}, winrt::TypeKind::Metadata};
+
+/*static*/ xaml::DependencyProperty ScrollViewViewChanger::CanBeScrollAnchorProperty() {
+  static xaml::DependencyProperty s_canBeScrollAnchorProperty = xaml::DependencyProperty::RegisterAttached(
+      L"CanBeScrollAnchor",
+      winrt::xaml_typename<bool>(),
+      viewViewManagerTypeName,
+      winrt::PropertyMetadata(winrt::box_value(true)));
+
+  return s_canBeScrollAnchorProperty;
+}
+
+void ScrollViewViewChanger::Horizontal(bool horizontal) {
+  m_horizontal = horizontal;
+}
+
+void ScrollViewViewChanger::Inverted(bool inverted) {
+  m_inverted = inverted;
+}
+
+void ScrollViewViewChanger::ScrollToEnd(const xaml::Controls::ScrollViewer &scrollViewer, bool animated) {
+  if (m_inverted) {
+    UpdateScrollAnchoringEnabled(scrollViewer, false);
+  }
+
+  if (m_horizontal) {
+    m_targetScrollToEndOffset = scrollViewer.ScrollableWidth();
+    scrollViewer.ChangeView(m_targetScrollToEndOffset.value(), nullptr, nullptr, !animated);
+  } else {
+    m_targetScrollToEndOffset = scrollViewer.ScrollableHeight();
+    scrollViewer.ChangeView(nullptr, m_targetScrollToEndOffset.value(), nullptr, !animated);
+  }
+}
+
+void ScrollViewViewChanger::OnViewChanging(
+    const xaml::Controls::ScrollViewer &scrollViewer,
+    const xaml::Controls::ScrollViewerViewChangingEventArgs &args) {
+  // For non-inverted views, a ScrollViewer.ViewChanging event always emits an `onScroll` event
+  if (m_inverted) {
+    // Do not update scroll anchoring during ScrollToEnd
+    if (!IsScrollToEndActive()) {
+      // For inverted views, we need to detect if we're scrolling to or away from the bottom edge to enable or disable
+      // view anchoring
+      const auto scrollingToEnd =
+          IsScrollingToEnd(scrollViewer, args.NextView().HorizontalOffset(), args.NextView().VerticalOffset());
+      UpdateScrollAnchoringEnabled(scrollViewer, !scrollingToEnd);
+    } else if (!IsScrollingToEnd(scrollViewer, m_targetScrollToEndOffset.value(), m_targetScrollToEndOffset.value())) {
+      // If we were previously in an active ScrollToEnd command, we may need to
+      // restart the operation if the content size has changed
+      ScrollToEnd(scrollViewer, true);
+    }
+  }
+}
+
+void ScrollViewViewChanger::OnViewChanged(
+    const xaml::Controls::ScrollViewer &scrollViewer,
+    const xaml::Controls::ScrollViewerViewChangedEventArgs &args) {
+  // Stop tracking scroll-to-end once the ScrollView comes to rest
+  if (!args.IsIntermediate()) {
+    m_targetScrollToEndOffset = std::nullopt;
+    if (m_inverted) {
+      const auto scrolledToEnd =
+          IsScrollingToEnd(scrollViewer, scrollViewer.HorizontalOffset(), scrollViewer.VerticalOffset());
+      UpdateScrollAnchoringEnabled(scrollViewer, !scrolledToEnd);
+    }
+  }
+}
+
+void ScrollViewViewChanger::UpdateScrollAnchoringEnabled(
+    const xaml::Controls::ScrollViewer &scrollViewer,
+    bool enabled) {
+  if (m_wasScrollAnchoringEnabled != enabled) {
+    m_wasScrollAnchoringEnabled = enabled;
+    ScrollViewUWPImplementation(scrollViewer).ContentAnchoringEnabled(enabled);
+    const auto snapPointManager = scrollViewer.Content().as<SnapPointManagingContentControl>();
+    auto panel = snapPointManager->Content().as<xaml::Controls::Panel>();
+    for (auto child : panel.Children()) {
+      const auto childElement = child.as<xaml::UIElement>();
+      if (winrt::unbox_value<bool>(childElement.GetValue(CanBeScrollAnchorProperty()))) {
+        if (enabled) {
+          childElement.CanBeScrollAnchor(true);
+        } else {
+          childElement.ClearValue(xaml::UIElement::CanBeScrollAnchorProperty());
+        }
+      }
+    }
+  }
+}
+
+bool ScrollViewViewChanger::IsScrollingToEnd(
+    const xaml::Controls::ScrollViewer &scrollViewer,
+    double horizontalOffset,
+    double verticalOffset) {
+  return m_horizontal ? horizontalOffset > (scrollViewer.ScrollableWidth() - SCROLL_EPSILON)
+                      : verticalOffset > (scrollViewer.ScrollableHeight() - SCROLL_EPSILON);
+}
+
+} // namespace Microsoft::ReactNative

vnext/Microsoft.ReactNative/Views/Impl/ScrollViewViewChanger.h

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+namespace Microsoft::ReactNative {
+
+class ScrollViewViewChanger {
+ public:
+  static xaml::DependencyProperty CanBeScrollAnchorProperty();
+
+  void Horizontal(bool horizontal);
+  void Inverted(bool inverted);
+
+  void ScrollToEnd(const xaml::Controls::ScrollViewer &scrollViewer, bool animated);
+
+  void OnViewChanging(
+      const xaml::Controls::ScrollViewer &scrollViewer,
+      const xaml::Controls::ScrollViewerViewChangingEventArgs &args);
+  void OnViewChanged(
+      const xaml::Controls::ScrollViewer &scrollViewer,
+      const xaml::Controls::ScrollViewerViewChangedEventArgs &args);
+
+ private:
+  bool m_inverted{false};
+  bool m_horizontal{false};
+  bool m_wasScrollAnchoringEnabled{false};
+  std::optional<double> m_targetScrollToEndOffset{std::nullopt};
+
+  inline bool IsScrollToEndActive() {
+    return m_targetScrollToEndOffset.has_value();
+  }
+
+  void UpdateScrollAnchoringEnabled(const xaml::Controls::ScrollViewer &scrollViewer, bool enabled);
+  bool
+  IsScrollingToEnd(const xaml::Controls::ScrollViewer &scrollViewer, double horizontalOffset, double verticalOffset);
+};
+
+} // namespace Microsoft::ReactNative

vnext/Microsoft.ReactNative/Views/Impl/SnapPointManagingContentControl.cpp

@@ -12,6 +12,10 @@ SnapPointManagingContentControl::SnapPointManagingContentControl() {
   return winrt::make_self<SnapPointManagingContentControl>();
 }
 
+void SnapPointManagingContentControl::ContentAnchoringEnabled(bool enabled) {
+  m_contentAnchoringEnabled = enabled;
+}
+
 void SnapPointManagingContentControl::SnapToInterval(float interval) {
   if (interval != m_interval) {
     m_interval = interval;
@@ -124,6 +128,10 @@ void SnapPointManagingContentControl::SetHorizontal(bool horizontal) {
   }
 }
 
+void SnapPointManagingContentControl::SetInverted(bool inverted) {
+  m_inverted = inverted;
+}
+
 void SnapPointManagingContentControl::SetWidthBounds(float startWidth, float endWidth) {
   const auto update = [this, startWidth, endWidth]() {
     const auto endUpdated = [this, endWidth]() {

vnext/Microsoft.ReactNative/Views/Impl/SnapPointManagingContentControl.h

@@ -23,6 +23,7 @@ class SnapPointManagingContentControl
   static winrt::com_ptr<SnapPointManagingContentControl> Create();
 
   // ScrollView Implementation
+  void ContentAnchoringEnabled(bool enabled);
   void SnapToInterval(float interval);
   void SnapToOffsets(const winrt::IVectorView<float> &offsets);
   void SnapToStart(bool snapToStart);
@@ -49,14 +50,23 @@ class SnapPointManagingContentControl
 
   // Helpers
   void SetHorizontal(bool horizontal);
+  void SetInverted(bool inverted);
   void SetHeightBounds(float startHeight, float endHeight);
   void SetWidthBounds(float startWidth, float endWidth);
   void SetViewportSize(float scaledViewportWidth, float scaledviewportHeight);
 
+  bool IsContentAnchoringEnabled() {
+    return m_contentAnchoringEnabled;
+  }
+
   bool IsHorizontal() {
     return m_horizontal;
   }
 
+  bool IsInverted() {
+    return m_inverted;
+  }
+
  private:
   float m_interval{0.0f};
   winrt::IVectorView<float> m_offsets{};
@@ -66,7 +76,9 @@ class SnapPointManagingContentControl
   winrt::event<winrt::EventHandler<winrt::IInspectable>> m_horizontalSnapPointsChangedEventSource;
   winrt::event<winrt::EventHandler<winrt::IInspectable>> m_verticalSnapPointsChangedEventSource;
 
+  bool m_contentAnchoringEnabled{false};
   bool m_horizontal{false};
+  bool m_inverted{false};
   float m_startHeight{0};
   float m_startWidth{0};
   float m_endHeight{INFINITY};

vnext/Microsoft.ReactNative/Views/ScrollContentViewManager.cpp

@@ -5,6 +5,12 @@
 
 #include "ScrollContentViewManager.h"
 
+#include <UI.Xaml.Controls.h>
+#include <Views/ViewViewManager.h>
+#include "Impl/ScrollViewViewChanger.h"
+#include "Impl/SnapPointManagingContentControl.h"
+#include "ViewPanel.h"
+
 namespace Microsoft::ReactNative {
 
 ScrollContentViewManager::ScrollContentViewManager(const Mso::React::IReactContext &context) : Super(context) {}
@@ -13,4 +19,37 @@ const wchar_t *ScrollContentViewManager::GetName() const {
   return L"RCTScrollContentView";
 }
 
+XamlView ScrollContentViewManager::CreateViewCore(
+    int64_t /*tag*/,
+    const winrt::Microsoft::ReactNative::JSValueObject & /*props*/) {
+  auto panel = winrt::make<winrt::Microsoft::ReactNative::implementation::ViewPanel>();
+  panel.VerticalAlignment(xaml::VerticalAlignment::Stretch);
+  panel.HorizontalAlignment(xaml::HorizontalAlignment::Stretch);
+  return panel.as<XamlView>();
+}
+
+void ScrollContentViewManager::AddView(const XamlView &parent, const XamlView &child, int64_t index) {
+  // All top-level children of inverted ScrollView content will be anchor candidates, unless scrolled to the top.
+  auto childElement = child.as<xaml::UIElement>();
+  auto viewParent = parent.as<xaml::FrameworkElement>().Parent();
+  if (viewParent) {
+    const auto scrollViewContentControl = viewParent.as<SnapPointManagingContentControl>();
+    if (scrollViewContentControl->IsInverted() && scrollViewContentControl->IsContentAnchoringEnabled()) {
+      if (winrt::unbox_value<bool>(child.GetValue(ScrollViewViewChanger::CanBeScrollAnchorProperty()))) {
+        childElement.CanBeScrollAnchor(true);
+      }
+    }
+  }
+
+  parent.as<winrt::Microsoft::ReactNative::ViewPanel>().InsertAt(static_cast<uint32_t>(index), childElement);
+}
+
+void ScrollContentViewManager::RemoveAllChildren(const XamlView &parent) {
+  parent.as<winrt::Microsoft::ReactNative::implementation::ViewPanel>()->Clear();
+}
+
+void ScrollContentViewManager::RemoveChildAt(const XamlView &parent, int64_t index) {
+  parent.as<winrt::Microsoft::ReactNative::implementation::ViewPanel>()->RemoveAt(static_cast<uint32_t>(index));
+}
+
 } // namespace Microsoft::ReactNative

vnext/Microsoft.ReactNative/Views/ScrollContentViewManager.h

@@ -3,17 +3,24 @@
 
 #pragma once
 
-#include <Views/ViewViewManager.h>
+#include <Views/FrameworkElementViewManager.h>
 
 namespace Microsoft::ReactNative {
 
-class ScrollContentViewManager : public ViewViewManager {
-  using Super = ViewViewManager;
+class ScrollContentViewManager : public FrameworkElementViewManager {
+  using Super = FrameworkElementViewManager;
 
  public:
   ScrollContentViewManager(const Mso::React::IReactContext &context);
 
   const wchar_t *GetName() const override;
+
+  void AddView(const XamlView &parent, const XamlView &child, int64_t index) override;
+  void RemoveAllChildren(const XamlView &parent) override;
+  void RemoveChildAt(const XamlView &parent, int64_t index) override;
+
+ protected:
+  XamlView CreateViewCore(int64_t tag, const winrt::Microsoft::ReactNative::JSValueObject &props) override;
 };
 
 } // namespace Microsoft::ReactNative