Default scroll to bring a component into view should have padding around the viewport (#14018)

acoates-ms · web-flow · commit daa770996278 · 2024-10-24T12:00:32.000-07:00
* Default scroll to bring a component into view should have padding around the viewport

* Change files
diff --git a/change/react-native-windows-6b83103d-e55d-427a-a482-d2706e24f6a0.json b/change/react-native-windows-6b83103d-e55d-427a-a482-d2706e24f6a0.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Default scroll to bring a component into view should have padding around the viewport",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Fabric/ComponentView.h b/vnext/Microsoft.ReactNative/Fabric/ComponentView.h
@@ -37,11 +37,11 @@ struct BringIntoViewOptions {
   bool AnimationDesired{false};
   // NaN will bring the element fully into view aligned to the nearest edge of the viewport
   float HorizontalAlignmentRatio{std::numeric_limits<float>::quiet_NaN()};
-  float HorizontalOffset{0};
+  float HorizontalOffset{20};
   std::optional<facebook::react::Rect> TargetRect;
   // NaN will bring the element fully into view aligned to the nearest edge of the viewport
   float VerticalAlignmentRatio{std::numeric_limits<float>::quiet_NaN()};
-  float VerticalOffset{0};
+  float VerticalOffset{20};
 };
 
 struct LayoutMetricsChangedArgs : public LayoutMetricsChangedArgsT<LayoutMetricsChangedArgs> {
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp
@@ -1112,19 +1112,19 @@ void ScrollViewComponentView::StartBringIntoView(
         options.TargetRect->origin.y > m_scrollVisual.ScrollPosition().y) {
       needsScroll = true;
       if (options.TargetRect->size.height > viewerHeight) {
-        scrollToVertical = options.TargetRect->origin.y + options.VerticalOffset;
+        scrollToVertical = options.TargetRect->origin.y + options.VerticalOffset * m_layoutMetrics.pointScaleFactor;
       } else {
-        scrollToVertical = (targetBottom - viewerHeight) + options.VerticalOffset;
+        scrollToVertical = (targetBottom - viewerHeight) + options.VerticalOffset * m_layoutMetrics.pointScaleFactor;
       }
       // Scroll Up
     } else if (
         options.TargetRect->origin.y < m_scrollVisual.ScrollPosition().y &&
         targetBottom < (m_scrollVisual.ScrollPosition().y + viewerHeight)) {
       needsScroll = true;
       if (options.TargetRect->size.height > viewerHeight) {
-        scrollToVertical = targetBottom - viewerHeight - options.VerticalOffset;
+        scrollToVertical = targetBottom - viewerHeight - options.VerticalOffset * m_layoutMetrics.pointScaleFactor;
       } else {
-        scrollToVertical = options.TargetRect->origin.y - options.VerticalOffset;
+        scrollToVertical = options.TargetRect->origin.y - options.VerticalOffset * m_layoutMetrics.pointScaleFactor;
       }
     }
   } else {
@@ -1138,19 +1138,19 @@ void ScrollViewComponentView::StartBringIntoView(
         options.TargetRect->origin.x > m_scrollVisual.ScrollPosition().x) {
       needsScroll = true;
       if (options.TargetRect->size.width > viewerWidth) {
-        scrollToHorizontal = options.TargetRect->origin.x + options.HorizontalOffset;
+        scrollToHorizontal = options.TargetRect->origin.x + options.HorizontalOffset * m_layoutMetrics.pointScaleFactor;
       } else {
-        scrollToHorizontal = (targetRight - viewerWidth) + options.HorizontalOffset;
+        scrollToHorizontal = (targetRight - viewerWidth) + options.HorizontalOffset * m_layoutMetrics.pointScaleFactor;
       }
       // Scroll Left
     } else if (
         options.TargetRect->origin.x < m_scrollVisual.ScrollPosition().x &&
         targetRight < (m_scrollVisual.ScrollPosition().x + viewerWidth)) {
       needsScroll = true;
       if (options.TargetRect->size.width > viewerWidth) {
-        scrollToHorizontal = targetRight - viewerWidth - options.HorizontalOffset;
+        scrollToHorizontal = targetRight - viewerWidth - options.HorizontalOffset * m_layoutMetrics.pointScaleFactor;
       } else {
-        scrollToHorizontal = options.TargetRect->origin.x - options.HorizontalOffset;
+        scrollToHorizontal = options.TargetRect->origin.x - options.HorizontalOffset * m_layoutMetrics.pointScaleFactor;
       }
     }
   } else {
