[waiting for payment][$250] Share code- QR code expands to full size after opening for WS rooms, tasks and threads

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.2-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4675372
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Open the app and log in
2. Navigate to any task, thread or a workspace room
3. Tap the header and select Share

Expected Result:

The QR code is displayed fully

Actual Result:

The QR code is displayed small briefly and expands to the full size

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6524801_1719378147729.video_2024-06-26_00-59-25.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e0a4dbc404a8ab34
• Upwork Job ID: 1805949354249394574
• Last Price Increase: 2024-07-10
• Automatic offers:
• alitoshmatov | Reviewer | 103091801
• huult | Contributor | 103091804

Issue Owner

Current Issue Owner: @adelekennedy

[melvin-bot]

Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Triggered auto assignment to @danieldoglas (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

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

[izarutskaya]

@adelekennedy I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[izarutskaya]

We think this issue might be related to the #vip-vsb

[huult]

Proposal

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

QRCode change size after layout change

What is the root cause of that problem?

Default QR code size is 120px, after layout change the QR code recalculate size at this line

App/src/components/QRShare/index.tsx

Line 32 in 224f09e

setQrCodeSize(Math.max(1, containerWidth));

so the UI QRCode will update width and height

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

We have to set the default initial height for qrcode size at this line base on platform

App/src/components/QRShare/index.tsx

Line 19 in 224f09e

const [qrCodeSize, setQrCodeSize] = useState<number | undefined>();

ST like that

+    const isMobilePlatform = Platform.OS === 'android' || Platform.OS === 'ios';
+    const isMobileBrowser = Browser.isMobile();
+    const isMobile = isMobilePlatform || isMobileBrowser;
+    const { windowWidth } = useWindowDimensions();
+.   const qrShareContainerWidth = isMobile ? windowWidth : variables.sideBarWidth;


-     const [qrCodeSize, setQrCodeSize] = useState<number | undefined>();
+    // styles.ph5.paddingHorizontal * 2: This is the padding outside of the QR code.
+    // variables.qrShareHorizontalPadding * 2: This is the padding inside of the QR code.
+    // default size is remaining width after minus padding from parent container
+    const [qrCodeSize, setQrCodeSize] = useState<number>(
+        qrShareContainerWidth - (styles.ph5.paddingHorizontal * 2) - (variables.qrShareHorizontalPadding * 2)
+    );

POC

Screen_Recording_20240706_090235_New.Expensify.Dev.mp4

What alternative solutions did you explore? (Optional)

[Sparth19]

Proposal

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

• The QR code is initially displayed briefly in a small size before expanding to full size.

What is the root cause of that problem?

• The initial value of qrCodeSize is undefined, so it defaults to 120.

• It is displayed at this size initially, and then adjusts based on onLayout changes.
  

  App/src/components/QRShare/index.tsx

  Lines 30 to 33 in 0c20881

  	const onLayout = (event: LayoutChangeEvent) => {
  	const containerWidth = event.nativeEvent.layout.width - variables.qrShareHorizontalPadding * 2 || 0;
  	setQrCodeSize(Math.max(1, containerWidth));
  	};

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

• we can use a Loader While onLayout is Calculating the Size.

• This will ensure that the QR code is displayed at the correct size from the beginning and avoids any brief display of an incorrectly sized QR code or resizing issues in any device sizes.

       {qrCodeSize ? (
            <QRCode
                getRef={(svg) => (svgRef.current = svg)}
                url={url}
                logo={logo}
                size={qrCodeSize}
                logoRatio={logoRatio}
                logoMarginRatio={logoMarginRatio}
            />
        ) : (
            <ActivityIndicator
                color={theme.spinner}
                size="large"
            />
        )}
  

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@danieldoglas, @alitoshmatov, @adelekennedy Huh... This is 4 days overdue. Who can take care of this?

[mountiny]

@dominictb I understand your concern, and I am sorry that this time, it did not work out. I think both of you and your solutions will work, and they are similar, so @huult should go ahead, as their proposal came in first.

@huult what is your ETA for the PR?

[huult]

I will create the pull requests soon. The ETA is the next day. Thank you.

[dominictb]

@mountiny @danieldoglas Thanks for your answer

[huult]

here is my PR

[huult]

Hi @mountiny , @danieldoglas , My PR was merged to production a week ago, but I noticed the Mevin bot isn't working as expected compared to other tickets I've worked on. Can I ask if this ticket is currently able to process a payment?
Thank you!

[adelekennedy]

ty @danieldoglas let me handle payment now:

Payouts due:

• Contributor: $250 @huult
• Contributor+: $250 @alitoshmatov

Upwork job is here.

[adelekennedy]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed @alitoshmatov

• The PR that introduced the bug has been identified. Link to the PR:
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here:

[adelekennedy]

@alitoshmatov checklist above when you get a chance!

[alitoshmatov]

• The PR that introduced the bug has been identified. Link to the PR: Migrate QRShare to function component #32690
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/32690/files#r1712561692
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: No need
• Determine if we should create a regression test for this bug.

Regression Test Proposal

1. Open the app and log in.
2. Navigate to any task, thread, or workspace room.
3. Tap the header to open the details and select "Share".
4. Verify that the QR code is displayed in full size and not changing its size while page is opening.

Do we agree 👍 or 👎

cc: @adelekennedy