Scroll direction is inconsistent on inverted FlatList

[sonnyp]

The problem

<FlatList inverted={true}/> makes use of CSS transform: scaleY(-1); which produce unexpected and inconsistent scrolling behavior.

This specific issue has been reported to the Chromium team which marked it as WontFix https://bugs.chromium.org/p/chromium/issues/detail?id=1139881 and to https://webcompat.com/issues/60703

My suggestion would be to use flex-direction: column-inverted | row-inverted instead.
It wouldn't be as close to React Native as transform: scaleY(-1); but produce a better outcome for many/most? use cases.

It would also probably fix other strange behaviors reported in #1254 and #1579

An other option would be to document this issue and propose a solution in the documentation.

Regardless happy to send a PR.

How to reproduce

https://jsfiddle.net/6ebn7g3y/1/
https://bugs.chromium.org/p/chromium/issues/attachmentText?aid=472596

Expected behavior

Respects user preference on all platform.

Workaround:

<FlatList 
      inverted={false}
      listViewProps={{
        ref: (component) => {
          component?.setNativeProps({
            style: {'flex-direction': 'column-reverse'},
          });
        },
      }}
     ...
/>

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

• React Native for Web (version): 0.14.5
• React (version): 17.0.1

Related: #1254 and #1579

[necolas]

This is a duplicate of #1254