[HOLD for payment 2022-12-05] [$1000] mWeb - Payment Page is not scrollable. Reported by @sobitneupane

[kbecciv]

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. Go to staging.new.expensify.com and log in
2. Go to Settings
3. Click on Payments and try to scroll the page.

Expected Result:

Page should be scrolled

Actual Result:

Page is not scrollable.

Workaround:

Unknow

Platform:

Where is this issue occurring?

• Mobile Web

Version Number: 1.2.12.2

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

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

Notes/Photos/Videos: Any additional supporting documentation

Screen_Recording_20221002-134356_Chrome.mp4

Upwork URL: https://www.upwork.com/jobs/~01787df7c25949e98d

Issue reported by: @sobitneupane

Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1664359447566049

View all open jobs on GitHub

[melvin-bot]

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

[gadhiyamanan]

Proposal

we have to use scrollView instead of View

App/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

Line 272 in 7d1e65f

<View style={styles.flex1}>

we have to use _map instead of Flatlist otherwise it gives error VirtualizedLists should never be nested inside plain ScrollViews....

App/src/pages/settings/Payments/PaymentMethodList.js

Lines 213 to 218 in ba1d5ae

	<FlatList
	data={this.getFilteredPaymentMethods()}
	renderItem={this.renderItem}
	keyExtractor={item => item.key}
	ListEmptyComponent={this.renderListEmptyComponent()}
	/>

replace it with
{this.getFilteredPaymentMethods().length ? _.map(this.getFilteredPaymentMethods(), this.renderItem) : this.renderListEmptyComponent()}

add key to renderItem

[melvin-bot]

Current assignee @trjExpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

[melvin-bot]

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

[trjExpensify]

👋 Is this to say it's only a bug in landscape mode, or portrait as well? It's kinda' weird for the title of the issue versus a note for the reproducer.

This issue can be clearly noticed in landscape mode