Implement native inverted behaviors for ScrollView #8440

rozele · 2021-08-18T15:25:18Z

This PR modifies ScrollViewManager and VirtualizedList to work around the limitations of the RN core approach to list inversion. Specifically, the RN core approach to list inversion uses scroll axis transforms to flip the list content. While this creates the visual appearance of an inverted list, scrolling the list via keyboard or mouse wheel results in inverted scroll direction.

To accomplish native inverted scroll behaviors, we focused on four expected behaviors of inverted lists:

When content loads "above" the view port in an inverted list, the visual content must remain anchored (as if the content renders below it in a non-inverted list).
When scrolled to the "start" of an inverted list (in absolute terms, the bottom of the scroll view), content appended to the start of the list must scroll into view synchronously (i.e., no delay between content rendering and view port changing).
When content renders on screen, it must render from bottom to top, so render passes that take multiple frames do not appear to scroll to the start of the list.
When imperatively scrolling to the "start" of the content, we must always scroll to the latest content, even if the content rendered after the scroll-to-start animation already began.

For 1., we leverage the XAML CanBeScrollAnchor property on each top-level item in the list view. While this is an imperfect solution (re-rendering of this content while in the view port can result in view port shifts as new content renders above), it is a good trade-off of performance and functionality.

For 2., we leverage the XAML HorizontalAnchorRatio and VerticalAnchorRatio properties. XAML has a special case for inverted
lists when setting these property values to 1.0. It instructs XAML to synchronously scroll to and render new content when scrolled to the bottom edge of the ScrollViewer.

For 3., we leverage Yoga's implementation of flexDirection: column-reverse and flexDirection: row-reverse to ensure content is rendered from bottom to top.

For 4., we implemented ScrollViewViewChanger to continuously check if the target scroll offset has changed since starting an animated scroll-to-end operation. If the target scroll offset no longer matches the scrollable extent of the ScrollViewer, we update the target offset by calling ChangeView again.

There are two known limitations to this change:

This implementation does not yet support list virtualization, so you must set disableVirtualization={true} when you set inverted={true}
This implementation does not yet support the visual overlay for debug={true}, which is really only useful when virtualization is enabled.

Fixes #4098

Testing

Note: in the video, I'm using the scroll wheel and the ScrollView is scrolling in the correct direction:

React.Native.Playground.Win32.2022-08-02.14-50-23.mp4

Microsoft Reviewers: Open in CodeFlow

rozele · 2021-08-18T16:11:24Z

Also pushed some of the platform agnostic changes to VirtualizedList in RN Core: facebook/react-native#32038

rozele

TODO:

Fix scrollToIndex for non-fixed-height items
Enable virtualization when inverted={true} and fix debug visual overlay

packages/@react-native-windows/virtualized-list/src/VirtualizedList.js

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

vnext/Microsoft.ReactNative/Views/ScrollViewManager.cpp

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

NickGerleman · 2021-08-19T12:05:10Z

packages/@react-native-windows/virtualized-list/src/VirtualizedList.js

+    // Windows-only: Invert scroll metrics when inverted prop is
+    // set to retain monotonically increasing layout assumptions
+    // in the direction of increasing scroll offsets.
+    let scrollMetrics = this._scrollMetrics;
+    if (this.props.inverted) {
+      const {
+        contentLength,
+        dOffset,
+        offset,
+        velocity,
+        visibleLength,
+      } = scrollMetrics;
+      scrollMetrics = {
+        ...scrollMetrics,
+        dOffset: dOffset * -1,
+        offset: contentLength - offset - visibleLength,
+        velocity: velocity * -1,
+      };
+    }
+    return scrollMetrics;


Are we making these changes in parallel upstream?

This won't be upstreamed. This is a XAML specific approach for inverted lists. There are a handful of more general changes that I've upstreamed in facebook/react-native#32038.

vnext/Microsoft.ReactNative/Views/ScrollViewManager.cpp

NickGerleman · 2021-08-19T12:22:57Z

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

+  return m_horizontal ? horizontalOffset > (scrollViewer.ScrollableWidth() - SCROLL_EPSILON)
+                      : verticalOffset > (scrollViewer.ScrollableHeight() - SCROLL_EPSILON);
+}


Trying to better understand this logic, and why we do not anchor when scrolling to the end. Is it to special case allowing new content to show up?

If we call the React ScrollView.scrollToEnd command, we presumably don't want anything to interrupt the scroll operation (except perhaps the user, but that's non-trivial to detect). This worked around a specific bug we saw where calling scrollToEnd on the ScrollView would land at the second item in the list, rather than the first item in the list when the first item mounted while scrolling. Typically with VirtualizedList, when a new item is mounted at the head of the list data, one item will be unmounted from the tail of the list data, and I think that causes a view port shift when anchoring is enabled.

