Fix text copied in reverse order on inverted flatlist

[azimgd]

@thienlnam
This is a draft in attempt to move progress on #3381 a bit further. Please note that this is by no means a final PR, this is simply a demo to let QA team validate there are no regressions by using this approach.
I used patched version of [email protected] with fixes for copying text into buffer in reversed order;

React native web diff: https://github.com/azimgd/react-native-web/pull/1/files

Details

I have removed flatlist inversion (by inverted=true prop) which used [transform: translate] css hack and instead adding flatlist array items in reverse order [unshift instead of push]; It also reverses ScrollView event response received from browser [e.nativeEvent.configOffset *= -1];

Fixed Issues

#3381

Tests

1. run npm install which will patch react-native-web package
2. npm run web
3. load a chat with 200 messages
4. scrolling up and down (with debugger enabled) works fine
5. copying text into buffer preserves order

QA Steps

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Screen.Recording.2021-08-09.at.01.16.16.mov

Mobile Web

Desktop

iOS

Android

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[azimgd]

I have read the CLA Document and I hereby sign the CLA

[thienlnam]

Hey @azimgd, I've checked out this branch and tested the changes and it doesn't appear that that issues are fixed in the github issue #3381. The order of chats is the same but the symptoms of a css inverted flat list are still occurring.

1. Copying is still sporadic and jumps around
2. Pasting is still in the wrong order. If you send multiple messages
   1
   2
   3
   4
   5

and copy it, pasting it should not result in 54321 but 12345

[thienlnam]

Hmm, I see that in the video that is the behavior that we would expect but I don't seem to be getting the same results on your branch - is there something I'm missing?

I've double checked that I'm on your branch and have run npm i

However, here are my results on localhost
https://user-images.githubusercontent.com/30609178/138533847-68205480-7bcf-459d-aa95-ca2b9743754b.mp4

[azimgd]

@thienlnam patch-package was probably not applied by npm. Added a postinstall script to fix that.
note: actual PR will be against expensify/react-native-web once the green light is received.

[thienlnam]

This is working pretty well - only thing I'm noticing right now is that the scroll event is opposite - can we have the page scroll in the same direction (as whatever the user set as default?). The scrolling is opposite of what is happening in the current app

[azimgd]

@thienlnam Removed obsolete scroll wheel inversion (w/ invertedWheelEvent) as FlatList supports native list inversion now.
ead40c6

[thienlnam]

Awesome, this tests well!

[azimgd]

closing in favor of #6268