Added bouncing[IOS]/overScroll Edge[Android] effect to the lists of the app

[parasharrajat]

Details

#4816 (comment)

Enabled pages:

• LHN.
• Participant list on IOU.
• Search page list.
• new chat list.
• new group chat list.
• Main Messages List of a chat.
• Profile page and other pages which use Scrollview.
• All FlatLists (including Emojipicker).
• All SectionLists.

Fixed Issues

$ #4816

Tests

1. Tested on Settings Page.
2. Tested on the Split bill Participants list.

QA Steps

1. Open New Expensify on Android or iOS
2. Navigate to all the pages one by one which has a list of some kind or that page can be scrolled.
3. Scroll to the top edge and scroll to the bottom edge respectively.
4. You should see the effect.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

effect-opt-i.mp4

Android

output_file.mp4

[parasharrajat]

@shawnborton I have updated the list of components in the description which are enabled for the effect. However, there are other components that I would like to confirm first.

1. Main list of chat messages.
2. LHN chat list. Currently active.
3. Currency Selection page.
4. IOU reports list.

Please let me know if there are any other lists that you want me to activate.

[shawnborton]

I think that sounds pretty good to me, I think basically any view that can scroll would have this behavior.

[parasharrajat]

All set here. Ready for review @shawnborton @chiragsalian. Thanks for the patience.

[chiragsalian]

I didn't get a chance to review today but i'll review it tomorrow.

[chiragsalian]

Changes looks good to me. One question though, is there a reason bounce isn't added here. I briefly tested the terms page and the scroll did bounce even though the scrollView didn't have bounce mentioned so just wanted to confirm we're not missing something.

[parasharrajat]

Oh, Thanks @chiragsalian for end moment catch. I didn't notice that bounces={true} is default. So I can just remove the bounces prop. Give me a minute. I will push a new commit.

[chiragsalian]

Also, the terms page is the only one i noticed that has a scroll in the middle of the text which is pretty weird. Was wondering if you can resolve that here,

To test the terms page I followed the steps from this PR.

[parasharrajat]

@chiragsalian Done.

[chiragsalian]

Nice, thank you for the changes. Looks good to me and works well.

[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 @chiragsalian in version: 1.0.98-2 🚀

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

[OSBotify]

🚀 Deployed to production by @Jag96 in version: 1.0.99-4 🚀

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