Fix debug overlay for native inversion

microsoft · Sep 20, 2022 · 1a547fa · 1a547fa
1 parent c192c8f
commit 1a547fa
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 10 deletions.
diff --git a/packages/@react-native-windows/virtualized-list/src/VirtualizedList.js b/packages/@react-native-windows/virtualized-list/src/VirtualizedList.js
@@ -1480,17 +1480,13 @@ class VirtualizedList extends React.PureComponent<Props, State> {
   };
 
   _renderDebugOverlay() {
-    // Windows-only: this is not implemented for inverted lists
-    if (this.props.inverted) {
-      console.warn('Debug overlay is not yet supported for inverted lists.');
-    }
     const normalize =
       this._scrollMetrics.visibleLength /
       (this._scrollMetrics.contentLength || 1);
     const framesInLayout = [];
     const itemCount = this.props.getItemCount(this.props.data);
     for (let ii = 0; ii < itemCount; ii++) {
-      const frame = this.__getFrameMetricsApprox(ii);
+      const frame = this.__getFrameMetricsApprox(ii, true);
       /* $FlowFixMe[prop-missing] (>=0.68.0 site=react_native_fb) This comment
        * suppresses an error found when Flow v0.68 was deployed. To see the
        * error delete this comment and run Flow. */
@@ -1524,7 +1520,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
             styles.debugOverlayBase,
             styles.debugOverlayFrameLast,
             {
-              top: windowTop * normalize,
+              // Windows-only: Invert the position of the render window offset
+              top: (this.props.inverted ? this._scrollMetrics.contentLength - windowLen - windowTop : windowTop) * normalize,
               height: windowLen * normalize,
             },
           ]}

diff --git a/vnext/Microsoft.ReactNative/Views/Impl/ScrollViewViewChanger.cpp b/vnext/Microsoft.ReactNative/Views/Impl/ScrollViewViewChanger.cpp
@@ -47,7 +47,7 @@ void ScrollViewViewChanger::OnViewChanging(
       const auto scrollingToEnd =
           IsScrollingToEnd(scrollViewer, args.NextView().HorizontalOffset(), args.NextView().VerticalOffset());
       UpdateScrollAnchoringEnabled(scrollViewer, !scrollingToEnd);
-    } else if (IsScrollingToEnd(scrollViewer, m_targetScrollToEndOffset.value(), m_targetScrollToEndOffset.value())) {
+    } 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);
@@ -64,7 +64,7 @@ void ScrollViewViewChanger::OnViewChanged(
     if (m_inverted) {
       const auto scrolledToEnd =
           IsScrollingToEnd(scrollViewer, scrollViewer.HorizontalOffset(), scrollViewer.VerticalOffset());
-      UpdateScrollAnchoringEnabled(!scrolledToEnd);
+      UpdateScrollAnchoringEnabled(scrollViewer, !scrolledToEnd);
     }
   }
 }

diff --git a/vnext/Microsoft.ReactNative/Views/Impl/ScrollViewViewChanger.h b/vnext/Microsoft.ReactNative/Views/Impl/ScrollViewViewChanger.h
@@ -29,7 +29,7 @@ class ScrollViewViewChanger {
     return m_targetScrollToEndOffset.has_value();
   }
 
-  static void UpdateScrollAnchoringEnabled(const xaml::Controls::ScrollViewer &scrollViewer, bool enabled);
+  void UpdateScrollAnchoringEnabled(const xaml::Controls::ScrollViewer &scrollViewer, bool enabled);
   bool
   IsScrollingToEnd(const xaml::Controls::ScrollViewer &scrollViewer, double horizontalOffset, double verticalOffset);
 };

diff --git a/vnext/src/Libraries/Components/View/ViewWindowsProps.ts b/vnext/src/Libraries/Components/View/ViewWindowsProps.ts
@@ -81,5 +81,5 @@ export interface IViewWindowsProps extends IKeyboardProps, ViewProps {
   /**
    * Indicates that view must not be used as scroll anchor candidate.
    */
-  overflowAnchor?: "none" | "auto";
+  overflowAnchor?: 'none' | 'auto';
 }