Android - Payments- White space is displayed in Settings after make default payment

[kbecciv]

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

---

Issue found when executing PR #10162

Action Performed:

Precondition: VBA added into testing account

1. Go to NewDot
2. Log in with account
3. Go to Setting - Payment
4. Select Payment and add as default
5. Go to Settings

Expected Result:

White space is not displayed in Settings after make default payment

Actual Result:

White space is displayed in Settings after make default payment

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Android

Version Number: 1.1.89.0

Reproducible in staging?: Yes

Reproducible in production?: No

Email or phone of affected tester (no customers): [email protected]

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

Notes/Photos/Videos: Any additional supporting documentation

Bug5702073_Screen_Recording_20220824-063835_New_Expensify.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

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

[sketchydroide]

@youssef-lr this might be to much (we need it fixed today), I'll try to see if someone else can pick it up

[Luke9389]

I'm gonna leave an obnoxious amount of updates on this issue until it's solved.
First step is updating all repos and then reproducing this in my dev environment.

[Luke9389]

While waiting for android to boot I'm gonna check out recent PRs that touched this flow.

[Luke9389]

Checking out the onClose of the AddPaymentMethodMenu.

[mountiny]

cc @rushatgabhane and @dhairyasenjaliya might be related to the changes in #10162 if you could have a look

[marcaaron]

Random guess but looks like the offline indicator component or keyboard shortcuts modal could be taking up space when in view.

App/src/components/ScreenWrapper/BaseScreenWrapper.js

Lines 82 to 93 in dbfd0eb

	{// If props.children is a function, call it to provide the insets to the children.
	_.isFunction(this.props.children)
	? this.props.children({
	insets,
	didScreenTransitionEnd: this.state.didScreenTransitionEnd,
	})
	: this.props.children
	}
	<KeyboardShortcutsModal />
	{this.props.isSmallScreenWidth && (
	<OfflineIndicator />
	)}

[Luke9389]

Building android is happening very slowly right now.

[rushatgabhane]

@Luke9389 maybe give this a try?

adb kill-server
adb start-server

https://expensify.slack.com/archives/C01GTK53T8Q/p1659710703756429?thread_ts=1659709912.693069&cid=C01GTK53T8Q

If app performance is slow, then disable hermes

[marcaaron]

Can someone confirm that this also happens on web? And if so, what are the reproduction steps?

[marcaaron]

I followed the steps above but could not reproduce on staging web. The issue description says that these platforms are affected:

Web
iOS
Android
Desktop App
Mobile Web

[Luke9389]

Just looking at the code, maybe this is not being set correctly?

App/src/components/KeyboardShortcutsModal.js

Line 109 in 49c935f

isShortcutsModalOpen: {key: ONYXKEYS.IS_SHORTCUTS_MODAL_OPEN},

[dhairyasenjaliya]

Random guess but looks like the offline indicator component or keyboard shortcuts modal could be taking up space when in view.

App/src/components/ScreenWrapper/BaseScreenWrapper.js

Lines 82 to 93 in dbfd0eb

	{// If props.children is a function, call it to provide the insets to the children.
	_.isFunction(this.props.children)
	? this.props.children({
	insets,
	didScreenTransitionEnd: this.state.didScreenTransitionEnd,
	})
	: this.props.children
	}
	<KeyboardShortcutsModal />
	{this.props.isSmallScreenWidth && (
	<OfflineIndicator />
	)}

Yup as we tested keyboard spacer but this new changes for offline indicator made android issues

[mountiny]

Can someone confirm that this also happens on web? And if so, what are the reproduction steps?

I think they only mentioned Android in title, meaning this is only on Andoird but havent updated the list later on.

Can you please confirm @kbecciv?

[Luke9389]

@dhairyasenjaliya Can you please give as much detail as possible on what this means?

Yup as we tested keyboard spacer but this new changes for offline indicator made android issues

[sketchydroide]

I followed the steps above but could not reproduce on staging web. The issue description says that these platforms are affected:

Web iOS Android Desktop App Mobile Web

The title says it's specific to Android though, maybe the description was not updated correctly?

[Luke9389]

Hey @rushatgabhane, how do I disable Hermes?

[Luke9389]

When testing this, I'm trying to add a payment method, but the option is greyed out, does anyone happen to know why?

[rushatgabhane]

@Luke9389 over here

App/android/app/build.gradle

Lines 82 to 84 in 3faeca0

	project.ext.react = [
	enableHermes: true, // clean and rebuild if changing
	]

[JmillsExpensify]

FWIW, I'm don't think this is a real deploy blocker given that this part of the App is tied to our internal P2P beta – though obviously we should fix it more generally.

[dhairyasenjaliya]

@dhairyasenjaliya Can you please give as much detail as possible on what this means?

Yup as we tested keyboard spacer but this new changes for offline indicator made android issues

Soon I will investigate this currently im away from my mac

[Luke9389]

FWIW, I'm don't think this is a real deploy blocker given that this part of the App is tied to our internal P2P beta – though obviously we should fix it more generally.

In that case I think we should remove the DeployBlockerCash label. @sketchydroide are you cool with that?

[sketchydroide]

yes, go ahead also let't make is a daily, it needs to be fixed once this in no longer a beta

[kbecciv]

@sketchydroide @Luke9389 My apologies, issue only accrued in Android app, updated issue environment.

[sketchydroide]

no worries, it's just good to keep it consistent so we don't loose time testing platforms
thanks 😄

[dhairyasenjaliya]

Solution

• We should remove LayoutAnimation.configureNext from the baseKeyboard as this animation is getting clashes with BaseScreenWrapper because in the wrapper we are already using <KeyboardAvoidingView> which is also using same animation

App/src/components/KeyboardSpacer/BaseKeyboardSpacer.js

Line 55 in 4df4c8b

LayoutAnimation.configureNext(defaultAnimation);

App/src/components/KeyboardSpacer/BaseKeyboardSpacer.js

Line 69 in 4df4c8b

LayoutAnimation.configureNext(defaultAnimation);

Result with removing animation (fix)

fix.mp4

Result with animation

issue.mp4

[roryabraham]

Was able to confirm that this fixes the issue

[rushatgabhane]

Thanks for the help @dhairyasenjaliya !