Copy and Pasting text comes out backwards when using FlatList inverted

[puneetlath]

The problem
When using the inverted prop with FlatList text is pasted in backwards order. For example if the list (after inversion) is:

• 1
• 2
• 3
• 4

Copy and pasting it will result in:

• 4
• 3
• 2
• 1

How to reproduce
Simplified test case: https://codesandbox.io/s/cold-wave-grzpj?file=/src/App.js

Steps to reproduce:

1. Create a list using FlatList
2. Apply the inverted prop
3. Note the order of some list items and copy them
4. Paste them and note that the order is backwards from what was displayed

Expected behavior
I would expect that when pasted the list would retain the order that is shown on the screen.

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

• React Native for Web (version): 0.13.18
• React (version): 16.14.0
• Browser: Chrome, Safari, Firefox

Additional context
The problem seems to have to do with the fact that when the inverted prop is applied, the html elements are still in the original order and the inversion is done via css flex-direction: column-reversed.

[necolas]

VirtualizedList / FlatList comes directly from React Native, so you should raise this issue in that repo. But I don't know that there is any practical alternative to the existing approach to inversion, where the HTML order is preserved. There are also some flexbox issues in React Native that might be involved - facebook/react-native#23632 (comment)

[mallenexpensify]

If anyone is able to fix this, we're willing to compensate. Issue posted Expensify/App#1341

[mallenexpensify]

We're still looking for help to "Fix Inverted prop on the FlatList component with a RN Patch". The current link is Expensify/App#3381 job amount is $8000. Any help/tips are greatly appreciated.