[$1000] Settings - Share code - The text goes beyond the borders + error in console

[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!

---

Issue found when executing PR #18636

Action Performed:

1. Go to URL https://staging.new.expensify.com/
2. Go to Settings -> Share code

Expected Result:

The text should be within the border

Actual Result:

The text goes beyond the borders + error in console

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.14.4

Reproducible in staging?: Yes

Reproducible in production?: No

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

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

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a529909438a3942d
• Upwork Job ID: 1659311384090259456
• Last Price Increase: 2023-05-18

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Prince-Mendiratta]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In this issue, we can notice 2 problems:

1. When we navigate to the Share QR code page, a bunch of console errors are shown.
2. When the email / name of the user is too big, it extends beyond the boundaries.
3. In the related issue [HOLD for payment 2023-05-25] QR code share polish issues #18968, there is a third alignment problem as well on the Initial settings page.

What is the root cause of that problem?

The RCA behind the 1st issue is that when we navigate to the page, the default value of this.state.qrCodeSize is 0. When 0 is passed as the value to the QRCodeLibrary, it is unable to render the QR code, showing the errors. Once the transition ends, the value of the state is set properly, rendering the QR properly without any more errors.

Further, when we navigate away from the QR code page using the back button, a whole bunch of errors are shown in the console. This is because when we navigate away from the page, the value of the this.state.qrCodeSize is set to negative. This causes the errors to pop up.

Next, the reason behind the value being extended beyond the borders is because we do not use the numberOfLines prop when rendering the email and display name.

For the third issue, the issue is with the svg file itself. It was not generated/exported via the Adobe Illustrator, causing it to not render properly.

What changes do you think we should make in order to solve the problem?

We should set the default value of this.state.qrCodeSize to be 1. This will ensure that the errors do not occur when transitioning to the QR code page.

App/src/components/QRShare/index.js

Line 25 in 2266274

qrCodeSize: 0,

Next, we need to set the function setting the state to not go less than 1. We can use the Math.max function for the same.

App/src/components/QRShare/index.js

Line 34 in 2266274

qrCodeSize: event.nativeEvent.layout.width - variables.qrShareHorizontalPadding * 2,

Now, to fix the too long name issue, we need to pass numberOfLines={1} to these Text inputs:

• App/src/components/QRShare/index.js

  Lines 74 to 80 in 2266274

  	<Text
  	family="EXP_NEW_KANSAS_MEDIUM"
  	fontSize={22}
  	style={{marginTop: 15}}
  	>
  	{this.props.title}
  	</Text>

• App/src/components/QRShare/index.js

  Lines 83 to 89 in 2266274

  	<Text
  	family="EXP_NEUE_BOLD"
  	fontSize={13}
  	style={{marginTop: 4}}
  	>
  	{this.props.subtitle}
  	</Text>

If we desire the design to be something else, I'd like @shawnborton to share his opinion.
Before

After

As for the third issue, we will need to generate the svg using adobe illustrator, which I think should solve the alignment issue.

What alternative solutions did you explore? (Optional)

[shawnborton]

I think that makes sense. Though if it was two names, I think we it would be okay to break the line in between the first and last name. Can you show an example like that?

[chrispader]

The text ellipsizing is already implemented here: #18946

You're proposal on changing the qrCodeSize was correct. Otherwise, the react-native-qr-code-svg library would divide by 0, which results in NaN

[melvin-bot]

@sonialiap Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01a529909438a3942d

[melvin-bot]

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