And actually, it wasn't just for the imperative ScrollView.scrollToEnd command, I believe bottom edge anchoring was broken unless we disabled content anchoring as well.

Could the same bug happen for offset based scroll to index?

Seems like we kind of conceptually want a batch of "scrolling to target" to "target reached and list settled" where we do not want to anchor.

In my original implementation, I inverted the coordinate space entirely on the native side. So scrollTo commands would be inverted and if the scroll operation was interrupted by layout, it would "adjust" for the new offset. This worked really well, but was completely incompatible with virtualization because while the ScrollViewer onScroll event and scrollTo command could be easily inverted, list virtualization relies too heavily on the onLayout event, which we really cannot invert.

We could add a scrollToInverted command that brought back this functionality so you could effectively scroll to any position in a layout dependent way and this scollToEnd functionality would be replaced by scrollToInverted(0).

I don't think we should fix the scrollToIndex / scrollToOffset functionality in this PR though. As it is, scrollToIndex is known to be unreliable by default (without using getItemLayout)

NickGerleman · 2021-08-19T12:29:49Z

packages/@react-native-windows/virtualized-list/src/VirtualizedList.js

@@ -1230,7 +1263,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
    this._fillRateHelper.computeBlankness(
      this.props,
      this.state,
-      this._scrollMetrics,
+      this._getScrollMetrics(),


This smells a bit to me, to have cached scroll metrics be non-inverted, and have the accessor which inverts them. Easy to take in an upstream change which uses the raw variable, then have something acting differently.

Maybe we should update the cache in componentDidUpdate if inverstion state changes, so that the only state we have is the correct one.

Indeed - I didn't spend a lot of time on this, but I was hoping to pull the scroll metrics and frame metrics out into a separate module that encapsulated these details so VirtualizedList could only get the scroll metrics via the accessor.

packages/@react-native-windows/virtualized-list/src/VirtualizedList.js

NickGerleman · 2021-08-19T12:50:09Z

This is not super immediately clear, but @react-native-windows/virtualized-list is used for more than just XAML. It is also used for the Office internal NetUI platform.

What it basically means is that we can't assume its behavior only affects XAML. It is more of a staging package for upstream. We can do special behavior using Platform.OS checks though, or through other Platform APIs.

NickGerleman · 2021-08-22T20:12:51Z

vnext/Microsoft.ReactNative/Views/ScrollViewManager.cpp

+  // While this call fires too frequently resulting in unnecessary
+  // calls to invalidate arrange, it is the only sure-fire way to call
+  // InvalidateArrange any time any descendent layout changes.
+  if (static_cast<ScrollViewShadowNode &>(nodeToUpdate).IsInverted()) {


Consider conditioning on whether we are anchoring instead of inverted, since there may be future cases with anchoring without inversion

I don't think we should implement this here. I think we should add a follow up PR that fixes the overflowAnchor prop for arbitrary cases.

NickGerleman · 2021-11-14T21:19:14Z

Bulk marking PRs without activity in the last 14 days as needing author feedback. This helps keep all active PRs visible on the first page of PRs. msftbot will close this PR in two weeks if the label is not removed. Please feel free to remove the label if you are still actively working on this.

ghost · 2021-11-22T00:03:16Z

This pull request has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

rozele · 2022-08-02T18:45:37Z

Note, switching from inverted=false to inverted=true is not really a supported scenario, so in order to test, you'll have to modify the FlatList-basic.js example from RNTester to default to inverted on first render.

This PR modifies ScrollViewManager and VirtualizedList to work around the limitations of the RN core approach to list inversion. Specifically, the RN core approach to list inversion uses scroll axis transforms to flip the list content. While this creates the visual appearance of an inverted list, scrolling the list via keyboard or mouse wheel results in inverted scroll direction. To accomplish native inverted scroll behaviors, we focused on four expected behaviors of inverted lists: 1. When content loads "above" the view port in an inverted list, the visual content must remain anchored (as if the content renders below it in a non-inverted list). 2. When scrolled to the "start" of an inverted list (in absolute terms, the bottom of the scroll view), content appended to the start of the list must scroll into view synchronously (i.e., no delay between content rendering and view port changing). 3. When content renders on screen, it must render from bottom to top, so render passes that take multiple frames do not appear to scroll to the start of the list. 4. When imperatively scrolling to the "start" of the content, we must always scroll to the latest content, even if the content rendered after the scroll-to-start animation already began. For 1., we leverage the XAML `CanBeScrollAnchor` property on each top-level item in the list view. While this is an imperfect solution (re-rendering of this content while in the view port can result in view port shifts as new content renders above), it is a good trade-off of performance and functionality. For 2., we leverage the XAML `HorizontalAnchorRatio` and `VerticalAnchorRatio` properties. XAML has a special case for inverted lists when setting these property values to `1.0`. It instructs XAML to synchronously scroll to and render new content when scrolled to the bottom edge of the ScrollViewer. For 3., we leverage Yoga's implementation of `flexDirection: column-reverse` and `flexDirection: row-reverse` to ensure content is rendered from bottom to top. For 4., we implemented `ScrollViewViewChanger` to continuously check if the target scroll offset has changed since starting an animated scroll-to-end operation. If the target scroll offset no longer matches the scrollable extent of the ScrollViewer, we update the target offset by calling `ChangeView` again. Fixes microsoft#4098

We previously stopped development on the native inverted approach for Windows that would use anchoring and flexDirection to implement a truly reversed list (as opposed to a list flipped via transform) due to a bug where the anchoring would cause the view to "ride" to the top of the ScrollViewer when you scrolled into the virtualized tail spacer. This change introduces a new View prop called `overflowAnchor` and uses this prop to ensure that the tail spacer can never be anchored.

Summary: This PR modifies ScrollViewManager and VirtualizedList to work around the limitations of the RN core approach to list inversion. Specifically, the RN core approach to list inversion uses scroll axis transforms to flip the list content. While this creates the visual appearance of an inverted list, scrolling the list via keyboard or mouse wheel results in inverted scroll direction. To accomplish native inverted scroll behaviors, we focused on four expected behaviors of inverted lists: 1. When content loads "above" the view port in an inverted list, the visual content must remain anchored (as if the content renders below it in a non-inverted list). 2. When scrolled to the "start" of an inverted list (in absolute terms, the bottom of the scroll view), content appended to the start of the list must scroll into view synchronously (i.e., no delay between content rendering and view port changing). 3. When content renders on screen, it must render from bottom to top, so render passes that take multiple frames do not appear to scroll to the start of the list. 4. When imperatively scrolling to the "start" of the content, we must always scroll to the latest content, even if the content rendered after the scroll-to-start animation already began. For 1., we leverage the XAML `CanBeScrollAnchor` property on each top-level item in the list view. While this is an imperfect solution (re-rendering of this content while in the view port can result in view port shifts as new content renders above), it is a good trade-off of performance and functionality. For 2., we leverage the XAML `HorizontalAnchorRatio` and `VerticalAnchorRatio` properties. XAML has a special case for inverted lists when setting these property values to `1.0`. It instructs XAML to synchronously scroll to and render new content when scrolled to the bottom edge of the ScrollViewer. For 3., we leverage Yoga's implementation of `flexDirection: column-reverse` and `flexDirection: row-reverse` to ensure content is rendered from bottom to top. For 4., we implemented `ScrollViewViewChanger` to continuously check if the target scroll offset has changed since starting an animated scroll-to-end operation. If the target scroll offset no longer matches the scrollable extent of the ScrollViewer, we update the target offset by calling `ChangeView` again. Fixes microsoft#4098 Test Plan: See test plan in D42787560 Reviewers: shawndempsey, chpurrer, lefever, helenistic Reviewed By: chpurrer Differential Revision: https://phabricator.intern.facebook.com/D42786593 Tasks: T140460683

chiaramooney · 2023-03-29T22:00:05Z

I believe decision was that this PR will not be taken into RNW on Paper. Tagging with Needs Attention to confirm decision in triage and close.

chiaramooney · 2023-04-12T23:05:16Z

Discussed in PR triage. Decision to not take change for Paper architecture still stands.

rozele requested a review from a team as a code owner August 18, 2021 15:25

ghost added the Area: FlatList label Aug 18, 2021

rozele marked this pull request as draft August 18, 2021 15:26

rozele commented Aug 18, 2021

View reviewed changes

packages/@react-native-windows/virtualized-list/src/VirtualizedList.js Outdated Show resolved Hide resolved

vnext/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj.filters Outdated Show resolved Hide resolved

rozele force-pushed the issue4098 branch 3 times, most recently from cda08c1 to e03a4d8 Compare August 18, 2021 18:48

rozele commented Aug 18, 2021

View reviewed changes

vnext/Microsoft.ReactNative/Views/ScrollViewManager.cpp Outdated Show resolved Hide resolved

rozele commented Aug 18, 2021

View reviewed changes

vnext/Microsoft.ReactNative/Views/Impl/ScrollViewViewChanger.h Outdated Show resolved Hide resolved

rozele force-pushed the issue4098 branch 2 times, most recently from 8adf563 to 927e209 Compare August 18, 2021 19:24

rozele assigned NickGerleman Aug 18, 2021

NickGerleman reviewed Aug 19, 2021

View reviewed changes

vnext/Microsoft.ReactNative/Views/ScrollViewManager.cpp Show resolved Hide resolved

NickGerleman reviewed Aug 19, 2021

View reviewed changes

vnext/Microsoft.ReactNative/Views/ScrollViewManager.cpp Show resolved Hide resolved

NickGerleman reviewed Aug 19, 2021

View reviewed changes

packages/@react-native-windows/virtualized-list/src/VirtualizedList.js Outdated Show resolved Hide resolved

NickGerleman reviewed Aug 22, 2021

View reviewed changes

azimgd mentioned this pull request Aug 30, 2021

Fix Invertedprop on the FlatListcomponent with a RN Patch Expensify/App#3381

Closed

rozele force-pushed the issue4098 branch from 927e209 to 1c507bf Compare October 27, 2021 18:58

rozele marked this pull request as ready for review October 27, 2021 19:01

rozele changed the title ~~DRAFT: Implement native inverted behaviors for ScrollView~~ Implement native inverted behaviors for ScrollView Oct 27, 2021

NickGerleman added the Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) label Nov 14, 2021

ghost added the no-recent-activity Issue/PR has gone stale and may be closed (label applied by bot) label Nov 22, 2021

ghost closed this Nov 29, 2021

rozele changed the title ~~DRAFT: Implement native inverted behaviors for ScrollView~~ Implement native inverted behaviors for ScrollView Aug 2, 2022

rozele marked this pull request as ready for review August 2, 2022 18:39

rozele requested a review from a team as a code owner August 2, 2022 18:39

rozele force-pushed the issue4098 branch from 8e662c2 to 2b79591 Compare August 2, 2022 19:12

rozele force-pushed the issue4098 branch from 2b79591 to 9002424 Compare August 10, 2022 16:47

rozele force-pushed the issue4098 branch from 9002424 to 1a547fa Compare September 20, 2022 02:27

rozele force-pushed the issue4098 branch from 1a547fa to f9d5df0 Compare November 15, 2022 15:26

chrisglein self-assigned this Dec 14, 2022

rozele added 9 commits January 26, 2023 12:03

Change files

2e92792

Do not emit scroll events when ActualWidth and ActualHeight are invalid

dee7245

Simplify content anchoring updates and fix ScrollToEnd behavior

b181ffd

Fix debug overlay for native inversion

fba0d4b

yarn format

a713bd4

Adds unmodified JS files that will be forked

bf8d65c

Changes to VirtualizedList.js to support native inversion

a907580

rozele force-pushed the issue4098 branch from f9d5df0 to a907580 Compare January 26, 2023 21:28

rozele added 2 commits January 31, 2023 11:51

Allow ScrollViewViewChanger to be used in WinUI Fabric

bdd4404

yarn lint:fix

282156c

rozele mentioned this pull request Feb 27, 2023

Fix VirtualizedList with maintainVisibleContentPosition facebook/react-native#35993

Closed

chiaramooney added the Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) label Mar 29, 2023

