Fix inverted list by applying forked version of react-native-web

[azimgd]

I used a patched version of react-native-web with fixes for copying text into the buffer in reversed order;

React native change: Expensify/react-native-web@bb711d2

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

[azimgd]

outdated PR: #5561

[thienlnam]

Testing but app is crashing when I scroll quickly

Edit: Noticed this happening on main as well - doesn't seem related

[azimgd]

@thienlnam ready to be merged ?

[thienlnam]

Could you address the comment here ? #3381 (comment)

[thienlnam]

The change would be moving the commands you have currently in your postinstall into a seperate file called /build/react-native-web.sh, and then the postinstall would just be postinstall: './build/react-native-web.sh'

[azimgd]

Done @thienlnam

[thienlnam]

I think you need to add execute permissions to the file https://stackoverflow.com/questions/42154912/permission-denied-for-build-sh-file

[azimgd]

@thienlnam try now

[thienlnam]

Awesome, tests well for me locally - shipping it and 🤞 we don't cause regressions

[thienlnam]

Running tests

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging by @thienlnam in version: 1.1.15-18 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.1.16-10 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to staging by @thienlnam in version: 1.1.16-11 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.1.17-7 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