Support inverted ScrollView on macOS

[christophpurrer]

Please select one of the following

• I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
• I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
• I am making a fix / change for the macOS implementation of react-native
• I am making a change required for Microsoft usage of react-native

Summary

Allow to render a scrollView's content in inverted order which is especially helpful in messaging applications.

Co-authored-by: Scott Kyle skyle@fb.com

Changelog

[macOS] [Added] - Support inverted ScrollView on macOS

Test Plan

Added RNTester example

Screen.Recording.2022-07-20.at.4.30.22.PM.mov

Default, non-inverted example

Screen.Recording.2022-07-20.at.4.39.55.PM.mov

[Saadnajmi]

The goal of this PR is that instead of doing a scale transformation on the scrollview contents like Flatlist on iOS does, we're instead taking advantage of macOS's flipped coordinate space?

[christophpurrer]

@Saadnajmi > This is an internal change we have used at Meta because

We can't rely on -1 scale hacks on macOS because of inverse issues with trackpad/scrollwheel, dragging scrollbars, tracking hovers, etc.

Hence we added 'native' support for inverted views

[Saadnajmi]

When I test the Flatlist example page (packages/rn-tester/js/examples/FlatList/FlatList-basic.js) with this change, all the elements seem inverted?

Interestingly enough, if I make an edit in a file (causing fast refresh), it fixes itself.

Screen.Recording.2022-07-22.at.11.20.46.AM.mov

[christophpurrer]

Good catch! And easy to repro.

It fixes 'itself' when you edit FlatList-basic.js because fast refresh will reset the 'inverted' flag.

I'll look for a proper fix!

[christophpurrer]

That latest version should both work with ScrollView and FlatList.
Demo:
https://www.youtube.com/shorts/TtXp9Laf9kQ

Would be great to get some additional verification as well

[Saadnajmi]

The latest iteration does indeed pass the "Basic" Flatlist test page, but seems to have no effect on both the Flatlist and SectionList "Inverted" test pages :/

Screen.Recording.2022-07-25.at.4.26.48.PM.mov

[Saadnajmi]

This PR looks like one we'd like to merge, but needs a bit more love for all of the test pages / use cases of Flatlist. Thanks for this fix!

[ghost]

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.

[Saadnajmi]

don't close, bot?

[ghost]

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.

[Saadnajmi]

Don't close?

[christophpurrer]

So it seems this always worked after all, however initially it never supported to change the inverted property on the fly / at runtime?
Is this actually a real usage scenario?

Anyway, supporting that behavior solves the issue in rn-tester as the previous manual resolution

Interestingly enough, if I make an edit in a file (causing fast refresh), it fixes itself.

To make it work I had to piggy-bag on a previous work-around > https://l.workplace.com/l.php?u=https%3A%2F%2Ffd.fxlcf.dpdns.org%2Fmicrosoft%2Freact-native-macos%2Fblame%2Fmain%2FLibraries%2FComponents%2FScrollView%2FScrollView.js%23L1191&h=AT3fib22xIV2fmZMhNOJG8QMW7Wyff9Mb7mUrteHJQ1tgW6ZAyCefrhhTUDGNA9TPxzc7B9a7ciemm-px_U13LznEMFnxwbRmLX7ohWZALyeB60HNQDmqLDueA08-dbWqU6_w-w7BPPMb9uKazppMrxFRHfkJno8eM2QpQ

ScrollView sample added

ScrollView.mov

Flatlist inverted

FlatListInverted.mov

Flatlist basic

FlatList basic has a terrible performance so I restricted the max list size to 50 (from 1000)
https://github.com/microsoft/react-native-macos/blob/main/packages/rn-tester/js/examples/FlatList/FlatList-basic.js#L269

And the incremental list expansion to 10 (from 100)
https://github.com/microsoft/react-native-macos/blob/main/packages/rn-tester/js/examples/FlatList/FlatList-basic.js#L71
https://github.com/microsoft/react-native-macos/blob/main/packages/rn-tester/js/examples/FlatList/FlatList-basic.js#L273

FlatListBasic480.mov

[Saadnajmi]

Switched back to request changes for last comment, it would be bad to break iOS 😅

[christophpurrer]

I have remove those changes

[Saadnajmi]

Latest version lost my Flatlist keyboard nav changes, but that's OK I'll mark a followup for that.