chiaramooney closed this Apr 12, 2023

fabOnReact mentioned this pull request Apr 27, 2023

Inverted FlatList accessibility order facebook/react-native#30373

Closed

jonthysell removed the Needs: Attention 👋 An issue that had been tagged "Needs: Author Feedback" has received activity (label applied by bot) label Jun 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement native inverted behaviors for ScrollView #8440

Implement native inverted behaviors for ScrollView #8440

rozele commented Aug 18, 2021 •

edited

Loading

rozele commented Aug 18, 2021

rozele left a comment •

edited

Loading

NickGerleman Aug 19, 2021

rozele Aug 19, 2021

NickGerleman Aug 19, 2021

rozele Aug 19, 2021 •

edited

Loading

rozele Aug 19, 2021

NickGerleman Aug 22, 2021

rozele Oct 27, 2021

rozele Oct 27, 2021

NickGerleman Aug 19, 2021

rozele Aug 19, 2021

NickGerleman commented Aug 19, 2021

NickGerleman Aug 22, 2021

rozele Oct 27, 2021

NickGerleman commented Nov 14, 2021

ghost commented Nov 22, 2021

rozele commented Aug 2, 2022

chiaramooney commented Mar 29, 2023

chiaramooney commented Apr 12, 2023

Implement native inverted behaviors for ScrollView #8440

Implement native inverted behaviors for ScrollView #8440

Conversation

rozele commented Aug 18, 2021 • edited Loading

Testing

Microsoft Reviewers: Open in CodeFlow

rozele commented Aug 18, 2021

rozele left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rozele Aug 19, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickGerleman commented Aug 19, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickGerleman commented Nov 14, 2021

ghost commented Nov 22, 2021

rozele commented Aug 2, 2022

chiaramooney commented Mar 29, 2023

chiaramooney commented Apr 12, 2023

rozele commented Aug 18, 2021 •

edited

Loading

rozele left a comment •

edited

Loading

rozele Aug 19, 2021 •

edited

Loading