iOS/ Android - Payments - Tapping bank account crashes the app

[kavimuru]

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

---

Action Performed:

1. Launch the app and login
2. Toggle the staging server
3. Tap payments > bank account

Expected Result:

User taken to plaid connection flow

Actual Result:

App is crashed

Workaround:

unknown

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.1.86-0
Reproducible in staging?: y
Reproducible in production?: n
Email or phone of affected tester (no customers): any
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Bug5662711_XWZM2964_1_.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 @neil-marcellini (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[neil-marcellini]

👀

[neil-marcellini]

I believe #9423 is causing the problem, but I haven't pinned it down exactly yet.

[neil-marcellini]

Ok, the problem is with the conditional rendering here. @nkuoch

App/src/components/AddPlaidBankAccount.js

Lines 151 to 155 in dd5a83e

	{this.props.plaidData.error && (
	<Text style={[styles.formError, styles.mh5]}>
	{this.props.plaidData.error}
	</Text>
	)}

If props.plaidData.error is an empty string then react native will render and empty string, and not the text component. The solution I used was to wrap it in parentheses, but you can also use a ternary statement or !!props.plaidData.error to evaluate as a boolean. Easy mistake to make! Here's the SO I used to find this https://stackoverflow.com/questions/52368342/invariant-violation-text-strings-must-be-rendered-within-a-text-component

[neil-marcellini]

There's something else happening here where the plaid link opens twice, so if you try to close it then the second one remains open in a permanent loading state. I'll see if I can figure it out tomorrow.

[luacmartins]

Nice investigation so far @neil-marcellini! Let me know if you need any help with this tomorrow!

[neil-marcellini]

After further investigation it looks like the PlaidLink is rendering with the old plaidLinkToken before the token is cleared with BankAccounts.clearPlaid(). So openLink is called once with the old token, then Onyx.set finishes setting the token to an empty string, and then openPlaidBankLogin returns with the new plaid token, which once again calls openLink.