ScrollView: scrolling direction when using inverted prop

[tafelito]

The problem
When using FlatList with inverted prop, the mouse scrolling direction is also inverted. I'm not sure if this is an issue per se, but I think only the content of the list should be inverted and not the direction of the scroll. I worked on an implementation for the same feature for the RLV and I tried to handle this on the onWheel event reversing the scroll direction of the container. This only happens on desktops, mobiles scroll is different so it works fine there.

How to reproduce
Just using the FlatList with inverted={true}
https://codesandbox.io/s/y21534vlyx

Expected behavior
Invert list content but keep mouse scrolling direction unchanged

Environment (include versions). Did this work in previous versions?

• OS:
• Device:
• Browser: Chrome, Safari
• React Native for Web (version):^0.8.3
• React (version): 16.4

Is this something that could be done here as well?

Thanks!

[necolas]

Is this something that could be done here as well?

Sounds like a good idea

[tafelito]

Sounds like a good idea meaning, I'll implement this at some point, or sounds like a good idea for a PR? 😄

Pretty much what I did is, in case inverted is true, I listen to the onWheel event and then reverse the scroll by scrolling to Y minus the delta Y (or X in case of horizontal scrolling). Not sure where this should be implemented here, ScrollResponder maybe?

[necolas]

I'm open to a PR if you feel like it. No worries if not. Off the top of my head, I'm not sure where the best place for this to go is but can help figure that out if you're going to try

[tafelito]

I'd be happy to try. I have to figure it out how to run RNW locally first and then any help would be great

…

On Jun 14, 2018, at 18:56, Nicolas Gallagher ***@***.***> wrote: I'm open to a PR if you feel like it. No worries if not. Off the top of my head, I'm not sure where the best place for this to go is but can help figure that out if you're going to try — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[necolas]

Cool. This setup guide will get you started https://github.com/necolas/react-native-web/blob/master/.github/CONTRIBUTING.md

[tafelito]

So I saw that I can add the onWheel prop to the scrollProps in the VirtualizedList and I could set the this._scrollRef.getScrollableNode().scrollTop but I'm not sure that's the best way of doing it, eve if I can calculate the correct delta for the position.
I also tried a different approach but didn't work either. Instead of scaling the elements with -1, I used flexDirection to reverse the scrollview entirely but even though the items are reversed, they are still mounted in the same order, so you'll see how the items are pushed down while loading. So it's not a solution.

[mglagola]

@tafelito did you ever find a solution?

[tafelito]

I haven't had more time to spend on this unfortunately neither or the useWindow scroll feature

…

On Jul 11, 2018, at 11:03, Mark Glagola ***@***.***> wrote: @tafelito did you ever find a solution? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[tafelito]

@necolas are you using FlatList at Twitter Lite? Because I saw that the messages window uses an inverted scroll and the direction works fine there.

Also I noticed that the home page uses some sort of window scroller but on the chat screen you can only scroll on the list and not outside

[necolas]

No. Twitter PWA uses a custom scroller that isn't integrated with React Native at all, i.e., no support for the responder system etc

[danalloway]

did some work on this over in #1241