[fix] inverted VirtualizedList supports wheel events

[staltz]

Context

Mostly issue #995 but also in other repos:

• Scroll direction inverted FaridSafi/react-native-gifted-chat#2082
• Incorrect view direction with default options on react-native-web  FaridSafi/react-native-gifted-chat#1860

Problem

The scale(-1) hack in FlatList when props.inverted is true is pretty dirty, and causes some side effects of "flipping things upside down", such as the arithmetics in the wheel event. (Note, scrolling with the trackpad was working well before this PR and is unaffected by this PR)

I have spent some days trying alternative such as recyclerlistview, but they seem to work well only if all items are of the same layout dimensions. When you need items of variable height and the inverted prop, FlatList (VirtualizedList) was more reliable, it has more consistent behavior. (recyclerlistview was giving sudden yanks during scrolling)

Solution

Flip the math when handling the wheel event, in VirtualizedList, as an event listener setup in componentDidMount/componentWillUnmount. The code I'm submitting here has been thoroughly tested in my app Manyverse in the form of a patch-package: https://github.com/staltz/manyverse/blob/52d5bbfb334e238f7d993ac7c0d764c32aeddb05/patches/react-native-web%2B0.17.5.patch

Tests

• ✔️ Passes yarn test
• ✔️ Works in Chrome (well, in Electron 15, thus Chrome 94)
• ❓ Works in Firefox
• ❓ Works in Safari

[staltz]

Updated the commit so that it passes yarn test.

[necolas]

Thanks! I think deltaX needs to be used if the scroll direction is horizontal. See the similar PR #1241

[staltz]

Done (force pushed an update to the commit). I also removed Platform.OS checks because there should only be 'web' in this case.

[necolas]

Thanks. Included in 0.17.6