iOS/Android - Profile page does not scroll

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Expected Result:

After clicking into Profile, Profile screen should scroll

Actual Result:

After clicking into Profile, Profile screen remains static and does not scroll.

Action Performed:

1. Go to https://staging.expensify.cash/
   and login
2. Click on profile photo icon in upper right corner of screen
3. Click on Profile
4. See that screen does not scroll

Workaround:

No, user is unable to scroll at all.

Platform:

Where is this issue confirmed?

mWeb
iOS ✔️
Android ✔️
Desktop App
Mobile Web

Version Number: 1.0.16-0

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

Videos:

Video

Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/161483

[marcaaron]

Duplicate of https://github.com/Expensify/Expensify/issues/158769 which I am fixing here

#2148

[isagoico]

Reopening this issue since it's reproducible in iOS and Android app.

[trjExpensify]

I came across this one today on iOS v1.0.20-4:

[parasharrajat]

We should replace the container View with ScrollView and wrap the content in another view where we will apply the padding otherwise on the web the bottom padding is not working. Look at the gap between set timezone automatically checkbox and save button. There should be a gap here.

[shawnborton]

I agree with you @parasharrajat

[marcaaron]

Gonna unassign myself from here so that I'm not blocking this fix.

[MelvinBot]

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

[MelvinBot]

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

[stephanieelliott]

Upwork job: https://www.upwork.com/jobs/~01ee21be2e6517b5c6

[parasharrajat]

Problem

While the overflow styling(overflow: auto) makes the container scroll on web/Desktop/mobile Web but it won't be respected on native platforms. We should use ScrollView from react-native.

Proposal

1. We should change this view into ScrollView and remove the overflow styles.
   https://github.com/Expensify/Expensify.cash/blob/f043f8a1aaea697ddb7e685262842d6eb5ba5648/src/pages/settings/Profile/ProfilePage.js#L258
2. We should wrap this content in another view where we will apply the padding otherwise on the web the bottom padding is not working. Look at the gap between set timezone automatically checkbox and save button. There should be a gap here.

Previously posted here #2147 (comment)

[Mukhammadali]

Proposal:

The View component is not scrollable on iOS and Android platforms, even though it works on the Web. We should replace the View component on line 258 with ScrollView component and apply View styles to Scrollview.
Then It will be scrollable on all platforms.

https://github.com/Expensify/Expensify.cash/blob/f043f8a1aaea697ddb7e685262842d6eb5ba5648/src/pages/settings/Profile/ProfilePage.js#L258

[a-eid]

there is no scrollable component used to wrap the page, there there be a scrollable component wrapper for the content to be scrollable. either a ScrollView or SectionList would be fine to use here.

[marcaaron]

@stephanieelliott re-assigning @deetergp since the process has changed and adding the Exported label will assign an appropriate engineer instead of whoever added the External label.

[deetergp]

@parasharrajat You were first to respond and your proposal sound good. Please go ahead and create a PR.

[stephanieelliott]

@parasharrajat I've sent you the offer for this job on Upwork, please accept the offer when you can!