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

[kavimuru]

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. 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.