[HOLD for payment 2021-09-27] Add a scroll bounce or elasticity animation when reaching the top or bottom of a page

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open New Expensify on Android or iOS
2. Navigate to a conversation
3. Scroll to the top (or scroll a bit upwards and then to the bottom)

Expected Result:

There should be a bounce or elasticity animation when reaching the top or bottom

Actual Result:

No animation is shown when reaching the top or bottom of a page or conversation

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.0.86-9

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on GitHub

---

From @shawnborton https://expensify.slack.com/archives/C01GTK53T8Q/p1629717577129000

FEATURE REQUEST: This might be nit-picky but I noticed that scroll views on iOS don’t have any kind of bounce or elasticity when you reach the end. For example, the list of chats, or any view in Settings, or even when you are viewing a chat with someone. Looks like this is supported in RN via scrollview but not sure how that would work with our implementation?

[MelvinBot]

Triggered auto assignment to @strepanier03 (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[strepanier03]

OoO, reassigning.

[MelvinBot]

Triggered auto assignment to @arielgreen (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

Triggered auto assignment to @cead22 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @MitchExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[parasharrajat]

Proposal

1. We have to use bounces:true prop on the ScrollViews to make them bounce naturally on IOS.
   e.g.

   App/src/pages/settings/Profile/ProfilePage.js

   Line 207 in 70f8208

   <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>

2. I will update every page so that it has bounces behavior.
3. There are few places where we will jointly decide if we want the bounce for example chat list, Users list in LHN and etc. I will update those based on the team's feedback.
4. We can also add the overScrollMode prop for Android devices so that it shows a natural glow effect when reaching the end of the list.

[MitchExpensify]

Upwork Job

[MelvinBot]

Triggered auto assignment to @chiragsalian (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[MitchExpensify]

Hired!

[chiragsalian]

Any update on this issue @parasharrajat?

[parasharrajat]

I will drop the PR soon.

[MelvinBot]

@chiragsalian, @parasharrajat Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[parasharrajat]

I am on vacation. back on 8.

[arielgreen]

@MitchExpensify reassigned to you, this should remain assigned for the duration of the issue.

[MitchExpensify]

Ah whoops, thanks for reassigning! Noted

[parasharrajat]

@shawnborton What color do we want for the OverScroll Effect on Android?
Here is the video of what I am asking.

effect.mp4

[shawnborton]

Maybe the same color we use for our icons or borders? Something that is gray and a bit more subtle, but noticeable. Thoughts on that?

[parasharrajat]

Hmm, I would say that works but let me check it.

[botify]

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

[botify]

🚀 Deployed to staging by @chiragsalian in version: 1.0.98-2 🚀

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

[mountiny]

The PR has been deployed to production on Monday 20th September. Updating the title appropriately 🙌

[parasharrajat]

Ping for

[mountiny]

@parasharrajat You should be paid shortly hopefully!

[dylanexpensify]

Payment sent! Job closed!