[Due for Payment Dec 19th] [$125] Share code - Profile initial inside the QR code is misaligned

[nlemma]

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.2.48-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: N/A
Email or phone of affected tester (no customers): applausetester+bm951@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Web, mweb
App Component: Workspace Settings

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Create a Workspace
3. On the Overview page, click on More > Share
4. Click on the #admins hyperlink
5. In the Admins room, click on the header > Share

Expected Result:

The profile initial in the QR code should be centered.

Actual Result:

The profile initial inside the QR code appears misaligned/off-center

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug7000334_1762850859254.bandicam_2025-11-11_11-41-10-683.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021989365886944342466
• Upwork Job ID: 1989365886944342466
• Last Price Increase: 2025-11-21
• Automatic offers:
• linhvovan29546 | Contributor | 109667252

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

Triggered auto assignment to @trjExpensify (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.

[dmkt9]

Proposal

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

The profile initial inside the QR code appears misaligned/off-center

What is the root cause of that problem?

The svgLogo used on the detail profile page is currently using a logoRatio of 0.25 (CONST.QR.DEFAULT_LOGO_SIZE_RATIO):

App/src/pages/ShareCodePage.tsx

Line 137 in c51a657

logoRatio={logo === expensifyLogo ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}

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

For the svgLogo, we should use CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO instead.

App/src/pages/ShareCodePage.tsx

Line 137 in c51a657

logoRatio={logo === expensifyLogo ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}

    logoRatio={logo === expensifyLogo || svgLogo ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}

What alternative solutions did you explore? (Optional)

N/A

[linhvovan29546]

Proposal

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

The profile initial inside the QR code appears misaligned/off-center

What is the root cause of that problem?

We use react-native-qrcode-svg to render the QR code here:

App/src/components/QRCode.tsx

Lines 76 to 88 in 82a45ab

	<QRCodeLibrary
	getRef={getRef}
	value={url}
	size={size}
	logo={logo}
	logoSVG={svgLogo}
	logoColor={svgLogoFillColor}
	logoBackgroundColor={logoBackgroundColor ?? theme.appBG}
	logoSize={size * logoRatio}
	logoMargin={size * logoMarginRatio}
	logoBorderRadius={size}
	backgroundColor={backgroundColor ?? theme.appBG}
	color={color ?? theme.text}

In the steps described in the OP, the issue only occurs when: You open the QR code from the Workspace Overview page, and then navigate to the Admin page and open the QR code.

The problem happens specifically in this flow because react-native-qrcode-svg uses a global ID for the ClipPath.
https://github.com/Expensify/react-native-qrcode-svg/blob/a8ffa82b7f4baca838096547c466f41adac49e8a/src/index.js#L35
https://github.com/Expensify/react-native-qrcode-svg/blob/a8ffa82b7f4baca838096547c466f41adac49e8a/src/index.js#L43

When you open the QR code in the Workspace Overview and then again in the Admin page, then the HTML document containing twoSvg with the same ClipPath ID.

And duplicate IDs lead to unpredictable behavior, especially when elements are referenced using clipPath="url(#clip-logo-background)". (in this case, the reference points to the logo from the Workspace Overview page instead of the correct one.)

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

We should make the ClipPath ID unique for each QR code instance.
We can achieve this is by using React’s built-in useId() hook to generate unique IDs and pass them to the ClipPath and its url reference.
https://github.com/Expensify/react-native-qrcode-svg/blob/a8ffa82b7f4baca838096547c466f41adac49e8a/src/index.js#L31

  const id=useId()
  const clipLogoBackgroundId = `clip-logo-background-${id}`;
  const clipLogoId = `clip-logo-${id}`;
...
 <ClipPath id={clipLogoId}>
...
 <G x={logoMargin} y={logoMargin} clipPath={`url(#${clipLogoId})`}>

What alternative solutions did you explore? (Optional)

Since react-native-qrcode-svg supports all React versions (including those before React 18), and useId() is only available in React 18+, we can:
Implement a custom useUniqueId hook

let idCounter = 0;
function useId() {
  // If React provides useId (React 18+), use it — stable and SSR-friendly.
  // The existence of React.useId is stable across renders, so calling this conditionally is safe.
  if (typeof React.useId === 'function') {
    const nativeId = React.useId();
    return nativeId;
  }

  return idCounter++; // Alternatively, we can use Math.random()
}

or generate a unique ID by combining values such as the QR value and size.

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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